Hello!
First post.
Im a complete noob and i want the value from a weight indicator to show in Home Assistant.
My plan is to later somehow get that value to show as an overlay in Blue Iris.
I have searched the forums but i dont understand how to make a sensor for this.
“This page uses WebSockets. Weight value and status is polled from the indicator in JSON format each 14 second
This is done by opening a websocket to the root address (or ‘/ws’) and writing the command ‘J’ which will
reply with a JSON formatted string containing real time data and status for the indicator
The indicator will normally send any change in weight or status as it happens or an update every 12 second”
Thank you.
Indicator IP is 192.168.1.27
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<link rel="stylesheet" type="text/css" href="css/siimple.min.css" />
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="shortcut icon" href="img/favicon.png"/>
<title>47-11 HTTP Server</title>
</head>
<body>
<ul class="navbar">
<li><a class="active" href="index.shtml">Home</a></li>
<li><a href="settings.shtml">Settings</a></li>
<li><a href="test.shtml">TestBench</a></li>
<li><a href="about.html">About</a></li>
</ul>
<div class="grid indicator">
<h1>Indicator</h1>
<div style="background-color:#282828;border-radius: 5px;text-align:right;" >
<div style="text-align:center; ">
<w class="stat_f">
<div class="row">
<div class="column" id="stat_net">NET</div>
<div class="column" id="stat_stab">STABLE</div>
<div class="column" id="stat_3"> </div>
<div class="column" id="stat_err">ERR</div>
</div>
</w>
</div>
<div style="text-align:right;" id="weight_num">
<w class="wgt_f"><br></w><w class="unit_f"></w><!-- <w class="wgt_f"> -123.45</w> <w class="unit_f">kg</w> -->
</div>
<div class="row">
<div class="column">
<a onclick="SetTare();" class="btn btn-3">
<span class="txt">>T<</span>
<span ></span>
</a>
</div>
<div class="column">
<a onclick="NullFunc();" class="btn btn-3">
<span class="txt">    </span>
<span ></span>
</a>
</div>
<div class="column">
<a onclick="NullFunc();" class="btn btn-3">
<span class="txt">    </span>
<span ></span>
</a>
</div>
<div class="column">
<a onclick="SetZero();" class="btn btn-3">
<span class="txt">>0<</span>
<span ></span>
</a>
</div>
</div>
</div>
</div>
<div class="grid main">
<tr><br></tr>
<h1>Connection status</h1>
<div id="status_box" class="alert alert-info">Loading..</div>
<h1>Info</h1>
<table class="table table-striped">
<tr>
<td><b>Status:</b></td>
<td id="status"></td>
</tr>
<tr>
<td><b>Maxweight:</b></td>
<td> 50.00 t </td>
</tr>
<tr>
<td><b>Type and serialnumber:</b></td>
<td>47-11-D03P-xxxxxx [P 1.4r Jun 4 2024]</td>
</tr>
<tr>
<td><b>MAC:</b></td>
<td>xx:x:xx:xx:xx:xx</td>
</tr>
</table>
<h1> </h1>
<h1>Information</h1>
<p>This page uses WebSockets. Weight value and status is polled from the indicator in JSON format each 14 second</p>
<p>This is done by opening a websocket to the root address (or '/ws') and writing the command 'J' which will </p>
<p>reply with a JSON formatted string containing real time data and status for the indicator </p>
<p>The indicator will normally send any change in weight or status as it happens or an update every 12 second</p>
</div>
<script>
var ws;
var retries;
var unitstring;
var isStarted;
var lastUpdate;
var myPollInterval;
var errBlink;
var WeightHasError;
window.onbeforeunload = function()
{
if(ws != undefined)
{
ws.onclose = function () {}; // disable onclose handler first
ws.close();
}
};
window.onload = function() {
WeightHasError = true;
var aDate = new Date();
lastUpdate = aDate.getTime();
console.log('onLoad()');
setTimeout(function(){wsProcess(); }, 200);
if(errBlink == undefined)errBlink = setInterval(function(){blinkWeight(); }, 500);
//setInterval(function(){wsProcess(); }, 200);
isStarted = 0;
}
function NullFunc()
{
console.log("Null func");
}
function SetZero()
{
console.log("Set zero");
wsWrite('Z');
}
function SetTare()
{
console.log("Set Tare");
wsWrite('T');
}
function wsProcess()
{
console.log("wsProcess(), isStarted =" + isStarted);
if(isStarted === 0)
{
wsOpen();
setTimeout(function(){wsProcess(); }, 200);
}
else if(isStarted === 1)
{
checkPolling();
setTimeout(function(){wsProcess(); }, 200);
}
else
{
console.log('wsProcess(), is idle...');
var now = new Date().getTime();
var diff = Math.floor((now - lastUpdate)/1000);
if (ws === undefined || ws.readyState >= 2)
{
setMsg("error", "WebSocket is closed, trying to re-connect...");
clearwsData();
setTimeout(function(){wsProcess(); }, 2000);
}
else
{
if(diff >12)
{
setMsg("error", "WebSocket is open, last update: " +diff + " seconds ago");
}
else if(diff>4)
{
setMsg("info", "WebSocket is open, last update: " +diff + " seconds ago");
}
else
{
setMsg("done", "WebSocket is open.");
}
setTimeout(function(){wsProcess(); }, 1000);
}
}
}
function setMsg(cls, text) {
sbox = document.getElementById('status_box');
sbox.className = "alert alert-" + cls;
sbox.innerHTML = text;
console.log('setMsg(): '+text);
}
function startPolling() {
isStarted = 2;
console.log('startPolling()');
// send a request directly
wsWrite('J');
// clear previous interval in case its used
if(myPollInterval != undefined)clearInterval(myPollInterval);
// then check for new JSON data frame every 14 seconds to avoid websocket beeing closed (indicator has 12 sec)
myPollInterval = setInterval(function(){checkPolling(); }, 14000);
}
function checkPolling() {
console.log('checkPolling()');
var aDate = new Date();
// check id last json data is over 2.5 seconds old, then in that case try to update
if((aDate.getTime() - lastUpdate) > 2500)
{
console.log('checkPolling() > 2500ms, sending write command');
// send a request to get a new update
wsWrite('J');
}
}
function blinkWeight()
{
console.log('blinkWeight()');
if(WeightHasError)
{
if(document.getElementById('weight_num').style.visibility == "visible")document.getElementById('weight_num').style.visibility = "hidden";
else document.getElementById('weight_num').style.visibility = "visible";
}
}
function onMessage(evt) {
retries = 0;
console.log('OnMessage:data='+evt.data);
try
{
var stats = JSON.parse(evt.data);
unitstring = '<\w><w class="unit_f">'+ stats.unit+' <\w>';
document.getElementById('weight_num').style.visibility = "visible";
clearInterval(errBlink);
if(stats.net==1)document.getElementById('stat_net').style.color = "white";
else document.getElementById('stat_net').style.color = "#282828";
if(stats.error==1)
{
document.getElementById('stat_err').style.color = "white";
WeightHasError = true;
errBlink = setInterval(function(){blinkWeight(); }, 500);
}
else
{
WeightHasError = false;
document.getElementById('stat_err').style.color = "#282828";
}
if(stats.unstab==1)document.getElementById('stat_stab').style.color = "#282828";
else document.getElementById('stat_stab').style.color = "white";
if((stats.unstab==1) || (stats.error==1))
{
document.getElementById('weight_num').innerHTML = '<w class="wgt_f_u">'+stats.weight+ unitstring;
}
else
{
document.getElementById('weight_num').innerHTML = '<w class="wgt_f">'+stats.weight + unitstring;
}
document.getElementById('status').innerHTML = stats.status;
var aDate = new Date();
lastUpdate = aDate.getTime();
}
catch(e)
{
console.log('JSON:Parse error!');
}
}
function wsClose() {
console.log('wsClose()');
wsOpen();
}
function wsOpen() {
console.log('wsOpen()');
if (ws === undefined || ws.readyState != 0)
{
if (retries && ws)
{
console.log('wsOpen()->retry()');
setMsg("error", "WebSocket timeout, retrying..");
}
else
{
console.log('wsOpen()->Open()');
setMsg("info", "Opening WebSocket..");
}
console.log('wsOpen()->New()');
var uri = "/ws"
ws = new WebSocket("ws://" + location.host + uri);
ws.binaryType = 'arraybuffer';
ws.onopen = function(evt) { retries = 0; setMsg("done", "WebSocket is open."); console.log(evt.data);};
ws.onerror = function(evt) { setMsg("error", "WebSocket error!");console.log("Websocket Error: ", evt); clearwsData();};
ws.onmessage = function(evt) { onMessage(evt); };
ws.onclose=function(evt){wsClose();}
retries = 0;
isStarted = 1;
}
}
function wsWrite(data) {
if(ws === undefined)console.log('wsWrite()->no websocket!');
else
{
if (ws.readyState == 3 || retries++ > 5)
{
if (ws.readyState === 3)console.log('wsWrite()->ws.isClosed');
else ws.close();
clearwsData();
isStarted = 0;
console.log('wsWrite()->retries > max');
wsOpen();
}
else if (ws.readyState == 1)
{
console.log('wsWrite('+data+')');
ws.send(data);
}
else
{
clearwsData();
console.log('wsWrite()->unknown state: '+ws.readyState);
}
}
}
function clearwsData()
{
console.log('clearwsData()');
isStarted = 0;
if (typeof document.getElementById('weight_num') !== 'undefined')
{
document.getElementById('weight_num').innerHTML = "<w class=\"wgt_f\"> </w><w class=\"unit_f\"> </w>";
document.getElementById('status').innerHTML = "No connection!";
document.getElementById('stat_err').style.color = "white";
document.getElementById('stat_stab').style.color = "#282828";
document.getElementById('stat_net').style.color = "#282828";
}
}
</script>
</body>
</html>
