Skip to content

Commit

Permalink
Add controller visualisation
Browse files Browse the repository at this point in the history
  • Loading branch information
@Finchiedev
Finchiedev committed Dec 13, 2018
1 parent 6313ef2 commit 4f5e829
Show file tree
Hide file tree
Showing 5 changed files with 138 additions and 141 deletions.
28 changes: 28 additions & 0 deletions App/CSS/main.css
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,39 @@
/* .main {
margin-left: 175px !important
} */
.positive {
background-color: green
}

.negative {
background-color: red
}

.axis {
background-color: #00FFFF
}

.button {
background-color: orange
}

.linear {
background-color: purple
}

.binary {
background-color: yellow
}

.descriptor {
display: inline
}

table, th, td {
border: 1px solid black;
border-collapse: collapse;
}

#camera-view {
align: center;
}
Expand Down
224 changes: 104 additions & 120 deletions App/JS/controller.js
View file
Original file line number Diff line number Diff line change
@@ -1,127 +1,111 @@
var net = require('net')
var haveEvents = 'ongamepadconnected' in window;
var controllers = {};
function resetElement(id) {
var element = document.getElementById(id);

function connecthandler(e) {
addgamepad(e.gamepad);
}

function addgamepad(gamepad) {
controllers[gamepad.index] = gamepad;

var d = document.createElement("div");
d.setAttribute("id", "controller" + gamepad.index);

var t = document.createElement("h1");
t.appendChild(document.createTextNode("gamepad: " + gamepad.id));
d.appendChild(t);

var b = document.createElement("div");
b.className = "buttons";
for (var i = 0; i < gamepad.buttons.length; ++i) {
var e = document.createElement("span");
e.className = "button";
//e.id = "b" + i;
e.innerHTML = i;
b.appendChild(e);
}

d.appendChild(b);

var a = document.createElement("div");
a.className = "axes";

for (var i = 0; i < gamepad.axes.length; i++) {
var p = document.createElement("progress");
p.className = "axis";
//p.id = "a" + i;
p.setAttribute("max", "2");
p.setAttribute("value", "1");
p.innerHTML = i;
a.appendChild(p);
}

d.appendChild(a);

// See https://github.com/luser/gamepadtest/blob/master/index.html
var start = document.getElementById("start");
if (start) {
start.style.display = "none";
}

document.body.appendChild(d);
requestAnimationFrame(updateStatus);
}

function disconnecthandler(e) {
removegamepad(e.gamepad);
}

function removegamepad(gamepad) {
var d = document.getElementById("controller" + gamepad.index);
document.body.removeChild(d);
delete controllers[gamepad.index];
}

function updateStatus() {
if (!haveEvents) {
scangamepads();
}

var i = 0;
var j;

for (j in controllers) {
var controller = controllers[j];
var d = document.getElementById("controller" + j);
var buttons = d.getElementsByClassName("button");

for (i = 0; i < controller.buttons.length; i++) {
var b = buttons[i];
var val = controller.buttons[i];
var pressed = val == 1.0;
if (typeof(val) == "object") {
pressed = val.pressed;
val = val.value;
}

var pct = Math.round(val * 100) + "%";
b.style.backgroundSize = pct + " " + pct;
if (pressed) {
b.className = "button pressed";
} else {
b.className = "button";
}
}
if (element !== null) {
var parent = element.parentNode;
parent.removeChild(element);

var axes = d.getElementsByClassName("axis");
for (i = 0; i < controller.axes.length; i++) {
var a = axes[i];
a.innerHTML = i + ": " + controller.axes[i].toFixed(4);
a.setAttribute("value", controller.axes[i] + 1);
}
element = document.createElement('div');
element.setAttribute('id', id);
parent.insertBefore(element, document.getElementById('marker'));
}

requestAnimationFrame(updateStatus);
}

function scangamepads() {
var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads() : []);
for (var i = 0; i < gamepads.length; i++) {
if (gamepads[i]) {
if (gamepads[i].index in controllers) {
controllers[gamepads[i].index] = gamepads[i];
} else {
addgamepad(gamepads[i]);
var interval = 10;
setInterval(function(){
var gamepads = navigator.getGamepads();
resetElement('controllers');
if (gamepads[0] !== null) {
var parent = document.getElementById('controllers');

for (var i = 0; i <= gamepads.length; i++) {
var gamepad = gamepads[i];

if (gamepad !== null && i !== 4) {
var table = document.createElement('table');
table.setAttribute('id', `Controller ${i}`)
parent.appendChild(table)

var infoRow = document.createElement('tr');
infoRow.setAttribute('id', 'info');
table.appendChild(infoRow);

for (var c = 0; c < 2; c++) {
var heading = document.createElement('th');
heading.setAttribute('id', `Info ${c}`);
infoRow.appendChild(heading);
}

document.getElementById('Info 0').innerHTML = 'Type';
document.getElementById('Info 1').innerHTML = 'Value';

for (var x = 0; x < gamepad.axes.length; x++) {
var row = document.createElement('tr');
row.setAttribute('id', `Axis ${x}`)
table.appendChild(row)

for (var z = 0; z <2; z++) {
var data = document.createElement('td');
if (z == 1) {
data.setAttribute('id', `0, ${i}, ${x}`)
} else {
data.setAttribute('id', `0, ${i}, ${x}, ${z}`);
data.innerHTML = 'Axis';
data.setAttribute('class', 'axis');
}
table.appendChild(data);
}
}

for (var y = 0; y < gamepad.buttons.length; y++) {
var row = document.createElement('tr');
row.setAttribute('id', `Axis ${y}`)
table.appendChild(row)

for (var z = 0; z < 2; z++) {
var data = document.createElement('td');
if (z == 1) {
data.setAttribute('id', `1, ${i}, ${y}`)
} else {
data.setAttribute('id', `1, ${i}, ${y}, ${z}`);
data.innerHTML = 'Button';
data.setAttribute('class', 'button');
}
table.appendChild(data);
}
}

// for (var y = 0; y < gamepad.buttons.length; y++) {
// var button = document.createElement('p');
// button.setAttribute('id', `Button #${y}`);
// controller.appendChild(button);
//
// gamepad.buttons[y].pressed? button.innerHTML = "Pressed" : button.innerHTML = "Not Pressed"
// button.innerHTML += `, value ${gamepad.buttons[y].value}`
// // console.log(gamepad.buttons[x])
// }

for (var x = 0; x < gamepad.axes.length; x++) {
var value = document.getElementById(`0, ${i}, ${x}`);
value.innerHTML = gamepad.axes[x]
gamepad.axes[x] > 0 ? value.setAttribute('class', 'positive') : value.setAttribute('class', 'negative')
}

for (var y = 0; y < gamepad.buttons.length; y++) {
var value = document.getElementById(`1, ${i}, ${y}`);
value.innerHTML = gamepad.buttons[y].value
gamepad.buttons[y].value > 0? value.setAttribute('class', 'positive') : value.setAttribute('class', 'negative')
}

// for (var y = 0; y < gamepad.buttons.length; y++) {
// var button = document.createElement('p');
// button.setAttribute('id', `Button #${x}`);
// controller.appendChild(button);
//
// gamepad.buttons[y].pressed? button.innerHTML = "Pressed" : button.innerHTML = "Not Pressed"
// button.innerHTML += `, value ${gamepad.buttons[y].value}`
// // console.log(gamepad.buttons[x])
// }
}
}
}
}


window.addEventListener("gamepadconnected", connecthandler);
window.addEventListener("gamepaddisconnected", disconnecthandler);

if (!haveEvents) {
setInterval(scangamepads, 500);
}
}, interval)
1 change: 1 addition & 0 deletions App/JS/main.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
const execute = require('./JS/executeShellCommand.js').execute;
var settings = require('./JS/Resources/settings.json')

function controlServerCode(terminate) {
if (terminate == true) {
Expand Down
24 changes: 4 additions & 20 deletions App/control.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,29 +2,13 @@
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Robot Control</title>
<title>Controller Test</title>
<link rel="stylesheet" href="CSS/main.css">
<script type="text/javascript" src="JS/main.js"></script>
<script type="text/javascript" src="JS/client.js"></script>
<script type="text/javascript">
if (process.platform == 'win32' || process.platform == 'win64') {
execute('py App/JS/Resources/CurrentEmuBotCode2/client.py')
}
</script>
<script type="text/javascript" src="JS/controller.js"></script>
</head>
<body>
<div id="sidenav">
<a href="index.html">Dashboard</a>
<a href="camera.html">Camera</a>
<a href="control.html" id="selected">Robot Control</a>
<a href="testing.html">Testing</a>
<a href="settings.html">Settings</a>
<a href="version.html">Version</a>
</div>
<div class="main">
<button type="button" name="start" onclick="controlServerCode(false)">[UNSTABLE PYTHON] Start</button>
<button type="button" name="kill" onclick="controlServerCode(true)">[UNSTABLE PYTHON] Kill</button>
<p id="status"></p>
</div>
<div id="controllers"></div>
<p id="marker"></p>
</body>
</html>
2 changes: 1 addition & 1 deletion main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ function createWindow() {
width: 800,
height: 600
})
win.loadFile('App/index.html')
win.loadFile('App/control.html')
// win.loadURL('http://localhost:8080')
win.webContents.openDevTools()

Expand Down

0 comments on commit 4f5e829

Please sign in to comment.