From 3a4b822993c2a3c8ee66fa2634114ef916f6ec47 Mon Sep 17 00:00:00 2001 From: Andrew Fan Date: Fri, 8 Feb 2019 11:32:01 -0500 Subject: [PATCH] Demo Page added. Fixed #20 --- demo.html | 44 +++++++++++ demo.js | 166 ++++++++++++++++++++++++++++++++++++++++++ docs.js | 17 +++-- sitemap.xml | 5 ++ strip-map-gen.js | 2 + test.css | 6 ++ user-guide/line_u3.js | 2 +- user-guide/u3.html | 2 +- 8 files changed, 234 insertions(+), 10 deletions(-) create mode 100644 demo.html create mode 100644 demo.js diff --git a/demo.html b/demo.html new file mode 100644 index 0000000..c0040e8 --- /dev/null +++ b/demo.html @@ -0,0 +1,44 @@ + + + + SVG Strip Map Generator - Demo + + + + + + + +
+ +

SVG Strip Map Generator - Demo

+
This is the demo for the Strip Map Generator.
Paste in your JSON and hit 'Generate Map'. Make sure to not have a variable declaration (i.e. var line_name = ...) or a trailing ; in the JSON below or it will not work on certain browsers.
+
If there are issues (for example, one of the sample maps doesn't render when you hit 'Generate Map'), please post an issue on GitHub. 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.
+
+
+ +  | + + +  | + (does not clear local storage) +  | + (may not work) +
+ +
+ + + + + + + \ No newline at end of file diff --git a/demo.js b/demo.js new file mode 100644 index 0000000..600c733 --- /dev/null +++ b/demo.js @@ -0,0 +1,166 @@ +"use strict"; + +// This code powers the demo, loading and saving to Local Storage as well as calling the generator methods. +// This code is heavily based on the older Map Generator and many of the functions have been copied verbatim. + +//Setup first time on load. Defaults to Baltimore +function demo_setup() { + var success = false; + if (typeof(Storage) !== "undefined") { + //If preexisting work exists, load it. + var temp = localStorage.getItem("storage1"); + if (temp !== undefined && temp !== null && temp !== "") { + document.getElementById("json1").value = temp; + success = true; + } + var temp2 = localStorage.getItem("storage2"); + if (temp2 !== undefined && temp2 !== null && temp2 !== "") { + document.getElementById("json2").value = temp2; + success = true; + } + } else { + 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."); + } + if (success) { + return; + } + //Initialize contents of text area if new user/no storage saved + resetPrefab(); +} + +//Save to local storage +function saveLS() { + if (typeof(Storage) !== "undefined") { + localStorage.setItem("storage1", document.getElementById("json1").value); + localStorage.setItem("storage2", document.getElementById("json2").value); + alert("Your work has been saved in Local Storage."); + } else { + alert("Your browser does not support Local Storage. Please consider Load/Save from JSON file."); + } +} + +//Load from local storage +function loadLS() { + if (typeof(Storage) !== "undefined") { + document.getElementById("json1").value = localStorage.getItem("storage1"); + document.getElementById("json2").value = localStorage.getItem("storage2"); + alert("Your work has been loaded from Local Storage."); + } else { + alert("Your browser does not support Local Storage. Please consider Load/Save from JSON file."); + } +} + +//Return input without comments (to provide valid JSON) +function pruneComments(input) { + //console.log("DEBUG: input = \n" + input); + var output = ""; + var splitinput = input.split("\n"); + //console.log("DEBUG: splitinput = \n" + splitinput); + //for all lines in input, add to output if OK + for (var i = 0; i < splitinput.length; i += 1) { + var tempstr = splitinput[i]; + if (tempstr.length > 2) { //Actually contains something + if (tempstr.charAt(0) !== '/' && tempstr.charAt(1) !== '/') { + //add to output, make sure to add back the new line for formatting purposes + output = output + tempstr + "\n"; + } + } else { + //add to output + output = output + tempstr + "\n"; + } + } + //console.log("DEBUG: output = \n" + output); + return output; +} + +// Generates the map +function mapgen() { + var rawinput1 = document.getElementById("json1").value; + var input1 = pruneComments(rawinput1); + var lineobj = JSON.parse(input1); + var rawinput2 = document.getElementById("json2").value; + var input2 = pruneComments(rawinput2); + var iconobj = JSON.parse(input2); + + var mapSVG = SMG_loadMap (lineobj, iconobj, "demo_map"); + + document.getElementById('outputSVG').value = mapSVG; +} + +// Copies SVG to clipboard. See https://stackoverflow.com/questions/127040 and https://stackoverflow.com/questions/400212 +function svgToClip() { + document.getElementById('outputSVG').select(); + //document.getElementById('outputSVG').focus(); + try { + var successful = document.execCommand('copy'); + var msg = successful ? 'successful' : 'unsuccessful'; + console.log('Fallback: Copying SVG command was ' + msg); + } catch (err) { + console.error('Fallback: Unable to copy output SVG to clipboard', err); + } +} + +document.querySelector("#clipsave").addEventListener("click", svgToClip); + +// Sets the demo to the default line and icon. +function resetPrefab() { + document.getElementById("json1").value = genPrefab_BlankLine(); // Left + document.getElementById("json2").value = genPrefab_BlankIcon(); // Right +} + +function genPrefab_BlankLine() { + return `// Line Object. +// This is a comment. These are ignored by the parser. +{ + "linename": "Template Line", + "iconID": ["ICON_LINE_TEMPLATE"], + "strokes": [ + { + "color": "#FF0000", + "strokewidth": "8px" + } + ], + "stationtypes": [ + { + "stypeID": "STATION_TYPEA", + "stnnodes": [ + { + "stationstrokewidth": 2, + "stationradius": 8, + "scolor": "#FF0000" + } + ] + } + ], + "stations": [ + { + "name": ["1st Street"], + "stationtype": "STATION_TYPEA", + "icons": [ + ] + }, + { + "name": ["2nd Street"], + "stationtype": "STATION_TYPEA", + "icons": [ + ] + } + ] +}` +} + +function genPrefab_BlankIcon() { + return `// Icon Object. +// This is a comment. These are ignored by the parser. +{ + "icons": [ + { + "iconID": "ICON_LINE_TEMPLATE", + "height": 48, + "width": 48, + "scale": [1.0, 0.67], + "iconSVG": "" + } + ] +}` +} \ No newline at end of file diff --git a/docs.js b/docs.js index a18b6f6..4904c61 100644 --- a/docs.js +++ b/docs.js @@ -6,15 +6,16 @@ function docs_load(path) { //'
HOME
DOCS
USER GUIDE
' + //'
Example Strip Maps
Test Network
Helsinki
'; // SVG Strip Map Navbar - document.getElementById("navbar").innerHTML = '
' + - '' + + document.getElementById("navbar").innerHTML = '
' + + '' + 'SVG Strip Map Generator' + - 'Home' + - 'Docs' + + 'Home' + + 'Docs' + + 'Demo' + 'User Guide' + - 'Example Network' + - 'Example - Helsinki' + - 'Example - Internal' + - 'Icon Viewer' + + 'Example Network' + + 'Example - Helsinki' + + 'Example - Internal' + + 'Icon Viewer' + '
'; } \ No newline at end of file diff --git a/sitemap.xml b/sitemap.xml index 9753c19..a813f6e 100644 --- a/sitemap.xml +++ b/sitemap.xml @@ -10,6 +10,11 @@ 0.5 +https://sparen.github.io/StripMapGen/demo.html +monthly +0.5 + + https://sparen.github.io/StripMapGen/icon-common/index.html monthly 0.1 diff --git a/strip-map-gen.js b/strip-map-gen.js index 6a28242..28a54c9 100644 --- a/strip-map-gen.js +++ b/strip-map-gen.js @@ -1,6 +1,7 @@ "use strict" // This function takes a line object and icon object (required to include those scripts) and outputs to the specified target div +// Also returns the SVG function SMG_loadMap(lineobj, iconobj, targetdiv) { // Load line-specific data SMG_lineObjSetDefault(lineobj); @@ -56,6 +57,7 @@ function SMG_loadMap(lineobj, iconobj, targetdiv) { smsvg += ''; document.getElementById(targetdiv).innerHTML = smsvg; + return smsvg; } // Define def patterns for icons. Loading all of them. diff --git a/test.css b/test.css index aff6c53..030f88a 100644 --- a/test.css +++ b/test.css @@ -34,4 +34,10 @@ h3 { .sm-navbar a { text-decoration: none; +} + +.jsonbox { + font-family:'Andale Mono', monospace; + width: 49%; + height: 600px; } \ No newline at end of file diff --git a/user-guide/line_u3.js b/user-guide/line_u3.js index e7ec29e..3c8be2e 100644 --- a/user-guide/line_u3.js +++ b/user-guide/line_u3.js @@ -222,7 +222,7 @@ var obj_line3_v1 = { "stationstrokewidth": 0, "stationwidth": 10, "stationheight": 28, - "scolor": "#FFFFFF", + "scolor": "#FFFFFF" } ], "stnfontangle": 58 diff --git a/user-guide/u3.html b/user-guide/u3.html index 1416228..723f122 100644 --- a/user-guide/u3.html +++ b/user-guide/u3.html @@ -352,7 +352,7 @@

Putting it all together

"stationstrokewidth": 0, "stationwidth": 10, "stationheight": 28, - "scolor": "#FFFFFF", + "scolor": "#FFFFFF" } ], "stnfontangle": 58