267 lines
8.7 KiB
HTML
267 lines
8.7 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width,initial-scale=0.8"/>
|
||
|
|
<!-- http://paletton.com/#uid=13w0u0kllllaFw0g0qFqFg0w0aF -->
|
||
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
|
||
|
|
<style type="text/css">
|
||
|
|
/* background-color: #486e88; color: #e0e0e0; */}
|
||
|
|
.widget-unset { color: #888; /* #708ea4; */ }
|
||
|
|
#wrapper { 100%;}
|
||
|
|
html, body {
|
||
|
|
height: 100%;
|
||
|
|
overflow: auto;
|
||
|
|
/* color: #e0e0e0; */
|
||
|
|
}
|
||
|
|
.wrapper-ok { /*background-color: #29516D;*/}
|
||
|
|
.wrapper-error { background-color: #fee; /*#aa5739;*/}
|
||
|
|
#wrapper { width: 90%; height: 100%;}
|
||
|
|
.button {
|
||
|
|
/* text-align: center; */
|
||
|
|
/* text-decoration: none; */
|
||
|
|
/* display: inline-block; */
|
||
|
|
/* font-size: 16px; */
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.log-delete {
|
||
|
|
vertical-align: 5px;
|
||
|
|
margin-left:5px;
|
||
|
|
}
|
||
|
|
.table-container {
|
||
|
|
max-height: 10rem;
|
||
|
|
overflow: auto;
|
||
|
|
}
|
||
|
|
.slider {
|
||
|
|
width: 90%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.slider::-moz-range-thumb {
|
||
|
|
border: 0px;
|
||
|
|
height: 24px;
|
||
|
|
width: 24px;
|
||
|
|
border-radius: 100px;
|
||
|
|
background: #3298dc;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.slider::-moz-range-progress {
|
||
|
|
background-color: #3298dc;
|
||
|
|
height: 12px;
|
||
|
|
border-radius: 100px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.slider::-moz-range-track {
|
||
|
|
width: 100%;
|
||
|
|
height: 12px;
|
||
|
|
border-radius: 100px;
|
||
|
|
background-color: #eee;
|
||
|
|
}
|
||
|
|
.slider-value {
|
||
|
|
margin-left:10px;
|
||
|
|
width: 10%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.button {
|
||
|
|
-webkit-transition-duration: 0.4s; /* Safari */
|
||
|
|
transition-duration: 0.4s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.widget {
|
||
|
|
align: center;
|
||
|
|
vertical-align: middle;
|
||
|
|
}
|
||
|
|
|
||
|
|
.button:hover {
|
||
|
|
/* background-color: #123752; */
|
||
|
|
}
|
||
|
|
|
||
|
|
/* .with-border { */
|
||
|
|
/* border-width: .1rem; */
|
||
|
|
/* border-color: #ccc; #f8f8f8; */
|
||
|
|
/* border-style: solid; */
|
||
|
|
/* padding: 5px; */
|
||
|
|
/* margin: 10px; */
|
||
|
|
/* } */
|
||
|
|
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.2/mqttws31.min.js" type="text/javascript"></script>
|
||
|
|
<script>
|
||
|
|
// Called after form input is processed
|
||
|
|
function startConnect() {
|
||
|
|
// Generate a random client ID
|
||
|
|
clientID = "clientID-" + parseInt(Math.random() * 100);
|
||
|
|
document.getElementById("wrapper").classList.add("wrapper-error");
|
||
|
|
document.getElementById("wrapper").classList.remove("wrapper-ok");
|
||
|
|
|
||
|
|
// Fetch the hostname/IP address and port number from the form
|
||
|
|
host = "bojack"
|
||
|
|
port = 8080;
|
||
|
|
|
||
|
|
// Print output for the user in the messages div
|
||
|
|
document.getElementById("messages").innerHTML += '<span>Connecting to: ' + host + ' on port: ' + port + '</span><br/>';
|
||
|
|
document.getElementById("messages").innerHTML += '<span>Using the following client value: ' + clientID + '</span><br/>';
|
||
|
|
|
||
|
|
// Initialize new Paho client connection
|
||
|
|
client = new Paho.MQTT.Client(host, Number(port), clientID);
|
||
|
|
|
||
|
|
// Set callback handlers
|
||
|
|
client.onConnectionLost = onConnectionLost;
|
||
|
|
client.onMessageArrived = onMessageArrived;
|
||
|
|
|
||
|
|
// Connect the client, if successful, call onConnect function
|
||
|
|
client.connect({
|
||
|
|
onSuccess: onConnect,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// Called when the client connects
|
||
|
|
function onConnect() {
|
||
|
|
document.getElementById("wrapper").classList.remove("wrapper-error");
|
||
|
|
document.getElementById("wrapper").classList.add("wrapper-ok");
|
||
|
|
var subWidgets = document.getElementsByClassName("subscriber");
|
||
|
|
var topics = new Set()
|
||
|
|
for (var i = 0; i < subWidgets.length; i++) {
|
||
|
|
var c = subWidgets.item(i);
|
||
|
|
var topic = c.getAttribute('data-sub-topic');
|
||
|
|
topics.add(topic);
|
||
|
|
c.classList.add('widget-unset');
|
||
|
|
}
|
||
|
|
for (let topic of topics)
|
||
|
|
{
|
||
|
|
client.subscribe(topic);
|
||
|
|
}
|
||
|
|
// Subscribe to the requested topic
|
||
|
|
}
|
||
|
|
|
||
|
|
// Called when the client loses its connection
|
||
|
|
function onConnectionLost(responseObject) {
|
||
|
|
document.getElementById("wrapper").classList.remove("wrapper-ok");
|
||
|
|
document.getElementById("wrapper").classList.add("wrapper-error");
|
||
|
|
if (responseObject.errorCode !== 0) {
|
||
|
|
console.log("onConnectionLost: " + responseObject.errorMessage);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function getByPath(obj, path) {
|
||
|
|
var current=obj;
|
||
|
|
path.split('.').forEach(function(p){ current = current[p]; });
|
||
|
|
return current;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Called when a message arrives
|
||
|
|
function onMessageArrived(message) {
|
||
|
|
var views = document.getElementsByClassName(message.destinationName + "-value");
|
||
|
|
for (var i = 0 ; i < views.length; i++) {
|
||
|
|
var view = views.item(i);
|
||
|
|
if (view.classList.contains("update-policy-replace-content")) {
|
||
|
|
view.innerHTML = message.payloadString;
|
||
|
|
} else if(view.classList.contains("update-policy-append-content")) {
|
||
|
|
view.innerHTML += message.payloadString + "<br/>";
|
||
|
|
view.scrollTop = view.scrollHeight;
|
||
|
|
} else if(view.classList.contains("update-policy-add-row")) {
|
||
|
|
var now = (new Date()).toLocaleTimeString();
|
||
|
|
view.innerHTML = "<tr><td>"+ now + "</td><td>" +message.payloadString + "</td></tr>" + view.innerHTML;
|
||
|
|
} else if(view.classList.contains("update-policy-update-value")) {
|
||
|
|
jsonPath = view.getAttribute('data-value-path');
|
||
|
|
if (jsonPath) {
|
||
|
|
view.value = getByPath(JSON.parse(message.payloadString),
|
||
|
|
jsonPath);
|
||
|
|
} else {
|
||
|
|
view.value = message.payloadString;
|
||
|
|
}
|
||
|
|
view.onchange();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
var widgets = document.querySelectorAll("[data-topic='" + message.destinationName + "']");
|
||
|
|
for (var i = 0 ; i < widgets.length; i++) {
|
||
|
|
widgets.item(i).classList.remove("widget-unset");
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
// Called when the disconnection button is pressed
|
||
|
|
function startDisconnect() {
|
||
|
|
client.disconnect();
|
||
|
|
document.getElementById("messages").innerHTML += '<span>Disconnected</span><br/>';
|
||
|
|
updateScroll(); // Scroll to bottom of window
|
||
|
|
}
|
||
|
|
|
||
|
|
// Updates #messages div to auto-scroll
|
||
|
|
function updateScroll() {
|
||
|
|
var element = document.getElementById("messages");
|
||
|
|
element.scrollTop = element.scrollHeight;
|
||
|
|
}
|
||
|
|
|
||
|
|
function publish(topic, value) {
|
||
|
|
var message = new Paho.MQTT.Message(value);
|
||
|
|
message.destinationName = topic;
|
||
|
|
client.send(message);
|
||
|
|
}
|
||
|
|
|
||
|
|
function updateContents(id, value) {
|
||
|
|
elem = document.getElementById(id);
|
||
|
|
elem.innerHTML = value;
|
||
|
|
}
|
||
|
|
|
||
|
|
function init() {
|
||
|
|
startConnect();
|
||
|
|
|
||
|
|
var sliders = document.getElementsByClassName("slider");
|
||
|
|
|
||
|
|
for (var i = 0 ; i < sliders.length; i++) {
|
||
|
|
var slider = sliders.item(i);
|
||
|
|
slider.onchange = function() {
|
||
|
|
document.getElementById(this.id + "-textual").innerHTML =
|
||
|
|
this.value;
|
||
|
|
};
|
||
|
|
slider.oninput = function() {
|
||
|
|
this.onchange()
|
||
|
|
var topic = this.getAttribute('data-pub-topic');
|
||
|
|
publish(topic, this.value);
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
var logDeletes = document.getElementsByClassName("log-delete");
|
||
|
|
|
||
|
|
for (var i = 0 ; i < logDeletes.length; i++) {
|
||
|
|
var elem = logDeletes.item(i);
|
||
|
|
elem.onclick = function() {
|
||
|
|
console.log(this.id);
|
||
|
|
table = document.getElementById(this.id + "-content");
|
||
|
|
console.log(table.id);
|
||
|
|
table.innerHTML = "";
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
window.onload = init;
|
||
|
|
|
||
|
|
</script>
|
||
|
|
<title>0xee home</title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div align="center">
|
||
|
|
<div id="wrapper" align="center">
|
||
|
|
<br/>
|
||
|
|
<div id="widgets">
|
||
|
|
{% for w in widgets %}
|
||
|
|
{{w()|safe}}
|
||
|
|
{% endfor %}
|
||
|
|
</div>
|
||
|
|
<br/>
|
||
|
|
<div id="messages"></div>
|
||
|
|
<input type="button" onclick="startConnect()" value="Connect">
|
||
|
|
<input type="button" onclick="startDisconnect()" value="Disconnect">
|
||
|
|
</div>
|
||
|
|
<br/>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|