From 4b0f8e86b40674d81933e5c71f8ca9500681e771 Mon Sep 17 00:00:00 2001 From: Lukas Bachschwell Date: Fri, 27 Dec 2019 16:57:11 +0100 Subject: [PATCH] #10 Enable storing to localstorage --- README.md | 3 ++- data/js/controls.js | 17 ++++++++++++++++- data/js/controls.min.js | 5 ++++- src/dataControlsJS.h | 7 +++++-- 4 files changed, 27 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index b3abc1a..d5bace2 100644 --- a/README.md +++ b/README.md @@ -34,8 +34,9 @@ THIS IS THE 2.0.0 DEVELOPMENT BRANCH, NOT GUARANTIED TO WORK - Public Access to ESPAsyncServer ✅ - Graph Widget ✅ +* Persist save graph in local storage #10 +* Switch slider behaviour ? * Cleanup Example, DNS and autojoin -* Persist save graph in local storage * data upload new info to doc? (copy to folder?) * Cleanup and extend Documentation - Number field ✅ diff --git a/data/js/controls.js b/data/js/controls.js index 65d1580..916d355 100644 --- a/data/js/controls.js +++ b/data/js/controls.js @@ -157,6 +157,19 @@ function handleOrientation(event) { } */ +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("*") @@ -641,16 +654,18 @@ function start() { "" + "" ); - graphData[data.id] = []; + 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_GAUGE: diff --git a/data/js/controls.min.js b/data/js/controls.min.js index 1c566da..fb9ceef 100644 --- a/data/js/controls.min.js +++ b/data/js/controls.min.js @@ -1,5 +1,8 @@ const UI_INITIAL_GUI=200;const UPDATE_OFFSET=100;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 UPTDATE_GAUGE=117;const UI_ACCEL=18;const UPTDATE_ACCEL=117;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 graphData=new Array();var hasAccel=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(){} +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();}} @@ -200,7 +203,7 @@ data.id+ data.label+ ""+ ""+ -"");graphData[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});renderGraphSvg(graphData[data.id],"graph"+data.id);break;case CLEAR_GRAPH:graphData[data.id]=[];renderGraphSvg(graphData[data.id],"graph"+data.id);break;case UI_GAUGE:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");} +"");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_GAUGE:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");} parent.append("