kaspermeerts · February 23, 2019 22:55
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name="viewport" />
 <link rel="icon" href="data:,">
 <title>String art</title>
 <script type="text/javascript" src="jquery.min.js"></script>
 <style>
 html, body {
 	height: 100%;
 }

 button {
 	width: 100%;
 }

 #backward {
 	font-size: 10vh;
 	height: 15%;
 }

 #current {
 	font-size: 30vh;
 }

 #forward {
 	height: 82%;
 }

 #prev, #next {
 	font-size: 12vh;
 	opacity: 0.6;
 }

 #prevprev, #nextnext {
 	font-size: 5vh;
 	opacity: 0.2;
 }

 </style>

 <script>
 "use strict";

 var pinSequence;
 var numLines;
 var curLine;
 var urlProgress = new URLSearchParams(location.search);

 function counterclockwise(pin) {
 	if (pin < 1 || pin > numLines - 1)
 		return;

 	var a = pinSequence[pin - 1];
 	var b = pinSequence[pin];
 	var c = pinSequence[pin + 1];

 	if (a < b)
 		return a < c && c < b;
 	else
 		return a < c || c < b;
 }
 	
 function update() {
 	$('#backward').text(curLine + "/" + (numLines - 1));

 	var pin = pinSequence[curLine];
 	if (curLine >= 1) {
 		$('#prev').text(pinSequence[curLine - 1]);
 		if (curLine >= 2)
 			$('#prevprev').text(pinSequence[curLine - 2]);
 		else
 			$('#prevprev').text('');
 	} else
 		$('#prev').text('');

 	$('#current').text(pin + (counterclockwise(curLine) ? "↶" : "↷"));

 	if (curLine < numLines - 1) {
 		$('#next').text(pinSequence[curLine + 1]);
 		if (curLine < numLines - 2)
 			$('#nextnext').text(pinSequence[curLine + 2]);
 		else
 			$('#nextnext').text('');
 	} else
 		$('#next').text('');

 	var msg = new SpeechSynthesisUtterance(pin.toString());
 	msg.lang = 'nl-BE';
 	window.speechSynthesis.speak(msg);

 	urlProgress.set("line", curLine);
 	window.history.replaceState({}, '', location.pathname + "?" + urlProgress.toString());

 }

 function init() {
 	$('#forward').click( () => {
 		if (curLine >= numLines - 1)
 			return;
 		curLine++;
 		update();
 	});
 	$('#backward').click( () => {
 		if (curLine <= 0)
 			return;
 		curLine--;
 		var terug = new SpeechSynthesisUtterance("Terug naar " + curLine + "! . ! . !");
 		terug.lang = "nl-BE";
 		window.speechSynthesis.speak(terug);
 		update();
 	});
 	document.documentElement.webkitRequestFullscreen();
 	update();
 }
 $( function() {
 	$('#current').text("Loading...");
 	window.speechSynthesis.getVoices();
 	$.getJSON("pinsequence.json", function(data) {
 		pinSequence = data;
 		numLines = pinSequence.length;
 		if (urlProgress.has("line"))
 			curLine = parseInt(urlProgress.get("line"));
 		else
 			curLine = 0;
 		$('#forward').one("click", init );
 		$('#current').text("Go");
 	});
 });
 </script>
 </head>
 <body>
 <button id="backward"></button>
 <button id="forward">
 <span id="prevprev"> </span><br>
 <span id="prev"> </span><br>
 <span id="current"> </span> <br>
 <span id="next"> </span><br>
 <span id="nextnext"> </span>
 </button>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name="viewport" />
	<link rel="icon" href="data:,">
	<title>String art</title>
	<script type="text/javascript" src="jquery.min.js"></script>
	<style>
	html, body {
	height: 100%;
	}

	button {
	width: 100%;
	}

	#backward {
	font-size: 10vh;
	height: 15%;
	}

	#current {
	font-size: 30vh;
	}

	#forward {
	height: 82%;
	}

	#prev, #next {
	font-size: 12vh;
	opacity: 0.6;
	}

	#prevprev, #nextnext {
	font-size: 5vh;
	opacity: 0.2;
	}

	</style>

	<script>
	"use strict";

	var pinSequence;
	var numLines;
	var curLine;
	var urlProgress = new URLSearchParams(location.search);

	function counterclockwise(pin) {
	if (pin < 1 \|\| pin > numLines - 1)
	return;

	var a = pinSequence[pin - 1];
	var b = pinSequence[pin];
	var c = pinSequence[pin + 1];

	if (a < b)
	return a < c && c < b;
	else
	return a < c \|\| c < b;
	}

	function update() {
	$('#backward').text(curLine + "/" + (numLines - 1));

	var pin = pinSequence[curLine];
	if (curLine >= 1) {
	$('#prev').text(pinSequence[curLine - 1]);
	if (curLine >= 2)
	$('#prevprev').text(pinSequence[curLine - 2]);
	else
	$('#prevprev').text('');
	} else
	$('#prev').text('');

	$('#current').text(pin + (counterclockwise(curLine) ? "↶" : "↷"));

	if (curLine < numLines - 1) {
	$('#next').text(pinSequence[curLine + 1]);
	if (curLine < numLines - 2)
	$('#nextnext').text(pinSequence[curLine + 2]);
	else
	$('#nextnext').text('');
	} else
	$('#next').text('');

	var msg = new SpeechSynthesisUtterance(pin.toString());
	msg.lang = 'nl-BE';
	window.speechSynthesis.speak(msg);

	urlProgress.set("line", curLine);
	window.history.replaceState({}, '', location.pathname + "?" + urlProgress.toString());

	}

	function init() {
	$('#forward').click( () => {
	if (curLine >= numLines - 1)
	return;
	curLine++;
	update();
	});
	$('#backward').click( () => {
	if (curLine <= 0)
	return;
	curLine--;
	var terug = new SpeechSynthesisUtterance("Terug naar " + curLine + "! . ! . !");
	terug.lang = "nl-BE";
	window.speechSynthesis.speak(terug);
	update();
	});
	document.documentElement.webkitRequestFullscreen();
	update();
	}
	$( function() {
	$('#current').text("Loading...");
	window.speechSynthesis.getVoices();
	$.getJSON("pinsequence.json", function(data) {
	pinSequence = data;
	numLines = pinSequence.length;
	if (urlProgress.has("line"))
	curLine = parseInt(urlProgress.get("line"));
	else
	curLine = 0;
	$('#forward').one("click", init );
	$('#current').text("Go");
	});
	});
	</script>
	</head>
	<body>
	<button id="backward"></button>
	<button id="forward">
	<span id="prevprev"> </span><br>
	<span id="prev"> </span><br>
	<span id="current"> </span> <br>
	<span id="next"> </span><br>
	<span id="nextnext"> </span>
	</button>
	</body>
	</html>