199 lines
8.1 KiB
HTML
199 lines
8.1 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 Publish</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 = '';
|
|
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) {
|
|
if ( ! lock[idx] ) {
|
|
// Publish a Message
|
|
var payload = $('#msg_'+idx).val();
|
|
var topic = $('#topic_'+idx).val();
|
|
var message = new Paho.MQTT.Message(payload);
|
|
message.destinationName = topicBase+topic;
|
|
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">
|
|
<!-- Publish Messages -->
|
|
<tr>
|
|
<td><h3></h3></td>
|
|
<td><h2>Topic</h2></td>
|
|
<td><h2>Message</h2></td>
|
|
</tr>
|
|
<tr>
|
|
<td><button type="button" class="btn btn-primary" onclick="publishSwitch(0)">Send</button></td>
|
|
<td><input type="text" class="form-control" id="topic_0" value="equipment/ctrl/send"></td>
|
|
<td><input type="text" class="form-control" id="msg_0" value="ping"></td>
|
|
</tr>
|
|
<tr>
|
|
<td><button type="button" class="btn btn-primary" onclick="publishSwitch(1)">Send</button></td>
|
|
<td><input type="text" class="form-control" id="topic_1" value="equipment/ctrl/send"></td>
|
|
<td><input type="text" class="form-control" id="msg_1" value="emc"></td>
|
|
</tr>
|
|
<tr>
|
|
<td><button type="button" class="btn btn-primary" onclick="publishSwitch(2)">Send</button></td>
|
|
<td><input type="text" class="form-control" id="topic_2" value="equipment/ctrl/send"></td>
|
|
<td><input type="text" class="form-control" id="msg_2" value="esc"></td>
|
|
</tr>
|
|
<tr>
|
|
<td><button type="button" class="btn btn-primary" onclick="publishSwitch(3)">Send</button></td>
|
|
<td><input type="text" class="form-control" id="topic_3" value="equipment/ctrl/send"></td>
|
|
<td><input type="text" class="form-control" id="msg_4" value="mir"></td>
|
|
</tr>
|
|
<tr>
|
|
<td><button type="button" class="btn btn-primary" onclick="publishSwitch(4)">Send</button></td>
|
|
<td><input type="text" class="form-control" id="topic_4" value="equipment/ctrl/send"></td>
|
|
<td><input type="text" class="form-control" id="msg_4" value="moc"></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> |