<html5>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HAT Interface</title>
<link rel="stylesheet" type="text/css" href="/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="/css/bootstrap-theme.css">
<link rel="stylesheet" type="text/css" href="/css/style.css">
<script type="text/javascript" src="/js/html5shiv.js"></script>
<script type="text/javascript" src="/js/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.10.4.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.js"></script>
<script type="text/javascript" src="/js/fullscreen.js"></script>
<script type="text/javascript" src="/js/jquery-cookie.js" charset="utf-8" ></script>
<script src="/js/jquery-lang.js" charset="utf-8" type="text/javascript"></script>
<script src="/js/utility.js" charset="utf-8" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script>
<script>
// Create a client instance
var d= new Date();
var clientid = "test"+d.getTime();
var client = new Paho.MQTT.Client("193.206.52.98", 9001, clientid);
// set callback handlers
client.onConnectionLost = onConnectionLost;
client.onMessageArrived = onMessageArrived;
// connect the client
client.connect({onSuccess:onConnect});
// called when the client connects
function onConnect() {
// Once a connection has been made, make a subscription and send a message.
client.subscribe("station3/status");
message = new Paho.MQTT.Message("Hello");
message.destinationName = "World";
client.send(message);
}
// called when the client loses its connection
function onConnectionLost(responseObject) {
if (responseObject.errorCode !== 0) {
console.log("onConnectionLost:"+responseObject.errorMessage);
}
}
// called when a message arrives
function onMessageArrived(message) {
var name_content = message.payloadString.split(":");
var name = cleanItem(name_content[0]);
var value = cleanItem(name_content[1]);
update(name,value);
}
function cleanItem(item) {
var citem = "";
for(i=0; i<item.length; i++) if(item[i] != '"' && item[i] != '}' && item[i] != '{' && item[i] != '\n') citem += item[i];
return citem;
}
function normalizeValue(value, digit) {
var res = "";
var n = 0;
var dot = false;
for(i=0; i<value.length && n <digit; i++) {
res += value[i];
if(dot == true) n++;
if(value[i] == '.') dot = true;
}
return res;
}
function getNamefromTag(name) {
var names = name.split("-");
if(names.length >1) return names[1];
else return "";
}
function update(name, value) {
var id = "I_"+name;
var image = document.getElementById(id);
if (value=="false" || value<1) {
image.src = "/img/Button-Blank-Green-icon.png"
} else {
image.src = "/img/Button-Blank-Red-icon.png"
}
return;
}
doClick = function(name) {
var id = "I_"+name;
var image = document.getElementById(id);
if(image.src.includes("Button-Blank-Green-icon.png")) {
mqtt_message = new Paho.MQTT.Message("{"+name+":1}");
mqtt_message.destinationName = "station3/cmd";
client.send(mqtt_message);
}
else {
mqtt_message = new Paho.MQTT.Message("{"+name+":0}");
mqtt_message.destinationName = "station3/cmd";
client.send(mqtt_message);
}
return;
var cmd = "";
// $.ajax({method:"PUT",url:this.cmduri +cmd+ ".json",success:function(data){}});
}
</script>
<style>
#all {
padding:30px;
width:100%;
overflow:auto;
}
#header {
color:black;
text-align:left;
font-size: 1em;
padding:20px;
background-color:WhiteSmoke;
border:3px solid #d4d4d4;
width:100%;
}
div.holder{
display:block
width:100%;
float:left;
padding-left: 20px;
text-align: left;
font-size: 16px;
color: black;
}
img.button{
float:right;
width:25px;
height:25px;
}
button.switch{
width:100%;
float:left;
text-align: center;
width:150px;
height:40px;
border:2px solid;
background-color:#808080;
font-size: 14px;
color: white;
moz-border-radius: 6px;
webkit-border-radius: 6px;
border-radius: 6px;
}
.meter{
width:100%;
float:left;
width:300;
height:40px;
border:2px solid;
background-color:#808080;
font-size: 16px;
color: white;
moz-border-radius: 6px;
webkit-border-radius: 6px;
border-radius: 6px;
padding:5px;
}
.meter_inner {
width:120;
height:30px;
padding:1px;
background-color:#808080;
font-size: 16px;
color: white;
border:2px solid;
border-radius: 6px;
moz-border-radius: 6px;
webkit-border-radius: 6px;
}
.measure{
float:right;
text-align: center;
height:25px;
width:50%;
color:black;
background-color:white;
}
</style>
</head>
<body>
<div id="all">
<div id="header">
<b> BB Osso Cape OUT </b>
</div>
<div class="bholder">
<button id="R0" class="switch" onclick='doClick("R0")'><img id="I_R0" src="/img/Button-Blank-Green-icon.png" class=button> OUT0 </button>
</div>
<div class="bholder">
<button id="R1" class="switch" onclick='doClick("R1")'><img id="I_R1" src="/img/Button-Blank-Green-icon.png" class=button> OUT1 </button>
</div>
<div class="bholder">
<button id="R2" class="switch" onclick='doClick("R2")'><img id="I_R2" src="/img/Button-Blank-Green-icon.png" class=button> OUT2 </button>
</div>
<div class="bholder">
<button id="R3" class="switch" onclick='doClick("R3")'><img id="I_R3" src="/img/Button-Blank-Green-icon.png" class=button> OUT3 </button>
</div>
<div class="bholder">
<button id="R4" class="switch" onclick='doClick("R4")'><img id="I_R4" src="/img/Button-Blank-Green-icon.png" class=button> OUT4 </button>
</div>
<div class="bholder">
<button id="R5" class="switch" onclick='doClick("R5")'><img id="I_R5" src="/img/Button-Blank-Green-icon.png" class=button> OUT5 </button>
</div>
<div class="bholder">
<button id="R6" class="switch" onclick='doClick("R6")'><img id="I_R6" src="/img/Button-Blank-Green-icon.png" class=button> OUT6 </button>
</div>
<div class="bholder">
<button id="R7" class="switch" onclick='doClick("R7")'><img id="I_R7" src="/img/Button-Blank-Green-icon.png" class=button> OUT7 </button>
</div>
</div>
</body>
</html5>