From e2af88297f7b62495da54624c4b52c6046d4a72f Mon Sep 17 00:00:00 2001
From: Kavin Muralikrishnan <921563@lcps.org>
Date: Thu, 17 Oct 2024 16:41:09 -0400
Subject: [PATCH] made dual input look nice

made keyboard controls look nicer

Update index.js

Update index.js

Update index.js

fixed axis values

Update index.html

Update index.js
---
 .vscode/launch.json |   5 +-
 index.html          | 108 +++++++++++++++++++++++++++++---------------
 index.js            |  77 +++++++++++++++++--------------
 styles.css          |  16 +++++--
 4 files changed, 130 insertions(+), 76 deletions(-)

diff --git a/.vscode/launch.json b/.vscode/launch.json
index 4fccc59..955cc0b 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -7,8 +7,9 @@
         {
             "type": "msedge",
             "request": "launch",
-            "name": "Open index.html",
-            "file": "c:\\Users\\kavin\\OneDrive\\Documents\\PestoLink-Online\\index.html"
+            "name": "Launch Edge against localhost",
+            "url": "http://localhost:8000",
+            "webRoot": "${workspaceFolder}"
         }
     ]
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index f82cd98..18989ea 100644
--- a/index.html
+++ b/index.html
@@ -20,25 +20,42 @@
                 <div id="joystick-container"></div>
             </div>
         </div>
-
-        <div class="container desktop-only" id="desktop-axis">
-            <div class="slider-non">Axis 0</div>
-            <div class="slider-non" id="axisValue0">127</div>
-            <div class="slider-bar" id="bar0"></div>
-
-            <div class="slider-non">Axis 1</div>
-            <div class="slider-non" id="axisValue1">127</div>
-            <div class="slider-bar" id="bar1"></div>
-
-            <div class="slider-non">Axis 2</div>
-            <div class="slider-non" id="axisValue2">127</div>
-            <div class="slider-bar" id="bar2"></div>
-
-            <div class="slider-non">Axis 3</div>
-            <div class="slider-non" id="axisValue3">127</div>
-            <div class="slider-bar" id="bar3"></div>
+        <div>
+            <div class="container desktop-only" id="desktop-axis">
+                <div class="slider-non">Axis 0</div>
+                <div class="slider-non" id="0axisValue0">127</div>
+                <div class="slider-bar" id="0bar0"></div>
+
+                <div class="slider-non">Axis 1</div>
+                <div class="slider-non" id="0axisValue1">127</div>
+                <div class="slider-bar" id="0bar1"></div>
+
+                <div class="slider-non">Axis 2</div>
+                <div class="slider-non" id="0axisValue2">127</div>
+                <div class="slider-bar" id="0bar2"></div>
+
+                <div class="slider-non">Axis 3</div>
+                <div class="slider-non" id="0axisValue3">127</div>
+                <div class="slider-bar" id="0bar3"></div>
+            </div>
+            <div class="container desktop-only" id="desktop-axis1">
+                <div class="slider-non">Axis 0</div>
+                <div class="slider-non" id="1axisValue0">127</div>
+                <div class="slider-bar" id="1bar0"></div>
+
+                <div class="slider-non">Axis 1</div>
+                <div class="slider-non" id="1axisValue1">127</div>
+                <div class="slider-bar" id="1bar1"></div>
+
+                <div class="slider-non">Axis 2</div>
+                <div class="slider-non" id="1axisValue2">127</div>
+                <div class="slider-bar" id="1bar2"></div>
+
+                <div class="slider-non">Axis 3</div>
+                <div class="slider-non" id="1axisValue3">127</div>
+                <div class="slider-bar" id="1bar3"></div>
+            </div>
         </div>
-
         <div class="container" id="interface">
             <button id="ble-button">🔗</button>
             <button id="battery-level"> &#x1F50B;&#xFE0E; ?V </button>
@@ -83,24 +100,43 @@
             <button id="button-0">0</button>
             <div></div>
         </div>
-
-        <div class="container desktop-only" id="desktop-button">
-            <button id="buttonDesktop0">0</button>
-            <button id="buttonDesktop1">1</button>
-            <button id="buttonDesktop2">2</button>
-            <button id="buttonDesktop3">3</button>
-            <button id="buttonDesktop4">4</button>
-            <button id="buttonDesktop5">5</button>
-            <button id="buttonDesktop6">6</button>
-            <button id="buttonDesktop7">7</button>
-            <button id="buttonDesktop8">8</button>
-            <button id="buttonDesktop9">9</button>
-            <button id="buttonDesktop10">10</button>
-            <button id="buttonDesktop11">11</button>
-            <button id="buttonDesktop12">12</button>
-            <button id="buttonDesktop13">13</button>
-            <button id="buttonDesktop14">14</button>
-            <button id="buttonDesktop15">15</button>
+        <div>
+            <div class="container desktop-only" id="desktop-button">
+                <button id="0buttonDesktop0">0</button>
+                <button id="0buttonDesktop1">1</button>
+                <button id="0buttonDesktop2">2</button>
+                <button id="0buttonDesktop3">3</button>
+                <button id="0buttonDesktop4">4</button>
+                <button id="0buttonDesktop5">5</button>
+                <button id="0buttonDesktop6">6</button>
+                <button id="0buttonDesktop7">7</button>
+                <button id="0buttonDesktop8">8</button>
+                <button id="0buttonDesktop9">9</button>
+                <button id="0buttonDesktop10">10</button>
+                <button id="0buttonDesktop11">11</button>
+                <button id="0buttonDesktop12">12</button>
+                <button id="0buttonDesktop13">13</button>
+                <button id="0buttonDesktop14">14</button>
+                <button id="0buttonDesktop15">15</button>
+            </div>
+            <div class="container desktop-only" id="desktop-button1" >
+                <button id="1buttonDesktop0">0</button>
+                <button id="1buttonDesktop1">1</button>
+                <button id="1buttonDesktop2">2</button>
+                <button id="1buttonDesktop3">3</button>
+                <button id="1buttonDesktop4">4</button>
+                <button id="1buttonDesktop5">5</button>
+                <button id="1buttonDesktop6">6</button>
+                <button id="1buttonDesktop7">7</button>
+                <button id="1buttonDesktop8">8</button>
+                <button id="1buttonDesktop9">9</button>
+                <button id="1buttonDesktop10">10</button>
+                <button id="1buttonDesktop11">11</button>
+                <button id="1buttonDesktop12">12</button>
+                <button id="1buttonDesktop13">13</button>
+                <button id="1buttonDesktop14">14</button>
+                <button id="1buttonDesktop15">15</button>
+            </div>
         </div>
     </div>
 
diff --git a/index.js b/index.js
index 8aa2c84..a7f7388 100644
--- a/index.js
+++ b/index.js
@@ -28,7 +28,6 @@ let toggleDualControllers = document.getElementById('toggle-dual-controllers')
 let lastKeyPressed = 1;
 
 // --------------------------- state management ------------------------------------ //
-
 if (localStorage.getItem(toggleMobile.id) == null) {
     if (isMobile) {
         localStorage.setItem(toggleMobile.id, 'true');
@@ -42,19 +41,19 @@ if (localStorage.getItem(toggleMobile.id) == null) {
 
 document.addEventListener('DOMContentLoaded', function () {
     updateMobileSlider(toggleMobile, toggleState=false);
-    updateSlider(toggleKeyboardWASD, toggleState=false);
+    updateKeyboardSlider(toggleKeyboardWASD, toggleState=false);
     updateInfoSlider(toggleInfo, toggleState=false);
-    updateSlider(toggleDualControllers, toggleState=false);
+    updateDualControllerSlider(toggleDualControllers, toggleState=false);
 
     toggleMobile.onmousedown = updateMobileSlider.bind(null, toggleMobile, toggleState=true)
-    toggleKeyboardWASD.onmousedown = updateSlider.bind(null, toggleKeyboardWASD, toggleState=true)
+    toggleKeyboardWASD.onmousedown = updateKeyboardSlider.bind(null, toggleKeyboardWASD, toggleState=true)
     toggleInfo.onmousedown =     updateInfoSlider.bind(null, toggleInfo, toggleState=true)
-    toggleDualControllers.onmousedown = updateSlider.bind(null, toggleDualControllers, toggleState=true)
+    toggleDualControllers.onmousedown = updateDualControllerSlider.bind(null, toggleDualControllers, toggleState=true)
     
     toggleMobile.ontouchstart = updateMobileSlider.bind(null, toggleMobile, toggleState=true)
-    toggleKeyboardWASD.ontouchstart = updateSlider.bind(null, toggleKeyboardWASD, toggleState=true)
+    toggleKeyboardWASD.ontouchstart = updateKeyboardSlider.bind(null, toggleKeyboardWASD, toggleState=true)
     toggleInfo.ontouchstart =     updateInfoSlider.bind(null, toggleInfo, toggleState=true)
-    toggleDualControllers.ontouchstart = updateSlider.bind(null, toggleDualControllers, toggleState=true)
+    toggleDualControllers.ontouchstart = updateDualControllerSlider.bind(null, toggleDualControllers, toggleState=true)
     
     window.setInterval(renderLoop, 100); // call renderLoop every num milliseconds
 });
@@ -86,7 +85,29 @@ function updateInfoSlider(sliderElement, toggleState){
         hackSpacerElement.style.display = "grid";
     }
 }
-
+function updateKeyboardSlider(sliderElement, toggleState){
+    let buttonElements = document.querySelectorAll('[id^="0buttonDesktop"]');
+    updateSlider(sliderElement, toggleState);
+    let keys=['Q','E','R','T','Y','U','O','P','Z','X','C','V','B','N','M',','];
+    if (localStorage.getItem(toggleKeyboardWASD.id) === 'true') {
+        buttonElements.forEach((button, index)=>button.textContent=keys[index]);
+    } else {
+        buttonElements.forEach((button, index)=>button.textContent=index);
+    }
+}
+function updateDualControllerSlider(sliderElement, toggleState){
+    updateSlider(sliderElement, toggleState);
+    if (localStorage.getItem(toggleDualControllers.id) === 'true') {
+        document.getElementById("desktop-button1").style.display="grid"
+        document.getElementById("desktop-axis1").style.display="grid"
+        console.log(document.getElementById("desktop-button1").hidden);
+        for (let element of desktopElements) element.style.height = "20vw";
+    } else {
+        document.getElementById("desktop-button1").style.display="none"
+        document.getElementById("desktop-axis1").style.display="none"
+        for (let element of desktopElements) element.style.height = "30vw";
+    }
+}
 function updateSlider(sliderElement, toggleState){
     if(toggleState){
         if ( localStorage.getItem(sliderElement.id) === 'true') {
@@ -112,10 +133,10 @@ function updateSlider(sliderElement, toggleState){
 
 // ----------------------------------------- main --------------------------------------- //
 
-function renderLoop() {
-    var axisValueElements = document.querySelectorAll('[id^="axisValue"]');
-    var barElements = document.querySelectorAll('[id^="bar"]');
-    var buttonElements = document.querySelectorAll('[id^="buttonDesktop"]');
+async function renderLoop() {
+    var axisValueElements = document.querySelectorAll('[id^="0axisValue"]');
+    var barElements = document.querySelectorAll('[id^="0bar"]');
+    var buttonElements = document.querySelectorAll('[id^="0buttonDesktop"]');
     // console.log(document.lastKeyPressed);
     //bytes 0: packet version
     //bytes 1-4: axes
@@ -203,7 +224,6 @@ function renderLoop() {
             let percentage = Math.round(axisValGamepad*100/255);
             barElements[i].style.background = `linear-gradient(to right, var(--alf-green) ${percentage}%, grey 0%)`;
         }
-        buttonElements.forEach((button) => button.style.background='grey')
         if(rawPacket[5]!=0 || rawPacket[6]!=0){
             for(let i=7; rawPacket[i]!=0; i++){
                 if(Object.values(keys).slice(8).includes(rawPacket[i])){
@@ -236,7 +256,7 @@ function renderLoop() {
 
     // console.log(rawPacket)
 
-    bleAgent.attemptSend(rawPacket);
+    await bleAgent.attemptSend(rawPacket);
     if(localStorage.getItem(toggleDualControllers.id) === 'true'){
         let rawPacket2 = new Uint8Array(1 + 4 + 2 + 11 + 1)
 
@@ -251,7 +271,7 @@ function renderLoop() {
         rawPacket2[6] = secondaryButtonCallback().byte1
         rawPacket2[18] = 1;
         // console.log(rawPacket2);
-        bleAgent.attemptSend(rawPacket2);
+        await bleAgent.attemptSend(rawPacket2);
     }
 }
 
@@ -575,9 +595,9 @@ function createGamepadAgent(gamepadNum) {
         return getGamepads().find(gamepad => gamepad.index == gamepadNum);
     }
 
-    var axisValueElements = document.querySelectorAll('[id^="axisValue"]');
-    var barElements = document.querySelectorAll('[id^="bar"]');
-    var buttonElements = document.querySelectorAll('[id^="buttonDesktop"]');
+    var axisValueElements = document.querySelectorAll('[id^="'+gamepadNum+'axisValue"]');
+    var barElements = document.querySelectorAll('[id^="'+gamepadNum+'bar"]');
+    var buttonElements = document.querySelectorAll('[id^="'+gamepadNum+'buttonDesktop"]');
 
     function convertUnitFloatToByte(unitFloat) {
         let byte = 127
@@ -593,9 +613,7 @@ function createGamepadAgent(gamepadNum) {
                 let axisValGamepad = convertUnitFloatToByte(gamepad.axes[i])
                 axisValueElements[i].textContent = axisValGamepad
                 let percentage = Math.round((gamepad.axes[i] + 1) * (100 / 2))
-                if(gamepadNum==0){
-                    barElements[i].style.background = `linear-gradient(to right, var(--alf-green) ${percentage}%, grey 0%)`;
-                }
+                barElements[i].style.background = `linear-gradient(to right, var(--alf-green) ${percentage}%, grey 0%)`;
                 axisArray[i] = axisValGamepad
             }
         } else {
@@ -613,26 +631,19 @@ function createGamepadAgent(gamepadNum) {
             for (let i = 0; i < 8; i++) {
                 if (gamepad.buttons[i].pressed) {
                     firstByte |= (gamepad.buttons[i].pressed << i);
-                    if(gamepadNum==0){
-                        buttonElements[i].style.background = 'var(--alf-green)';
-                    }
+                    buttonElements[i].style.background = 'var(--alf-green)';
+                    
                 } else {
-                    if(gamepadNum==0){
-                        buttonElements[i].style.background = 'grey';
-                    }
+                    buttonElements[i].style.background = 'grey';
                 }
             }
 
             for (let i = 8; i < 16; i++) {
                 if (gamepad.buttons[i].pressed) {
                     secondByte |= (gamepad.buttons[i].pressed << i - 8);
-                    if(gamepadNum==0){
-                        buttonElements[i].style.background = 'var(--alf-green)';
-                    }
+                    buttonElements[i].style.background = 'var(--alf-green)';
                 } else {
-                    if(gamepadNum==0){
-                        buttonElements[i].style.background = 'grey';
-                    }
+                    buttonElements[i].style.background = 'grey';
                 }
             }
         }
diff --git a/styles.css b/styles.css
index 8091dd4..b19d6e7 100644
--- a/styles.css
+++ b/styles.css
@@ -81,7 +81,9 @@ body {
 #mobile-button,
 #mobile-joystick,
 #desktop-axis,
-#desktop-button {
+#desktop-button,
+#desktop-axis1,
+#desktop-button1 {
     width: 30vw;
     height: 30vw;
     display: none;
@@ -180,7 +182,8 @@ body {
     align-items: center;
 }
 
-#desktop-button {
+#desktop-button,
+#desktop-button1{
     display: grid;
     padding: 1vw;
     grid-gap: 0.5vw;
@@ -188,14 +191,16 @@ body {
     grid-template-columns: 1fr 1fr 1fr 1fr;
 }
 
-#desktop-button button {
+#desktop-button button,
+#desktop-button1 button {
     font-size: 2vw;
     background: grey;
     border: none;
     border-radius: 1vw;
 }
 
-#desktop-axis {
+#desktop-axis,
+#desktop-axis1 {
     display: grid;
     padding: 1vw;
     grid-row-gap: 1vw;
@@ -204,7 +209,8 @@ body {
     grid-template-columns: 1fr 1fr 1fr;
 }
 
-#desktop-axis div {
+#desktop-axis,
+#desktop-axis1 div {
     font-size: 2vw;
     border: none;
 }