Skip to content

Commit

Permalink
made dual input look nice
Browse files Browse the repository at this point in the history 
made keyboard controls look nicer

Update index.js

Update index.js

Update index.js

fixed axis values

Update index.html

Update index.js
  • Loading branch information
@Advay17
Advay17 committed Oct 19, 2024
1 parent eb4f9be commit e2af882
Show file tree
Hide file tree
Showing 4 changed files with 130 additions and 76 deletions.
5 changes: 3 additions & 2 deletions .vscode/launch.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}"
}
]
}
108 changes: 72 additions & 36 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>

Expand Down
77 changes: 44 additions & 33 deletions index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand All @@ -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
});
Expand Down Expand Up @@ -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') {
Expand All @@ -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
Expand Down Expand Up @@ -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])){
Expand Down Expand Up @@ -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)

Expand All @@ -251,7 +271,7 @@ function renderLoop() {
rawPacket2[6] = secondaryButtonCallback().byte1
rawPacket2[18] = 1;
// console.log(rawPacket2);
bleAgent.attemptSend(rawPacket2);
await bleAgent.attemptSend(rawPacket2);
}
}

Expand Down Expand Up @@ -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
Expand All @@ -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 {
Expand All @@ -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';
}
}
}
Expand Down
16 changes: 11 additions & 5 deletions styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -180,22 +182,25 @@ body {
align-items: center;
}

#desktop-button {
#desktop-button,
#desktop-button1{
display: grid;
padding: 1vw;
grid-gap: 0.5vw;
grid-template-rows: 1fr 1fr 1fr 1fr;
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;
Expand All @@ -204,7 +209,8 @@ body {
grid-template-columns: 1fr 1fr 1fr;
}

#desktop-axis div {
#desktop-axis,
#desktop-axis1 div {
font-size: 2vw;
border: none;
}
Expand Down

0 comments on commit e2af882

Please sign in to comment.