-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
8 changed files
with
234 additions
and
10 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | </span> | ||
<button id="submit" onclick="saveLS()">Save to Local Storage</button> | ||
<button id="submit" onclick="loadLS()">Load from Local Storage</button> | ||
<span> | </span> | ||
<button id="submit" onclick="resetPrefab()">Reset Map</button> (does not clear local storage) | ||
<span> | </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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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>" | ||
} | ||
] | ||
}` | ||
} |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters