sensor webapp

bindestriche · web-flow · commit 58e823fa6f55 · 2025-07-08T20:01:37.000+02:00
initial commit of app made for displaying sensor values of accelerometer
diff --git a/sensor_webapp/app.js b/sensor_webapp/app.js
@@ -0,0 +1,15 @@
+if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('service-worker.js');
+}
+
+window.addEventListener('devicemotion', function(event) {
+  document.getElementById('acc-x').textContent = event.accelerationIncludingGravity.x.toFixed(2);
+  document.getElementById('acc-y').textContent = event.accelerationIncludingGravity.y.toFixed(2);
+  document.getElementById('acc-z').textContent = event.accelerationIncludingGravity.z.toFixed(2);
+});
+
+window.addEventListener('deviceorientation', function(event) {
+  document.getElementById('ori-alpha').textContent = event.alpha.toFixed(2);
+  document.getElementById('ori-beta').textContent = event.beta.toFixed(2);
+  document.getElementById('ori-gamma').textContent = event.gamma.toFixed(2);
+});
diff --git a/sensor_webapp/index.html b/sensor_webapp/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <meta name="theme-color" content="#317EFB"/>
+  <link rel="manifest" href="manifest.json">
+  <link rel="stylesheet" href="style.css">
+  <title>Sensor WebApp</title>
+</head>
+<body>
+  <h1>Sensor Readings</h1>
+  <div class="sensor">
+    <h2>Accelerometer</h2>
+    <p>X: <span id="acc-x">0</span></p>
+    <p>Y: <span id="acc-y">0</span></p>
+    <p>Z: <span id="acc-z">0</span></p>
+  </div>
+  <div class="sensor">
+    <h2>Orientation</h2>
+    <p>Alpha: <span id="ori-alpha">0</span></p>
+    <p>Beta: <span id="ori-beta">0</span></p>
+    <p>Gamma: <span id="ori-gamma">0</span></p>
+  </div>
+  <script src="app.js"></script>
+</body>
+</html>
diff --git a/sensor_webapp/manifest.json b/sensor_webapp/manifest.json
@@ -0,0 +1,15 @@
+{
+  "name": "Sensor WebApp",
+  "short_name": "Sensors",
+  "start_url": "./index.html",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#317EFB",
+  "icons": [
+    {
+      "src": "icon.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    }
+  ]
+}
diff --git a/sensor_webapp/service-worker.js b/sensor_webapp/service-worker.js
@@ -0,0 +1,21 @@
+self.addEventListener('install', function(e) {
+  e.waitUntil(
+    caches.open('sensor-cache').then(function(cache) {
+      return cache.addAll([
+        '/',
+        '/index.html',
+        '/style.css',
+        '/app.js',
+        '/manifest.json'
+      ]);
+    })
+  );
+});
+
+self.addEventListener('fetch', function(e) {
+  e.respondWith(
+    caches.match(e.request).then(function(response) {
+      return response || fetch(e.request);
+    })
+  );
+});
diff --git a/sensor_webapp/style.css b/sensor_webapp/style.css
@@ -0,0 +1,15 @@
+body {
+  font-family: sans-serif;
+  text-align: center;
+  background: #f2f2f2;
+  color: #333;
+}
+.sensor {
+  background: white;
+  margin: 20px auto;
+  padding: 15px;
+  border-radius: 10px;
+  width: 80%;
+  max-width: 400px;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
+}
