2024-02-10 20:40:34 +00:00
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 ; 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 "" ; } }
2023-09-11 10:53:05 +00:00
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 ( ) ; }
2024-02-10 20:40:34 +00:00
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 ↻" ) ; $ ( "#conStatus" ) . off ( ) ; $ ( "#conStatus" ) . on ( { click : restart , } ) ; } }
2023-09-11 10:53:05 +00:00
function handleVisibilityChange ( ) { if ( ! websockConnected && ! document . hidden ) { restart ( ) ; } }
2023-12-14 13:34:17 +00:00
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" ) ; }
2023-09-11 10:53:05 +00:00
if ( null === WebSocketTimer ) { WebSocketTimer = setInterval ( function ( ) { if ( websock . readyState === 3 ) { restart ( ) ; } } , 5000 ) ; }
2024-02-10 20:40:34 +00:00
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 ( "websock close" ) ; conStatusError ( ) ; FragmentAssemblyTimer . forEach ( element => { clearInterval ( element ) ; } ) ; FragmentAssemblyTimer = new Array ( ) ; controlAssemblyArray = new Array ( ) ; } ; websock . onerror = function ( evt ) { console . log ( "websock Error" ) ; restart ( ) ; FragmentAssemblyTimer . forEach ( element => { clearInterval ( element ) ; } ) ; FragmentAssemblyTimer = new Array ( ) ; controlAssemblyArray = new Array ( ) ; } ; var handleEvent = function ( evt ) { try { var data = JSON . parse ( evt . data ) ; }
2023-09-11 10:53:05 +00:00
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 ; }
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 _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 ) ; }
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" ) ; $ ( "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 ) { if ( $ ( '#sl' + data . parentControl ) . length ) { $ ( '#sl' + data . parentControl ) . attr ( "min" , data . value ) ; } else if ( $ ( '#num' + data . parentControl ) . length ) { $ ( '#num' + data . parentControl ) . attr ( "min" , data . value ) ; } }
break ; case UI _MAX : if ( data . parentControl ) { if ( $ ( '#sl' + data . parentControl ) . length ) { $ ( '#sl' + data . parentControl ) . attr ( "max" , data . value ) ; } else if ( $ ( '#text' + data . parentControl ) . length ) { $ ( '#text' + data . parentControl ) . attr ( "maxlength" , data . value ) ; } else if ( $ ( '#num' + data . parentControl ) . length ) { $ ( '#num' + data . parentControl ) . attr ( "max" , data . value ) ; } }
break ; case UI _STEP : if ( data . parentControl ) { if ( $ ( '#sl' + data . parentControl ) . length ) { $ ( '#sl' + data . parentControl ) . attr ( "step" , data . value ) ; } else if ( $ ( '#num' + data . parentControl ) . length ) { $ ( '#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 ( ) ; }
2024-02-10 20:40:34 +00:00
break ; case UI _FILEDISPLAY : if ( data . visible )
{ addToHTML ( data ) ; FileDisplayUploadFile ( data ) ; }
2023-09-11 10:53:05 +00:00
break ; 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 ) ; }
2024-02-10 20:40:34 +00:00
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 ; if ( ! data . hasOwnProperty ( 'control' ) )
2023-09-11 10:53:05 +00:00
{ console . error ( "UI_FRAGMENT:Missing control record, skipping control" ) ; break ; }
let control = data . control ; StopFragmentAssemblyTimer ( data . control . id ) ; if ( 0 === FragementOffset )
{ controlAssemblyArray [ control . id ] = data ; controlAssemblyArray [ control . id ] . offset = NextFragmentOffset ; StartFragmentAssemblyTimer ( control . id ) ; let TotalRequest = JSON . stringify ( { 'id' : control . id , 'offset' : NextFragmentOffset } ) ; websock . send ( "uifragmentok:" + 0 + ": " + TotalRequest + ":" ) ; break ; }
if ( "undefined" === typeof controlAssemblyArray [ control . id ] )
{ 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 + ":" ) ; break ; }
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 + ":" ) ; break ; }
controlAssemblyArray [ control . id ] . control . value += control . value ; controlAssemblyArray [ control . id ] . offset = NextFragmentOffset ; if ( true === FragmentFinal )
{ var fauxEvent = { data : JSON . stringify ( controlAssemblyArray [ control . id ] . control ) , } ; handleEvent ( fauxEvent ) ; controlAssemblyArray [ control . id ] = null ; }
else
{ 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 ) { processEnabled ( data ) ; }
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 . 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 ; }
2024-02-10 20:40:34 +00:00
async function FileDisplayUploadFile ( data )
{ let text = await downloadFile ( data . value ) ; let ItemToUpdateId = "fd" + data . id ; $ ( "#" + 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 ) ; }
async function downloadFile ( filename )
{ let response = await fetch ( filename ) ; if ( response . status != 200 ) { throw new Error ( "File Read Server Error: '" + response . status + "'" ) ; }
let text _data = await response . text ( ) ; return text _data ; }
2023-09-11 10:53:05 +00:00
function StartFragmentAssemblyTimer ( Id )
{ StopFragmentAssemblyTimer ( Id ) ; 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 ] ) ; } } }
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 } ) ; } else { $ ( this ) . on ( { change : slidercb } ) ; }
2024-02-10 20:40:34 +00:00
$ ( 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 ) { 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 " +
2023-09-11 10:53:05 +00:00
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 : break ; }
parent . append ( html ) ; } else { 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 +
2024-02-10 20:40:34 +00:00
" 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 +
2023-09-11 10:53:05 +00:00
" 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 + "'>▲</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>" +
( 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 ) { 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 ) ; }
2024-02-10 20:40:34 +00:00
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' ) ; }
2022-01-31 22:34:00 +00:00
break ; } }