You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
91 lines
2.9 KiB
91 lines
2.9 KiB
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta charset="utf-8"> |
|
<title>HEAT</title> |
|
<link rel="stylesheet" href="main.css"> |
|
<script> |
|
var gateway = 'ws://' + window.location.hostname + '/ws'; |
|
var websocket; |
|
|
|
function initWebSocket() { |
|
console.log('Trying to open a WebSocket connection...'); |
|
websocket = new WebSocket(gateway); |
|
websocket.onopen = onOpen; |
|
websocket.onclose = onClose; |
|
websocket.onmessage = onMessage; // <-- add this line |
|
} |
|
|
|
function onOpen(event) { |
|
console.log('Connection opened'); |
|
} |
|
|
|
function onClose(event) { |
|
console.log('Connection closed'); |
|
setTimeout(initWebSocket, 2000); |
|
} |
|
|
|
function onMessage(event) { |
|
var head = String(event.data).slice(0, 3); |
|
var data = String(event.data).slice(3); |
|
console.log([head, data]); |
|
if(head == "h1c"){ |
|
document.getElementById("temp1_current").innerHTML = data; |
|
}else if(head == "h2c"){ |
|
document.getElementById("temp2_current").innerHTML = data; |
|
}else if(head == "h1t"){ |
|
document.getElementById("temp1_target_report").innerHTML = data; |
|
}else if(head == "h2t"){ |
|
document.getElementById("temp2_target_report").innerHTML = data; |
|
} |
|
} |
|
|
|
window.addEventListener('load', onLoad); |
|
|
|
function onLoad(event) { |
|
initWebSocket(); |
|
} |
|
|
|
function update_text(element){ |
|
var power = document.getElementById("power_slider").value; |
|
document.getElementById("now_var").innerHTML = power; |
|
} |
|
|
|
function send_val(element){ |
|
var data |
|
if(element == document.getElementById("temp1_target")){ |
|
data = "h1t" + document.getElementById("temp1_target").value |
|
}else if(element == document.getElementById("temp2_target")){ |
|
data = "h2t" + document.getElementById("temp2_target").value |
|
} |
|
websocket.send(data); |
|
} |
|
</script> |
|
</head> |
|
<body> |
|
<dev> |
|
<table> |
|
<tr> |
|
<td class="font td_title">HEAT 0</td> |
|
<td class="font td_title">current</td> |
|
<td class="font td_data" id="temp1_current">0</td> |
|
<td class="font td_title">target</td> |
|
<td class="font td_data" id="temp1_target_report">0</td> |
|
<td class="font"> |
|
<input type="text" id="temp1_target" min="0" max="300" placeholder="target temp" onchange="send_val(this)"> |
|
</td> |
|
</tr> |
|
<tr> |
|
<td class="font td_title">HEAT 1</td> |
|
<td class="font td_title">current</td> |
|
<td class="font td_data" id="temp2_current">0</td> |
|
<td class="font td_title">target</td> |
|
<td class="font td_data" id="temp2_target_report">0</td> |
|
<td class="font"> |
|
<input type="text" id="temp2_target" min="0" max="300" placeholder="target temp" onchange="send_val(this)"> |
|
</td> |
|
</tr> |
|
</table> |
|
</dev> |
|
</body> |
|
</html> |