197 lines
7.9 KiB
HTML
197 lines
7.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="A web interface for MQTT over Websockets">
|
|
|
|
<title>PiHost Panel</title>
|
|
|
|
<!-- Bootstrap core CSS -->
|
|
<link href="css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="css/bootstrap-toggle.css" rel="stylesheet">
|
|
|
|
<script src="js/jquery-3.2.1.min.js"></script>
|
|
|
|
<script src="js/bootstrap.min.js"></script>
|
|
<script src="js/bootstrap-toggle.js"></script>
|
|
|
|
<!-- MQTT Websocket -->
|
|
<script type="text/javascript" src="js/mqttws31.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
function GetURLParameter(sParam) {
|
|
var sPageURL = window.location.search.substring(1);
|
|
var sURLVariables = sPageURL.split('&');
|
|
for (var i = 0; i < sURLVariables.length; i++) {
|
|
var sParameterName = sURLVariables[i].split('=');
|
|
if (sParameterName[0] == sParam) {
|
|
return sParameterName[1];
|
|
}
|
|
}
|
|
}
|
|
|
|
var host = 'localhost';
|
|
var port = 1884;
|
|
var topicBase = 'piface';
|
|
var useTLS = false;
|
|
var cleansession = true;
|
|
var mqtt;
|
|
var reconnectTimeout = 2000;
|
|
|
|
lock = new Array(false,false,false,false,false,false,false,false);
|
|
|
|
function MQTTconnect() {
|
|
if (typeof path == "undefined") {
|
|
path = '/mqtt';
|
|
}
|
|
|
|
mqtt = new Paho.MQTT.Client( host, port, path, "mqtt_panel" + parseInt(Math.random() * 100, 10) );
|
|
|
|
var options = {
|
|
timeout: 3,
|
|
useSSL: useTLS,
|
|
cleanSession: cleansession,
|
|
onSuccess: onConnect,
|
|
onFailure: function (message) {
|
|
$('#status').html("Connection failed: " + message.errorMessage + "Retrying...");
|
|
setTimeout(MQTTconnect, reconnectTimeout);
|
|
}
|
|
};
|
|
|
|
mqtt.onConnectionLost = onConnectionLost;
|
|
mqtt.onMessageArrived = onMessageArrived;
|
|
console.log("Host: "+ host + ", Port: " + port + ", Path: " + path + " TLS: " + useTLS);
|
|
mqtt.connect(options);
|
|
};
|
|
|
|
function onConnect() {
|
|
$('#status').html('Connected to ' + host + ':' + port + path);
|
|
mqtt.subscribe(topicBase+"/#", {qos: 0});
|
|
$('#topic').html(topicBase+"/#");
|
|
};
|
|
|
|
function onConnectionLost(response) {
|
|
setTimeout(MQTTconnect, reconnectTimeout);
|
|
$('#status').html("Connection lost: " + responseObject.errorMessage + ". Reconnecting...");
|
|
};
|
|
|
|
function onMessageArrived(message) {
|
|
var topic = message.destinationName;
|
|
var payload = message.payloadString;
|
|
|
|
var message = topic.split('/');
|
|
var area = message[0];
|
|
var state = message[1];
|
|
|
|
$('#message').html(topic + ', ' + payload );
|
|
|
|
var timestamp = Math.round((new Date()).getTime() / 1000);
|
|
switch (area) {
|
|
case topicBase:
|
|
if (payload == 'true') {
|
|
$('#label_'+state).text('On');
|
|
$('#label_'+state).removeClass('label-danger').addClass('label-success');
|
|
if ( ! $('#switch_'+state).prop('checked') ) {
|
|
lock[state]=true;
|
|
$('#switch_'+state).bootstrapToggle('on');
|
|
}
|
|
} else {
|
|
$('#label_'+state).text('Off');
|
|
$('#label_'+state).removeClass('label-success').addClass('label-danger');
|
|
if ( $('#switch_'+state).prop('checked') ) {
|
|
lock[state]=true;
|
|
$('#switch_'+state).bootstrapToggle('off');
|
|
}
|
|
}
|
|
break;
|
|
default: console.log('Error: Data do not match the MQTT topic.'); break;
|
|
}
|
|
};
|
|
|
|
function publishSwitch(idx,data) {
|
|
if ( ! lock[idx] ) {
|
|
// Publish a Message
|
|
var message = new Paho.MQTT.Message(data ? "true" : "false");
|
|
message.destinationName = topicBase+'/'+idx;
|
|
message.qos = 0;
|
|
message.retained = true;
|
|
mqtt.send(message);
|
|
} else {
|
|
lock[idx] = false;
|
|
}
|
|
};
|
|
|
|
$(document).ready(function() {
|
|
if ( GetURLParameter('broker') ) {
|
|
host = GetURLParameter('broker');
|
|
} else {
|
|
host = window.location.hostname;
|
|
}
|
|
$('#xinfo').html("Broker: "+ host);
|
|
MQTTconnect();
|
|
});
|
|
</script>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<div id="wrap">
|
|
<div class="container">
|
|
<div class="page-header"><h1><b>DS-80B</b></h1></div>
|
|
|
|
<div class="panel panel-default">
|
|
<div class="panel-body">
|
|
<table class="table table-striped">
|
|
<!-- Equipment -->
|
|
<tr>
|
|
<td>Carrier</td>
|
|
<td>Online</td>
|
|
<td>Process</td>
|
|
<td>Wafer</td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td><h2><span id="label_0" class="label">UKN</span></h2></td>
|
|
<td><h2><span id="label_1" class="label">UKN</span></h2></td>
|
|
<td><h2><span id="label_2" class="label">UKN</span></h2></td>
|
|
<td><h2><span id="label_3" class="label">UKN</span></h2></td>
|
|
<td><h2><span id="label_4" class="label">UKN</span></h2></td>
|
|
<td><h2><span id="label_5" class="label">UKN</span></h2></td>
|
|
<td><h2><span id="label_6" class="label">UKN</span></h2></td>
|
|
<td><h2><span id="label_7" class="label">UKN</span></h2></td>
|
|
</tr>
|
|
<tr>
|
|
<td><input id="switch_0" onchange="publishSwitch(0,this.checked)" data-toggle="toggle" type="checkbox"></td>
|
|
<td><input id="switch_1" onchange="publishSwitch(1,this.checked)" data-toggle="toggle" type="checkbox"></td>
|
|
<td><input id="switch_2" onchange="publishSwitch(2,this.checked)" data-toggle="toggle" type="checkbox"></td>
|
|
<td><input id="switch_3" onchange="publishSwitch(3,this.checked)" data-toggle="toggle" type="checkbox"></td>
|
|
<td><input id="switch_4" onchange="publishSwitch(4,this.checked)" data-toggle="toggle" type="checkbox"></td>
|
|
<td><input id="switch_5" onchange="publishSwitch(5,this.checked)" data-toggle="toggle" type="checkbox"></td>
|
|
<td><input id="switch_6" onchange="publishSwitch(6,this.checked)" data-toggle="toggle" type="checkbox"></td>
|
|
<td><input id="switch_7" onchange="publishSwitch(7,this.checked)" data-toggle="toggle" type="checkbox"></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="panel panel-default">
|
|
<div class="panel-body">
|
|
<div class="row">
|
|
<div class="col-md-6"><b>Latest MQTT message: </b> <small id="message">no message recieved</small></div>
|
|
<div class="col-md-6"><b>Status: </b> <small id='status'></small></div>
|
|
<div class="col-md-6"><b>Info: </b> <small id='xinfo'></small></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="footer">
|
|
<small><p class="text-center"></p></small>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|