kaspermeerts/index.html

## 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>