init

b1bc45ab · Mihály Vesztergombi · b1bc45ab · b1bc45ab · b1bc45ab · b1bc45ab
Commit b1bc45ab authored 4 years ago by Mihály Vesztergombi
--- a/LICENSE
+++ b/LICENSE
+MIT License
+
+Copyright (c) 2020 Mihály Vesztergombi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/README.md
+++ b/README.md
+# Beer timer
+
+This a simple accelerometer activated browser based stopwatch.
+
+See: <https://w3c.github.io/deviceorientation/>k
+
+Hosted at: <https://mhlyv.sytes.net/stopwatch>
+
+## User interface 
+
+Very simple interface for now. When loaded the page has 2 buttons: Arm and
+Countdown.
+
+- Arm: The button arm's (enables) the accelerometer. The device has to be on a
+flat surface, for example a table. If the table is knocked, the buttons
+disappear, and Reset button appears, which resets the page, and the page
+begins to display the time elapsed from the knock. When the table is knocked
+again (by the empty glass) the timer stops and displays the time elapsed from
+the first knock.
+- Countdown: When the button is pressed, the page counts down from 10. When
+the countdown hits 0, the page displays the time from the end of the countdown.
+When the table is knocked the timer stops and displays the elapsed time from
+the end of the countdown.
--- a/index.html
+++ b/index.html
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Stopwatch</title>
+	<meta charset="UTF-8"/>
+	<script type="text/javascript" src="main.js"></script>
+	<style>
+	/*accelerometer {
+		bottom: 20%;
+		position: fixed;
+	}*/
+	.button {
+		background-color: #0055FF;
+		border: none;
+		color: #FFFFFF;
+		padding: 20px;
+		text-align: center;
+		text-decoration: none;
+		font-size: 50px;
+		margin: 4px 2px;
+		border-radius: 20px;
+		outline: none;
+	}
+	#stopwatch {
+		text-align: center;
+		font-size: 120px;
+	}
+	</style>
+</head>
+<body onload="main();">
+
+	<input type="button" class="button" id="arm-button" value="Arm"\>
+	<input type="button" class="button" id="countdown-button" value="Countdown"\>
+
+	<div id="stopwatch"></div>
+
+	<!--
+	<div class="accelerometer">
+		<div id="accelerometer-x" value="X: "></div>
+		<div id="accelerometer-y" value="Y: "></div>
+		<div id="accelerometer-z" value="Z: "></div>
+	</div>
+	-->
+</body>
+</html>
--- a/main.js
+++ b/main.js
+const acceleration_limit = -0.3;
+var acceleration;
+
+function reload() {location.reload();}
+
+function check_acceleration(event) {
+	if (event.acceleration.z < acceleration_limit) acceleration = true;
+}
+
+function button_start() {
+	// switch to reset button
+	document.getElementById("arm-button").value = "Reset";
+	document.getElementById("arm-button").style.background = "#ff0000";
+	document.getElementById("arm-button").addEventListener("click", reload);
+	document.getElementById("arm-button").removeEventListener("click", arm_click);
+	document.getElementById("countdown-button").style.visibility = "hidden";
+	document.getElementById("countdown-button").removeEventListener("click", countdown);
+	document.getElementById("stopwatch").innerHTML = "";
+}
+
+function button_reset() {
+	// switch to 2 buttons
+	document.getElementById("arm-button").value = "Arm";
+	document.getElementById("arm-button").style.background = "#0055FF";
+	document.getElementById("arm-button").removeEventListener("click", reload);
+	document.getElementById("countdown-button").style.visibility = "visible";
+}
+
+function time_click(start_time) {
+	var interval = setInterval(() => {
+		// check if the device was accelerated over the limit
+		if (acceleration) {
+			// reset to original
+			clearInterval(interval);
+			window.removeEventListener("devicemotion", check_acceleration);
+			button_reset();
+			main();
+		}
+
+		// display time elapsed since the start
+		var time = Date.now() - start_time;
+		document.getElementById("stopwatch").innerHTML = ""
+			+ Math.floor(time / 1000) + ":"
+			+ (time % 1000);
+	}, 1);
+}
+
+function arm_click() {
+	button_start();
+	window.addEventListener("devicemotion", check_acceleration);
+
+	// check if the device was accelerated over the limit
+	var interval = setInterval(() => {
+		if (acceleration) {
+			window.removeEventListener("devicemotion", check_acceleration);
+			clearInterval(interval);
+			acceleration = false;
+
+			// timeout to escape stopping from the starting hit
+			setTimeout(() => {
+				window.addEventListener("devicemotion", check_acceleration);
+			}, 300);
+
+			time_click(Date.now());
+		}
+	}, 1);
+}
+
+function countdown() {
+	button_start();
+
+	// count down for 10 seconds
+	var i = 10;
+	var interval = setInterval(() => {
+		if (!i) {
+			document.getElementById("stopwatch").innerHTML = "";
+			clearInterval(interval);
+			acceleration = false;
+
+			window.addEventListener("devicemotion", check_acceleration);
+			time_click(Date.now());
+		}
+
+		document.getElementById("stopwatch").innerHTML = "" + i;
+		i = i - 1;
+	}, 1000);
+}
+
+function main() {
+	if (window.DeviceMotionEvent) {
+		acceleration = false;
+		document.getElementById("arm-button").addEventListener("click", arm_click);
+		document.getElementById("countdown-button").addEventListener("click", countdown);
+	} else {
+		alert("devicemotion not supported");
+		throw("devicemotion not supported");
+		return false;
+	}
+}