Skip to content

Commit 3a4b822

Browse files
SparenSparen
committed
Demo Page added. Fixed #20 
1 parent b71870a commit 3a4b822

File tree

8 files changed

+234
-10
lines changed

8 files changed

+234
-10
lines changed

‎demo.html

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html lang="en-us">
3+
<meta charset="utf-8">
4+
<title>SVG Strip Map Generator - Demo</title>
5+
<link rel="stylesheet" type="text/css" href="./test.css">
6+
<meta content="SVG Strip Map Generator - Live demo" name="description">
7+
<meta name="keywords" content="SVG, Strip, Map, Generator, Demo">
8+
<meta name="viewport" content="initial-scale=1">
9+
<script>
10+
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
11+
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
12+
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
13+
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
14+
15+
ga('create', 'UA-58194930-1', 'auto');
16+
ga('send', 'pageview');
17+
</script>
18+
19+
<body onload="docs_load('.'); demo_setup();">
20+
<div id="top">
21+
<div class="sm-navbar-container" id="navbar"></div>
22+
<h1 style="background-color:#AAAAAA;color:white">SVG Strip Map Generator - Demo</h1>
23+
<div>This is the demo for the Strip Map Generator.<br>Paste in your JSON and hit 'Generate Map'. Make sure to not have a variable declaration (i.e. <code>var line_name = ...</code>) or a trailing <code>;</code> in the JSON below or it will not work on certain browsers.</div>
24+
<div>If there are issues (for example, one of the sample maps doesn't render when you hit 'Generate Map'), please post an issue on <a target="_blank" href="https://github.com/Sparen/StripMapGen/issues">GitHub</a>. This may be due to an oversight, as the syntax parsing for this demo is stricter than the parsing when the library is hooked into normally.</div>
25+
<hr>
26+
<div id="demo_map"></div>
27+
<button id="submit" onclick="mapgen()">Generate Map</button>
28+
<span>&nbsp;| </span>
29+
<button id="submit" onclick="saveLS()">Save to Local Storage</button>
30+
<button id="submit" onclick="loadLS()">Load from Local Storage</button>
31+
<span>&nbsp;| </span>
32+
<button id="submit" onclick="resetPrefab()">Reset Map</button> (does not clear local storage)
33+
<span>&nbsp;| </span>
34+
<button id="clipsave">Save SVG to Clipboard</button> (may not work)
35+
<div><textarea class="jsonbox" id="json1" wrap="hard"></textarea><textarea class="jsonbox" id="json2" wrap="hard"></textarea></div>
36+
<textarea id="outputSVG" style="display:none;"></textarea>
37+
</div>
38+
39+
<script type="text/javascript" src="docs.js"></script>
40+
<script type="text/javascript" src="strip-map-gen.js"></script>
41+
<script type="text/javascript" src="demo.js"></script>
42+
43+
</body>
44+
</html>

‎demo.js

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
"use strict";
2+
3+
// This code powers the demo, loading and saving to Local Storage as well as calling the generator methods.
4+
// This code is heavily based on the older Map Generator and many of the functions have been copied verbatim.
5+
6+
//Setup first time on load. Defaults to Baltimore
7+
function demo_setup() {
8+
var success = false;
9+
if (typeof(Storage) !== "undefined") {
10+
//If preexisting work exists, load it.
11+
var temp = localStorage.getItem("storage1");
12+
if (temp !== undefined && temp !== null && temp !== "") {
13+
document.getElementById("json1").value = temp;
14+
success = true;
15+
}
16+
var temp2 = localStorage.getItem("storage2");
17+
if (temp2 !== undefined && temp2 !== null && temp2 !== "") {
18+
document.getElementById("json2").value = temp2;
19+
success = true;
20+
}
21+
} else {
22+
alert("Your browser does not support Local Storage. Your work will not be saved, so please make sure to copy it to your local computer if you wish to continue working on it at a later time.");
23+
}
24+
if (success) {
25+
return;
26+
}
27+
//Initialize contents of text area if new user/no storage saved
28+
resetPrefab();
29+
}
30+
31+
//Save to local storage
32+
function saveLS() {
33+
if (typeof(Storage) !== "undefined") {
34+
localStorage.setItem("storage1", document.getElementById("json1").value);
35+
localStorage.setItem("storage2", document.getElementById("json2").value);
36+
alert("Your work has been saved in Local Storage.");
37+
} else {
38+
alert("Your browser does not support Local Storage. Please consider Load/Save from JSON file.");
39+
}
40+
}
41+
42+
//Load from local storage
43+
function loadLS() {
44+
if (typeof(Storage) !== "undefined") {
45+
document.getElementById("json1").value = localStorage.getItem("storage1");
46+
document.getElementById("json2").value = localStorage.getItem("storage2");
47+
alert("Your work has been loaded from Local Storage.");
48+
} else {
49+
alert("Your browser does not support Local Storage. Please consider Load/Save from JSON file.");
50+
}
51+
}
52+
53+
//Return input without comments (to provide valid JSON)
54+
function pruneComments(input) {
55+
//console.log("DEBUG: input = \n" + input);
56+
var output = "";
57+
var splitinput = input.split("\n");
58+
//console.log("DEBUG: splitinput = \n" + splitinput);
59+
//for all lines in input, add to output if OK
60+
for (var i = 0; i < splitinput.length; i += 1) {
61+
var tempstr = splitinput[i];
62+
if (tempstr.length > 2) { //Actually contains something
63+
if (tempstr.charAt(0) !== '/' && tempstr.charAt(1) !== '/') {
64+
//add to output, make sure to add back the new line for formatting purposes
65+
output = output + tempstr + "\n";
66+
}
67+
} else {
68+
//add to output
69+
output = output + tempstr + "\n";
70+
}
71+
}
72+
//console.log("DEBUG: output = \n" + output);
73+
return output;
74+
}
75+
76+
// Generates the map
77+
function mapgen() {
78+
var rawinput1 = document.getElementById("json1").value;
79+
var input1 = pruneComments(rawinput1);
80+
var lineobj = JSON.parse(input1);
81+
var rawinput2 = document.getElementById("json2").value;
82+
var input2 = pruneComments(rawinput2);
83+
var iconobj = JSON.parse(input2);
84+
85+
var mapSVG = SMG_loadMap (lineobj, iconobj, "demo_map");
86+
87+
document.getElementById('outputSVG').value = mapSVG;
88+
}
89+
90+
// Copies SVG to clipboard. See https://stackoverflow.com/questions/127040 and https://stackoverflow.com/questions/400212
91+
function svgToClip() {
92+
document.getElementById('outputSVG').select();
93+
//document.getElementById('outputSVG').focus();
94+
try {
95+
var successful = document.execCommand('copy');
96+
var msg = successful ? 'successful' : 'unsuccessful';
97+
console.log('Fallback: Copying SVG command was ' + msg);
98+
} catch (err) {
99+
console.error('Fallback: Unable to copy output SVG to clipboard', err);
100+
}
101+
}
102+
103+
document.querySelector("#clipsave").addEventListener("click", svgToClip);
104+
105+
// Sets the demo to the default line and icon.
106+
function resetPrefab() {
107+
document.getElementById("json1").value = genPrefab_BlankLine(); // Left
108+
document.getElementById("json2").value = genPrefab_BlankIcon(); // Right
109+
}
110+
111+
function genPrefab_BlankLine() {
112+
return `// Line Object.
113+
// This is a comment. These are ignored by the parser.
114+
{
115+
"linename": "Template Line",
116+
"iconID": ["ICON_LINE_TEMPLATE"],
117+
"strokes": [
118+
{
119+
"color": "#FF0000",
120+
"strokewidth": "8px"
121+
}
122+
],
123+
"stationtypes": [
124+
{
125+
"stypeID": "STATION_TYPEA",
126+
"stnnodes": [
127+
{
128+
"stationstrokewidth": 2,
129+
"stationradius": 8,
130+
"scolor": "#FF0000"
131+
}
132+
]
133+
}
134+
],
135+
"stations": [
136+
{
137+
"name": ["1st Street"],
138+
"stationtype": "STATION_TYPEA",
139+
"icons": [
140+
]
141+
},
142+
{
143+
"name": ["2nd Street"],
144+
"stationtype": "STATION_TYPEA",
145+
"icons": [
146+
]
147+
}
148+
]
149+
}`
150+
}
151+
152+
function genPrefab_BlankIcon() {
153+
return `// Icon Object.
154+
// This is a comment. These are ignored by the parser.
155+
{
156+
"icons": [
157+
{
158+
"iconID": "ICON_LINE_TEMPLATE",
159+
"height": 48,
160+
"width": 48,
161+
"scale": [1.0, 0.67],
162+
"iconSVG": "<circle cx='24' cy='24' r='18' stroke-width='0' stroke='none' fill='#FF0000'></circle>"
163+
}
164+
]
165+
}`
166+
}

‎docs.js

Lines changed: 9 additions & 8 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎sitemap.xml

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,11 @@
1010
<priority>0.5</priority>
1111
</url>
1212
<url>
13+
<loc>https://sparen.github.io/StripMapGen/demo.html</loc>
14+
<changefreq>monthly</changefreq>
15+
<priority>0.5</priority>
16+
</url>
17+
<url>
1318
<loc>https://sparen.github.io/StripMapGen/icon-common/index.html</loc>
1419
<changefreq>monthly</changefreq>
1520
<priority>0.1</priority>

‎strip-map-gen.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
"use strict"
22

33
// This function takes a line object and icon object (required to include those scripts) and outputs to the specified target div
4+
// Also returns the SVG
45
function SMG_loadMap(lineobj, iconobj, targetdiv) {
56
// Load line-specific data
67
SMG_lineObjSetDefault(lineobj);
@@ -56,6 +57,7 @@ function SMG_loadMap(lineobj, iconobj, targetdiv) {
5657

5758
smsvg += '</svg>';
5859
document.getElementById(targetdiv).innerHTML = smsvg;
60+
return smsvg;
5961
}
6062

6163
// Define def patterns for icons. Loading all of them.

‎test.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,4 +34,10 @@ h3 {
3434

3535
.sm-navbar a {
3636
text-decoration: none;
37+
}
38+
39+
.jsonbox {
40+
font-family:'Andale Mono', monospace;
41+
width: 49%;
42+
height: 600px;
3743
}

‎user-guide/line_u3.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -222,7 +222,7 @@ var obj_line3_v1 = {
222222
"stationstrokewidth": 0,
223223
"stationwidth": 10,
224224
"stationheight": 28,
225-
"scolor": "#FFFFFF",
225+
"scolor": "#FFFFFF"
226226
}
227227
],
228228
"stnfontangle": 58

‎user-guide/u3.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -352,7 +352,7 @@ <h3 style="background-color:#AAAAAA;color:white">Putting it all together</h3>
352352
"stationstrokewidth": 0,
353353
"stationwidth": 10,
354354
"stationheight": 28,
355-
"scolor": "#FFFFFF",
355+
"scolor": "#FFFFFF"
356356
}
357357
],
358358
"stnfontangle": 58

0 commit comments

Comments
 (0)