Skip to content

Commit

Permalink
Merge pull request #346 from Hamlet3000/main
Browse files Browse the repository at this point in the history 
use Radiobuttons in Controls (beta)
  • Loading branch information
@kercre123
kercre123 authored Jun 25, 2024
2 parents fd88652 + e657b1e commit b14f1ae
Show file tree
Hide file tree
Showing 3 changed files with 142 additions and 56 deletions.
13 changes: 13 additions & 0 deletions chipper/webroot/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,10 @@ input[type="text"]:focus, input[type="file"]:focus, select:focus {
border-color: var(--fg-color-alt);
}

input[type='text']:disabled {
cursor: not-allowed;
}

.small-hr {
border: 1px solid #3e3e3e;
width: 30%;
Expand Down Expand Up @@ -267,6 +271,15 @@ input[type='radio']:checked:after {
display: inline-block;
}

input[type='radio']:disabled {
cursor: not-allowed;
}

input[type='radio']:disabled:after {
background-color: var(--button-color-alt);
cursor: not-allowed;
}

/* ###################################### */
#username, #password {
width: 499px !important;
Expand Down
136 changes: 80 additions & 56 deletions chipper/webroot/sdkapp/control.html
View file
Original file line number Diff line number Diff line change
@@ -1,69 +1,94 @@
<!DOCTYPE html>
<html>
<head>
<title>Vector Web App</title>
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://kit.fontawesome.com/8cdc8cbed9.js" crossorigin="anonymous"></script>
</head>

<head>
<title>Vector Web App</title>
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://kit.fontawesome.com/8cdc8cbed9.js" crossorigin="anonymous"></script>
</head>

<body>
<div id="outer">
<div id="content">
<h1 class="center">Vector control (beta)</h1>
<hr />
<div class="main-nav-parent">
<div class="main-nav-child">
<a href="#" onclick="goBackToSettings()"><i class="fa-solid fa-reply"></i><br />Back</a>
<body onload="updateControlButtons()">
<div id="outer">
<div id="content">
<h1 class="center">Vector control (beta)</h1>
<hr />
<div class="main-nav-parent">
<div class="main-nav-child">
<a href="#" onclick="goBackToSettings()"
><i class="fa-solid fa-reply"></i><br />Back</a
>
</div>
</div>
</div>
<hr />

<div id="sdkActions">
<h2 class="center">Camera Feed</h2>
<hr class="small-hr">
<div class="center" id="camStream"></div>
<div style="text-align: left;" class="center">
<label>
<input type="radio" name="cam" id="cam" onclick="showCamStream()">Begin Camera Stream<br>
</label>
<label>
<input type="radio" name="cam" id="cam" onclick="stopCamStream()" checked>Stop Camera Stream<br>
</label>
</div>
<hr />

<div id="sdkActions">
<h2 class="center">Camera Feed</h2>
<div class="center" id="camStream"></div>
<div class="center">
<button onclick="showCamStream()">Begin Camera Stream</button>
<button onclick="stopCamStream()">Stop Camera Stream</button>
</div>
<hr />
<h2 class="center">Behavior Control</h2>
<hr class="small-hr">
<small class="center">You must assume behavior control before performing any action</small>
<div style="text-align: left;" class="center">
<label>
<input type="radio" name="control" id="assume_control" onclick="sendForm('/api-sdk/assume_behavior_control?priority=high'); updateControlButtons();">Assume<br>
</label>
<label>
<input type="radio" name="control" id="release_control" onclick="sendForm('/api-sdk/release_behavior_control'); updateControlButtons();" checked>Release<br>
</label>
</div>
<hr/>

<h2 class="center">Behavior Control</h2>
<small class="center">You must assume behavior control before performing any
action</small>
<div class="center">
<button onclick="sendForm('/api-sdk/assume_behavior_control?priority=high')">
Assume
</button>
<button onclick="sendForm('/api-sdk/release_behavior_control')">
Release
</button>
</div>
<hr />
<h2 class="center">Move Motors</h2>
<hr class="small-hr">
<small class="center">Toggle Keyboard Controls (unstable) <br> WASD for wheels, R-lift up, F-lift down, T-head up, G-head down</small>
<div style="text-align: left;" class="center">
<label>
<input type="radio" name="keycontrol" id="key_control_on" onclick="toggleKeyboard()" disabled>On<br>
</label>
<label>
<input type="radio" name="keycontrol" id="key_control_off" onclick="toggleKeyboard()" checked disabled>Off<br>
</label>
</div>
<hr/>

<h2 class="center">Move Motors</h2>
<div class="center">
<button onclick="toggleKeyboard()">
Toggle Keyboard Controls (unstable)
</button>
</div>
<div id="keysKey">
<small class="center" display="_blank">Enabled! WASD for wheels, R-lift up, F-lift down, T-head up,
G-head down</small>
</div>
<hr />
<h2 class="center">Mirror Mode</h2>
<hr class="small-hr">
<div style="text-align: left;" class="center">
<label>
<input type="radio" name="mirror" id="mirror_on" onclick="sendForm('/api-sdk/mirror_mode?enable=true')" disabled>On<br>
</label>
<label>
<input type="radio" name="mirror" id="mirror_off" onclick="sendForm('/api-sdk/mirror_mode?enable=false')" checked disabled>Off<br>
</label>
</div>
<hr/>

<h2 class="center">Mirror Mode</h2>
<div class="center">
<button onclick="sendForm('/api-sdk/mirror_mode?enable=true')">
Mirror Mode On
</button>
<button onclick="sendForm('/api-sdk/mirror_mode?enable=false')">
Mirror Mode Off
</button>
<h2 class="center">Say Text</h2>
<div class="center">
<input
class="tinput"
name="textSay"
id="textSay"
type="text"
placeholder="Put text here"
disabled
/>
</div>
<button onclick="sayText()" type="submit">Submit</button>
</div>
<hr />
<hr/>

<h2 class="center">Say Text</h2>
<div class="center">
<input class="tinput" name="textSay" id="textSay" type="text" placeholder="Put text here" />
Expand All @@ -80,5 +105,4 @@ <h2 class="center">Say Text</h2>
<script src="../js/ui.js"></script>
<iframe name="hiddenFrame" width="0" height="0" border="0" style="display: none"></iframe>
</body>

</html>
49 changes: 49 additions & 0 deletions chipper/webroot/sdkapp/js/control.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,55 @@ var headIsMovingDown = false;
var headIsMovingUp = false;
var headIsStopped = false;

// when pages is closed
window.onbeforeunload = function() {
stopCamStream();
useKeyboardControl = false;
sendForm("/api-sdk/mirror_mode?enable=false");
};

// switches items to disabled or enables them
function updateControlButtons() {
const assumeControl = document.getElementById("assume_control");
const releaseControl = document.getElementById("release_control");
const keyControlOn = document.getElementById("key_control_on");
const keyControlOff = document.getElementById("key_control_off");
const keyMirrorOn = document.getElementById("mirror_on");
const keyMirrorOff = document.getElementById("mirror_off");
const textSay = document.getElementById("textSay");

if (assumeControl.checked) {
keyControlOn.disabled = false;
keyControlOff.disabled = false;
keyMirrorOn.disabled = false;
keyMirrorOff.disabled = false;
textSay.disabled = false;
} else if (releaseControl.checked) {
useKeyboardControl = false;
keyControlOff.checked = true;
keyControlOn.disabled = true;
keyControlOff.disabled = true;
sendForm("/api-sdk/mirror_mode?enable=false");
keyMirrorOff.checked = true;
keyMirrorOn.disabled = true;
keyMirrorOff.disabled = true;
textSay.disabled = true;
}
}

// Add event listener to activate keyControlOff when textSay receives the focus
document.addEventListener('DOMContentLoaded', function() {
const textSay = document.getElementById("textSay");
const keyControlOff = document.getElementById("key_control_off");

textSay.addEventListener('focus', function() {
//keyControlOff.disabled = false;
keyControlOff.checked = true;
useKeyboardControl = false;
});
});


function toggleKeyboard() {
if (useKeyboardControl == false) {
useKeyboardControl = true;
Expand Down

0 comments on commit b14f1ae

Please sign in to comment.