mirror of
https://github.com/Doodle3D/Doodle3D-API
synced 2024-12-22 22:03:48 +01:00
update examples
This commit is contained in:
parent
50167a686a
commit
84aa7ee8bf
@ -1,90 +1,28 @@
|
|||||||
import { Doodle3DManager } from 'src/index.js';
|
import { Doodle3DManager } from 'src/index.js';
|
||||||
|
|
||||||
const doodle3DManager = new Doodle3DManager();
|
const doodle3DManager = new Doodle3DManager();
|
||||||
const TABLE = document.getElementById('table');
|
doodle3DManager.setAutoUpdate(true, 1000);
|
||||||
|
|
||||||
doodle3DManager.addEventListener('boxappeared', ({ box }) => {
|
doodle3DManager.addEventListener('boxappeared', ({ box }) => {
|
||||||
let row = document.createElement('tr');
|
box.setAutoUpdate(true);
|
||||||
row.id = box.boxData.wifiboxid;
|
|
||||||
row.style.color = 'black';
|
|
||||||
|
|
||||||
let id = document.createElement('td');
|
box.addEventListener('connect', () => {
|
||||||
let state = document.createElement('td');
|
console.log('connect to box', box);
|
||||||
let localIP = document.createElement('td');
|
|
||||||
let bed = document.createElement('td');
|
|
||||||
let bedTarget = document.createElement('td');
|
|
||||||
let bufferedLines = document.createElement('td');
|
|
||||||
let currentLine = document.createElement('td');
|
|
||||||
let hasControl = document.createElement('td');
|
|
||||||
let hotend = document.createElement('td');
|
|
||||||
let hotendTarget = document.createElement('td');
|
|
||||||
let totalLines = document.createElement('td');
|
|
||||||
|
|
||||||
row.appendChild(id);
|
|
||||||
row.appendChild(localIP);
|
|
||||||
row.appendChild(state);
|
|
||||||
row.appendChild(currentLine);
|
|
||||||
row.appendChild(bufferedLines);
|
|
||||||
row.appendChild(totalLines);
|
|
||||||
row.appendChild(hotend);
|
|
||||||
row.appendChild(hotendTarget);
|
|
||||||
row.appendChild(bed);
|
|
||||||
row.appendChild(bedTarget);
|
|
||||||
row.appendChild(hasControl);
|
|
||||||
|
|
||||||
id.innerHTML = box.boxData.wifiboxid;
|
|
||||||
localIP.innerHTML = box.boxData.localip;
|
|
||||||
|
|
||||||
TABLE.appendChild(row);
|
|
||||||
|
|
||||||
function update ({state: data}) {
|
|
||||||
state.innerHTML = data.state;
|
|
||||||
|
|
||||||
if (data.state !== 'disconnected' && data.state !== 'connecting' && data.state !== 'unknown') {
|
|
||||||
bed.innerHTML = data.bed;
|
|
||||||
bedTarget.innerHTML = data.bed_target;
|
|
||||||
bufferedLines.innerHTML = data.buffered_lines;
|
|
||||||
currentLine.innerHTML = data.current_line;
|
|
||||||
hasControl.innerHTML = data.has_control;
|
|
||||||
hotend.innerHTML = data.hotend;
|
|
||||||
hotendTarget.innerHTML = data.hotend_target;
|
|
||||||
state.innerHTML = data.state;
|
|
||||||
totalLines.innerHTML = data.total_lines;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
bed.innerHTML = '';
|
|
||||||
bedTarget.innerHTML = '';
|
|
||||||
bufferedLines.innerHTML = '';
|
|
||||||
currentLine.innerHTML = '';
|
|
||||||
hasControl.innerHTML = '';
|
|
||||||
hotend.innerHTML = '';
|
|
||||||
hotendTarget.innerHTML = '';
|
|
||||||
totalLines.innerHTML = '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (box.alive) {
|
|
||||||
box.addEventListener('update', update);
|
|
||||||
}
|
|
||||||
|
|
||||||
box.addEventListener('connect', (event) => {
|
|
||||||
row.style.color = 'black';
|
|
||||||
|
|
||||||
box.addEventListener('update', update);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
box.addEventListener('disconnect', (event) => {
|
box.addEventListener('disconnect', () => {
|
||||||
row.style.color = 'gray';
|
console.log('disonnect to box', box);
|
||||||
|
})
|
||||||
|
|
||||||
box.removeEventListener('update', update);
|
box.addEventListener('update', ({ state }) => {
|
||||||
|
console.log(state);
|
||||||
});
|
});
|
||||||
|
|
||||||
box.setAutoUpdate(true, 1000);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
doodle3DManager.addEventListener('boxdisappeared', ({ box }) => {
|
doodle3DManager.addEventListener('boxdisappeared', ({ box }) => {
|
||||||
let row = document.getElementById(box.boxData.wifiboxid);
|
box.setAutoUpdate(false);
|
||||||
TABLE.removeChild(row);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
doodle3DManager.setAutoUpdate(true, 1000);
|
doodle3DManager.addEventListener('boxeschanged', ({ boxes }) => {
|
||||||
|
|
||||||
|
});
|
||||||
|
@ -1,45 +1,14 @@
|
|||||||
<!DOCTYPE>
|
<!DOCTYPE>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
|
|
||||||
<title>Doodle3D Box</title>
|
<title>Doodle3D Box</title>
|
||||||
|
|
||||||
<style>
|
|
||||||
table, th, td {
|
|
||||||
border: 1px solid #dddddd;
|
|
||||||
font-size: 15px;
|
|
||||||
font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif;
|
|
||||||
line-height: 20px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<script type="text/javascript" src="../jspm_packages/system.js"></script>
|
<script type="text/javascript" src="../jspm_packages/system.js"></script>
|
||||||
<script type="text/javascript" src="../config.js"></script>
|
<script type="text/javascript" src="../config.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
System.import('./app.js');
|
System.import('./app.js');
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<table style="width:100%">
|
|
||||||
<tbody id="table">
|
|
||||||
<tr>
|
|
||||||
<th>ID</th>
|
|
||||||
<th>Local IP</th>
|
|
||||||
<th>State</th>
|
|
||||||
<th>Current Line</th>
|
|
||||||
<th>Buffered Lines</th>
|
|
||||||
<th>Total Lines</th>
|
|
||||||
<th>Hotend</th>
|
|
||||||
<th>Hotend Target</th>
|
|
||||||
<th>Bed</th>
|
|
||||||
<th>Bed Target</th>
|
|
||||||
<th>Has Control</th>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
Loading…
Reference in New Issue
Block a user