Skip to content

Commit

Permalink
keyboard and mouse tests
Browse files Browse the repository at this point in the history
  • Loading branch information
Watson committed Nov 7, 2023
1 parent e863165 commit 88cd725
Show file tree
Hide file tree
Showing 5 changed files with 206 additions and 254 deletions.
50 changes: 1 addition & 49 deletions src/main/deploy/nodeselector/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,55 +21,7 @@
</head>

<body>
<table>
<tbody>
<tr id="row-high">
<td class="node cone high">H1</td>
<td class="node cube high">H2</td>
<td class="node cone high">H3</td>
<td class="node cone-center high">H4</td>
<td class="node cube-center high">H5</td>
<td class="node cone-center high">H6</td>
<td class="node cone high">H7</td>
<td class="node cube high">H8</td>
<td class="node cone high">H9</td>
</tr>
<tr id="row-med">
<td class="node cone med">M1</td>
<td class="node cube med">M2</td>
<td class="node cone med">M3</td>
<td class="node cone-center med">M4</td>
<td class="node cube-center med">M5</td>
<td class="node cone-center med">M6</td>
<td class="node cone med">M7</td>
<td class="node cube med">M8</td>
<td class="node cone med">M9</td>
</tr>
<tr id="row-low">
<td class="node hybrid low">L1</td>
<td class="node hybrid low">L2</td>
<td class="node hybrid low">L3</td>
<td class="node hybrid-center low">L4</td>
<td class="node hybrid-center low">L5</td>
<td class="node hybrid-center low">L6</td>
<td class="node hybrid low">L7</td>
<td class="node hybrid low">L8</td>
<td class="node hybrid low">L9</td>
</tr>
</tbody>
</table>
<div>
<div id="time" class="time teleop-1">0:00</div>
<div id="confirm-node">
<div>CONFIRM</div>
</div>
<div class="cone-orientation">
<svg viewbox="0 0 16 16">
<path
d="M7.03 1.88c.252-1.01 1.688-1.01 1.94 0l2.905 11.62H14a.5.5 0 0 1 0 1H2a.5.5 0 0 1 0-1h2.125L7.03 1.88z" />
</svg>
</div>
</div>
<button id="lock">Lock</button>
</body>

</html>
236 changes: 39 additions & 197 deletions src/main/deploy/nodeselector/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,86 +1,8 @@
// Copyright (c) 2023 FRC 6328
// http://github.com/Mechanical-Advantage
//
// Use of this source code is governed by an MIT-style
// license that can be found in the LICENSE file at
// the root directory of this project.

import { NT4_Client } from "./NT4.js";

const nodeTopic = "/nodeselector/node_target";
const nodeStatusTopic = "/nodeselector/node_status";
const coneTippeddTopic = "/nodeselector/cone_tipped";
const matchTimeTopic = "/nodeselector/match_time";
const isAutoTopic = "/nodeselector/is_auto";

let active = null;
let tipped = false;
let matchTime = 0;
let isAuto = false;
let nodeStatus = Array(27).fill(false);

function rowIdFromId(row_num) {
let a = ["#row-low", "#row-med", "#row-high"];
return a[row_num];
}

function displayActive(index) {
if (index !== null) {
active = index;
$(".node.active").removeClass('active');
let row = rowIdFromId(index[0]);
$(row).find("td").eq(index[1]).addClass("active");
}
console.log(active);
}

function sendTarget(row, column) {
// alert(row + ' ' + column);
if ([row, column] !== active) {
// if (row !== active[0] && column !== active[1]) {
displayActive([row, column]);
client.addSample(nodeTopic, [row, column]);
}
}

function displayTipped(newTipped) {
// if (newTipped != tipped) {
tipped = newTipped;
if (tipped) {
$(".cone-orientation").addClass("tipped");
} else {
$(".cone-orientation").removeClass("tipped");
}
// }
}

function displayTime(time, isAuto) {
let element = $("#time");
if (isAuto) {
element.addClass("auto");
element.removeClass("teleop-1 teleop-2 teleop-3");
} else if (time > 30 || time == 0) {
element.addClass("teleop-1");
element.removeClass("auto teleop-2 teleop-3");
} else if (time > 15) {
element.addClass("teleop-2");
element.removeClass("teleop-1 auto teleop-3");
} else {
element.addClass("teleop-3");
element.removeClass("teleop-1 teleop-2 auto");
}
let secondsString = (time % 60).toString();
if (secondsString.length == 1) {
secondsString = "0" + secondsString;
}
element.text(Math.floor(time / 60).toString() + ":" + secondsString);
}

function toggleTipped() {
tipped = !tipped;
displayTipped(tipped);
client.addSample(coneTippeddTopic, tipped);
}
const keyDownTopic = "/input/keyboardDown";
const keyUpTopic = "/input/keyboardUp";
const mouseMoveTopic = "/input/mouseDelta";

let client = new NT4_Client(
window.location.hostname,
Expand All @@ -92,35 +14,7 @@ let client = new NT4_Client(
// Topic unannounce
},
(topic, timestamp, value) => {
// New data
if (topic.name === nodeTopic) {
document.body.style.backgroundColor = "white";
displayActive(value);
} else if (topic.name == nodeStatusTopic) {
nodeStatus = value;
console.log(value);
for (let i = 0; i < value.length; i++) {
let row = Math.floor(i / 9);
let col = i - (row * 9);
let rowId = rowIdFromId(row);
let colId = $(rowId).find("td").eq(col);
if (value[i]) {
colId.addClass("confirmed");
} else {
colId.removeClass("confirmed");
}
}
} else if (topic.name === coneTippeddTopic) {
console.log(value);
displayTipped(value);
} else if (topic.name === matchTimeTopic) {
matchTime = value;
displayTime(matchTime, isAuto);
console.log(matchTime);
} else if (topic.name === isAutoTopic) {
isAuto = value;
displayTime(matchTime, isAuto);
}

},
() => {
// Connected
Expand All @@ -129,103 +23,51 @@ let client = new NT4_Client(
() => {
// Disconnected
document.body.style.backgroundColor = "red";
displayActive(null);
displayTipped(false);
displayTime(0, false);
}
);

window.addEventListener("load", () => {
// Start NT connection
client.subscribe(
[
nodeTopic,
nodeStatusTopic,
coneTippeddTopic,
matchTimeTopic,
isAutoTopic,
],
false,
false,
0.02
);
client.publishTopic(nodeTopic, "int[]");
client.publishTopic(nodeStatusTopic, "boolean[]");
client.publishTopic(coneTippeddTopic, "boolean");
client.publishTopic(keyDownTopic, "string");
client.publishTopic(keyUpTopic, "string");
client.publishTopic(mouseMoveTopic, "double[]");
client.connect();
});

// Add node click listeners
$(".node.low").click(function () {
sendTarget(0, $(this).index());
});
$(".node.med").click(function () {
sendTarget(1, $(this).index());
});
$(".node.high").click(function () {
sendTarget(2, $(this).index());
});
$("#confirm-node").click(function () {
let row = active[0];
let column = active[1];
let rowId = rowIdFromId(row);
let colId = $(rowId).find("td").eq(column);
let index = row * 9 + column;
nodeStatus[index] = !nodeStatus[index];
if (nodeStatus[index]) {
colId.addClass("confirmed");
} else {
colId.removeClass("confirmed");
}
client.addSample(nodeStatusTopic, nodeStatus);
console.log(nodeStatus);
document.addEventListener("keydown", (ev) => {
client.addSample(keyDownTopic, "");
client.addSample(keyDownTopic, ev.key.toLowerCase());
});

document.addEventListener("keyup", (ev) => {
client.addSample(keyUpTopic, "");
client.addSample(keyUpTopic, ev.key.toLowerCase());
});

let lock_button = document.getElementById("lock");

lock_button.addEventListener("click", () => {
let locked = lock_button.requestPointerLock({
unadjustedMovement: true
});

// each((cell, index) => {
// cell.addEventListener("click", () => {
// sendActive(index);
// console.log("click node " + JSON.stringify(cell) + ' ' + index)
// });
// cell.addEventListener("contextmenu", (event) => {
// event.preventDefault();
// sendActive(index);
// });
// });
if (!locked) {
locked = lock_button.requestPointerLock();
}
});

// Add node touch listeners
// [("touchstart", "touchmove")].forEach((eventString) => {
// document.body.addEventListener(eventString, (event) => {
// if (event.touches.length > 0) {
// let x = event.touches[0].clientX;
// let y = event.touches[0].clientY;
// Array.from(document.getElementsByClassName("node")).forEach(
// (cell, index) => {
// let rect = cell.getBoundingClientRect();
// if (
// x >= rect.left &&
// x <= rect.right &&
// y >= rect.top &&
// y <= rect.bottom
// ) {
// sendActive(index);
// }
// }
// );
// }
// });
// });
lock_button.addEventListener("mousemove", (ev) => {
client.addSample(mouseMoveTopic, []);
client.addSample(mouseMoveTopic, [ev.movementX, ev.movementY]);
});

// Add cone orientation listeners
const coneOrientationDiv = $(".cone-orientation");
coneOrientationDiv.click(function () {
toggleTipped();
});
// coneOrientationDiv.addEventListener("contextmenu", (event) => {
// event.preventDefault();
// toggleTipped();
// });
// coneOrientationDiv.addEventListener("touchstart", () => {
// event.preventDefault();
// toggleTipped();
// });
document.body.addEventListener("mousedown", (ev) => {
client.addSample(keyDownTopic, "");
client.addSample(keyDownTopic, "mouse" + ev.button);
});

document.body.addEventListener("mouseup", (ev) => {
client.addSample(keyUpTopic, "");
client.addSample(keyUpTopic, "mouse" + ev.button);
});

Loading

0 comments on commit 88cd725

Please sign in to comment.