Skip to content

Commit

Permalink
Demo Page added. Fixed #20
Browse files Browse the repository at this point in the history
  • Loading branch information
Sparen committed Feb 8, 2019
1 parent b71870a commit 3a4b822
Show file tree
Hide file tree
Showing 8 changed files with 234 additions and 10 deletions.
44 changes: 44 additions & 0 deletions demo.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
<!DOCTYPE html>
<html lang="en-us">
<meta charset="utf-8">
<title>SVG Strip Map Generator - Demo</title>
<link rel="stylesheet" type="text/css" href="./test.css">
<meta content="SVG Strip Map Generator - Live demo" name="description">
<meta name="keywords" content="SVG, Strip, Map, Generator, Demo">
<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>

<body onload="docs_load('.'); demo_setup();">
<div id="top">
<div class="sm-navbar-container" id="navbar"></div>
<h1 style="background-color:#AAAAAA;color:white">SVG Strip Map Generator - Demo</h1>
<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>
<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>
<hr>
<div id="demo_map"></div>
<button id="submit" onclick="mapgen()">Generate Map</button>
<span>&nbsp;| </span>
<button id="submit" onclick="saveLS()">Save to Local Storage</button>
<button id="submit" onclick="loadLS()">Load from Local Storage</button>
<span>&nbsp;| </span>
<button id="submit" onclick="resetPrefab()">Reset Map</button> (does not clear local storage)
<span>&nbsp;| </span>
<button id="clipsave">Save SVG to Clipboard</button> (may not work)
<div><textarea class="jsonbox" id="json1" wrap="hard"></textarea><textarea class="jsonbox" id="json2" wrap="hard"></textarea></div>
<textarea id="outputSVG" style="display:none;"></textarea>
</div>

<script type="text/javascript" src="docs.js"></script>
<script type="text/javascript" src="strip-map-gen.js"></script>
<script type="text/javascript" src="demo.js"></script>

</body>
</html>
166 changes: 166 additions & 0 deletions demo.js
Original file line number Diff line number Diff line change
@@ -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": "<circle cx='24' cy='24' r='18' stroke-width='0' stroke='none' fill='#FF0000'></circle>"
}
]
}`
}
17 changes: 9 additions & 8 deletions docs.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 5 additions & 0 deletions sitemap.xml
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,11 @@
<priority>0.5</priority>
</url>
<url>
<loc>https://sparen.github.io/StripMapGen/demo.html</loc>
<changefreq>monthly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>https://sparen.github.io/StripMapGen/icon-common/index.html</loc>
<changefreq>monthly</changefreq>
<priority>0.1</priority>
Expand Down
2 changes: 2 additions & 0 deletions strip-map-gen.js
Original file line number Diff line number Diff line change
@@ -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);
Expand Down Expand Up @@ -56,6 +57,7 @@ function SMG_loadMap(lineobj, iconobj, targetdiv) {

smsvg += '</svg>';
document.getElementById(targetdiv).innerHTML = smsvg;
return smsvg;
}

// Define def patterns for icons. Loading all of them.
Expand Down
6 changes: 6 additions & 0 deletions test.css
Original file line number Diff line number Diff line change
Expand Up @@ -34,4 +34,10 @@ h3 {

.sm-navbar a {
text-decoration: none;
}

.jsonbox {
font-family:'Andale Mono', monospace;
width: 49%;
height: 600px;
}
2 changes: 1 addition & 1 deletion user-guide/line_u3.js
Original file line number Diff line number Diff line change
Expand Up @@ -222,7 +222,7 @@ var obj_line3_v1 = {
"stationstrokewidth": 0,
"stationwidth": 10,
"stationheight": 28,
"scolor": "#FFFFFF",
"scolor": "#FFFFFF"
}
],
"stnfontangle": 58
Expand Down
2 changes: 1 addition & 1 deletion user-guide/u3.html
Original file line number Diff line number Diff line change
Expand Up @@ -352,7 +352,7 @@ <h3 style="background-color:#AAAAAA;color:white">Putting it all together</h3>
"stationstrokewidth": 0,
"stationwidth": 10,
"stationheight": 28,
"scolor": "#FFFFFF",
"scolor": "#FFFFFF"
}
],
"stnfontangle": 58
Expand Down

0 comments on commit 3a4b822

Please sign in to comment.