mirror of
https://github.com/s00500/ESPUI.git
synced 2024-11-16 14:00:58 +00:00
f5dd757240
Allows for panels to be displayed in single column mode, regardless of screen width. For more information, see updates to README.md
765 lines
21 KiB
JavaScript
765 lines
21 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 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 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_NONE:
|
|
return "dark";
|
|
default:
|
|
return "";
|
|
}
|
|
}
|
|
|
|
var websock;
|
|
var websockConnected = false;
|
|
|
|
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);
|
|
return savedData[id];
|
|
}
|
|
return [];
|
|
}
|
|
|
|
function restart() {
|
|
$(document).add("*").off();
|
|
$("#row").html("");
|
|
websock.close();
|
|
start();
|
|
}
|
|
|
|
function conStatusError() {
|
|
websockConnected = false;
|
|
$("#conStatus").removeClass("color-green");
|
|
$("#conStatus").addClass("color-red");
|
|
$("#conStatus").html("Error / No Connection ↻");
|
|
$("#conStatus").off();
|
|
$("#conStatus").on({
|
|
click: restart,
|
|
});
|
|
}
|
|
|
|
function handleVisibilityChange() {
|
|
if (!websockConnected && !document.hidden) {
|
|
restart();
|
|
}
|
|
}
|
|
|
|
function start() {
|
|
document.addEventListener("visibilitychange", handleVisibilityChange, false);
|
|
if (
|
|
window.location.port != "" ||
|
|
window.location.port != 80 ||
|
|
window.location.port != 443
|
|
) {
|
|
websock = new WebSocket(
|
|
"ws://" + window.location.hostname + ":" + window.location.port + "/ws"
|
|
);
|
|
} else {
|
|
websock = new WebSocket("ws://" + window.location.hostname + "/ws");
|
|
}
|
|
websock.onopen = function (evt) {
|
|
console.log("websock open");
|
|
$("#conStatus").addClass("color-green");
|
|
$("#conStatus").text("Connected");
|
|
websockConnected = true;
|
|
};
|
|
|
|
websock.onclose = function (evt) {
|
|
console.log("websock close");
|
|
conStatusError();
|
|
};
|
|
|
|
websock.onerror = function (evt) {
|
|
console.log(evt);
|
|
conStatusError();
|
|
};
|
|
|
|
var handleEvent = function (evt) {
|
|
console.log(evt);
|
|
var data = JSON.parse(evt.data);
|
|
var e = document.body;
|
|
var center = "";
|
|
|
|
switch (data.type) {
|
|
case UI_INITIAL_GUI:
|
|
// Clear current elements
|
|
$("#row").html("");
|
|
$("#tabsnav").html("");
|
|
$("#tabscontent").html("");
|
|
|
|
if (data.sliderContinuous) {
|
|
sliderContinuous = data.sliderContinuous;
|
|
}
|
|
data.controls.forEach(element => {
|
|
var fauxEvent = {
|
|
data: JSON.stringify(element),
|
|
};
|
|
handleEvent(fauxEvent);
|
|
});
|
|
break;
|
|
|
|
case UI_EXTEND_GUI:
|
|
data.controls.forEach(element => {
|
|
var fauxEvent = {
|
|
data: JSON.stringify(element),
|
|
};
|
|
handleEvent(fauxEvent);
|
|
});
|
|
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) {
|
|
var parent = $("#id" + data.parentControl + " input");
|
|
if (parent.size()) {
|
|
parent.attr("min", data.value);
|
|
}
|
|
}
|
|
break;
|
|
|
|
case UI_MAX:
|
|
if (data.parentControl) {
|
|
var parent = $("#id" + data.parentControl + " input");
|
|
if (parent.size()) {
|
|
parent.attr("max", data.value);
|
|
}
|
|
}
|
|
break;
|
|
|
|
case UI_STEP:
|
|
if (data.parentControl) {
|
|
var parent = $("#id" + data.parentControl + " input");
|
|
if (parent.size()) {
|
|
parent.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 = Math.round(new Date().getTime() / 1000);
|
|
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;
|
|
|
|
/*
|
|
* 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:
|
|
slider_move($("#id" + data.id), 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);
|
|
}
|
|
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:
|
|
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;
|
|
|
|
default:
|
|
console.error("Unknown type or event");
|
|
break;
|
|
}
|
|
|
|
if (data.type >= UPDATE_OFFSET && data.type < UI_INITIAL_GUI) {
|
|
var element = $("#id" + data.id);
|
|
|
|
if(data.hasOwnProperty('panelStyle')) {
|
|
$("#id" + data.id).attr("style", data.panelStyle);
|
|
}
|
|
|
|
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));
|
|
}
|
|
}
|
|
|
|
$(".range-slider__range").each(function(){
|
|
$(this)[0].value = $(this).attr("value");
|
|
$(this).next().html($(this).attr("value"));
|
|
});
|
|
};
|
|
|
|
websock.onmessage = handleEvent;
|
|
}
|
|
|
|
function sliderchange(number) {
|
|
var val = $("#sl" + number).val();
|
|
websock.send("slvalue:" + val + ":" + number);
|
|
}
|
|
|
|
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) {
|
|
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 ($("#s" + number).is(":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 + "' " : "";
|
|
elementStyle = data.hasOwnProperty('elementStyle') ? " style='" + data.elementStyle + "' " : "";
|
|
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:
|
|
html = "<div id='id" + data.id + "' " + panelStyle + " class='two columns " + panelwide + " card tcenter " +
|
|
colorClass(data.color) + "'><h5>" + data.label + "</h5><hr/>" +
|
|
elementHTML(data.type, data.id, data.value, elementStyle) +
|
|
"</div>";
|
|
break;
|
|
case UI_SEPARATOR:
|
|
html = "<div id='id" + data.id + "' " + panelStyle + " class='sectionbreak columns'>" +
|
|
"<h5>" + data.label + "</h5><hr/></div>";
|
|
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.type, data.id, data.value, elementStyle));
|
|
}
|
|
}
|
|
|
|
var elementHTML = function(type, id, value, elementStyle) {
|
|
switch(type) {
|
|
case UI_LABEL:
|
|
return "<span id='l" + id + "' " + elementStyle +
|
|
" class='label label-wrap'>" + value + "</span>";
|
|
case UI_BUTTON:
|
|
return "<button id='btn" + id + "' " + elementStyle +
|
|
" onmousedown='buttonclick(" + id + ", true)'" +
|
|
" onmouseup='buttonclick(" + id + ", false)'>" +
|
|
value + "</button>";
|
|
case UI_SWITCHER:
|
|
return "<label id='sl" + id + "' " + elementStyle +
|
|
" class='switch " + (value == "1" ? "checked" : "") + "'>" +
|
|
"<div class='in'>" +
|
|
"<input type='checkbox' id='s" + id + "' onClick='switcher(" + id + ",null)' " +
|
|
(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 + "'>▲</a></li>" +
|
|
"<li><a onmousedown='padclick(RIGHT, " + id + ", true)' " +
|
|
"onmouseup='padclick(RIGHT, " + id + ", false)' id='pr" + id + "'>▲</a></li>" +
|
|
"<li><a onmousedown='padclick(LEFT, " + id + ", true)' " +
|
|
"onmouseup='padclick(LEFT, " + id + ", false)' id='pl" + id + "'>▲</a></li>" +
|
|
"<li><a onmousedown='padclick(DOWN, " + id + ", true)' " +
|
|
"onmouseup='padclick(DOWN, " + id + ", false)' id='pb" + id + "'>▲</a></li>" +
|
|
"</ul>" +
|
|
(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'>" +
|
|
"<input id='sl" + id + "' type='range' min='0' max='100' value='" + value + "' " +
|
|
elementStyle + " class='range-slider__range'><span class='range-slider__value'>" +
|
|
value + "</span></div>";
|
|
case UI_NUMBER:
|
|
return "<input style='color:black;' " + elementStyle + " id='num" + id +
|
|
"' type='number' value='" + value + "' onchange='numberchange(" + id + ")' />";
|
|
case UI_TEXT_INPUT:
|
|
return "<input style='color:black;' " + elementStyle + " id='text" + id +
|
|
"' value='" + value + "' onchange='textchange(" + id + ")' />";
|
|
case UI_SELECT:
|
|
return "<select style='color:black;' " + elementStyle + " id='select" + id +
|
|
"' onchange='selectchange(" + id + ")' />";
|
|
case UI_GRAPH:
|
|
return "<figure id='graph" + id + "'><figcaption>" + label + "</figcaption></figure>";
|
|
case UI_GAUGE:
|
|
return "WILL BE A GAUGE <input style='color:black;' id='gauge" + id +
|
|
"' type='number' value='" + 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 "";
|
|
}
|
|
} |