From 9ab8a84ff001a98838d083048cf6be6046a9cc7d Mon Sep 17 00:00:00 2001 From: tecteun Date: Fri, 5 Feb 2021 22:03:02 +0000 Subject: [PATCH] slider sends (browser dependent) lots of events, throttle using only unique values. --- data/js/controls.js | 4 +- data/js/controls.min.js | 251 ++++++++++++++++++++++++++++++++++++++- src/dataControlsJS.h | 253 +++++++++++++++++++++++++++++++++++++++- 3 files changed, 504 insertions(+), 4 deletions(-) diff --git a/data/js/controls.js b/data/js/controls.js index a088804..5191b0e 100644 --- a/data/js/controls.js +++ b/data/js/controls.js @@ -799,9 +799,11 @@ function start() { websock.onmessage = handleEvent; } +var sliderCache = {}; function sliderchange(number) { var val = $("#sl" + number).val(); - websock.send("slvalue:" + val + ":" + number); + sliderCache[number] !== val && websock.send("slvalue:" + val + ":" + number); + sliderCache[number] = val; } function numberchange(number) { diff --git a/data/js/controls.min.js b/data/js/controls.min.js index ce3f5af..4b668c1 100644 --- a/data/js/controls.min.js +++ b/data/js/controls.min.js @@ -1 +1,250 @@ -const UI_INITIAL_GUI=200,UI_RELOAD=201,UPDATE_OFFSET=100,UI_TITEL=0,UI_PAD=1,UPDATE_PAD=101,UI_CPAD=2,UPDATE_CPAD=102,UI_BUTTON=3,UPDATE_BUTTON=103,UI_LABEL=4,UPDATE_LABEL=104,UI_SWITCHER=5,UPDATE_SWITCHER=105,UI_SLIDER=6,UPDATE_SLIDER=106,UI_NUMBER=7,UPDATE_NUMBER=107,UI_TEXT_INPUT=8,UPDATE_TEXT_INPUT=108,UI_GRAPH=9,ADD_GRAPH_POINT=10,CLEAR_GRAPH=109,UI_TAB=11,UPDATE_TAB=111,UI_SELECT=12,UPDATE_SELECT=112,UI_OPTION=13,UPDATE_OPTION=113,UI_MIN=14,UPDATE_MIN=114,UI_MAX=15,UPDATE_MAX=115,UI_STEP=16,UPDATE_STEP=116,UI_GAUGE=17,UPDATE_GAUGE=117,UI_ACCEL=18,UPTDATE_ACCEL=117,UP=0,DOWN=1,LEFT=2,RIGHT=3,CENTER=4,C_TURQUOISE=0,C_EMERALD=1,C_PETERRIVER=2,C_WETASPHALT=3,C_SUNFLOWER=4,C_CARROT=5,C_ALIZARIN=6,C_DARK=7,C_NONE=255;var websock,graphData=new Array,hasAccel=!1,sliderContinuous=!1;function colorClass(e){switch(e=Number(e)){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 websockConnected=!1;function requestOrientationPermission(){}function saveGraphData(){localStorage.setItem("espuigraphs",JSON.stringify(graphData))}function restoreGraphData(e){var a=localStorage.getItem("espuigraphs",graphData);return null!=a?(a=JSON.parse(a))[e]:[]}function restart(){$(document).add("*").off(),$("#row").html(""),websock.close(),start()}function conStatusError(){websockConnected=!1,$("#conStatus").removeClass("color-green"),$("#conStatus").addClass("color-red"),$("#conStatus").html("Error / No Connection ↻"),$("#conStatus").off(),$("#conStatus").on({click:restart})}function handleVisibilityChange(){websockConnected||document.hidden||restart()}function start(){document.addEventListener("visibilitychange",handleVisibilityChange,!1),(websock=""!=window.location.port||80!=window.location.port||443!=window.location.port?new WebSocket("ws://"+window.location.hostname+":"+window.location.port+"/ws"):new WebSocket("ws://"+window.location.hostname+"/ws")).onopen=function(e){console.log("websock open"),$("#conStatus").addClass("color-green"),$("#conStatus").text("Connected"),websockConnected=!0},websock.onclose=function(e){console.log("websock close"),conStatusError()},websock.onerror=function(e){console.log(e),conStatusError()};var e=function(a){console.log(a);var t=JSON.parse(a.data);document.body;switch(t.type){case UI_INITIAL_GUI:$("#row").html(""),$("#tabsnav").html(""),$("#tabscontent").html(""),t.sliderContinuous&&(sliderContinuous=t.sliderContinuous),t.controls.forEach(a=>{var t={data:JSON.stringify(a)};e(t)});break;case UI_RELOAD:window.location.reload();break;case UI_TITEL:document.title=t.label,$("#mainHeader").html(t.label);break;case UI_LABEL:(n=t.parentControl?$("#tab"+t.parentControl):$("#row")).append("
"+t.label+"
"+t.value+"
");break;case UI_BUTTON:(n=t.parentControl?$("#tab"+t.parentControl):$("#row")).append("
"+t.label+"
"),$("#btn"+t.id).on({touchstart:function(e){e.preventDefault(),buttonclick(t.id,!0)},touchend:function(e){e.preventDefault(),buttonclick(t.id,!1)}});break;case UI_SWITCHER:(n=t.parentControl?$("#tab"+t.parentControl):$("#row")).append("
"+t.label+"
"),switcher(t.id,t.value);break;case UI_CPAD:case UI_PAD:(n=t.parentControl?$("#tab"+t.parentControl):$("#row")).append("
"+t.label+"
"),$("#pf"+t.id).on({touchstart:function(e){e.preventDefault(),padclick(UP,t.id,!0)},touchend:function(e){e.preventDefault(),padclick(UP,t.id,!1)}}),$("#pl"+t.id).on({touchstart:function(e){e.preventDefault(),padclick(LEFT,t.id,!0)},touchend:function(e){e.preventDefault(),padclick(LEFT,t.id,!1)}}),$("#pr"+t.id).on({touchstart:function(e){e.preventDefault(),padclick(RIGHT,t.id,!0)},touchend:function(e){e.preventDefault(),padclick(RIGHT,t.id,!1)}}),$("#pb"+t.id).on({touchstart:function(e){e.preventDefault(),padclick(DOWN,t.id,!0)},touchend:function(e){e.preventDefault(),padclick(DOWN,t.id,!1)}}),$("#pc"+t.id).on({touchstart:function(e){e.preventDefault(),padclick(CENTER,t.id,!0)},touchend:function(e){e.preventDefault(),padclick(CENTER,t.id,!1)}});break;case UI_SLIDER:(n=t.parentControl?$("#tab"+t.parentControl):$("#row")).append("
"+t.label+"
"+t.value+"
"),rangeSlider(!sliderContinuous);break;case UI_NUMBER:(n=t.parentControl?$("#tab"+t.parentControl):$("#row")).append("
"+t.label+"
");break;case UI_TEXT_INPUT:(n=t.parentControl?$("#tab"+t.parentControl):$("#row")).append("
"+t.label+"
");break;case UI_TAB:$("#tabsnav").append("
  • "+t.value+"
    • "),$("#tabscontent").append("
    "),tabs=$(".tabscontent").tabbedContent({loop:!0}).data("api"),$("a").filter(function(){return"#click-to-switch"===$(this).attr("href")}).on("click",function(e){var a=prompt("Tab to switch to (number or id)?");tabs.switchTab(a)||alert("That tab does not exist :\\"),e.preventDefault()});break;case UI_SELECT:(n=t.parentControl?$("#tab"+t.parentControl):$("#row")).append("
    "+t.label+"
    ");break;case UI_ACCEL:if(hasAccel)break;var n;n=t.parentControl?$("#tab"+t.parentControl):$("#row"),hasAccel=!0,n.append("
    "+t.label+"
    ACCEL // Not implemented fully!
    "),requestOrientationPermission();break;case UPDATE_LABEL:$("#l"+t.id).html(t.value);break;case UPDATE_SWITCHER:switcher(t.id,"0"==t.value?0:1);break;case UPDATE_SLIDER:slider_move($("#id"+t.id),t.value,"100",!1);break;case UPDATE_NUMBER:$("#num"+t.id).val(t.value);break;case UPDATE_TEXT_INPUT:$("#text"+t.id).val(t.value);break;case UPDATE_SELECT:$("#select"+t.id).val(t.value);break;case UPDATE_BUTTON:case UPDATE_PAD:case UPDATE_CPAD:break;case UPDATE_GAUGE:$("#gauge"+t.id).val(t.value);break;case UPDATE_ACCEL:break;default:console.error("Unknown type or event")}if(t.type>=UPDATE_OFFSET&&t.type{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;case UI_LABEL:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
+parent.append("
    "+
+"
    "+
+data.label+
+"
    "+
+""+
+data.value+
+""+
+"
    ");break;case UI_BUTTON:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
+parent.append("
    "+
+"
    "+
+data.label+
+"
    "+
+"
    ");$("#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:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
+parent.append("
    "+
+"
    "+
+data.label+
+"
    "+
+""+
+"
    ");switcher(data.id,data.value);break;case UI_CPAD:case UI_PAD:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
+parent.append("
    "+
+"
    "+
+data.label+
+"
    "+
+""+
+"
    ");$("#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:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
+parent.append("
    "+
+"
    "+
+data.label+
+"
    "+
+"
    "+
+""+
+""+
+data.value+
+""+
+"
    "+
+"
    ");rangeSlider(!sliderContinuous);break;case UI_NUMBER:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
+parent.append("
    "+
+"
    "+
+data.label+
+"
    "+
+""+
+"
    ");break;case UI_TEXT_INPUT:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
+parent.append("
    "+
+"
    "+
+data.label+
+"
    "+
+""+
+"
    ");break;case UI_TAB:$("#tabsnav").append("
  • "+data.value+"
    • ");$("#tabscontent").append("
    ");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_SELECT:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
+parent.append("
    "+
+"
    "+
+data.label+
+"
    "+
+""+
+"
    ");break;case UI_ACCEL:if(hasAccel)break;var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
+hasAccel=true;parent.append("
    "+
+"
    "+
+data.label+
+"
    "+
+"ACCEL // Not implemented fully!
    "+
+"
    ");requestOrientationPermission();break;case UPDATE_LABEL:$("#l"+data.id).html(data.value);break;case UPDATE_SWITCHER:switcher(data.id,data.value=="0"?0:1);break;case UPDATE_SLIDER:slider_move($("#id"+data.id),data.value,"100",false);break;case UPDATE_NUMBER:$("#num"+data.id).val(data.value);break;case UPDATE_TEXT_INPUT:$("#text"+data.id).val(data.value);break;case UPDATE_SELECT:$("#select"+data.id).val(data.value);break;case UPDATE_BUTTON:case UPDATE_PAD:case UPDATE_CPAD:break;case UPDATE_GAUGE:$("#gauge"+data.id).val(data.value);break;case UPDATE_ACCEL:break;default:console.error("Unknown type or event");break;}
+if(data.type>=UPDATE_OFFSET&&data.type{var t={data:JSON.stringify(a)};e(t)});break;case UI_RELOAD:window.location.reload();break;case UI_TITEL:document.title=t.label,$("#mainHeader").html(t.label);break;case UI_LABEL:(n=t.parentControl?$("#tab"+t.parentControl):$("#row")).append("
    "+t.label+"
    "+t.value+"
    ");break;case UI_BUTTON:(n=t.parentControl?$("#tab"+t.parentControl):$("#row")).append("
    "+t.label+"
    "),$("#btn"+t.id).on({touchstart:function(e){e.preventDefault(),buttonclick(t.id,!0)},touchend:function(e){e.preventDefault(),buttonclick(t.id,!1)}});break;case UI_SWITCHER:(n=t.parentControl?$("#tab"+t.parentControl):$("#row")).append("
    "+t.label+"
    "),switcher(t.id,t.value);break;case UI_CPAD:case UI_PAD:(n=t.parentControl?$("#tab"+t.parentControl):$("#row")).append("
    "+t.label+"
    "),$("#pf"+t.id).on({touchstart:function(e){e.preventDefault(),padclick(UP,t.id,!0)},touchend:function(e){e.preventDefault(),padclick(UP,t.id,!1)}}),$("#pl"+t.id).on({touchstart:function(e){e.preventDefault(),padclick(LEFT,t.id,!0)},touchend:function(e){e.preventDefault(),padclick(LEFT,t.id,!1)}}),$("#pr"+t.id).on({touchstart:function(e){e.preventDefault(),padclick(RIGHT,t.id,!0)},touchend:function(e){e.preventDefault(),padclick(RIGHT,t.id,!1)}}),$("#pb"+t.id).on({touchstart:function(e){e.preventDefault(),padclick(DOWN,t.id,!0)},touchend:function(e){e.preventDefault(),padclick(DOWN,t.id,!1)}}),$("#pc"+t.id).on({touchstart:function(e){e.preventDefault(),padclick(CENTER,t.id,!0)},touchend:function(e){e.preventDefault(),padclick(CENTER,t.id,!1)}});break;case UI_SLIDER:(n=t.parentControl?$("#tab"+t.parentControl):$("#row")).append("
    "+t.label+"
    "+t.value+"
    "),rangeSlider(!sliderContinuous);break;case UI_NUMBER:(n=t.parentControl?$("#tab"+t.parentControl):$("#row")).append("
    "+t.label+"
    ");break;case UI_TEXT_INPUT:(n=t.parentControl?$("#tab"+t.parentControl):$("#row")).append("
    "+t.label+"
    ");break;case UI_TAB:$("#tabsnav").append("
  • "+t.value+"
    • "),$("#tabscontent").append("
    "),tabs=$(".tabscontent").tabbedContent({loop:!0}).data("api"),$("a").filter(function(){return"#click-to-switch"===$(this).attr("href")}).on("click",function(e){var a=prompt("Tab to switch to (number or id)?");tabs.switchTab(a)||alert("That tab does not exist :\\"),e.preventDefault()});break;case UI_SELECT:(n=t.parentControl?$("#tab"+t.parentControl):$("#row")).append("
    "+t.label+"
    ");break;case UI_ACCEL:if(hasAccel)break;var n;n=t.parentControl?$("#tab"+t.parentControl):$("#row"),hasAccel=!0,n.append("
    "+t.label+"
    ACCEL // Not implemented fully!
    "),requestOrientationPermission();break;case UPDATE_LABEL:$("#l"+t.id).html(t.value);break;case UPDATE_SWITCHER:switcher(t.id,"0"==t.value?0:1);break;case UPDATE_SLIDER:slider_move($("#id"+t.id),t.value,"100",!1);break;case UPDATE_NUMBER:$("#num"+t.id).val(t.value);break;case UPDATE_TEXT_INPUT:$("#text"+t.id).val(t.value);break;case UPDATE_SELECT:$("#select"+t.id).val(t.value);break;case UPDATE_BUTTON:case UPDATE_PAD:case UPDATE_CPAD:break;case UPDATE_GAUGE:$("#gauge"+t.id).val(t.value);break;case UPDATE_ACCEL:break;default:console.error("Unknown type or event")}if(t.type>=UPDATE_OFFSET&&t.type{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;case UI_LABEL:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
+parent.append("
    "+
+"
    "+
+data.label+
+"
    "+
+""+
+data.value+
+""+
+"
    ");break;case UI_BUTTON:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
+parent.append("
    "+
+"
    "+
+data.label+
+"
    "+
+"
    ");$("#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:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
+parent.append("
    "+
+"
    "+
+data.label+
+"
    "+
+""+
+"
    ");switcher(data.id,data.value);break;case UI_CPAD:case UI_PAD:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
+parent.append("
    "+
+"
    "+
+data.label+
+"
    "+
+""+
+"
    ");$("#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:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
+parent.append("
    "+
+"
    "+
+data.label+
+"
    "+
+"
    "+
+""+
+""+
+data.value+
+""+
+"
    "+
+"
    ");rangeSlider(!sliderContinuous);break;case UI_NUMBER:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
+parent.append("
    "+
+"
    "+
+data.label+
+"
    "+
+""+
+"
    ");break;case UI_TEXT_INPUT:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
+parent.append("
    "+
+"
    "+
+data.label+
+"
    "+
+""+
+"
    ");break;case UI_TAB:$("#tabsnav").append("
  • "+data.value+"
    • ");$("#tabscontent").append("
    ");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_SELECT:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
+parent.append("
    "+
+"
    "+
+data.label+
+"
    "+
+""+
+"
    ");break;case UI_ACCEL:if(hasAccel)break;var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
+hasAccel=true;parent.append("
    "+
+"
    "+
+data.label+
+"
    "+
+"ACCEL // Not implemented fully!
    "+
+"
    ");requestOrientationPermission();break;case UPDATE_LABEL:$("#l"+data.id).html(data.value);break;case UPDATE_SWITCHER:switcher(data.id,data.value=="0"?0:1);break;case UPDATE_SLIDER:slider_move($("#id"+data.id),data.value,"100",false);break;case UPDATE_NUMBER:$("#num"+data.id).val(data.value);break;case UPDATE_TEXT_INPUT:$("#text"+data.id).val(data.value);break;case UPDATE_SELECT:$("#select"+data.id).val(data.value);break;case UPDATE_BUTTON:case UPDATE_PAD:case UPDATE_CPAD:break;case UPDATE_GAUGE:$("#gauge"+data.id).val(data.value);break;case UPDATE_ACCEL:break;default:console.error("Unknown type or event");break;}
+if(data.type>=UPDATE_OFFSET&&data.type