2019-10-23 16:58:19 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>WS Experiments</title>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<style>
|
|
|
|
|
table { border-collapse: collapse; width: 100%; }
|
|
|
|
|
th, td { text-align: left; padding: 8px; }
|
|
|
|
|
tr:nth-child(even){background-color: #f2f2f2}
|
|
|
|
|
th { background-color: #562399; color: white; }
|
|
|
|
|
</style>
|
|
|
|
|
<header>
|
|
|
|
|
</header>
|
|
|
|
|
|
|
|
|
|
<div class="variableDisplay"></div>
|
|
|
|
|
<table class="variables">
|
|
|
|
|
<tr>
|
|
|
|
|
<th>Variable</th>
|
|
|
|
|
<th>Value</th>
|
|
|
|
|
</tr>
|
|
|
|
|
</table>
|
|
|
|
|
|
|
|
|
|
<div id="output"></div>
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
|
|
|
|
|
function log(s) {
|
|
|
|
|
var p = document.createElement("p");
|
|
|
|
|
p.style.wordWrap = "break-word";
|
|
|
|
|
p.textContent = s;
|
|
|
|
|
output.appendChild(p);
|
|
|
|
|
}
|
|
|
|
|
function sendMessage(msg) {
|
|
|
|
|
ws.send(msg);
|
|
|
|
|
//log("Sent : " + msg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Interface to Trick WebSocket Variable Server
|
|
|
|
|
function setPeriod(period) {
|
|
|
|
|
sendMessage(`{"cmd":"var_cycle","period":${period}}`);
|
|
|
|
|
}
|
|
|
|
|
function addVarTableRow(name, value) {
|
|
|
|
|
// create a row in the table that contains two <td>s, one for the var_name and one for its value.
|
|
|
|
|
let tr = document.createElement('tr');
|
|
|
|
|
let td1 = document.createElement('td');
|
|
|
|
|
td1.textContent = `${name}`;
|
|
|
|
|
let td2 = document.createElement('td');
|
|
|
|
|
td2.textContent = `${value}`;
|
|
|
|
|
td2.className = "values";
|
|
|
|
|
tr.appendChild(td1);
|
|
|
|
|
tr.appendChild(td2);
|
|
|
|
|
varTable.appendChild(tr);
|
|
|
|
|
}
|
|
|
|
|
function addVariable(name, value) {
|
|
|
|
|
sendMessage(`{"cmd":"var_add","var_name": "${name}"}`);
|
|
|
|
|
addVarTableRow(name, value);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var varTable = document.querySelector('table.variables');
|
2019-11-06 19:18:29 +00:00
|
|
|
var ws = new WebSocket('ws://localhost:8888/api/ws/VariableServer');
|
2019-10-23 16:58:19 +00:00
|
|
|
|
|
|
|
|
// WebSocket Event Handlers
|
|
|
|
|
ws.onopen = function(e) {
|
|
|
|
|
//log("Connection established");
|
|
|
|
|
setPeriod(100);
|
|
|
|
|
addVarTableRow("Time", 0.0);
|
|
|
|
|
addVariable("dyn.cannon.pos[0]", 0.0);
|
|
|
|
|
addVariable("dyn.cannon.pos[1]", 0.0);
|
|
|
|
|
addVariable("dyn.cannon.vel[0]", 0.0);
|
|
|
|
|
addVariable("dyn.cannon.vel[1]", 0.0);
|
|
|
|
|
addVariable("dyn.cannon.time", 0.0);
|
|
|
|
|
addVariable("dyn.cannon.timeRate", 0.0);
|
|
|
|
|
addVariable("dyn.cannon.impact", 0.0);
|
|
|
|
|
addVariable("I.dont.exist", 0.0);
|
|
|
|
|
sendMessage("{\"cmd\":\"var_unpause\"}");
|
|
|
|
|
};
|
|
|
|
|
ws.onmessage = function(e) {
|
|
|
|
|
//log("Recieved : " + e.data);
|
|
|
|
|
let msg = JSON.parse(e.data);
|
|
|
|
|
if (msg.msg_type == "values") {
|
|
|
|
|
let valueNodes = varTable.getElementsByClassName("values");
|
|
|
|
|
valueNodes[0].textContent = msg.time;
|
|
|
|
|
for (let i = 0; i < msg.values.length; i++ ) {
|
|
|
|
|
valueNodes[i+1].textContent = msg.values[i];
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
ws.onerror = function(e) {
|
|
|
|
|
console.log("WebSocket Error: " , e);
|
|
|
|
|
handleErrors(e);
|
|
|
|
|
};
|
|
|
|
|
ws.onclose = function(e) {
|
|
|
|
|
console.log("Connection closed", e);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
