var websock;
var password = false;
var maxNetworks;
var maxSchedules;
var messages = [];
var webhost;
var numChanged = 0;
var numReboot = 0;
var numReconnect = 0;
var numReload = 0;
var useWhite = false;
var manifest;
var now = 0;
var ago = 0;
// -----------------------------------------------------------------------------
// Messages
// -----------------------------------------------------------------------------
function initMessages() {
messages[1] = "Remote update started";
messages[2] = "OTA update started";
messages[3] = "Error parsing data!";
messages[4] = "The file does not look like a valid configuration backup or is corrupted";
messages[5] = "Changes saved. You should reboot your board now";
messages[7] = "Passwords do not match!";
messages[8] = "Changes saved";
messages[9] = "No changes detected";
messages[10] = "Session expired, please reload page...";
}
function sensorName(id) {
var names = [
"DHT", "Dallas", "Emon Analog", "Emon ADC121", "Emon ADS1X15",
"HLW8012", "V9261F", "ECH1560", "Analog", "Digital",
"Events", "PMSX003", "BMX280", "MHZ19", "SI7021",
"SHT3X I2C", "BH1750"
];
if (1 <= id && id <= names.length) {
return names[id - 1];
}
return null;
}
function magnitudeType(type) {
var types = [
"Temperature", "Humidity", "Pressure",
"Current", "Voltage", "Active Power", "Apparent Power",
"Reactive Power", "Power Factor", "Energy", "Energy (delta)",
"Analog", "Digital", "Events",
"PM1.0", "PM2.5", "PM10", "CO2", "Lux"
];
if (1 <= type && type <= types.length) {
return types[type - 1];
}
return null;
}
function magnitudeError(error) {
var errors = [
"OK", "Out of Range", "Warming Up", "Timeout", "Wrong ID",
"Data Error", "I2C Error", "GPIO Error"
];
if (0 <= error && error < errors.length) {
return errors[error];
}
return "Error " + error;
}
// -----------------------------------------------------------------------------
// Utils
// -----------------------------------------------------------------------------
function keepTime() {
if (now === 0) { return; }
var date = new Date(now * 1000);
var text = date.toISOString().substring(0, 19).replace("T", " ");
$("input[name='now']").val(text);
$("span[name='now']").html(text);
$("span[name='ago']").html(ago);
now++;
ago++;
}
// http://www.the-art-of-web.com/javascript/validate-password/
function checkPassword(str) {
// at least one lowercase and one uppercase letter or number
// at least five characters (letters, numbers or special characters)
var re = /^(?=.*[A-Z\d])(?=.*[a-z])[\w~!@#$%^&*\(\)<>,.\?;:{}\[\]\\|]{5,}$/;
return re.test(str);
}
function zeroPad(number, positions) {
var zeros = "";
for (var i = 0; i < positions; i++) {
zeros += "0";
}
return (zeros + number).slice(-positions);
}
function loadTimeZones() {
var time_zones = [
-720, -660, -600, -570, -540,
-480, -420, -360, -300, -240,
-210, -180, -120, -60, 0,
60, 120, 180, 210, 240,
270, 300, 330, 345, 360,
390, 420, 480, 510, 525,
540, 570, 600, 630, 660,
720, 765, 780, 840
];
for (var i in time_zones) {
var value = parseInt(time_zones[i], 10);
var offset = value >= 0 ? value : -value;
var text = "GMT" + (value >= 0 ? "+" : "-") +
zeroPad(parseInt(offset / 60, 10), 2) + ":" +
zeroPad(offset % 60, 2);
$("select[name='ntpOffset']").append(
$("").
attr("value",value).
text(text));
}
}
function validateForm(form) {
// password
var adminPass1 = $("input[name='adminPass']", form).first().val();
if (adminPass1.length > 0 && !checkPassword(adminPass1)) {
alert("The password you have entered is not valid, it must have at least 5 characters, 1 lowercase and 1 uppercase or number!");
return false;
}
var adminPass2 = $("input[name='adminPass']", form).last().val();
if (adminPass1 !== adminPass2) {
alert("Passwords are different!");
return false;
}
return true;
}
// These fields will always be a list of values
var is_group = [
"ssid", "pass", "gw", "mask", "ip", "dns",
"schEnabled", "schSwitch","schAction","schHour","schMinute","schWDs",
"relayBoot", "relayPulse", "relayTime",
"mqttGroup", "mqttGroupInv",
"dczRelayIdx", "dczMagnitude",
"tspkRelay", "tspkMagnitude",
"ledMode",
"adminPass"
];
function getData(form) {
var data = {};
// Populate data
$("input,select", form).each(function() {
var name = $(this).attr("name");
if (name) {
var value = "";
// Do not report these fields
if (name === "filename" || name === "rfbcode" ) {
return;
}
// Grab the value
if ($(this).attr("type") === "checkbox") {
value = $(this).is(":checked") ? 1 : 0;
} else if ($(this).attr("type") === "radio") {
if (!$(this).is(":checked")) {return;}
value = $(this).val();
} else {
value = $(this).val();
}
// Build the object
if (name in data) {
if (!Array.isArray(data[name])) data[name] = [data[name]];
data[name].push(value);
} else if (is_group.indexOf(name) >= 0) {
data[name] = [value];
} else {
data[name] = value;
}
}
});
// Post process
if ("schSwitch" in data) {
data["schSwitch"].push(0xFF);
} else {
data["schSwitch"] = [0xFF];
}
return data;
}
function randomString(length, chars) {
var mask = "";
if (chars.indexOf("a") > -1) { mask += "abcdefghijklmnopqrstuvwxyz"; }
if (chars.indexOf("A") > -1) { mask += "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; }
if (chars.indexOf("#") > -1) { mask += "0123456789"; }
if (chars.indexOf("@") > -1) { mask += "ABCDEF"; }
if (chars.indexOf("!") > -1) { mask += "~`!@#$%^&*()_+-={}[]:\";'<>?,./|\\"; }
var result = "";
for (var i = length; i > 0; --i) {
result += mask[Math.round(Math.random() * (mask.length - 1))];
}
return result;
}
function generateAPIKey() {
var apikey = randomString(16, "@#");
$("input[name='apiKey']").val(apikey);
return false;
}
function getJson(str) {
try {
return JSON.parse(str);
} catch (e) {
return false;
}
}
// -----------------------------------------------------------------------------
// Actions
// -----------------------------------------------------------------------------
function resetOriginals() {
$("input,select").each(function() {
$(this).attr("original", $(this).val());
});
numReboot = numReconnect = numReload = 0;
}
function doReload(milliseconds) {
milliseconds = (typeof milliseconds == "undefined") ?
0 :
parseInt(milliseconds, 10);
setTimeout(function() {
window.location.reload();
}, milliseconds);
}
function doUpgrade() {
var contents = $("input[name='upgrade']")[0].files[0];
if (typeof contents === "undefined") {
alert("First you have to select a file from your computer.");
return false;
}
var filename = $("input[name='upgrade']").val().split("\\").pop();
var data = new FormData();
data.append("upgrade", contents, filename);
$.ajax({
// Your server script to process the upload
url: webhost + "upgrade",
type: "POST",
// Form data
data: data,
// Tell jQuery not to process data or worry about content-type
// You *must* include these options!
cache: false,
contentType: false,
processData: false,
success: function(data, text) {
$("#upgrade-progress").hide();
if (data === "OK") {
alert("Firmware image uploaded, board rebooting. This page will be refreshed in 5 seconds.");
doReload(5000);
} else {
alert("There was an error trying to upload the new image, please try again (" + data + ").");
}
},
// Custom XMLHttpRequest
xhr: function() {
$("#upgrade-progress").show();
var myXhr = $.ajaxSettings.xhr();
if (myXhr.upload) {
// For handling the progress of the upload
myXhr.upload.addEventListener("progress", function(e) {
if (e.lengthComputable) {
$("progress").attr({ value: e.loaded, max: e.total });
}
} , false);
}
return myXhr;
}
});
return false;
}
function doUpdatePassword() {
var form = $("#formPassword");
if (validateForm(form)) {
var data = getData(form);
websock.send(JSON.stringify({"config": data}));
}
return false;
}
function doReboot(ask) {
var response;
ask = (typeof ask == "undefined") ? true : ask;
if (numChanged > 0) {
response = window.confirm("Some changes have not been saved yet, do you want to save them first?");
if (response === true) {
return doUpdate();
}
}
if (ask) {
response = window.confirm("Are you sure you want to reboot the device?");
if (response === false) {
return false;
}
}
websock.send(JSON.stringify({"action": "reboot"}));
doReload(5000);
return false;
}
function doReconnect(ask) {
var response;
ask = (typeof ask == "undefined") ? true : ask;
if (numChanged > 0) {
response = window.confirm("Some changes have not been saved yet, do you want to save them first?");
if (response === true) {
return doUpdate();
}
}
if (ask) {
response = window.confirm("Are you sure you want to disconnect from the current WIFI network?");
if (response === false) {
return false;
}
}
websock.send(JSON.stringify({"action": "reconnect"}));
doReload(5000);
return false;
}
function doUpdate() {
var form = $("#formSave");
if (validateForm(form)) {
// Get data
var data = getData(form);
websock.send(JSON.stringify({"config": data}));
// Empty special fields
$(".pwrExpected").val(0);
$("input[name='pwrResetCalibration']").
prop("checked", false).
iphoneStyle("refresh");
// Change handling
numChanged = 0;
setTimeout(function() {
var response;
if (numReboot > 0) {
response = window.confirm("You have to reboot the board for the changes to take effect, do you want to do it now?");
if (response === true) { doReboot(false); }
} else if (numReconnect > 0) {
response = window.confirm("You have to reconnect to the WiFi for the changes to take effect, do you want to do it now?");
if (response === true) { doReconnect(false); }
} else if (numReload > 0) {
response = window.confirm("You have to reload the page to see the latest changes, do you want to do it now?");
if (response === true) { doReload(); }
}
resetOriginals();
}, 1000);
}
return false;
}
function doBackup() {
document.getElementById("downloader").src = webhost + "config";
return false;
}
function onFileUpload(event) {
var inputFiles = this.files;
if (inputFiles === undefined || inputFiles.length === 0) {
return false;
}
var inputFile = inputFiles[0];
this.value = "";
var response = window.confirm("Previous settings will be overwritten. Are you sure you want to restore this settings?");
if (response === false) {
return false;
}
var reader = new FileReader();
reader.onload = function(e) {
var data = getJson(e.target.result);
if (data) {
websock.send(JSON.stringify({"action": "restore", "data": data}));
} else {
alert(messages[4]);
}
};
reader.readAsText(inputFile);
return false;
}
function doRestore() {
if (typeof window.FileReader !== "function") {
alert("The file API isn't supported on this browser yet.");
} else {
$("#uploader").click();
}
return false;
}
function doFactoryReset() {
var response = window.confirm("Are you sure you want to restore to factory settings?");
if (response === false) {
return false;
}
websock.send(JSON.stringify({"action": "factory_reset"}));
doReload(5000);
return false;
}
function doToggle(element, value) {
var relayID = parseInt(element.attr("data"), 10);
websock.send(JSON.stringify({"action": "relay", "data": { "id": relayID, "status": value ? 1 : 0 }}));
return false;
}
function doScan() {
$("#scanResult").html("");
$("div.scan.loading").show();
websock.send(JSON.stringify({"action": "scan", "data": {}}));
return false;
}
// -----------------------------------------------------------------------------
// Visualization
// -----------------------------------------------------------------------------
function toggleMenu() {
$("#layout").toggleClass("active");
$("#menu").toggleClass("active");
$("#menuLink").toggleClass("active");
}
function showPanel() {
$(".panel").hide();
$("#" + $(this).attr("data")).show();
if ($("#layout").hasClass("active")) { toggleMenu(); }
$("input[type='checkbox']").
iphoneStyle("calculateDimensions").
iphoneStyle("refresh");
}
// -----------------------------------------------------------------------------
// Relays & magnitudes mapping
// -----------------------------------------------------------------------------
function createRelayList(data, container, template_name) {
var current = $("#" + container + " > div").length;
if (current > 0) {
return;
}
var template = $("#" + template_name + " .pure-g")[0];
for (var i=0; i div").length;
if (current > 0) {
return;
}
var template = $("#" + template_name + " .pure-g")[0];
for (var i=0; i div").length;
if (numNetworks >= maxNetworks) {
alert("Max number of networks reached");
return null;
}
var tabindex = 200 + numNetworks * 10;
var template = $("#networkTemplate").children();
var line = $(template).clone();
$(line).find("input").each(function() {
$(this).attr("tabindex", tabindex);
tabindex++;
});
$(line).find(".button-del-network").on("click", delNetwork);
$(line).find(".button-more-network").on("click", moreNetwork);
line.appendTo("#networks");
return line;
}
// -----------------------------------------------------------------------------
// Relays scheduler
// -----------------------------------------------------------------------------
function delSchedule() {
var parent = $(this).parents(".pure-g");
$(parent).remove();
}
function moreSchedule() {
var parent = $(this).parents(".pure-g");
$("div.more", parent).toggle();
}
function addSchedule() {
var numSchedules = $("#schedules > div").length;
if (numSchedules >= maxSchedules) {
alert("Max number of schedules reached");
return null;
}
var tabindex = 200 + numSchedules * 10;
var template = $("#scheduleTemplate").children();
var line = $(template).clone();
$(line).find("input").each(function() {
$(this).attr("tabindex", tabindex);
tabindex++;
});
$(line).find(".button-del-schedule").on("click", delSchedule);
$(line).find(".button-more-schedule").on("click", moreSchedule);
line.appendTo("#schedules");
return line;
}
// -----------------------------------------------------------------------------
// Relays
// -----------------------------------------------------------------------------
function initRelays(data) {
var current = $("#relays > div").length;
if (current > 0) {
return;
}
var template = $("#relayTemplate .pure-g")[0];
for (var i=0; i").attr("value",i).text("Switch #" + i));
}
}
function initRelayConfig(data) {
var current = $("#relayConfig > div").length;
if (current > 0) {
return;
}
var template = $("#relayConfigTemplate").children();
for (var i=0; i < data.length; i++) {
var line = $(template).clone();
$("span.gpio", line).html(data[i].gpio);
$("span.id", line).html(i);
$("select[name='relayBoot']", line).val(data[i].boot);
$("select[name='relayPulse']", line).val(data[i].pulse);
$("input[name='relayTime']", line).val(data[i].pulse_ms);
$("input[name='mqttGroup']", line).val(data[i].group);
$("select[name='mqttGroupInv']", line).val(data[i].group_inv);
line.appendTo("#relayConfig");
}
}
// -----------------------------------------------------------------------------
// Sensors & Magnitudes
// -----------------------------------------------------------------------------
function initMagnitudes(data) {
// check if already initialized
var done = $("#magnitudes > div").length;
if (done > 0) {
return;
}
// add templates
var template = $("#magnitudeTemplate").children();
for (var i=0; i div").length;
if (done > 0) {
return;
}
// add template
var template = $("#colorRGBTemplate").children();
var line = $(template).clone();
line.appendTo("#colors");
// init color wheel
$("input[name='color']").wheelColorPicker({
sliders: "wrgbp"
}).on("sliderup", function() {
var value = $(this).wheelColorPicker("getValue", "css");
websock.send(JSON.stringify({"action": "color", "data" : {"rgb": value}}));
});
// init bright slider
$("#brightness").on("change", function() {
var value = $(this).val();
var parent = $(this).parents(".pure-g");
$("span", parent).html(value);
websock.send(JSON.stringify({"action": "color", "data" : {"brightness": value}}));
});
}
function initColorHSV() {
// check if already initialized
var done = $("#colors > div").length;
if (done > 0) {
return;
}
// add template
var template = $("#colorHSVTemplate").children();
var line = $(template).clone();
line.appendTo("#colors");
// init color wheel
$("input[name='color']").wheelColorPicker({
sliders: "whsvp"
}).on("sliderup", function() {
var color = $(this).wheelColorPicker("getColor");
var value = parseInt(color.h * 360, 10) + "," + parseInt(color.s * 100, 10) + "," + parseInt(color.v * 100, 10);
websock.send(JSON.stringify({"action": "color", "data" : {"hsv": value}}));
});
}
function initChannels(num) {
// check if already initialized
var done = $("#channels > div").length > 0;
if (done) {
return;
}
// does it have color channels?
var colors = $("#colors > div").length > 0;
// calculate channels to create
var max = num;
if (colors) {
max = num % 3;
if ((max > 0) & useWhite) max--;
}
var start = num - max;
// add templates
var template = $("#channelTemplate").children();
for (var i=0; i legend").length;
var template = $("#rfbNodeTemplate").children();
var line = $(template).clone();
var status = true;
$("span", line).html(numNodes);
$(line).find("input").each(function() {
$(this).attr("data-id", numNodes);
$(this).attr("data-status", status ? 1 : 0);
status = !status;
});
$(line).find(".button-rfb-learn").on("click", rfbLearn);
$(line).find(".button-rfb-forget").on("click", rfbForget);
$(line).find(".button-rfb-send").on("click", rfbSend);
line.appendTo("#rfbNodes");
return line;
}
function rfbLearn() {
var parent = $(this).parents(".pure-g");
var input = $("input", parent);
websock.send(JSON.stringify({"action": "rfblearn", "data" : {"id" : input.attr("data-id"), "status": input.attr("data-status")}}));
}
function rfbForget() {
var parent = $(this).parents(".pure-g");
var input = $("input", parent);
websock.send(JSON.stringify({"action": "rfbforget", "data" : {"id" : input.attr("data-id"), "status": input.attr("data-status")}}));
}
function rfbSend() {
var parent = $(this).parents(".pure-g");
var input = $("input", parent);
websock.send(JSON.stringify({"action": "rfbsend", "data" : {"id" : input.attr("data-id"), "status": input.attr("data-status"), "data": input.val()}}));
}
// -----------------------------------------------------------------------------
// Processing
// -----------------------------------------------------------------------------
function processData(data) {
// title
if ("app_name" in data) {
var title = data.app_name;
if ("app_version" in data) {
title = title + " " + data.app_version;
}
$("span[name=title]").html(title);
if ("hostname" in data) {
title = data.hostname + " - " + title;
}
document.title = title;
}
Object.keys(data).forEach(function(key) {
var i;
// ---------------------------------------------------------------------
// Web mode
// ---------------------------------------------------------------------
if (key ==="webMode") {
password = data.webMode == 1;
$("#layout").toggle(data.webMode === 0);
$("#password").toggle(data.webMode === 1);
}
// ---------------------------------------------------------------------
// Actions
// ---------------------------------------------------------------------
if (key === "action") {
if (data.action === "reload") doReload(1000);
return;
}
// ---------------------------------------------------------------------
// RFBridge
// ---------------------------------------------------------------------
if (key === "rfbCount") {
for (i=0; i 0 && position === key.length - 7) {
var module = key.slice(0,-7);
$(".module-" + module).show();
return;
}
if (key === "now") {
now = data[key];
ago = 0;
return;
}
// Pre-process
if (key === "network") {
data.network = data.network.toUpperCase();
}
if (key === "mqttStatus") {
data.mqttStatus = data.mqttStatus ? "CONNECTED" : "NOT CONNECTED";
}
if (key === "ntpStatus") {
data.ntpStatus = data.ntpStatus ? "SYNC'D" : "NOT SYNC'D";
}
if (key === "uptime") {
var uptime = parseInt(data[key], 10);
var seconds = uptime % 60; uptime = parseInt(uptime / 60, 10);
var minutes = uptime % 60; uptime = parseInt(uptime / 60, 10);
var hours = uptime % 24; uptime = parseInt(uptime / 24, 10);
var days = uptime;
data[key] = days + "d " + zeroPad(hours, 2) + "h " + zeroPad(minutes, 2) + "m " + zeroPad(seconds, 2) + "s";
}
// ---------------------------------------------------------------------
// Matching
// ---------------------------------------------------------------------
var pre;
var post;
// Look for INPUTs
var input = $("input[name='" + key + "']");
if (input.length > 0) {
if (input.attr("type") === "checkbox") {
input.
prop("checked", data[key]).
iphoneStyle("refresh");
} else if (input.attr("type") === "radio") {
input.val([data[key]]);
} else {
pre = input.attr("pre") || "";
post = input.attr("post") || "";
input.val(pre + data[key] + post);
}
}
// Look for SPANs
var span = $("span[name='" + key + "']");
if (span.length > 0) {
pre = span.attr("pre") || "";
post = span.attr("post") || "";
span.html(pre + data[key] + post);
}
// Look for SELECTs
var select = $("select[name='" + key + "']");
if (select.length > 0) {
select.val(data[key]);
}
});
// Auto generate an APIKey if none defined yet
if ($("input[name='apiKey']").val() === "") {
generateAPIKey();
}
resetOriginals();
}
function hasChanged() {
var newValue, originalValue;
if ($(this).attr("type") === "checkbox") {
newValue = $(this).prop("checked");
originalValue = $(this).attr("original") == "true";
} else {
newValue = $(this).val();
originalValue = $(this).attr("original");
}
var hasChanged = $(this).attr("hasChanged") || 0;
var action = $(this).attr("action");
if (typeof originalValue === "undefined") { return; }
if (action === "none") { return; }
if (newValue !== originalValue) {
if (hasChanged === 0) {
++numChanged;
if (action === "reconnect") ++numReconnect;
if (action === "reboot") ++numReboot;
if (action === "reload") ++numReload;
$(this).attr("hasChanged", 1);
}
} else {
if (hasChanged === 1) {
--numChanged;
if (action === "reconnect") --numReconnect;
if (action === "reboot") --numReboot;
if (action === "reload") --numReload;
$(this).attr("hasChanged", 0);
}
}
}
// -----------------------------------------------------------------------------
// Init & connect
// -----------------------------------------------------------------------------
function connect(host) {
if (typeof host === "undefined") {
host = window.location.href.replace("#", "");
} else {
if (host.indexOf("http") !== 0) {
host = "http://" + host + "/";
}
}
if (host.indexOf("http") !== 0) {return;}
webhost = host;
wshost = host.replace("http", "ws") + "ws";
if (websock) websock.close();
websock = new WebSocket(wshost);
websock.onmessage = function(evt) {
var data = getJson(evt.data);
if (data) processData(data);
};
}
$(function() {
initMessages();
loadTimeZones();
setInterval(function() { keepTime(); }, 1000);
$("#menuLink").on("click", toggleMenu);
$(".pure-menu-link").on("click", showPanel);
$("progress").attr({ value: 0, max: 100 });
$(".button-update").on("click", doUpdate);
$(".button-update-password").on("click", doUpdatePassword);
$(".button-reboot").on("click", doReboot);
$(".button-reconnect").on("click", doReconnect);
$(".button-wifi-scan").on("click", doScan);
$(".button-settings-backup").on("click", doBackup);
$(".button-settings-restore").on("click", doRestore);
$(".button-settings-factory").on("click", doFactoryReset);
$("#uploader").on("change", onFileUpload);
$(".button-upgrade").on("click", doUpgrade);
$(".button-apikey").on("click", generateAPIKey);
$(".button-upgrade-browse").on("click", function() {
$("input[name='upgrade']")[0].click();
return false;
});
$("input[name='upgrade']").change(function (){
var fileName = $(this).val();
$("input[name='filename']").val(fileName.replace(/^.*[\\\/]/, ""));
});
$(".button-add-network").on("click", function() {
$(".more", addNetwork()).toggle();
});
$(".button-add-schedule").on("click", addSchedule);
$(document).on("change", "input", hasChanged);
$(document).on("change", "select", hasChanged);
connect();
});