homebridge-punt
Version:
Fhem-Gateway and Accessory-Simulator Plugin for Homebridge
221 lines • 8.43 kB
HTML
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" href="homebridge-punt.css" />
<script src="jquery-2.1.4.min.js"></script>
<script src="jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
var ws;
var logmsg = "";
var line = 1;
$(document).on("pagecreate", "#page1", function() {
$(document).ready(startWS);
});
function displayMessage(output, message, color) {
$(output).html('<span style="color:'+color+'">'+message+'</span>');
}
function log(message) {
logmsg += line++ + " " + message + '<br>';
$("#debug").html('<span>'+logmsg+'</span>');
}
function startWS() {
var origin = window.document.location.origin.replace(/http/, 'ws');
ws = new WebSocket(origin);
ws.onopen = function (event) {
displayMessage("#status", "connected", "YellowGreen");
$("#p_title").css("visibility", "visible");
$("#p_reload").css("visibility", "hidden");
}
ws.onclose = function (event) {
displayMessage("#status", "disconnected", "Tomato");
$("#p_reload").css("visibility", "visible");
$("#p_reload").on("tap", function(event) {
location.reload();
});
setTimeout(function() {
//location.reload();
startWS();
},2000);
}
ws.onmessage = function (event) {
//log(event.data);
var data = JSON.parse(event.data);
switch (data.type) {
case "info":
$("#fc").html('homebridge-punt <span id="version"></span><span id="latest"></span>');
displayMessage("#version", "v"+data.spec.version, "SteelBlue");
if (data.spec.version != data.spec.latest) {
displayMessage("#latest", " [ new version "+data.spec.latest+" available ]", "YellowGreen");
}
break;
case "accessory":
updateView(data);
break;
case "command":
if (data.cmd_type == "delete") {
$("#content").html('');
}
break;
default:
displayMessage("#error_msg",'data_type error '+data.type,"orangered");
}
}
ws.onerror = function (event) {
displayMessage("#status", "disconnected", "Tomato");
}
}
function updateView(data) {
//log(JSON.stringify(data));
var data_view = document.getElementById('data_view');
if (!data_view) createView(data);
for (var k in data.accessories) {
parsing(data.accessories[k]);
}
}
function parsing(accessory) {
//log(JSON.stringify(accessory));
var u = accessory.uuid;
for (var c in accessory.value) {
var p_id = document.getElementById(u+c);
var v = accessory.value[c];
var min = accessory.props[c].minValue;
var max = accessory.props[c].maxValue;
var step = accessory.props[c].minStep;
switch(accessory.props[c].control) {
case "button":
setBtnColor(u, c, v);
break;
case "slider":
//log(JSON.stringify(accessory.props[c]));
$(p_id).attr("min", min).attr("max", max).attr("step", step).val(v).slider("refresh");
break;
case "flipswitch":
case "flipswitch_d":
if ($(p_id).val() != v) $(p_id).val(v).flipswitch("refresh");
break;
case "select":
if ($(p_id).val() != v) $(p_id).val(v).selectmenu("refresh");
break;
default:
displayMessage("#error_msg",'Characteristic "'+c+'" undefined.',"lightgray");
}
}
}
function setBtnColor(u, c, value) {
var btn_off = document.getElementById("off"+u+c);
var btn_on = document.getElementById("on"+u+c);
if (value) {
$(btn_on).addClass("pi-btn-tap");
$(btn_off).removeClass("pi-btn-tap");
} else {
$(btn_off).addClass("pi-btn-tap");
$(btn_on).removeClass("pi-btn-tap");
}
}
function createView(data) {
//log(JSON.stringify(data));
var grid = $('<div class="pi-grid-s ui-grid-b ui-responsive " id="data_view">');
var ba = '<div class="ui-block-a pi-border pi-padding">';
var bb = '<div class="ui-block-b pi-border pi-padding">';
var bc = '<div class="ui-block-c pi-border">';
var be = '</div>';
var blocka, blockb, blockc;
var html = "";
for (var k in data.accessories) {
//log(JSON.stringify(data.accessories[k]));
var value = data.accessories[k].value;
var first = true;
for (var c in value) {
//log("c= >"+c+"<"+" "+ keys.length);
switch (data.accessories[k].props[c].control) {
case "button":
html='<div data-role="controlgroup" data-type="horizontal">';
html+='<a href="#" id="off'+k+c+'" data-k="'+k+'" data-c="'+c+'" class="onoff pi-btn ui-btn ui-mini">off</a>';
html+='<a href="#" id="on'+k+c+'" data-k="'+k+'" data-c="'+c+'" class="onoff pi-btn ui-btn ui-mini">on</a>';
html+=be;
break;
case "slider":
html='<input id="'+k+c+'" data-k="'+k+'" data-c="'+c+'" class="slider" type="range" data-highlight="true" data-popup-enabled="true">';
break;
case "flipswitch":
html='<div id="flipswitchWrapper"><select id="'+k+c+'" data-k="'+k+'" data-c="'+c+'" class="select" ui-flipswitch" data-role="flipswitch"><option value="0">Status 0</option><option value="1">Status 1</option></select></div>';
break;
case "flipswitch_d":
html='<div id="flipswitchWrapper"><select id="'+k+c+'" data-k="'+k+'" data-c="'+c+'" class="select" ui-flipswitch" data-role="flipswitch"><option value="0">Not Detected</option><option value="1">Detected</option></select></div>';
break;
case "select":
html = '<fieldset class="ui-field-contain ui-mini" style="width: 50%; margin: 0px;"><select id="'+k+c+'" data-k="'+k+'" data-c="'+c+'" class="select">';
html+='<option value="0">Value 0</option><option value="1">Value 1</option><option value="2">Value 2</option><option value="3">Value 3</option><option value="4">Value 4</option>';
html+='</select></fieldset>';
break;
default:
html='<span class="pi_warning">undefined</span>';
}
if (first) {
blocka = $(ba+data.accessories[k].name+'<br><span class="pi-sf">'+data.accessories[k].service_name+'</span>'+be);
first = false;
} else {blocka = $('<div class="ui-block-a pi-noborder pi-padding">'+be);}
grid.append(blocka);
blockb = $(bb+c+be);
grid.append(blockb);
blockc = $(bc+html+be);
grid.append(blockc);
}
}
grid.append(be);
$("#content").append(grid);
$("#content").trigger("create");
$(".onoff").on("tap", function(event) {
var v = $(this).text() == "off" ? false: true;
setBtnColor($(this).data("k"), $(this).data("c"), v);
var msg = {uuid: $(this).data("k"), characteristic: $(this).data("c"), value: v};
var message = JSON.stringify(msg);
//log(message);
setTimeout(function() {
ws.send(message);
});
});
$(".slider").on("slidestop", function(event) {
var msg = {uuid: $(this).data("k"), characteristic: $(this).data("c"), value: $(this).val()};
var message = JSON.stringify(msg);
//log(message);
setTimeout(function() {
ws.send(message);
});
});
$(".select").on("change", function(event) {
var msg = {uuid: $(this).data("k"), characteristic: $(this).data("c"), value: $(this).val()};
var message = JSON.stringify(msg);
//log("select: "+message);
setTimeout(function() {
ws.send(message);
});
});
}
</script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="panel" id="panel1">
<h3>homebridge-punt</h3>
<p>This is a work in progress!<br>Please report bugs / issues on GitHub. Your feedback is welcome.</p>
<a href="https://github.com/cflurin/homebridge-punt" target="_blank">GitHub</a>
</div>
<div data-role="header">
<a href="#panel1" class="pi-btn-h ui-btn ui-nodisc-icon ui-corner-all ui-icon-bars ui-btn-icon-left"></a>
<h1 id="p_title" class="pi-vh">Simulator<span id="status" class="pi-lb"></span></h1>
<a href="#" id="p_reload" class="pi-btn-h pi-vh ui-btn ui-nodisc-icon ui-corner-all ui-icon-refresh ui-btn-icon-right"></a>
</div>
<div data-role="main" class="ui-content">
<div id="content"></div>
</div>
<div data-role="footer">
<h1 id="fc"></h1>
<div id="error_msg" class="pi-la"></div>
<div id="debug" class="pi-la"></div>
</div>
</div>
</body>
</html>