- minor improvements for the silly push up counter app

TobiasMue91 · TobiasMue91 · commit b984ca906a0a · 2024-10-21T20:09:24.000+02:00
diff --git a/tools/push_ups/app.html b/tools/push_ups/app.html
@@ -4,53 +4,41 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Push-Up Counter</title>
-  <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
-  <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/movenet"></script>
-  <style>
-    body {
-      font-family: Arial, sans-serif;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      padding: 20px;
-    }
-    #videoContainer {
-      position: relative;
-      width: 640px;
-      height: 480px;
-    }
-    #output {
-      position: absolute;
-      top: 0;
-      left: 0;
-    }
-    button {
-      margin: 10px;
-      padding: 10px;
-      font-size: 16px;
-    }
-    #stats {
-      margin-top: 20px;
-      font-size: 18px;
-    }
-  </style>
+  <script src="https://cdn.tailwindcss.com"></script>
 </head>
-<body>
-<div id="videoContainer">
-  <video id="video" width="640" height="480" autoplay></video>
-  <canvas id="output" width="640" height="480"></canvas>
+<body class="bg-gray-100 min-h-screen flex items-center justify-center">
+<div class="bg-white p-8 rounded-lg shadow-md max-w-md w-full">
+  <h1 class="text-3xl font-bold mb-6 text-center text-indigo-600">Push-Up Counter</h1>
+
+  <div id="videoContainer" class="mb-6">
+    <video id="video" class="w-full h-64 object-cover rounded-lg" autoplay muted></video>
+  </div>
+
+  <div class="flex justify-between mb-6">
+    <button id="switchCamera" class="bg-indigo-500 text-white px-4 py-2 rounded hover:bg-indigo-600 transition">Switch Camera</button>
+    <button id="startStop" class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 transition">Start</button>
+  </div>
+
+  <div id="stats" class="mb-6">
+    <div class="flex justify-between mb-2">
+      <span class="font-semibold">Push-ups:</span>
+      <span id="pushUpCount" class="text-indigo-600 font-bold">0</span>
+    </div>
+    <div class="flex justify-between">
+      <span class="font-semibold">Tokens:</span>
+      <span id="tokenCount" class="text-indigo-600 font-bold">0</span>
+    </div>
+  </div>
+
+  <div class="mb-6">
+    <label for="pushUpsPerToken" class="block mb-2 font-semibold">Push-ups per token:</label>
+    <input type="number" id="pushUpsPerToken" value="10" min="1" class="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-indigo-500">
+  </div>
+
+  <div id="rewards" class="space-y-4"></div>
 </div>
-<button id="switchCamera">Switch Camera</button>
-<button id="startStop">Start</button>
-<div id="stats">
-  Push-ups: <span id="pushUpCount">0</span><br>
-  Tokens: <span id="tokenCount">0</span>
-</div>
-<div>
-  <label for="pushUpsPerToken">Push-ups per token:</label>
-  <input type="number" id="pushUpsPerToken" value="10" min="1">
-</div>
-<div id="rewards"></div>
+
+<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
 <script src="app.js"></script>
 </body>
 </html>
diff --git a/tools/push_ups/app.js b/tools/push_ups/app.js
@@ -4,64 +4,52 @@ let isCountingEnabled = false;
 let currentStream;
 let facingMode = "user";
 
-// New variables for push-up detection
 let previousBrightness = 0;
-let brightnessDiffThreshold = 10; // Adjust based on testing
+let brightnessDiffThreshold = 10;
 let isGoingDown = true;
 let lastPushUpTime = 0;
-let pushUpCooldown = 1000; // 1 second cooldown between push-ups
+let pushUpCooldown = 1000;
 
 async function setupCamera() {
-    console.log("Setting up camera...");
     video = document.getElementById('video');
     const constraints = {
         video: { facingMode: facingMode }
     };
     try {
         currentStream = await navigator.mediaDevices.getUserMedia(constraints);
         video.srcObject = currentStream;
-        console.log("Camera setup successful");
     } catch (error) {
         console.error("Camera setup failed:", error);
     }
     return new Promise((resolve) => {
         video.onloadedmetadata = () => {
-            console.log("Video metadata loaded");
             resolve(video);
         };
     });
 }
 
 function startDetection() {
-    console.log("Starting detection...");
-    if (!video) {
-        console.warn("Video not ready. Aborting detection start.");
-        return;
-    }
+    if (!video) return;
     detect();
 }
 
 async function detect() {
     if (!isCountingEnabled) return;
     try {
         const imageTensor = tf.browser.fromPixels(video);
-        const resizedImage = tf.image.resizeBilinear(imageTensor, [64, 64]); // Smaller size for faster processing
+        const resizedImage = tf.image.resizeBilinear(imageTensor, [64, 64]);
         const grayImage = tf.image.rgbToGrayscale(resizedImage);
         const brightness = tf.mean(grayImage).dataSync()[0];
 
-        console.log("Current brightness:", brightness.toFixed(2));
-
         const brightnessDiff = brightness - previousBrightness;
 
         if (Math.abs(brightnessDiff) > brightnessDiffThreshold) {
             let currentTime = Date.now();
             if (currentTime - lastPushUpTime > pushUpCooldown) {
                 if (isGoingDown && brightnessDiff > 0) {
-                    console.log("Push-up going up");
                     isGoingDown = false;
                 } else if (!isGoingDown && brightnessDiff < 0) {
                     pushUpCount++;
-                    console.log("Push-up completed. Count:", pushUpCount);
                     updateStats();
                     isGoingDown = true;
                     lastPushUpTime = currentTime;
@@ -71,7 +59,6 @@ async function detect() {
 
         previousBrightness = brightness;
 
-        // Clean up tensors
         imageTensor.dispose();
         resizedImage.dispose();
         grayImage.dispose();
@@ -84,16 +71,13 @@ async function detect() {
 function updateStats() {
     document.getElementById('pushUpCount').textContent = pushUpCount;
     const pushUpsPerToken = parseInt(document.getElementById('pushUpsPerToken').value);
-    console.log("Updating stats. Push-ups:", pushUpCount, "Push-ups per token:", pushUpsPerToken);
     if (pushUpCount % pushUpsPerToken === 0) {
         tokenCount++;
-        console.log("Token earned. New token count:", tokenCount);
         document.getElementById('tokenCount').textContent = tokenCount;
     }
 }
 
 document.getElementById('switchCamera').addEventListener('click', async () => {
-    console.log("Switching camera...");
     facingMode = facingMode === "user" ? "environment" : "user";
     if (currentStream) {
         currentStream.getTracks().forEach(track => track.stop());
@@ -103,50 +87,45 @@ document.getElementById('switchCamera').addEventListener('click', async () => {
 
 document.getElementById('startStop').addEventListener('click', () => {
     isCountingEnabled = !isCountingEnabled;
-    console.log("Counting enabled:", isCountingEnabled);
     document.getElementById('startStop').textContent = isCountingEnabled ? 'Stop' : 'Start';
+    document.getElementById('startStop').classList.toggle('bg-green-500');
+    document.getElementById('startStop').classList.toggle('bg-red-500');
     if (isCountingEnabled) {
         startDetection();
     }
 });
 
-// Reward system
 const rewards = [
     { name: 'Extra TV time', cost: 1 },
     { name: 'Favorite snack', cost: 2 },
     { name: 'Movie night', cost: 3 }
 ];
 
 function displayRewards() {
-    console.log("Displaying rewards");
     const rewardsContainer = document.getElementById('rewards');
-    rewardsContainer.innerHTML = '<h3>Rewards:</h3>';
+    rewardsContainer.innerHTML = '<h3 class="text-xl font-semibold mb-4">Rewards:</h3>';
     rewards.forEach(reward => {
         const button = document.createElement('button');
         button.textContent = `${reward.name} (${reward.cost} tokens)`;
+        button.className = 'w-full bg-indigo-500 text-white px-4 py-2 rounded hover:bg-indigo-600 transition';
         button.addEventListener('click', () => redeemReward(reward));
         rewardsContainer.appendChild(button);
     });
 }
 
 function redeemReward(reward) {
-    console.log("Attempting to redeem reward:", reward.name);
     if (tokenCount >= reward.cost) {
         tokenCount -= reward.cost;
         document.getElementById('tokenCount').textContent = tokenCount;
-        console.log("Reward redeemed. New token count:", tokenCount);
         alert(`You've redeemed: ${reward.name}`);
     } else {
-        console.log("Not enough tokens to redeem reward");
         alert('Not enough tokens!');
     }
 }
 
 async function init() {
-    console.log("Initializing app...");
     await setupCamera();
     displayRewards();
-    console.log("App initialization complete");
 }
 
 init();
