2022-11-19 18:52:01 +01:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>{% block title %} {% endblock %}</title>
|
|
|
|
|
<script src="/dist/socket.io.min.js" crossorigin="anonymous"></script>
|
|
|
|
|
<script src="/dist/server.js" crossorigin="anonymous"></script>
|
|
|
|
|
<script src="/dist/mustache.js" crossorigin="anonymous"></script>
|
|
|
|
|
<script src="/dist/plotly-2.16.1.min.js" crossorigin="anonymous"></script>
|
|
|
|
|
<script type="text/javascript" charset="utf-8">
|
|
|
|
|
var socket = null;
|
|
|
|
|
function setup() {
|
|
|
|
|
socket = io();
|
|
|
|
|
socket.on('connect', function() {
|
|
|
|
|
const engine = socket.io.engine;
|
|
|
|
|
socket.emit('new client');
|
|
|
|
|
engine.on('packet', ({ type, data }) => {
|
|
|
|
|
// called for each packet received
|
|
|
|
|
/* console.log('received packet: '+ type + data); */
|
|
|
|
|
});
|
|
|
|
|
// receive a message from the client
|
|
|
|
|
socket.on("state", (data) => {
|
|
|
|
|
applyState(data);
|
|
|
|
|
});
|
2023-02-22 03:58:53 +01:00
|
|
|
socket.on("eval output", (data) => {
|
|
|
|
|
document.getElementById('eval-output').value = data;
|
|
|
|
|
});
|
2022-11-19 18:52:01 +01:00
|
|
|
socket.on("sensors", (data) => {
|
|
|
|
|
add_plot_data(data);
|
|
|
|
|
render_sensors(data);
|
|
|
|
|
});
|
|
|
|
|
socket.on("sensor history", (...data) => {
|
2023-02-21 19:23:12 +01:00
|
|
|
// first clear everything
|
|
|
|
|
plot_data = {};
|
|
|
|
|
// then add new data
|
2022-11-19 18:52:01 +01:00
|
|
|
enable_draw = false;
|
|
|
|
|
data.forEach(add_plot_data);
|
|
|
|
|
enable_draw = true;
|
|
|
|
|
render_plot();
|
2023-02-21 19:23:12 +01:00
|
|
|
});
|
|
|
|
|
// sane default?
|
|
|
|
|
socket.emit('get sensors history', 200);
|
2022-11-19 18:52:01 +01:00
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
window.onload = setup;
|
|
|
|
|
</script>
|
|
|
|
|
<link href="/dist/style.css" rel="stylesheet">
|
|
|
|
|
<link href="/dist/font-awesome.min.css" rel="stylesheet">
|
|
|
|
|
<link href="/dist/bulma.min.css" rel="stylesheet">
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
{% raw %}
|
|
|
|
|
{% endraw %}
|
|
|
|
|
<div id="manual-modal"></div>
|
2023-02-21 14:02:42 +01:00
|
|
|
<div id="question-modal"></div>
|
2022-11-19 18:52:01 +01:00
|
|
|
<div class="columns">
|
|
|
|
|
<div class="column is-one-fifth" id="sidebar">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="column">
|
|
|
|
|
<div class="block">
|
|
|
|
|
{% block content %} {% endblock %}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
