-
Notifications
You must be signed in to change notification settings - Fork 1
/
docs.html
167 lines (152 loc) · 17.2 KB
/
docs.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<!DOCTYPE html>
<html lang="en-us">
<meta charset="utf-8">
<title>SVG Strip Map Generator - Documentation</title>
<link rel="stylesheet" type="text/css" href="./test.css">
<meta content="SVG Strip Map Generator Documentation - Strip Map Generator schema, syntax, and reference" name="description">
<meta name="keywords" content="SVG, Strip, Map, Generator, Documentation">
<meta name="viewport" content="initial-scale=1">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-58194930-1', 'auto');
ga('send', 'pageview');
</script>
<style>
code {background-color: #F0F0F0;}
</style>
<body onload="docs_load('.')">
<div id="top">
<div class="sm-navbar-container" id="navbar"></div>
<h1 style="background-color:#AAAAAA;color:white">SVG Strip Map Generator - Documentation</h1>
<div>This page serves to document all of the customization options available.</div>
<h1 style="background-color:#AAAAAA;color:white">Lines and Stations</h1>
<div>The primary component of a strip map is the line, including stations and text. The SVG Strip Map Generator provides the following features.</div>
<div>
<p>Each line object has the following fields. <span style="color:red">Required fields are in red</span>, <span style="color:blue">Optional fields are in blue</span>.</p>
<p>X and Y transforms require special note, as while Y transforms are all in pixels, most X transforms are in terms of stations and the distance between stations (which is calculated automatically based on the number of stations).</p>
<p><strong>All fields that take pixel values must be numbers and NOT Strings. While <code>"16px"</code> may be fine in some cases, the values are often used as numbers in calculations.</strong></p>
<ul>
<li><code style="color:red">linename</code> - Name of the line. Displayed on each generated strip map in the top left.</li>
<li><code style="color:red">iconID</code> - Array of the large icons to use for this line. Displayed to the left of the line's name.</li>
<li><code style="color:red">strokes</code> - Array of line stroke objects. See below for specification.</li>
<li><code style="color:red">stationtypes</code> - Array of station type objects. See below for specification.</li>
<li><code style="color:red">stations</code> - Array of station objects. See below for specification.</li>
<li><code style="color:blue">darkmode</code> - Optional Dark Mode toggle. Set this to <code>true</code> to enable dark mode.</li>
<li><code style="color:blue">key</code> - Optional Map Key. See below for specification.</li>
<li><code style="color:blue">canvasheight</code> - Canvas Height. Defaults to <code>480</code> pixels.</li>
<li><code style="color:blue">canvaswidth</code> - Canvas Width. Defaults to <code>2000</code> pixels.</li>
<li><code style="color:blue">lineheight</code> - Line Height. Controls how far down vertically the main line is. Defaults to <code>240</code> pixels.</li>
<li><code style="color:blue">linestart</code> - Line Start x coordinate. Controls where the main line starts. Defaults to <code>128</code>.</li>
<li><code style="color:blue">lineend</code> - Line End x coordinate. Controls where the main line ends and is used in determining the spacing between stations. Defaults to <code>1800</code>.</li>
<li><code style="color:blue">stationspacing</code> - If set, locks the distance between stations to the specified value (in pixels). This completely disables the built-in automatic spacing. When using this option, the line strokes will also be scaled as their positions are based on the station spacing. In addition, the value of <code>lineend</code>, if set, is unused. Use this for left-aligned constant spaced maps.</li>
<li><code style="color:blue">locknumstations</code> - If set, locks the spacing of stations to the generated default but with the number of stations specified here rather than the number of stations in the <code>stations</code> field of this line object. When using this options, the line strokes will NOT be scaled - their start and end positions will utilize the number of stations in the <code>stations</code> array. Use this for loop lines/non-straight maps. Does not work in conjunction with <code>stationspacing</code>.</li>
<li><code style="color:blue">fonttype</code> - Font type to use for general text (e.g. title). Defaults to <code>"Arial"</code>.</li>
<li><code style="color:blue">texticonfontsize</code> - Font size to use for text icons. Defaults to <code>20</code>.</li>
<li><code style="color:blue">maincustomsvgbg</code> - Custom SVG (renders in the background).</li>
<li><code style="color:blue">maincustomsvgfg</code> - Custom SVG (renders in the foreground).</li>
<li><code style="color:blue">extraicons</code> - Array of extra icons (standard + text) rendered on map. See Icons section for specification</li>
</ul>
<p>The required <code>strokes</code> field of the line object is an array of objects that has the following options.</p>
<ul>
<li><code style="color:red">color</code> - The color of the line. Supports Hex, RGB, and HTML/CSS standard colors.</li>
<li><code style="color:red">strokewidth</code> - The width of the line. </li>
<li><code style="color:blue">startdx</code> - The horizontal offset of the start of the stroke (in pixels, not stations). Offsets based off of <code>startpoint</code>.</li>
<li><code style="color:blue">enddx</code> - The horizontal offset of the end of the stroke (in pixels, not stations). Offsets based off of <code>endpoint</code>.</li>
<li><code style="color:blue">dy</code> - The vertical offset of the stroke.</li>
<li><code style="color:blue">startpoint</code> - The starting station of the stroke. Can be negative to extend line offscreen to the left.</li>
<li><code style="color:blue">endpoint</code> - The ending station of the stroke. Can be greater than number of stations on line to extend line offscreen to the right.</li>
<li><code style="color:blue">startlinkheight</code> - The vertical offset from the stroke for the <code>endpoint</code>. Enables horizontal and angled portions. It is suggested to set <code>linecap</code> to "round" to cover the breaks in the lines if using angles.</li>
<li><code style="color:blue">endlinkheight</code> - The vertical offset from the stroke for the <code>startpoint</code>. Enables horizontal and angled portions. It is suggested to set <code>linecap</code> to "round" to cover the breaks in the lines if using angles.</li>
<li><code style="color:blue">dasharray</code> - Sets the <code>stroke-dasharray</code> field for the stroke. Should be a string of comma delimited numbers, e.g. <code>4,4</code></li>
<li><code style="color:blue">linecap</code> - Sets the <code>stroke-linecap</code> field for the stroke. Should be "butt" (svg default if field not provided), "square", or "round"</li>
</ul>
<p>The required <code>stationtypes</code> field of the line object is an array of objects that has the following options.</p>
<ul>
<li><code style="color:red">stypeID</code> - The ID for the specified station, for cross referencing later.</li>
<li><code style="color:red">stnnodes</code> - Array of nodes that are part of the station. See below for specification.</li>
<li><code style="color:blue">stnfonttype</code> - Font Type to use for station names (for this type of station). Default is <code>"Arial"</code>.</li>
<li><code style="color:blue">stnfontsize</code> - Font Type to use for station names (for this type of station). Default is <code>16</code>px.</li>
<li><code style="color:blue">stnfontangle</code> - Angle offset at which to render station names (for this type of station). Default is <code>45</code> (degrees).</li>
<li><code style="color:blue">stntextoffset</code> - Sets y offset for text (distance between center of station icon and text). Defaults to <code>16</code>px, with positive values going upwards. Stacks with an individual station object's <code>dy</code> and <code>textoffset</code>.</li>
<li><code style="color:blue">stniconoffset</code> - Sets y offset for icon (distance between center of station icon and text). Defaults to <code>16</code>px, with positive values going downwards. Stacks with an individual station object's <code>dy + iconshift</code> and <code>textoffset</code>. This value <b>must</b> be provided as an integer - IE <code>32</code>, not <code>"32"</code>. This is due to the way JavaScript handles strings.</li>
</ul>
<p>Each object in <code>stnnodes</code> contains the following options.</p>
<ul>
<li><code style="color:blue">stationstrokewidth</code> - The stroke width of the station icon components. Not used in CUSTOM.</li>
<li><code style="color:blue">stationradius</code> - The radius of the circle station icon component. Only used in CIRCLE.</li>
<li><code style="color:blue">stationwidth</code> - The width of the station icon component. Not used in CIRCLE.</li>
<li><code style="color:blue">stationheight</code> - The height of the station icon component. Not used in CIRCLE.</li>
<li><code style="color:blue">stationsvg</code> - The svg of the station icon component. Meant for usage when circles and rectangles are insufficient (e.g. text/custom paths). Only used in CUSTOM</li>
<li><code style="color:blue">scolor</code> - The stroke color of the station icon component. Supports Hex, RGB, and HTML/CSS standard colors. Not used in CUSTOM. Defaults to <code>"black"</code>.</li>
<li><code style="color:blue">fcolor</code> - The fill color of the station icon component. Supports Hex, RGB, and HTML/CSS standard colors. Not used in CUSTOM. Defaults to <code>"white"</code>.</li>
<li><code style="color:blue">dy</code> - The vertical offset of the station icon component. Additive effect with same named field on the station objects.</li>
<li><code style="color:blue">componenttype</code> - The component type of the station icon component - possible values include <code>"RECT"</code> for rectangle and <code>"CUSTOM"</code> for custom station icons. If this field is not present, the component defaults to a circle.</li>
</ul>
<p>The required <code>stations</code> field of the line object is an array of objects that has the following options. Note that stations go from left to right on the strip map.</p>
<ul>
<li><code style="color:red">name</code> - Name of the station as an array (in case of multiple names).</li>
<li><code style="color:red">stationtype</code> - Station type associated with this station. Refers to a <code>stypeID</code> within <code>stationtypes</code>.</li>
<li><code style="color:red">icons</code> - 2D Array of strings referring to icon IDs to attach to the station. These are rendered below the station icon, in order. First dimension is rows, second is columns.</li>
<li><code style="color:blue">dy</code> - The vertical offset of the station and station text. Does not affect rendering of icons. Additive effect with same named field on the stnnodes objects.</li>
<li><code style="color:blue">iconshift</code> - If set to false, will not apply dy shift to icons.</li>
<li><code style="color:blue">textoffset</code> - Sets additional y offset for text (distance between center of station icon and text). Defaults to <code>0</code>, with positive values going upwards. Stacks with dy and station type object's <code>stntextoffset</code>.</li>
<li><code style="color:blue">iconoffset</code> - Sets additional y offset for icon (distance between center of station icon and text). Defaults to <code>0</code>, with positive values going downwards. Stacks with dy + iconshift and station type object's <code>stniconoffset</code>.</li>
<li><code style="color:blue">xshift</code> - Offsets the station position using the distance between stations. Refer to <a href="./test-helsinki/test-helsinki.html">Helsinki example</a> for usage.</li>
<li><code style="color:blue">customsvg</code> - Array of custom station SVG objects.</li>
</ul>
<p>The optional <code>customsvg</code> field of the station object is an array of objects that has the following options. This is optional and is primarily utilized for station numbers/elements that are different between stations. If used, width, height, and svg must all be provided. For a working example, refer to Test 3 in the <a href="./test-internal/test-internal.html">Internal Test Suite</a>.</p>
<ul>
<li><code style="color:red">nodewidth</code> - The width of the extra node.</li>
<li><code style="color:red">nodeheight</code> - The height of the extra node.</li>
<li><code style="color:red">nodesvg</code> - The svg of the extra node.</li>
</ul>
<p>The optional <code>key</code> field of the line object is an object with two fields:</p>
<ul>
<li><code style="color:blue">stationtypes</code> - Array of Station Types to display in the map key.</li>
<li><code style="color:blue">lines</code> - Array of Icons and Descriptions of lines to display in the map key.</li>
</ul>
<p>Each object in the <code>stationtypes</code> array for the map key contains the following options.</p>
<ul>
<li><code style="color:red">type</code> - Station Type ID. The <code>stypeID</code> field in the main <code>stationtypes</code> object of the line.</li>
<li><code style="color:red">height</code> - Height of the station icon. No default is provided. Note that text rendering for descriptions uses the <code>texticonfontsize</code> setting for its size. This value MUST be provided as an integer, not a string.</li>
<li><code style="color:red">width</code> - Width of the station icon. No default is provided. This value MUST be provided as an integer, not a string.</li>
<li><code style="color:red">description</code> - Text description for the station icon.</li>
</ul>
<p>Each object in the <code>lines</code> array for the map key contains the following options.</p>
<ul>
<li><code style="color:red">colwidth</code> - Width of the column. The <code>lines</code> portion of the map key can be split up into multiple columns. The widths of the columns are specified using this field. No default is provided. This value MUST be provided as an integer, not a string.</li>
<li><code style="color:red">rowheight</code> - Height of any given row in the column. No default is provided. Ensure that the value is larger than the second scale option of any icon you wish to display. We recommend values such as 32 or 40 for standard usage. This value MUST be provided as an integer, not a string.</li>
<li><code style="color:red">services</code> - Array of services to display in the column. These use the <code>iconID</code> fields of the icon definition file. Text icons are not supported here. Descriptions will be generated using the <code>description</code> field of the associated icon object.</li>
</ul>
</div>
<h1 style="background-color:#AAAAAA;color:white">Icons</h1>
<div>The SVG Strip Map Generator also uses reusable icon definitions.</div>
<div>
<p>Each icon object has a single <code>icons</code> field which is an array of objects with the following specification:</p>
<ul>
<li><code style="color:red">iconID</code> - ID of the icon. This ID is used to cross reference specific icons. Naturally, each ID must be unique.</li>
<li><code style="color:blue">description</code> - Description of the icon. Use in map keys, and is required if using a particular icon in a map key (or else the key is useless).</li>
<li><code style="color:red">height</code> - Height of this icon (Recommended: <code>48</code>)</li>
<li><code style="color:red">width</code> - Width of this icon (Recommended: <code>48</code>)</li>
<li><code style="color:red">scale</code> - Scalings of this icon. First is the large icon (Displayed to the left of the line's name, Recommended: <code>1</code>). Second is the small icon (Displayed under stations, Recommended: <code>0.67</code>)</li>
<li><code style="color:red">iconSVG</code> - SVG of the icon. The provided SVG should fit within the stated height and width.</li>
<li><code style="color:blue">iconlink</code> - URL that is traveled to when clicking the icon as a transfer icon.</li>
</ul>
<p>The optional <code>extraicons</code> field of the line object object is an array of objects that has the following options. This is optional and is primarily utilized for through-running connections or where multiple lines share track. For a working example, refer to Test 3 in the <a href="./test-internal/test-internal.html">Internal Test Suite</a>.</p>
<p>As a convenience, text icons are supported by this method for the placement of arbitrary text on the map.</p>
<ul>
<li><code style="color:red">iconID</code> - The Icon ID of the extra icon.</li>
<li><code style="color:blue">iconx</code> - The x coordinate (in pixels) of the extra icon. Utilize this or <code>iconx_stn</code>.</li>
<li><code style="color:blue">iconx_stn</code> - The x coordinate (in stations) of the extra icon. Utilize this or <code>iconx</code>.</li>
<li><code style="color:red">icony</code> - The y coordinate (in pixels) of the extra icon. Note that the line height defaults to 240, so use 240 in order to align the icon to the base line.</li>
</ul>
</div>
</div>
<script type="text/javascript" src="docs.js"></script>
<script type="text/javascript" src="main.js"></script>
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
</body>
</html>