tools.js
A tools.js JavaScript facilitates programming, making code more transparent.
Examples
Establishing WebSocket Connection.
The system can handle a maximum of 4 WebSocket connections simultaneously!
startWS(0);
This function establishes a WebSocket connection. It does not handle connection loss.
startWS(1);
Uses the ReconnectingWebSocket('ws://....'); function to connect. Automatically reconnects after unsuccessful attempts. Takes ~10 sec.
startWS(2);
Also uses the above function, combined with the HEART command. If no (HEART) message is received from the module within 2.5 seconds, it reconnects.
startWS(3);
Creates a connection. If the page loses focus, it closes the connection; if it regains focus, it reopens it.
startWS(4);
Creates a connection if the value of document.getElementById("wspw").value matches the WebSocket password set in the Setup/Password menu. The function onMessage(msg) works even without a match.
closeWS();
Closes the connection.
sendWS("Message");
Sends a message to the module.
function onOpen() { }
Executes after successful connection.
function onClose() { }
Executes if the connection is lost.
function onMessage(msg) { }
Executes when a message is received from the module.
function onExit() { }
Executes before the page is closed.
These functions should only be added to the code if needed. Omitting any of them will not cause errors.
<![CDATA[
<html>
<body>
<H1>WebSocket startWS(2)</H1>
<H2 id="con"></H2>
<button type="button" onclick="press();">Send</button>
<br><br>
<H2 id="wsdata"></H2>
<script type="text/javascript" src="tools.js"></script>
<script>
startWS(2);
function onOpen() {
document.getElementById("con").innerHTML = "CONNECTED";
document.getElementById("con").style.color = "#00FF00";
sendWS("STR[0]=blablabla");
sendWS("LED(ON)");
}
function onClose() {
document.getElementById("con").innerHTML = "DISCONNECTED";
document.getElementById("con").style.color = "#FF0000";
}
function onExit() {
sendWS("LED(OFF)");
}
function onMessage(msg) {
document.getElementById("wsdata").innerHTML = msg;
}
function press() {
document.getElementById("wsdata").innerHTML = "";
sendWS("STR[0]@")
}
</script>
</body>
</html>
]]>
<![CDATA[
<html>
<body>
<H1>WebSocket startWS(3)</H1>
<H2 id="con"></H2>
<br><br>
<script type="text/javascript" src="tools.js"></script>
<script>
startWS(3);
function onOpen() {
document.getElementById("con").innerHTML = "CONNECTED";
document.getElementById("con").style.color = "#00FF00";
sendWS("LED(ON)");
}
function onClose() {
document.getElementById("con").innerHTML = "DISCONNECTED";
document.getElementById("con").style.color = "#FF0000";
sendWS("LED(OFF)");
}
</script>
</body>
</html>
]]>
<![CDATA[
<html>
<body>
<H1>WebSocket startWS(4)</H1>
<input type="password" id="wspw" placeholder="WS password" autocomplete="off"/>
<button type="button" onclick="startWS(4);">Connect</button>
<br><br>
<button type="button" onclick="sendWS('LED(TOGGLE)@');">LED TOGGLE</button>
<br><br>
<H2 id="wsdata"></H2>
<script type="text/javascript" src="tools.js"></script>
<script>
function onMessage(msg) {
document.getElementById("wsdata").innerHTML = msg;
}
</script>
</body>
</html>
]]>
Loading File into Variable.
getFile("filename");
The function returns the content of the file. If the file does not exist, "Error 404" is returned.
STR[0]=blablabla|
STR[0]#example.txt
<![CDATA[
<html>
<body>
<H1>FILE</H1>
<H2 id="str"></H2>
<script type="text/javascript" src="tools.js"></script>
<script>
var filedata = getFile("example.txt");
document.getElementById("str").innerHTML = filedata;
</script>
</body>
</html>
]]>
Sdiv
You can create a label (Slabel), button (Sbutton), toggle switch (Stoggle), indicator lamp (Slamp), slider (Srange), status bar (Sbar), analog gauge (Smeter), color picker (Scolor), graph (Sgraph), and popup alert (Salert) within a fully customizable container (Sdiv). Examples are available after uploading the Sdemo.tar file located in the plugins folder.