mirror of
https://github.com/s00500/ESPUI.git
synced 2025-07-04 16:30:17 +00:00
Add Alert, alpha version
This commit is contained in:
Nikola Kirov
225
data/js/controls.js
vendored
225
data/js/controls.js
vendored
@ -4,6 +4,11 @@ const UPDATE_OFFSET = 100;
|
||||
|
||||
const UI_EXTEND_GUI = 210;
|
||||
|
||||
const ALERT_I = 240;
|
||||
const ALERT_W = 241;
|
||||
const ALERT_E = 242;
|
||||
const ALERT_S = 243;
|
||||
|
||||
const UI_TITEL = 0;
|
||||
|
||||
const UI_PAD = 1;
|
||||
@ -80,11 +85,169 @@ const C_DARK = 7;
|
||||
const C_NONE = 255;
|
||||
|
||||
var controlAssemblyArray = new Object();
|
||||
var FragmentAssemblyTimer = new Object();
|
||||
var FragmentAssemblyTimer = 0;
|
||||
var graphData = new Array();
|
||||
var hasAccel = false;
|
||||
var sliderContinuous = false;
|
||||
|
||||
class Alert {
|
||||
static fire(
|
||||
icon,
|
||||
message,
|
||||
position = "tl",
|
||||
type = "",
|
||||
options = {},
|
||||
onConfirm = function () {},
|
||||
onCancel = function () {}
|
||||
) {
|
||||
// Creates essential elements
|
||||
const el = document.createElement("div");
|
||||
el.className = "Alert";
|
||||
const divIcon = document.createElement("div");
|
||||
divIcon.className = "AlertIcon";
|
||||
const divMessage = document.createElement("div");
|
||||
divMessage.className = "AlertMessage";
|
||||
|
||||
// Appends elements to parent element
|
||||
el.appendChild(divIcon);
|
||||
el.appendChild(divMessage);
|
||||
|
||||
// Handles icon selection based on parameter "icon"
|
||||
if (icon == "succ") {
|
||||
divIcon.innerHTML = '✓';
|
||||
} else if (icon == "err") {
|
||||
divIcon.innerHTML = '⨷';
|
||||
el.style.backgroundColor = "rgba(180, 0, 0, 0.75)"
|
||||
message = "<b>ERROR</b><br>" + message;
|
||||
} else if (icon == "info") {
|
||||
divIcon.innerHTML = '⚠';
|
||||
} else if (icon == "warn") {
|
||||
divIcon.innerHTML = "𝕎";
|
||||
el.style.backgroundColor = "rgba(100, 0, 0, 0.75);"
|
||||
}
|
||||
|
||||
// Sets message based on parameter "message"
|
||||
divMessage.innerHTML = "<p>" + message + "</p>";
|
||||
|
||||
// Creates Alert instance of type "dialog" based on "type" parameter
|
||||
if (type == "dialog") {
|
||||
// Necessary changes to styling for dialog
|
||||
el.style.flexDirection = "column";
|
||||
divIcon.style.position = "relative";
|
||||
divIcon.style.left = "0px";
|
||||
divIcon.style.marginTop = "15px";
|
||||
|
||||
// Creates necessary table elements for dialog
|
||||
const divControls = document.createElement("div");
|
||||
divControls.className = "AlertControls";
|
||||
|
||||
const btnConfirm = document.createElement("button");
|
||||
btnConfirm.className = "BtnConfirm";
|
||||
btnConfirm.innerHTML = "Confirm";
|
||||
const btnCancel = document.createElement("button");
|
||||
btnCancel.className = "BtnCancel";
|
||||
btnCancel.innerHTML = "Cancel";
|
||||
|
||||
// Appends elements to parent element
|
||||
el.appendChild(divControls);
|
||||
divControls.appendChild(btnConfirm);
|
||||
divControls.appendChild(btnCancel);
|
||||
|
||||
// Handles functions on dialog button click
|
||||
btnConfirm.onclick = function () {
|
||||
onConfirm();
|
||||
removeAlert(el);
|
||||
};
|
||||
|
||||
btnCancel.onclick = function () {
|
||||
onCancel();
|
||||
removeAlert(el);
|
||||
};
|
||||
|
||||
// Sets dialog specific options based on "options" object parameter
|
||||
if (Object.keys(options).length > 0) {
|
||||
if (options.confirmButtonText) {
|
||||
btnConfirm.innerHTML = options.confirmButtonText;
|
||||
}
|
||||
if (options.cancelButtonText) {
|
||||
btnCancel.innerHTML = options.cancelButtonText;
|
||||
}
|
||||
if (options.confirmButtonColor) {
|
||||
btnConfirm.style.backgroundColor = options.confirmButtonColor;
|
||||
}
|
||||
if (options.cancelButtonColor) {
|
||||
btnCancel.style.backgroundColor = options.cancelButtonColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Handles position based on parameter "position"
|
||||
el.style.left = 0;
|
||||
switch (position) {
|
||||
case "tl":
|
||||
el.style.top = 0;
|
||||
break;
|
||||
|
||||
case "tm":
|
||||
el.style.right = 0;
|
||||
el.style.marginLeft = "auto";
|
||||
el.style.marginRight = "auto";
|
||||
break;
|
||||
|
||||
case "bl":
|
||||
el.style.bottom = 0;
|
||||
break;
|
||||
|
||||
case "bm":
|
||||
el.style.right = 0;
|
||||
el.style.bottom = 0;
|
||||
el.style.marginLeft = "auto";
|
||||
el.style.marginRight = "auto";
|
||||
break;
|
||||
|
||||
case "center":
|
||||
el.style.right = 0;
|
||||
el.style.marginLeft = "auto";
|
||||
el.style.marginRight = "auto";
|
||||
el.style.marginTop = "20%";
|
||||
break;
|
||||
}
|
||||
|
||||
// Sets general options based on "options" object passed as parameter
|
||||
if (Object.keys(options).length > 0) {
|
||||
if (options.backgroundColor) {
|
||||
el.style.backgroundColor = options.backgroundColor;
|
||||
}
|
||||
if (options.fontColor) {
|
||||
divMessage.style.color = options.fontColor;
|
||||
}
|
||||
if (options.iconColor) {
|
||||
divIcon.style.color = options.iconColor;
|
||||
}
|
||||
if (options.borderRadius) {
|
||||
el.style.borderRadius = options.borderRadius;
|
||||
}
|
||||
if (options.border) {
|
||||
el.style.border = options.border;
|
||||
}
|
||||
}
|
||||
|
||||
// Finally appends Alert alert element to document body
|
||||
document.body.appendChild(el);
|
||||
|
||||
// Handles behavior of Alert alert upon deletion based on type
|
||||
if (type == "") { //notification
|
||||
setTimeout(() => {
|
||||
el.parentNode.removeChild(el);
|
||||
}, 8000);
|
||||
}
|
||||
|
||||
function remAlert(element) {
|
||||
element.parentNode.removeChild(element);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function colorClass(colorId) {
|
||||
colorId = Number(colorId);
|
||||
switch (colorId) {
|
||||
@ -193,11 +356,16 @@ function restart() {
|
||||
start();
|
||||
}
|
||||
|
||||
function FragmentAssemblyTimerStop(){
|
||||
if(FragmentAssemblyTimer)
|
||||
FragmentAssemblyTimer.forEach(element => {
|
||||
clearInterval(element);
|
||||
});
|
||||
FragmentAssemblyTimer = 0;
|
||||
}
|
||||
|
||||
function conStatusError() {
|
||||
FragmentAssemblyTimer.forEach(element => {
|
||||
clearInterval(element);
|
||||
});
|
||||
FragmentAssemblyTimer = new Object();
|
||||
FragmentAssemblyTimerStop();
|
||||
controlAssemblyArray = new Object();
|
||||
|
||||
if (true === websockConnected) {
|
||||
@ -222,8 +390,6 @@ function handleVisibilityChange() {
|
||||
function start() {
|
||||
let location = window.location.hostname;
|
||||
let port = window.location.port;
|
||||
// let location = "192.168.10.229";
|
||||
// let port = "";
|
||||
|
||||
document.addEventListener("visibilitychange", handleVisibilityChange, false);
|
||||
if (
|
||||
@ -243,7 +409,7 @@ function start() {
|
||||
// console.info("Periodic Timer has expired");
|
||||
// is the socket closed?
|
||||
if (websock.readyState === 3) {
|
||||
// console.info("Web Socket Is Closed");
|
||||
console.info("Web Socket Is Closed");
|
||||
restart();
|
||||
}
|
||||
}, 5000);
|
||||
@ -254,10 +420,7 @@ function start() {
|
||||
$("#conStatus").addClass("color-green");
|
||||
$("#conStatus").text("Connected");
|
||||
websockConnected = true;
|
||||
FragmentAssemblyTimer.forEach(element => {
|
||||
clearInterval(element);
|
||||
});
|
||||
FragmentAssemblyTimer = new Object();
|
||||
|
||||
controlAssemblyArray = new Object();
|
||||
};
|
||||
|
||||
@ -267,10 +430,7 @@ function start() {
|
||||
// console.log("Close code: '" + evt.code + "'");
|
||||
console.log("websock close");
|
||||
conStatusError();
|
||||
FragmentAssemblyTimer.forEach(element => {
|
||||
clearInterval(element);
|
||||
});
|
||||
FragmentAssemblyTimer = new Object();
|
||||
FragmentAssemblyTimerStop();
|
||||
controlAssemblyArray = new Object();
|
||||
};
|
||||
|
||||
@ -280,10 +440,7 @@ function start() {
|
||||
// console.log("Error data: '" + evt.data + "'");
|
||||
|
||||
restart();
|
||||
FragmentAssemblyTimer.forEach(element => {
|
||||
clearInterval(element);
|
||||
});
|
||||
FragmentAssemblyTimer = new Object();
|
||||
FragmentAssemblyTimerStop();
|
||||
controlAssemblyArray = new Object();
|
||||
};
|
||||
|
||||
@ -301,7 +458,7 @@ function start() {
|
||||
}
|
||||
var e = document.body;
|
||||
var center = "";
|
||||
// console.info("data.type: '" + data.type + "'");
|
||||
console.info("data.type: '" + data.type + "'");
|
||||
|
||||
switch (data.type) {
|
||||
case UI_INITIAL_GUI:
|
||||
@ -354,6 +511,19 @@ function start() {
|
||||
document.title = data.label;
|
||||
$("#mainHeader").html(data.label);
|
||||
break;
|
||||
|
||||
case ALERT_I:
|
||||
Alert.fire("info", data.value);
|
||||
break;
|
||||
case ALERT_W:
|
||||
Alert.fire("warn", data.value);
|
||||
break;
|
||||
case ALERT_E:
|
||||
Alert.fire("err", data.value);
|
||||
break;
|
||||
case ALERT_S:
|
||||
Alert.fire("succ", data.value);
|
||||
break;
|
||||
|
||||
/*
|
||||
Most elements have the same behaviour when added.
|
||||
@ -773,6 +943,10 @@ function start() {
|
||||
function StartFragmentAssemblyTimer(Id)
|
||||
{
|
||||
StopFragmentAssemblyTimer(Id);
|
||||
|
||||
if(!FragmentAssemblyTimer)
|
||||
FragmentAssemblyTimer = new Object();
|
||||
|
||||
FragmentAssemblyTimer[Id] = setInterval(function(_Id)
|
||||
{
|
||||
// does the fragment assembly still exist?
|
||||
@ -791,13 +965,8 @@ function StartFragmentAssemblyTimer(Id)
|
||||
|
||||
function StopFragmentAssemblyTimer(Id)
|
||||
{
|
||||
if("undefined" !== typeof FragmentAssemblyTimer[Id])
|
||||
{
|
||||
if(FragmentAssemblyTimer[Id])
|
||||
{
|
||||
clearInterval(FragmentAssemblyTimer[Id]);
|
||||
}
|
||||
}
|
||||
if(!FragmentAssemblyTimer && ("undefined" !== typeof FragmentAssemblyTimer[Id]) && FragmentAssemblyTimer[Id])
|
||||
clearInterval(FragmentAssemblyTimer[Id]);
|
||||
}
|
||||
|
||||
function sliderchange(number) {
|
||||
|
||||
36
data/js/controls.min.js
vendored
36
data/js/controls.min.js
vendored
@ -1,19 +1,35 @@
|
||||
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_FRAGMENT=21;const UP=0;const DOWN=1;const LEFT=2;const RIGHT=3;const CENTER=4;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 Object();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"";}}
|
||||
const UI_INITIAL_GUI=200;const UI_RELOAD=201;const UPDATE_OFFSET=100;const UI_EXTEND_GUI=210;const ALERT_I=240;const ALERT_W=241;const ALERT_E=242;const ALERT_S=243;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_FRAGMENT=21;const UP=0;const DOWN=1;const LEFT=2;const RIGHT=3;const CENTER=4;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=0;var graphData=new Array();var hasAccel=false;var sliderContinuous=false;class Alert{static fire(icon,message,position="tl",type="",options={},onConfirm=function(){},onCancel=function(){}){const el=document.createElement("div");el.className="Alert";const divIcon=document.createElement("div");divIcon.className="AlertIcon";const divMessage=document.createElement("div");divMessage.className="AlertMessage";el.appendChild(divIcon);el.appendChild(divMessage);if(icon=="succ"){divIcon.innerHTML='✓';}else if(icon=="err"){divIcon.innerHTML='⨷';el.style.backgroundColor="rgba(180, 0, 0, 0.75)"
|
||||
message="<b>ERROR</b><br>"+message;}else if(icon=="info"){divIcon.innerHTML='⚠';}else if(icon=="warn"){divIcon.innerHTML="𝕎";el.style.backgroundColor="rgba(100, 0, 0, 0.75);"}
|
||||
divMessage.innerHTML="<p>"+message+"</p>";if(type=="dialog"){el.style.flexDirection="column";divIcon.style.position="relative";divIcon.style.left="0px";divIcon.style.marginTop="15px";const divControls=document.createElement("div");divControls.className="AlertControls";const btnConfirm=document.createElement("button");btnConfirm.className="BtnConfirm";btnConfirm.innerHTML="Confirm";const btnCancel=document.createElement("button");btnCancel.className="BtnCancel";btnCancel.innerHTML="Cancel";el.appendChild(divControls);divControls.appendChild(btnConfirm);divControls.appendChild(btnCancel);btnConfirm.onclick=function(){onConfirm();removeAlert(el);};btnCancel.onclick=function(){onCancel();removeAlert(el);};if(Object.keys(options).length>0){if(options.confirmButtonText){btnConfirm.innerHTML=options.confirmButtonText;}
|
||||
if(options.cancelButtonText){btnCancel.innerHTML=options.cancelButtonText;}
|
||||
if(options.confirmButtonColor){btnConfirm.style.backgroundColor=options.confirmButtonColor;}
|
||||
if(options.cancelButtonColor){btnCancel.style.backgroundColor=options.cancelButtonColor;}}}
|
||||
el.style.left=0;switch(position){case"tl":el.style.top=0;break;case"tm":el.style.right=0;el.style.marginLeft="auto";el.style.marginRight="auto";break;case"bl":el.style.bottom=0;break;case"bm":el.style.right=0;el.style.bottom=0;el.style.marginLeft="auto";el.style.marginRight="auto";break;case"center":el.style.right=0;el.style.marginLeft="auto";el.style.marginRight="auto";el.style.marginTop="20%";break;}
|
||||
if(Object.keys(options).length>0){if(options.backgroundColor){el.style.backgroundColor=options.backgroundColor;}
|
||||
if(options.fontColor){divMessage.style.color=options.fontColor;}
|
||||
if(options.iconColor){divIcon.style.color=options.iconColor;}
|
||||
if(options.borderRadius){el.style.borderRadius=options.borderRadius;}
|
||||
if(options.border){el.style.border=options.border;}}
|
||||
document.body.appendChild(el);if(type==""){setTimeout(()=>{el.parentNode.removeChild(el);},8000);}
|
||||
function remAlert(element){element.parentNode.removeChild(element);}}}
|
||||
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(){}
|
||||
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 Object();controlAssemblyArray=new Object();if(true===websockConnected){websockConnected=false;websock.close();$("#conStatus").removeClass("color-green");$("#conStatus").addClass("color-red");$("#conStatus").html("Error / No Connection ↻");$("#conStatus").off();$("#conStatus").on({click:restart,});}}
|
||||
function FragmentAssemblyTimerStop(){if(FragmentAssemblyTimer)
|
||||
FragmentAssemblyTimer.forEach(element=>{clearInterval(element);});FragmentAssemblyTimer=0;}
|
||||
function conStatusError(){FragmentAssemblyTimerStop();controlAssemblyArray=new Object();if(true===websockConnected){websockConnected=false;websock.close();$("#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(){let location=window.location.hostname;let port=window.location.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");}
|
||||
if(null===WebSocketTimer){WebSocketTimer=setInterval(function(){if(websock.readyState===3){restart();}},5000);}
|
||||
websock.onopen=function(evt){console.log("websock open");$("#conStatus").addClass("color-green");$("#conStatus").text("Connected");websockConnected=true;FragmentAssemblyTimer.forEach(element=>{clearInterval(element);});FragmentAssemblyTimer=new Object();controlAssemblyArray=new Object();};websock.onclose=function(evt){console.log("websock close");conStatusError();FragmentAssemblyTimer.forEach(element=>{clearInterval(element);});FragmentAssemblyTimer=new Object();controlAssemblyArray=new Object();};websock.onerror=function(evt){console.log("websock Error");restart();FragmentAssemblyTimer.forEach(element=>{clearInterval(element);});FragmentAssemblyTimer=new Object();controlAssemblyArray=new Object();};var handleEvent=function(evt){try{var data=JSON.parse(evt.data);}
|
||||
if(null===WebSocketTimer){WebSocketTimer=setInterval(function(){if(websock.readyState===3){console.info("Web Socket Is Closed");restart();}},5000);}
|
||||
websock.onopen=function(evt){console.log("websock open");$("#conStatus").addClass("color-green");$("#conStatus").text("Connected");websockConnected=true;controlAssemblyArray=new Object();};websock.onclose=function(evt){console.log("websock close");conStatusError();FragmentAssemblyTimerStop();controlAssemblyArray=new Object();};websock.onerror=function(evt){console.log("websock Error");restart();FragmentAssemblyTimerStop();controlAssemblyArray=new Object();};var handleEvent=function(evt){try{var data=JSON.parse(evt.data);}
|
||||
catch(Event){console.error(Event);websock.send("uiok:"+0);return;}
|
||||
var e=document.body;var center="";switch(data.type){case UI_INITIAL_GUI:$("#row").html("");$("#tabsnav").html("");$("#tabscontent").html("");if(data.sliderContinuous){sliderContinuous=data.sliderContinuous;}
|
||||
var e=document.body;var center="";console.info("data.type: '"+data.type+"'");switch(data.type){case UI_INITIAL_GUI:$("#row").html("");$("#tabsnav").html("");$("#tabscontent").html("");if(data.sliderContinuous){sliderContinuous=data.sliderContinuous;}
|
||||
data.controls.forEach(element=>{var fauxEvent={data:JSON.stringify(element),};handleEvent(fauxEvent);});if(data.totalcontrols>(data.controls.length-1)){websock.send("uiok:"+(data.controls.length-1));}
|
||||
break;case UI_EXTEND_GUI:data.controls.forEach(element=>{var fauxEvent={data:JSON.stringify(element),};handleEvent(fauxEvent);});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;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;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_RELOAD:window.location.reload();break;case UI_TITEL:document.title=data.label;$("#mainHeader").html(data.label);break;case ALERT_I:Alert.fire("info",data.value);break;case ALERT_W:Alert.fire("warn",data.value);break;case ALERT_E:Alert.fire("err",data.value);break;case ALERT_S:Alert.fire("succ",data.value);break;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;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:if(data.visible){addToHTML(data);rangeSlider(!sliderContinuous);}
|
||||
@ -65,14 +81,14 @@ if(data.type==UPDATE_SLIDER){element.removeClass("slider-turquoise slider-emeral
|
||||
processEnabled(data);}
|
||||
$(".range-slider__range").each(function(){$(this)[0].value=$(this).attr("value");$(this).next().html($(this).attr("value"));});};websock.onmessage=handleEvent;}
|
||||
function StartFragmentAssemblyTimer(Id)
|
||||
{StopFragmentAssemblyTimer(Id);FragmentAssemblyTimer[Id]=setInterval(function(_Id)
|
||||
{StopFragmentAssemblyTimer(Id);if(!FragmentAssemblyTimer)
|
||||
FragmentAssemblyTimer=new Object();FragmentAssemblyTimer[Id]=setInterval(function(_Id)
|
||||
{if("undefined"!==typeof controlAssemblyArray[_Id])
|
||||
{if(null!==controlAssemblyArray[_Id])
|
||||
{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]);}}}
|
||||
{if(!FragmentAssemblyTimer&&("undefined"!==typeof FragmentAssemblyTimer[Id])&&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);}
|
||||
|
||||
28
data/js/graph.min.js
vendored
28
data/js/graph.min.js
vendored
@ -1,15 +1,15 @@
|
||||
function lineGraph(parent,xAccessor,yAccessor){const width=620;const height=420;const gutter=40;const pixelsPerTick=30;function numericTransformer(dataMin,dataMax,pxMin,pxMax){var dataDiff=dataMax-dataMin,pxDiff=pxMax-pxMin,dataRatio=pxDiff/dataDiff,coordRatio=dataDiff/pxDiff;return{toCoord:function(data){return(data-dataMin)*dataRatio+pxMin;},toData:function(coord){return(coord-pxMin)*coordRatio+dataMin;}};}
|
||||
function axisRenderer(orientation,transform){var axisGroup=document.createElementNS("http://www.w3.org/2000/svg","g");var axisPath=document.createElementNS("http://www.w3.org/2000/svg","path");axisGroup.setAttribute("class",orientation+"-axis");var xMin=gutter;var xMax=width-gutter;var yMin=height-gutter;var yMax=gutter;if(orientation==="x"){axisPath.setAttribute("d","M "+xMin+" "+yMin+" L "+xMax+" "+yMin);for(var i=xMin;i<=xMax;i++){if((i-xMin)%(pixelsPerTick*3)===0&&i!==xMin){var text=document.createElementNS("http://www.w3.org/2000/svg","text");text.innerHTML=new Date(Math.floor(transform(i))).toLocaleTimeString();text.setAttribute("x",i);text.setAttribute("y",yMin);text.setAttribute("dy","1em");axisGroup.appendChild(text);}}}else{axisPath.setAttribute("d","M "+xMin+" "+yMin+" L "+xMin+" "+yMax);for(var i=yMax;i<=yMin;i++){if((i-yMin)%pixelsPerTick===0&&i!==yMin){var tickGroup=document.createElementNS("http://www.w3.org/2000/svg","g");var gridLine=document.createElementNS("http://www.w3.org/2000/svg","path");text=document.createElementNS("http://www.w3.org/2000/svg","text");text.innerHTML=Math.floor(transform(i));text.setAttribute("x",xMin);text.setAttribute("y",i);text.setAttribute("dx","-.5em");text.setAttribute("dy",".3em");gridLine.setAttribute("d","M "+xMin+" "+i+" L "+xMax+" "+i);tickGroup.appendChild(gridLine);tickGroup.appendChild(text);axisGroup.appendChild(tickGroup);}}}
|
||||
axisGroup.appendChild(axisPath);parent.appendChild(axisGroup);}
|
||||
function lineRenderer(xAccessor,yAccessor,xTransform,yTransform){var line=document.createElementNS("http://www.w3.org/2000/svg","path");xAccessor.reset();yAccessor.reset();if(!xAccessor.hasNext()||!yAccessor.hasNext()){return;}
|
||||
var pathString="M "+xTransform(xAccessor.next())+" "+yTransform(yAccessor.next());while(xAccessor.hasNext()&&yAccessor.hasNext()){pathString+=" L "+
|
||||
xTransform(xAccessor.next())+
|
||||
" "+
|
||||
yTransform(yAccessor.next());}
|
||||
line.setAttribute("class","series");line.setAttribute("d",pathString);parent.appendChild(line);}
|
||||
function pointRenderer(xAccessor,yAccessor,xTransform,yTransform){var pointGroup=document.createElementNS("http://www.w3.org/2000/svg","g");pointGroup.setAttribute("class","data-points");xAccessor.reset();yAccessor.reset();if(!xAccessor.hasNext()||!yAccessor.hasNext()){return;}
|
||||
while(xAccessor.hasNext()&&yAccessor.hasNext()){var xDataValue=xAccessor.next();var x=xTransform(xDataValue);var yDataValue=yAccessor.next();var y=yTransform(yDataValue);var circle=document.createElementNS("http://www.w3.org/2000/svg","circle");circle.setAttribute("cx",x);circle.setAttribute("cy",y);circle.setAttribute("r","4");var text=document.createElementNS("http://www.w3.org/2000/svg","text");text.innerHTML=Math.floor(xDataValue)+" / "+Math.floor(yDataValue);text.setAttribute("x",x);text.setAttribute("y",y);text.setAttribute("dx","1em");text.setAttribute("dy","-.7em");pointGroup.appendChild(circle);pointGroup.appendChild(text);}
|
||||
parent.appendChild(pointGroup);}
|
||||
xTransform=numericTransformer(xAccessor.min(),xAccessor.max(),0+gutter,width-gutter);yTransform=numericTransformer(yAccessor.min(),yAccessor.max(),height-gutter,0+gutter);axisRenderer("x",xTransform.toData);axisRenderer("y",yTransform.toData);lineRenderer(xAccessor,yAccessor,xTransform.toCoord,yTransform.toCoord);pointRenderer(xAccessor,yAccessor,xTransform.toCoord,yTransform.toCoord);}
|
||||
function renderGraphSvg(dataArray,renderId){var figure=document.getElementById(renderId);while(figure.hasChildNodes()){figure.removeChild(figure.lastChild);}
|
||||
function lineGraph(parent,xAccessor,yAccessor){const width=620;const height=420;const gutter=40;const pixelsPerTick=30;function numericTransformer(dataMin,dataMax,pxMin,pxMax){var dataDiff=dataMax-dataMin,pxDiff=pxMax-pxMin,dataRatio=pxDiff/dataDiff,coordRatio=dataDiff/pxDiff;return{toCoord:function(data){return(data-dataMin)*dataRatio+pxMin;},toData:function(coord){return(coord-pxMin)*coordRatio+dataMin;}};}
|
||||
function axisRenderer(orientation,transform){var axisGroup=document.createElementNS("http://www.w3.org/2000/svg","g");var axisPath=document.createElementNS("http://www.w3.org/2000/svg","path");axisGroup.setAttribute("class",orientation+"-axis");var xMin=gutter;var xMax=width-gutter;var yMin=height-gutter;var yMax=gutter;if(orientation==="x"){axisPath.setAttribute("d","M "+xMin+" "+yMin+" L "+xMax+" "+yMin);for(var i=xMin;i<=xMax;i++){if((i-xMin)%(pixelsPerTick*3)===0&&i!==xMin){var text=document.createElementNS("http://www.w3.org/2000/svg","text");text.innerHTML=new Date(Math.floor(transform(i))).toLocaleTimeString();text.setAttribute("x",i);text.setAttribute("y",yMin);text.setAttribute("dy","1em");axisGroup.appendChild(text);}}}else{axisPath.setAttribute("d","M "+xMin+" "+yMin+" L "+xMin+" "+yMax);for(var i=yMax;i<=yMin;i++){if((i-yMin)%pixelsPerTick===0&&i!==yMin){var tickGroup=document.createElementNS("http://www.w3.org/2000/svg","g");var gridLine=document.createElementNS("http://www.w3.org/2000/svg","path");text=document.createElementNS("http://www.w3.org/2000/svg","text");text.innerHTML=Math.floor(transform(i));text.setAttribute("x",xMin);text.setAttribute("y",i);text.setAttribute("dx","-.5em");text.setAttribute("dy",".3em");gridLine.setAttribute("d","M "+xMin+" "+i+" L "+xMax+" "+i);tickGroup.appendChild(gridLine);tickGroup.appendChild(text);axisGroup.appendChild(tickGroup);}}}
|
||||
axisGroup.appendChild(axisPath);parent.appendChild(axisGroup);}
|
||||
function lineRenderer(xAccessor,yAccessor,xTransform,yTransform){var line=document.createElementNS("http://www.w3.org/2000/svg","path");xAccessor.reset();yAccessor.reset();if(!xAccessor.hasNext()||!yAccessor.hasNext()){return;}
|
||||
var pathString="M "+xTransform(xAccessor.next())+" "+yTransform(yAccessor.next());while(xAccessor.hasNext()&&yAccessor.hasNext()){pathString+=" L "+
|
||||
xTransform(xAccessor.next())+
|
||||
" "+
|
||||
yTransform(yAccessor.next());}
|
||||
line.setAttribute("class","series");line.setAttribute("d",pathString);parent.appendChild(line);}
|
||||
function pointRenderer(xAccessor,yAccessor,xTransform,yTransform){var pointGroup=document.createElementNS("http://www.w3.org/2000/svg","g");pointGroup.setAttribute("class","data-points");xAccessor.reset();yAccessor.reset();if(!xAccessor.hasNext()||!yAccessor.hasNext()){return;}
|
||||
while(xAccessor.hasNext()&&yAccessor.hasNext()){var xDataValue=xAccessor.next();var x=xTransform(xDataValue);var yDataValue=yAccessor.next();var y=yTransform(yDataValue);var circle=document.createElementNS("http://www.w3.org/2000/svg","circle");circle.setAttribute("cx",x);circle.setAttribute("cy",y);circle.setAttribute("r","4");var text=document.createElementNS("http://www.w3.org/2000/svg","text");text.innerHTML=Math.floor(xDataValue)+" / "+Math.floor(yDataValue);text.setAttribute("x",x);text.setAttribute("y",y);text.setAttribute("dx","1em");text.setAttribute("dy","-.7em");pointGroup.appendChild(circle);pointGroup.appendChild(text);}
|
||||
parent.appendChild(pointGroup);}
|
||||
xTransform=numericTransformer(xAccessor.min(),xAccessor.max(),0+gutter,width-gutter);yTransform=numericTransformer(yAccessor.min(),yAccessor.max(),height-gutter,0+gutter);axisRenderer("x",xTransform.toData);axisRenderer("y",yTransform.toData);lineRenderer(xAccessor,yAccessor,xTransform.toCoord,yTransform.toCoord);pointRenderer(xAccessor,yAccessor,xTransform.toCoord,yTransform.toCoord);}
|
||||
function renderGraphSvg(dataArray,renderId){var figure=document.getElementById(renderId);while(figure.hasChildNodes()){figure.removeChild(figure.lastChild);}
|
||||
var svg=document.createElementNS("http://www.w3.org/2000/svg","svg");svg.setAttribute("viewBox","0 0 640 440");svg.setAttribute("preserveAspectRatio","xMidYMid meet");lineGraph(svg,(function(data,min,max){var i=0;return{hasNext:function(){return i<data.length;},next:function(){return data[i++].x;},reset:function(){i=0;},min:function(){return min;},max:function(){return max;}};})(dataArray,Math.min.apply(Math,dataArray.map(function(o){return o.x;})),Math.max.apply(Math,dataArray.map(function(o){return o.x;}))),(function(data,min,max){var i=0;return{hasNext:function(){return i<data.length;},next:function(){return data[i++].y;},reset:function(){i=0;},min:function(){return min;},max:function(){return max;}};})(dataArray,Math.min.apply(Math,dataArray.map(function(o){return o.y;})),Math.max.apply(Math,dataArray.map(function(o){return o.y;}))));figure.appendChild(svg);}
|
||||
Reference in New Issue
Block a user