Skip to content

Commit

Permalink
made dual input look nice
Browse files Browse the repository at this point in the history
  • Loading branch information
@Advay17
Advay17 committed Oct 18, 2024
1 parent 8ff0181 commit ec8b6ff
Show file tree
Hide file tree
Showing 3 changed files with 106 additions and 51 deletions.
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="axisValue0">127</div>
<div class="slider-bar" id="0bar0"></div>

<div class="slider-non">Axis 1</div>
<div class="slider-non" id="axisValue1">127</div>
<div class="slider-bar" id="0bar1"></div>

<div class="slider-non">Axis 2</div>
<div class="slider-non" id="axisValue2">127</div>
<div class="slider-bar" id="0bar2"></div>

<div class="slider-non">Axis 3</div>
<div class="slider-non" id="axisValue3">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="axisValue0">127</div>
<div class="slider-bar" id="1bar0"></div>

<div class="slider-non">Axis 1</div>
<div class="slider-non" id="axisValue1">127</div>
<div class="slider-bar" id="1bar1"></div>

<div class="slider-non">Axis 2</div>
<div class="slider-non" id="axisValue2">127</div>
<div class="slider-bar" id="1bar2"></div>

<div class="slider-non">Axis 3</div>
<div class="slider-non" id="axisValue3">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
33 changes: 23 additions & 10 deletions index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,17 +43,17 @@ document.addEventListener('DOMContentLoaded', function () {
updateMobileSlider(toggleMobile, 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 = 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 = 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 +86,7 @@ function updateInfoSlider(sliderElement, toggleState){
}
}
function updateKeyboardSlider(sliderElement, toggleState){
let buttonElements = document.querySelectorAll('[id^="buttonDesktop"]');
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') {
Expand All @@ -95,6 +95,19 @@ function updateKeyboardSlider(sliderElement, toggleState){
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 Down Expand Up @@ -122,8 +135,8 @@ function updateSlider(sliderElement, toggleState){

async function renderLoop() {
var axisValueElements = document.querySelectorAll('[id^="axisValue"]');
var barElements = document.querySelectorAll('[id^="bar"]');
var buttonElements = document.querySelectorAll('[id^="buttonDesktop"]');
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 @@ -242,7 +255,7 @@ async function renderLoop() {
}
}

console.log(rawPacket)
// console.log(rawPacket)

await bleAgent.attemptSend(rawPacket);
if(localStorage.getItem(toggleDualControllers.id) === 'true'){
Expand All @@ -258,7 +271,7 @@ async function renderLoop() {
rawPacket2[5] = secondaryButtonCallback().byte0
rawPacket2[6] = secondaryButtonCallback().byte1
rawPacket2[18] = 1;
console.log(rawPacket2);
// console.log(rawPacket2);
await bleAgent.attemptSend(rawPacket2);
}
}
Expand Down Expand Up @@ -584,8 +597,8 @@ function createGamepadAgent(gamepadNum) {
}

var axisValueElements = document.querySelectorAll('[id^="axisValue"]');
var barElements = document.querySelectorAll('[id^="bar"]');
var buttonElements = document.querySelectorAll('[id^="buttonDesktop"]');
var barElements = document.querySelectorAll('[id^="'+gamepadNum+'bar"]');
var buttonElements = document.querySelectorAll('[id^="'+gamepadNum+'buttonDesktop"]');

function convertUnitFloatToByte(unitFloat) {
let byte = 127
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 ec8b6ff

Please sign in to comment.