Skip to content

Commit 7fb002c

Browse files
SparenSparen
committed
Implemented placeable icons including text icons. Fixed #17 
1 parent b2caf66 commit 7fb002c

5 files changed

Lines changed: 97 additions & 3 deletions

File tree

‎docs.html‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,8 @@ <h1 style="background-color:#AAAAAA;color:white">Lines and Stations</h1>
3737
<li><code style="color:red">strokes</code> - Array of line stroke objects. See below for specification.</li>
3838
<li><code style="color:red">stationtypes</code> - Array of station type objects. See below for specification.</li>
3939
<li><code style="color:red">stations</code> - Array of station objects. See below for specification.</li>
40-
<li><code style="color:blue">canvasheight</code> - Canvas Height. Defaults to <code>2000</code> pixels.</li>
41-
<li><code style="color:blue">canvaswidth</code> - Canvas Width. Defaults to <code>480</code> pixels.</li>
40+
<li><code style="color:blue">canvasheight</code> - Canvas Height. Defaults to <code>480</code> pixels.</li>
41+
<li><code style="color:blue">canvaswidth</code> - Canvas Width. Defaults to <code>2000</code> pixels.</li>
4242
<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>
4343
<li><code style="color:blue">linestart</code> - Line Start x coordinate. Controls where the main line starts. Defaults to <code>128</code>.</li>
4444
<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>
@@ -48,6 +48,7 @@ <h1 style="background-color:#AAAAAA;color:white">Lines and Stations</h1>
4848
<li><code style="color:blue">texticonfontsize</code> - Font size to use for text icons. Defaults to <code>20</code>.</li>
4949
<li><code style="color:blue">maincustomsvgbg</code> - Custom SVG (renders in the background).</li>
5050
<li><code style="color:blue">maincustomsvgfg</code> - Custom SVG (renders in the foreground).</li>
51+
<li><code style="color:blue">extraicons</code> - Array of extra icons (standard + text) rendered on map. See Icons section for specification</li>
5152
</ul>
5253

5354
<p>The required <code>strokes</code> field of the line object is an array of objects that has the following options.</p>
@@ -121,6 +122,14 @@ <h1 style="background-color:#AAAAAA;color:white">Icons</h1>
121122
<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>
122123
<li><code style="color:red">iconSVG</code> - SVG of the icon. The provided SVG should fit within the stated height and width.</li>
123124
<li><code style="color:blue">iconlink</code> - URL that is traveled to when clicking the icon as a transfer icon.</li>
125+
</ul>
126+
127+
<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>
128+
<p>As a convenience, text icons are supported by this method for the placement of arbitrary text on the map.</p>
129+
<ul>
130+
<li><code style="color:red">iconID</code> - The Icon ID of the extra icon.</li>
131+
<li><code style="color:red">iconx</code> - The x coordinate (in pixels) of the extra icon.</li>
132+
<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>
124133
</ul>
125134
</div>
126135
</div>

‎strip-map-gen.js‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,11 @@ function SMG_loadMap(lineobj, iconobj, targetdiv) {
5555
smsvg += lineobj.maincustomsvgfg;
5656
}
5757

58+
// Extra Icons
59+
if ("extraicons" in lineobj) {
60+
smsvg += SMG_drawExtraIcons(lineobj.extraicons, lineobj, iconobj);
61+
}
62+
5863
smsvg += '</svg>';
5964
document.getElementById(targetdiv).innerHTML = smsvg;
6065
return smsvg;
@@ -316,6 +321,50 @@ function SMG_drawStationIcons(stationIcons, lineobj, iconobj, stationxpos, icony
316321
return iconsvg;
317322
}
318323

324+
// Helper function for SMG_loadMap that handles extra icons
325+
// Takes the array of extra icons, the line object, and the master icon object
326+
function SMG_drawExtraIcons(extraIcons, lineobj, iconobj) {
327+
let iconsvg = "";
328+
// For every extra icon
329+
for (let j = 0; j < extraIcons.length; j += 1) {
330+
let iconfound = false; // Whether or not the icon was found. If not found, defaults to printing the text.
331+
// For each icon in the line, get necessary information for rendering
332+
let currobj = extraIcons[j];
333+
let curriconht = 0;
334+
let curriconwd = 0;
335+
let lineIcon = SMG_getIconByID(iconobj, currobj.iconID);
336+
if (!(lineIcon === null)) {
337+
iconfound = true;
338+
}
339+
if (iconfound) {
340+
curriconht = lineIcon.height * lineIcon.scale[1];
341+
curriconwd = lineIcon.width * lineIcon.scale[1];
342+
}
343+
344+
let iconx = currobj.iconx;
345+
let icony = currobj.icony;
346+
347+
// Don't crash
348+
if (iconx === undefined) {iconx = 0; console.log("Note: X coordinate not found for icon. Defaulting to 0");}
349+
if (icony === undefined) {icony = 0; console.log("Note: Y coordinate not found for icon. Defaulting to 0");}
350+
351+
// Icon was not found. Display text. DOES NOT SUPPORT MULTIPLE ARBITRARY TEXT FIELDS IN A ROW.
352+
if (!iconfound) {
353+
iconsvg += '<text x="' + iconx + '" y="' + icony + '" font-family="' + lineobj.fonttype + '" font-size="' + lineobj.texticonfontsize + 'px" fill="black" text-anchor="middle" dominant-baseline="central">' + currobj.iconID + '</text>';
354+
} else {
355+
let currx = (iconx - curriconwd/2); // Station position, offset left to center rect.
356+
if ("iconlink" in lineIcon) {
357+
iconsvg += '<a xlink:href="' + lineIcon.iconlink + '"><g>';
358+
}
359+
iconsvg += '<rect x="' + currx + '" y="' + (icony - curriconht/2) + '" height="' + curriconht + '" width="' + curriconwd + '" fill="url(#PATTERN_' + currobj.iconID + '_SCALE2)" />';
360+
if ("iconlink" in lineIcon) {
361+
iconsvg += '</g></a>';
362+
}
363+
}
364+
}
365+
return iconsvg;
366+
}
367+
319368
/* ---------------- Accessory Functions ---------------- */
320369

321370
// Returns the icon object associated with the provided ID, or null if DNE

‎test-internal/icon_test.js‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,16 @@ var obj_iconTest = {
4545
"height": 48,
4646
"width": 48,
4747
"scale": [1.0, 0.67],
48-
"iconSVG": "<circle cx='24' cy='24' r='18' stroke-width='8px' stroke='#AAFF00' fill='#FFFFFF'></circle><text x='24' y='24' font-family='Arial' font-size='18px' fill='black' font-weight='bold' text-anchor='middle' dominant-baseline='central'>16</text>"
48+
"iconSVG": "<circle cx='24' cy='24' r='18' stroke-width='8px' stroke='#AAFF00' fill='#FFFFFF'></circle><text x='24' y='24' font-family='Arial' font-size='18px' fill='black' font-weight='bold' text-anchor='middle' dominant-baseline='central'>16</text>",
49+
"iconlink": "./test-internal.html#line16"
50+
},
51+
{
52+
"iconID": "ICON_LINE17",
53+
"height": 48,
54+
"width": 48,
55+
"scale": [1.0, 0.67],
56+
"iconSVG": "<circle cx='24' cy='24' r='18' stroke-width='8px' stroke='#00AAFF' fill='#FFFFFF'></circle><text x='24' y='24' font-family='Arial' font-size='18px' fill='black' font-weight='bold' text-anchor='middle' dominant-baseline='central'>17</text>",
57+
"iconlink": "./test-internal.html#line17"
4958
}
5059
]
5160
};

‎test-internal/line_test.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -511,6 +511,23 @@ var obj_lineC = {
511511
"iconID": ["ICON_LINE14"],
512512
"fonttype": "'DIN Alternate', 'Helvetica', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Osaka, 'メイリオ', 'Meiryo'",
513513
"maincustomsvgbg": "<text x='16' y='460' font-family='DIN Alternate' font-size='20px' fill='#AAAAAA' text-anchor='start' dominant-baseline='central'>01/2019</text>",
514+
"extraicons": [
515+
{
516+
"iconID": "ICON_LINE17",
517+
"iconx": 64,
518+
"icony": 240
519+
},
520+
{
521+
"iconID": "Through",
522+
"iconx": 64,
523+
"icony": 272
524+
},
525+
{
526+
"iconID": "Service",
527+
"iconx": 64,
528+
"icony": 292
529+
}
530+
],
514531
"strokes": [
515532
{
516533
"color": "#AACCFF",
@@ -523,6 +540,12 @@ var obj_lineC = {
523540
{
524541
"color": "#FFAAAA",
525542
"strokewidth": "8px"
543+
},
544+
{
545+
"color": "#00AAFF",
546+
"strokewidth": "8px",
547+
"startpoint": -0.5,
548+
"endpoint": 0
526549
}
527550
],
528551
"stationtypes": [

‎test-internal/test-internal.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,10 @@ <h1 style="background-color:#FFAAAA;color:white" id="line14">Test 3 - Line 14 (J
3030
<div id="targetdiv3"></div>
3131
<h1 style="background-color:#AA00FF;color:white" id="line15">Test 4 - Line 15 (Loops with xshift and locknumstations)</h1>
3232
<div id="targetdiv4"></div>
33+
<h1 style="background-color:#AAFF00;color:white" id="line16">Line 16 (Icon Linking - Stations)</h1>
34+
<div id="targetdiv5"></div>
35+
<h1 style="background-color:#00AAFF;color:white" id="line17">Line 17 (Icon Linking - Extra Icons)</h1>
36+
<div id="targetdiv6"></div>
3337
</div>
3438

3539
<script type="text/javascript" src="../docs.js"></script>

0 commit comments

Comments
 (0)