1
0
mirror of https://github.com/s00500/ESPUI.git synced 2024-12-05 00:11:29 +00:00
ESPUI/data/js/controls.js

1132 lines
39 KiB
JavaScript

const UI_INITIAL_GUI = 200;
const UI_RELOAD = 201;
const UPDATE_OFFSET = 100;
const UI_EXTEND_GUI = 210;
const UI_TITEL = 0;
const UI_PAD = 1;
const UPDATE_PAD = 101;
const UI_CPAD = 2;
const UPDATE_CPAD = 102;
const UI_BUTTON = 3;
const UPDATE_BUTTON = 103;
const UI_LABEL = 4;
const UPDATE_LABEL = 104;
const UI_SWITCHER = 5;
const UPDATE_SWITCHER = 105;
const UI_SLIDER = 6;
const UPDATE_SLIDER = 106;
const UI_NUMBER = 7;
const UPDATE_NUMBER = 107;
const UI_TEXT_INPUT = 8;
const UPDATE_TEXT_INPUT = 108;
const UI_GRAPH = 9;
const ADD_GRAPH_POINT = 10;
const CLEAR_GRAPH = 109;
const UI_TAB = 11;
const UPDATE_TAB = 111;
const UI_SELECT = 12;
const UPDATE_SELECT = 112;
const UI_OPTION = 13;
const UPDATE_OPTION = 113;
const UI_MIN = 14;
const UPDATE_MIN = 114;
const UI_MAX = 15;
const UPDATE_MAX = 115;
const UI_STEP = 16;
const UPDATE_STEP = 116;
const UI_GAUGE = 17;
const UPDATE_GAUGE = 117;
const UI_ACCEL = 18;
const UPDATE_ACCEL = 118;
const UI_SEPARATOR = 19;
const UPDATE_SEPARATOR = 119;
const UI_TIME = 20;
const UPDATE_TIME = 120;
const UI_FILEDISPLAY = 21;
const UPDATE_FILEDISPLAY = 121;
const UI_FRAGMENT = 98;
const UP = 0;
const DOWN = 1;
const LEFT = 2;
const RIGHT = 3;
const CENTER = 4;
// Colors
const C_TURQUOISE = 0;
const C_EMERALD = 1;
const C_PETERRIVER = 2;
const C_WETASPHALT = 3;
const C_SUNFLOWER = 4;
const C_CARROT = 5;
const C_ALIZARIN = 6;
const C_DARK = 7;
const C_NONE = 255;
var controlAssemblyArray = new Object();
var FragmentAssemblyTimer = new Array();
var graphData = new Array();
var hasAccel = false;
var sliderContinuous = false;
function colorClass(colorId) {
colorId = Number(colorId);
switch (colorId) {
case C_TURQUOISE:
return "turquoise";
case C_EMERALD:
return "emerald";
case C_PETERRIVER:
return "peterriver";
case C_WETASPHALT:
return "wetasphalt";
case C_SUNFLOWER:
return "sunflower";
case C_CARROT:
return "carrot";
case C_ALIZARIN:
return "alizarin";
case C_DARK:
case C_NONE:
return "dark";
default:
return "";
}
}
var websock;
var websockConnected = false;
var WebSocketTimer = null;
function requestOrientationPermission() {
/*
// Currently this fails, since it needs secure context on IOS safari
if (typeof DeviceMotionEvent.requestPermission === "function") {
DeviceOrientationEvent.requestPermission()
.then(response => {
if (response == "granted") {
window.addEventListener("deviceorientation", handleOrientation);
}
})
.catch(console.error);
} else {
// Non IOS 13
window.addEventListener("deviceorientation", handleOrientation);
}
*/
}
/*
function handleOrientation(event) {
var x = event.beta; // In degree in the range [-180,180]
var y = event.gamma; // In degree in the range [-90,90]
var output = document.querySelector(".output");
output.innerHTML = "beta : " + x + "\n";
output.innerHTML += "gamma: " + y + "\n";
// Because we don't want to have the device upside down
// We constrain the x value to the range [-90,90]
if (x > 90) {
x = 90;
}
if (x < -90) {
x = -90;
}
// To make computation easier we shift the range of
// x and y to [0,180]
x += 90;
y += 90;
// 10 is half the size of the ball
// It center the positioning point to the center of the ball
var ball = document.querySelector(".ball");
var garden = document.querySelector(".garden");
var maxX = garden.clientWidth - ball.clientWidth;
var maxY = garden.clientHeight - ball.clientHeight;
ball.style.top = (maxY * y) / 180 - 10 + "px";
ball.style.left = (maxX * x) / 180 - 10 + "px";
}
*/
function saveGraphData() {
localStorage.setItem("espuigraphs", JSON.stringify(graphData));
}
function restoreGraphData(id) {
var savedData = localStorage.getItem("espuigraphs", graphData);
if (savedData != null) {
savedData = JSON.parse(savedData);
let idData = savedData[id];
return Array.isArray(idData) ? idData : [];
}
return [];
}
function restart() {
$(document).add("*").off();
$("#row").html("");
conStatusError();
start();
}
function conStatusError() {
FragmentAssemblyTimer.forEach(element => {
clearInterval(element);
});
FragmentAssemblyTimer = new Array();
controlAssemblyArray = new Array();
if (true === websockConnected) {
websockConnected = false;
websock.close();
$("#conStatus").removeClass("color-green");
$("#conStatus").addClass("color-red");
$("#conStatus").html("Error / No Connection &#8635;");
$("#conStatus").off();
$("#conStatus").on({
click: restart,
});
}
}
function handleVisibilityChange() {
if (!websockConnected && !document.hidden) {
restart();
}
}
function start() {
let location = window.location.hostname;
let port = window.location.port;
// let location = "192.168.10.219";
// let port = "";
document.addEventListener("visibilitychange", handleVisibilityChange, false);
if (
port != "" ||
port != 80 ||
port != 443
) {
websock = new WebSocket( "ws://" + location + ":" + port + "/ws" );
} else {
websock = new WebSocket("ws://" + location + "/ws");
}
// is the timer running?
if (null === WebSocketTimer) {
// timer runs forever
WebSocketTimer = setInterval(function () {
// console.info("Periodic Timer has expired");
// is the socket closed?
if (websock.readyState === 3) {
// console.info("Web Socket Is Closed");
restart();
}
}, 5000);
} // end timer was not running
websock.onopen = function (evt) {
console.log("websock open");
$("#conStatus").addClass("color-green");
$("#conStatus").text("Connected");
websockConnected = true;
FragmentAssemblyTimer.forEach(element => {
clearInterval(element);
});
FragmentAssemblyTimer = new Array();
controlAssemblyArray = new Array();
};
websock.onclose = function (evt) {
// console.log("Close evt: '" + evt + "'");
// console.log("Close reason: '" + evt.reason + "'");
// console.log("Close code: '" + evt.code + "'");
console.log("websock close");
conStatusError();
FragmentAssemblyTimer.forEach(element => {
clearInterval(element);
});
FragmentAssemblyTimer = new Array();
controlAssemblyArray = new Array();
};
websock.onerror = function (evt) {
console.log("websock Error");
// console.log("Error evt: '" + evt + "'");
// console.log("Error data: '" + evt.data + "'");
restart();
FragmentAssemblyTimer.forEach(element => {
clearInterval(element);
});
FragmentAssemblyTimer = new Array();
controlAssemblyArray = new Array();
};
var handleEvent = function (evt) {
// console.log("handleEvent:Data evt: '" + evt + "'");
// console.log("handleEvent:Data data: '" + evt.data + "'");
try {
var data = JSON.parse(evt.data);
}
catch (Event) {
console.error(Event);
// console.info("start the update over again");
websock.send("uiok:" + 0);
return;
}
var e = document.body;
var center = "";
// console.info("data.type: '" + data.type + "'");
switch (data.type) {
case UI_INITIAL_GUI:
// Clear current elements
$("#row").html("");
$("#tabsnav").html("");
$("#tabscontent").html("");
if (data.sliderContinuous) {
sliderContinuous = data.sliderContinuous;
}
// console.info("UI_INITIAL_GUI:data record: '" + data + "'");
data.controls.forEach(element => {
// console.info("element: '" + JSON.stringify(element) + "'");
var fauxEvent = {
data: JSON.stringify(element),
};
handleEvent(fauxEvent);
});
//If there are more elements in the complete UI, then request them
//Note: we subtract 1 from data.controls.length because the controls always
//includes the title element
if (data.totalcontrols > (data.controls.length - 1)) {
websock.send("uiok:" + (data.controls.length - 1));
}
break;
case UI_EXTEND_GUI:
// console.info("UI_EXTEND_GUI data record: '" + data + "'");
data.controls.forEach(element => {
// console.info("UI_EXTEND_GUI:element: '" + JSON.stringify(element) + "'");
var fauxEvent = {
data: JSON.stringify(element),
};
handleEvent(fauxEvent);
});
//Do we need to keep requesting more UI elements?
if (data.totalcontrols > data.startindex + (data.controls.length - 1)) {
websock.send("uiok:" + (data.startindex + (data.controls.length - 1)));
}
break;
case UI_RELOAD:
window.location.reload();
break;
case UI_TITEL:
document.title = data.label;
$("#mainHeader").html(data.label);
break;
/*
Most elements have the same behaviour when added.
*/
case UI_LABEL:
case UI_NUMBER:
case UI_TEXT_INPUT:
case UI_SELECT:
case UI_GAUGE:
case UI_SEPARATOR:
if (data.visible) addToHTML(data);
break;
/*
These elements must call additional functions after being added to the DOM
*/
case UI_BUTTON:
if (data.visible) {
addToHTML(data);
$("#btn" + data.id).on({
touchstart: function (e) {
e.preventDefault();
buttonclick(data.id, true);
},
touchend: function (e) {
e.preventDefault();
buttonclick(data.id, false);
},
});
}
break;
case UI_SWITCHER:
if (data.visible) {
addToHTML(data);
switcher(data.id, data.value);
}
break;
case UI_CPAD:
case UI_PAD:
if (data.visible) {
addToHTML(data);
$("#pf" + data.id).on({
touchstart: function (e) {
e.preventDefault();
padclick(UP, data.id, true);
},
touchend: function (e) {
e.preventDefault();
padclick(UP, data.id, false);
},
});
$("#pl" + data.id).on({
touchstart: function (e) {
e.preventDefault();
padclick(LEFT, data.id, true);
},
touchend: function (e) {
e.preventDefault();
padclick(LEFT, data.id, false);
},
});
$("#pr" + data.id).on({
touchstart: function (e) {
e.preventDefault();
padclick(RIGHT, data.id, true);
},
touchend: function (e) {
e.preventDefault();
padclick(RIGHT, data.id, false);
},
});
$("#pb" + data.id).on({
touchstart: function (e) {
e.preventDefault();
padclick(DOWN, data.id, true);
},
touchend: function (e) {
e.preventDefault();
padclick(DOWN, data.id, false);
},
});
$("#pc" + data.id).on({
touchstart: function (e) {
e.preventDefault();
padclick(CENTER, data.id, true);
},
touchend: function (e) {
e.preventDefault();
padclick(CENTER, data.id, false);
},
});
}
break;
case UI_SLIDER:
//https://codepen.io/seanstopnik/pen/CeLqA
if (data.visible) {
addToHTML(data);
rangeSlider(!sliderContinuous);
}
break;
case UI_TAB:
if (data.visible) {
$("#tabsnav").append(
"<li><a onmouseup='tabclick(" + data.id + ")' href='#tab" + data.id + "'>" + data.value + "</a></li>"
);
$("#tabscontent").append("<div id='tab" + data.id + "'></div>");
tabs = $(".tabscontent").tabbedContent({ loop: true }).data("api");
// switch to tab...
$("a")
.filter(function () {
return $(this).attr("href") === "#click-to-switch";
})
.on("click", function (e) {
var tab = prompt("Tab to switch to (number or id)?");
if (!tabs.switchTab(tab)) {
alert("That tab does not exist :\\");
}
e.preventDefault();
});
}
break;
case UI_OPTION:
if (data.parentControl) {
var parent = $("#select" + data.parentControl);
parent.append(
"<option id='option" +
data.id +
"' value='" +
data.value +
"' " +
data.selected +
">" +
data.label +
"</option>"
);
}
break;
case UI_MIN:
if (data.parentControl) {
//Is it applied to a slider?
if ($('#sl' + data.parentControl).length) {
$('#sl' + data.parentControl).attr("min", data.value);
} else if ($('#num' + data.parentControl).length) {
//Or a number
$('#num' + data.parentControl).attr("min", data.value);
}
}
break;
case UI_MAX:
if (data.parentControl) {
//Is it applied to a slider?
if ($('#sl' + data.parentControl).length) {
$('#sl' + data.parentControl).attr("max", data.value);
} else if ($('#text' + data.parentControl).length) {
//Is it a text element
$('#text' + data.parentControl).attr("maxlength", data.value);
} else if ($('#num' + data.parentControl).length) {
//Or a number
$('#num' + data.parentControl).attr("max", data.value);
}
}
break;
case UI_STEP:
if (data.parentControl) {
//Is it applied to a slider?
if ($('#sl' + data.parentControl).length) {
$('#sl' + data.parentControl).attr("step", data.value);
} else if ($('#num' + data.parentControl).length) {
//Or a number
$('#num' + data.parentControl).attr("step", data.value);
}
}
break;
case UI_GRAPH:
if (data.visible) {
addToHTML(data);
graphData[data.id] = restoreGraphData(data.id);
renderGraphSvg(graphData[data.id], "graph" + data.id);
}
break;
case ADD_GRAPH_POINT:
var ts = new Date().getTime();
graphData[data.id].push({ x: ts, y: data.value });
saveGraphData();
renderGraphSvg(graphData[data.id], "graph" + data.id);
break;
case CLEAR_GRAPH:
graphData[data.id] = [];
saveGraphData();
renderGraphSvg(graphData[data.id], "graph" + data.id);
break;
case UI_ACCEL:
if (hasAccel) break;
hasAccel = true;
if (data.visible) {
addToHTML(data);
requestOrientationPermission();
}
break;
case UI_FILEDISPLAY:
if (data.visible)
{
addToHTML(data);
FileDisplayUploadFile(data);
}
break;
/*
* Update messages change the value/style of a component without adding new HTML
*/
case UPDATE_LABEL:
$("#l" + data.id).html(data.value);
if (data.hasOwnProperty('elementStyle')) {
$("#l" + data.id).attr("style", data.elementStyle);
}
break;
case UPDATE_SWITCHER:
switcher(data.id, data.value == "0" ? 0 : 1);
if (data.hasOwnProperty('elementStyle')) {
$("#sl" + data.id).attr("style", data.elementStyle);
}
break;
case UPDATE_SLIDER:
$("#sl" + data.id).attr("value", data.value)
slider_move($("#sl" + data.id).parent().parent(), data.value, "100", false);
if (data.hasOwnProperty('elementStyle')) {
$("#sl" + data.id).attr("style", data.elementStyle);
}
break;
case UPDATE_NUMBER:
$("#num" + data.id).val(data.value);
if (data.hasOwnProperty('elementStyle')) {
$("#num" + data.id).attr("style", data.elementStyle);
}
break;
case UPDATE_TEXT_INPUT:
$("#text" + data.id).val(data.value);
if (data.hasOwnProperty('elementStyle')) {
$("#text" + data.id).attr("style", data.elementStyle);
}
if (data.hasOwnProperty('inputType')) {
$("#text" + data.id).attr("type", data.inputType);
}
break;
case UPDATE_SELECT:
$("#select" + data.id).val(data.value);
if (data.hasOwnProperty('elementStyle')) {
$("#select" + data.id).attr("style", data.elementStyle);
}
break;
case UPDATE_BUTTON:
$("#btn" + data.id).val(data.value);
$("#btn" + data.id).text(data.value);
if (data.hasOwnProperty('elementStyle')) {
$("#btn" + data.id).attr("style", data.elementStyle);
}
break;
case UPDATE_PAD:
case UPDATE_CPAD:
break;
case UPDATE_GAUGE:
$("#gauge" + data.id).val(data.value);
if (data.hasOwnProperty('elementStyle')) {
$("#gauge" + data.id).attr("style", data.elementStyle);
}
break;
case UPDATE_ACCEL:
break;
case UPDATE_TIME:
var rv = new Date().toISOString();
websock.send("time:" + rv + ":" + data.id);
break;
case UPDATE_FILEDISPLAY:
FileDisplayUploadFile(data);
break;
case UI_FRAGMENT:
let FragmentLen = data.length;
let FragementOffset = data.offset;
let NextFragmentOffset = FragementOffset + FragmentLen;
let Total = data.total;
let Arrived = (FragmentLen + FragementOffset);
let FragmentFinal = Total === Arrived;
// console.info("UI_FRAGMENT:FragmentLen '" + FragmentLen + "'");
// console.info("UI_FRAGMENT:FragementOffset '" + FragementOffset + "'");
// console.info("UI_FRAGMENT:NextFragmentOffset '" + NextFragmentOffset + "'");
// console.info("UI_FRAGMENT:Total '" + Total + "'");
// console.info("UI_FRAGMENT:Arrived '" + Arrived + "'");
// console.info("UI_FRAGMENT:FragmentFinal '" + FragmentFinal + "'");
if (!data.hasOwnProperty('control'))
{
console.error("UI_FRAGMENT:Missing control record, skipping control");
break;
}
let control = data.control;
StopFragmentAssemblyTimer(data.control.id);
// is this the first fragment?
if(0 === FragementOffset)
{
// console.info("Found first fragment");
controlAssemblyArray[control.id] = data;
// console.info("Value: " + controlAssemblyArray[control.id].control.value);
controlAssemblyArray[control.id].offset = NextFragmentOffset;
StartFragmentAssemblyTimer(control.id);
let TotalRequest = JSON.stringify({ 'id' : control.id, 'offset' : NextFragmentOffset });
websock.send("uifragmentok:" + 0 + ": " + TotalRequest + ":");
// console.info("asked for fragment 2");
break;
}
// not first fragment. are we assembling this control?
if("undefined" === typeof controlAssemblyArray[control.id])
{
// it looks like we missed the first fragment. Start the control over
console.error("Missing first fragment for control: " + control.id);
StartFragmentAssemblyTimer(control.id);
let TotalRequest = JSON.stringify({ 'id' : control.id, 'offset' : 0 });
websock.send("uifragmentok:" + 0 + ": " + TotalRequest + ":");
// console.info("asked for fragment 1");
break;
}
// is this the expected next fragment
if(FragementOffset !== controlAssemblyArray[control.id].offset)
{
console.error("Wrong next fragment. Expected: " + controlAssemblyArray[control.id].offset + " Got: " + FragementOffset);
StartFragmentAssemblyTimer(control.id);
let TotalRequest = JSON.stringify({ 'id' : control.id, 'offset' : controlAssemblyArray[control.id].length + controlAssemblyArray[control.id].offset });
websock.send("uifragmentok:" + 0 + ": " + TotalRequest + ":");
// console.info("asked for the expected fragment");
break;
}
// console.info("Add to existing fragment");
controlAssemblyArray[control.id].control.value += control.value;
controlAssemblyArray[control.id].offset = NextFragmentOffset;
// console.info("Value: " + controlAssemblyArray[control.id].control.value);
if(true === FragmentFinal)
{
var fauxEvent = {
data: JSON.stringify(controlAssemblyArray[control.id].control),
};
handleEvent(fauxEvent);
controlAssemblyArray[control.id] = null;
// console.info("Found last fragment");
}
else
{
// console.info("Ask for next fragment.");
StartFragmentAssemblyTimer(control.id);
let TotalRequest = JSON.stringify({ 'id' : control.id, 'offset' : NextFragmentOffset});
websock.send("uifragmentok:" + 0 + ": " + TotalRequest + ":");
}
break;
default:
console.error("Unknown type or event");
break;
}
if (data.type >= UI_TITEL && data.type < UPDATE_OFFSET) {
//A UI element was just added to the DOM
processEnabled(data);
}
if (data.type >= UPDATE_OFFSET && data.type < UI_INITIAL_GUI) {
//An "update" message was just recieved and processed
var element = $("#id" + data.id);
if (data.hasOwnProperty('panelStyle')) {
$("#id" + data.id).attr("style", data.panelStyle);
}
if (data.hasOwnProperty('visible')) {
if (data['visible'])
$("#id" + data.id).show();
else
$("#id" + data.id).hide();
}
if (data.type == UPDATE_SLIDER) {
element.removeClass(
"slider-turquoise slider-emerald slider-peterriver slider-wetasphalt slider-sunflower slider-carrot slider-alizarin"
);
element.addClass("slider-" + colorClass(data.color));
} else {
element.removeClass(
"turquoise emerald peterriver wetasphalt sunflower carrot alizarin"
);
element.addClass(colorClass(data.color));
}
processEnabled(data);
}
$(".range-slider__range").each(function () {
$(this)[0].value = $(this).attr("value");
$(this).next().html($(this).attr("value"));
});
};
websock.onmessage = handleEvent;
}
async function FileDisplayUploadFile(data)
{
let text = await downloadFile(data.value);
let ItemToUpdateId = "fd" + data.id;
// console.info("ItemToUpdateId: " + ItemToUpdateId);
// console.info(" text: " + text);
// populate the text object
$("#" + ItemToUpdateId).val(text);
$("#" + ItemToUpdateId).css("textAlign", "left");
$("#" + ItemToUpdateId).css("white-space", "nowrap");
$("#" + ItemToUpdateId).css("overflow", "scroll");
$("#" + ItemToUpdateId).css("overflow-y", "scroll");
$("#" + ItemToUpdateId).css("overflow-x", "scroll");
$("#" + ItemToUpdateId).scrollTop($("#" + ItemToUpdateId).val().length);
// scroll the page to the updated control
// $("#" + ItemToUpdateId).focus();
} // FileDisplayUploadFile
async function downloadFile(filename)
{
let response = await fetch(filename);
if(response.status != 200) {
throw new Error("File Read Server Error: '" + response.status + "'");
}
// read response stream as text
let text_data = await response.text();
return text_data;
} // downloadFile
function StartFragmentAssemblyTimer(Id)
{
StopFragmentAssemblyTimer(Id);
FragmentAssemblyTimer[Id] = setInterval(function(_Id)
{
// does the fragment assembly still exist?
if("undefined" !== typeof controlAssemblyArray[_Id])
{
if(null !== controlAssemblyArray[_Id])
{
// we have a valid control that is being assembled
// ask for the next part
let TotalRequest = JSON.stringify({ 'id' : controlAssemblyArray[_Id].control.id, 'offset' : controlAssemblyArray[_Id].offset});
websock.send("uifragmentok:" + 0 + ": " + TotalRequest + ":");
}
}
}, 1000, Id);
}
function StopFragmentAssemblyTimer(Id)
{
if("undefined" !== typeof FragmentAssemblyTimer[Id])
{
if(FragmentAssemblyTimer[Id])
{
clearInterval(FragmentAssemblyTimer[Id]);
}
}
}
function sliderchange(number) {
var val = $("#sl" + number).val();
websock.send("slvalue:" + val + ":" + number);
$(".range-slider__range").each(function () {
$(this).attr("value", $(this)[0].value);
});
}
function numberchange(number) {
var val = $("#num" + number).val();
websock.send("nvalue:" + val + ":" + number);
}
function textchange(number) {
var val = $("#text" + number).val();
websock.send("tvalue:" + val + ":" + number);
}
function tabclick(number) {
var val = $("#tab" + number).val();
websock.send("tabvalue:" + val + ":" + number);
}
function selectchange(number) {
var val = $("#select" + number).val();
websock.send("svalue:" + val + ":" + number);
}
function buttonclick(number, isdown) {
if (isdown) websock.send("bdown:" + number);
else websock.send("bup:" + number);
}
function padclick(type, number, isdown) {
if ($("#id" + number + " nav").hasClass("disabled")) {
return;
}
switch (type) {
case CENTER:
if (isdown) websock.send("pcdown:" + number);
else websock.send("pcup:" + number);
break;
case UP:
if (isdown) websock.send("pfdown:" + number);
else websock.send("pfup:" + number);
break;
case DOWN:
if (isdown) websock.send("pbdown:" + number);
else websock.send("pbup:" + number);
break;
case LEFT:
if (isdown) websock.send("pldown:" + number);
else websock.send("plup:" + number);
break;
case RIGHT:
if (isdown) websock.send("prdown:" + number);
else websock.send("prup:" + number);
break;
}
}
function switcher(number, state) {
if (state == null) {
if (!$("#sl" + number).hasClass("checked")) {
websock.send("sactive:" + number);
$("#sl" + number).addClass("checked");
} else {
websock.send("sinactive:" + number);
$("#sl" + number).removeClass("checked");
}
} else if (state == 1) {
$("#sl" + number).addClass("checked");
$("#sl" + number).prop("checked", true);
} else if (state == 0) {
$("#sl" + number).removeClass("checked");
$("#sl" + number).prop("checked", false);
}
}
var rangeSlider = function (isDiscrete) {
var range = $(".range-slider__range");
var slidercb = function () {
sliderchange($(this).attr("id").replace(/^\D+/g, ""));
};
range.on({
input: function () {
$(this).next().html(this.value)
}
});
range.each(function () {
$(this).next().html(this.value);
if ($(this).attr("callbackSet") != "true") {
if (!isDiscrete) {
$(this).on({ input: slidercb }); //input fires when dragging
} else {
$(this).on({ change: slidercb }); //change fires only once released
}
$(this).attr("callbackSet", "true");
}
});
};
var addToHTML = function (data) {
panelStyle = data.hasOwnProperty('panelStyle') ? " style='" + data.panelStyle + "' " : "";
panelwide = data.hasOwnProperty('wide') ? "wide" : "";
if (!data.hasOwnProperty('parentControl') || $("#tab" + data.parentControl).length > 0) {
//We add the control with its own panel
var parent = data.hasOwnProperty('parentControl') ?
$("#tab" + data.parentControl) :
$("#row");
var html = "";
switch (data.type) {
case UI_LABEL:
case UI_BUTTON:
case UI_SWITCHER:
case UI_CPAD:
case UI_PAD:
case UI_SLIDER:
case UI_NUMBER:
case UI_TEXT_INPUT:
case UI_SELECT:
case UI_GRAPH:
case UI_GAUGE:
case UI_ACCEL:
case UI_FILEDISPLAY:
html = "<div id='id" + data.id + "' " + panelStyle + " class='two columns " + panelwide + " card tcenter " +
colorClass(data.color) + "'><h5>" + data.label + "</h5><hr/>" +
elementHTML(data) +
"</div>";
break;
case UI_SEPARATOR:
html = "<div id='id" + data.id + "' " + panelStyle + " class='sectionbreak columns'>" +
"<h5>" + data.label + "</h5><hr/></div>";
break;
case UI_TIME:
//Invisible element
break;
}
parent.append(html);
} else {
//We are adding to an existing panel so we only need the HTML for the element
var parent = $("#id" + data.parentControl);
parent.append(elementHTML(data));
}
}
var elementHTML = function (data) {
var id = data.id
var elementStyle = data.hasOwnProperty('elementStyle') ? " style='" + data.elementStyle + "' " : "";
var inputType = data.hasOwnProperty('inputType') ? " type='" + data.inputType + "' " : "";
switch (data.type) {
case UI_LABEL:
return "<span id='l" + id + "' " + elementStyle +
" class='label label-wrap'>" + data.value + "</span>";
case UI_FILEDISPLAY:
return "<textarea id='fd" + id + "' rows='4' " + elementStyle +
" class='label label-wrap'>" + "</textarea>";
case UI_BUTTON:
return "<button id='btn" + id + "' " + elementStyle +
" onmousedown='buttonclick(" + id + ", true)'" +
" onmouseup='buttonclick(" + id + ", false)'>" +
data.value + "</button>";
case UI_SWITCHER:
return "<label id='sl" + id + "' " + elementStyle +
" class='switch " + (data.value == "1" ? "checked" : "") +
(data.hasOwnProperty('vertical') ? " vert-switcher " : "") +
"'>" +
"<div class='in'>" +
"<input type='checkbox' id='s" + id + "' onClick='switcher(" + id + ",null)' " +
(data.value == "1" ? "checked" : "") + "/></div></label>";
case UI_CPAD:
case UI_PAD:
return "<nav class='control'><ul>" +
"<li><a onmousedown='padclick(UP, " + id + ", true)' " +
"onmouseup='padclick(UP, " + id + ", false)' id='pf" + id + "'>&#9650;</a></li>" +
"<li><a onmousedown='padclick(RIGHT, " + id + ", true)' " +
"onmouseup='padclick(RIGHT, " + id + ", false)' id='pr" + id + "'>&#9650;</a></li>" +
"<li><a onmousedown='padclick(LEFT, " + id + ", true)' " +
"onmouseup='padclick(LEFT, " + id + ", false)' id='pl" + id + "'>&#9650;</a></li>" +
"<li><a onmousedown='padclick(DOWN, " + id + ", true)' " +
"onmouseup='padclick(DOWN, " + id + ", false)' id='pb" + id + "'>&#9650;</a></li>" +
"</ul>" +
(data.type == UI_CPAD
? "<a class='confirm' onmousedown='padclick(CENTER," + id + ", true)' " +
"onmouseup='padclick(CENTER, " + id + ", false)' id='pc" + id + "'>OK</a>"
: "") +
"</nav>";
case UI_SLIDER:
return "<div class='range-slider " +
(data.hasOwnProperty('vertical') ? " vert-slider " : "") +
"'>" +
"<input id='sl" + id + "' type='range' min='0' max='100' value='" + data.value + "' " +
elementStyle + " class='range-slider__range'><span class='range-slider__value'>" +
data.value + "</span></div>";
case UI_NUMBER:
return "<input style='color:black; " + data.elementStyle + "' id='num" + id +
"' type='number' value='" + data.value + "' onchange='numberchange(" + id + ")' />";
case UI_TEXT_INPUT:
return "<input " + inputType + "style='color:black; " + data.elementStyle + "' id='text" + id +
"' value='" + data.value + "' onchange='textchange(" + id + ")' />";
case UI_SELECT:
return "<select style='color:black; " + data.elementStyle + "' id='select" + id +
"' onchange='selectchange(" + id + ")' />";
case UI_GRAPH:
return "<figure id='graph" + id + "'><figcaption>" + data.label + "</figcaption></figure>";
case UI_GAUGE:
return "WILL BE A GAUGE <input style='color:black;' id='gauge" + id +
"' type='number' value='" + data.value + "' onchange='numberchange(" + id + ")' />";
case UI_ACCEL:
return "ACCEL // Not implemented fully!<div class='accelerometer' id='accel" + id +
"' ><div class='ball" + id + "'></div><pre class='accelerometeroutput" + id + "'></pre>";
default:
return "";
}
}
var processEnabled = function (data) {
//Handle the enabling and disabling of controls
//Most controls can be disabled through the use of $("#<item>").prop("disabled", true) and CSS will style it accordingly
//The switcher and pads also require the addition of the "disabled" class
switch (data.type) {
case UI_SWITCHER:
case UPDATE_SWITCHER:
if (data.enabled) {
$("#sl" + data.id).removeClass('disabled');
$("#s" + data.id).prop("disabled", false);
} else {
$("#sl" + data.id).addClass('disabled');
$("#s" + data.id).prop("disabled", true);
}
break;
case UI_SLIDER:
case UPDATE_SLIDER:
$("#sl" + data.id).prop("disabled", !data.enabled);
break;
case UI_NUMBER:
case UPDATE_NUMBER:
$("#num" + data.id).prop("disabled", !data.enabled);
break;
case UI_TEXT_INPUT:
case UPDATE_TEXT_INPUT:
$("#text" + data.id).prop("disabled", !data.enabled);
break;
case UI_SELECT:
case UPDATE_SELECT:
$("#select" + data.id).prop("disabled", !data.enabled);
break;
case UI_BUTTON:
case UPDATE_BUTTON:
$("#btn" + data.id).prop("disabled", !data.enabled);
break;
case UI_PAD:
case UI_CPAD:
case UPDATE_PAD:
case UPDATE_CPAD:
case UI_FILEDISPLAY:
case UPDATE_FILEDISPLAY:
if (data.enabled) {
$("#id" + data.id + " nav").removeClass('disabled');
} else {
$("#id" + data.id + " nav").addClass('disabled');
}
break;
}
}