pyren/pyren3/web_html/bus_monitor.html
2024-06-08 21:37:08 +03:00

44 lines
966 B
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Ecu Watcher</title>
<script src="/static/vue.js"></script>
<script src="/static/socket.io.js"></script>
</head>
<body>
<div id="app">
<div>
<div v-for="(key, index) in keys" :key="key">
{{ key }}: {{ values[index] }}
</div>
</div>
</div>
<script>
const socket = io();
const app = Vue.createApp({
data() {
return {
keys: [],
values: [],
};
},
methods: {},
mounted() {
socket.on("setKeys", (msg) => {
this.keys = msg.keys;
});
socket.on("frame", (msg) => {
console.log(msg)
this.values = msg.frame;
});
},
});
app.mount("#app");
</script>
</body>
</html>