Hi Zim,
I "played" a little bit with the graph as I think that could be nice to show how Annex can do in few lines of code
Adding a little bit of javascript code, is possible to refresh a graph in a single shot.
In particular the line jscall |traceme(1, "1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24");|
shows what must be sent: the first argument is the trace (0 or 1) and the second is a string of space separated values.
This example simply refresh random data coming from the basic each 500 msec.
The result can be seen in this little video
"
"
Code: [Local Link Removed for Guests]
''''' Animated Graph Demo '''''''''
' by cicciocb 2020
' draw 2 sets of random data refreshed
' alternatively each second
'''''''''''''''''''''''''''''''''''
cls
' loads the library
jsexternal "/xy.min.js"
cnt = 0
a$ = ""
a$ = a$ + |<p>Temperature Graph</p><canvas id="canvas1" width="600" height="300"></canvas>|
html a$
pause 1000
' define che datasets
A$ = ""
A$ = A$ + |var datasets = [|
A$ = A$ + | {|
A$ = A$ + | lineColor : 'rgba(220,0,0,1)',|
A$ = A$ + | pointColor : 'rgba(220,220,220,1)',|
A$ = A$ + | pointStrokeColor : '#fff',|
A$ = A$ + | data : []|
A$ = A$ + | },|
A$ = A$ + | {|
A$ = A$ + | lineColor : 'rgba(151,187,205,1)',|
A$ = A$ + | pointColor : 'rgba(151,187,205,1)',|
A$ = A$ + | pointStrokeColor : '#fff',|
A$ = A$ + | data : []|
A$ = A$ + | }|
A$ = A$ + |];|
A$ = A$ + |var ctx2 = document.getElementById('canvas1').getContext('2d');|
A$ = A$ + ||
A$ = A$ + |var xy = new Xy(ctx2, {rangeX:[0,24], rangeY:[-50,50], smooth:0.1, pointCircleRadius:4, pointStrokeWidth:2 });|
A$ = A$ + ||
A$ = A$ + |function traceme(set, data){|
A$ = A$ + | var s = data.split(" ");|
A$ = A$ + | for (var i=0; i<s.length; i++) {|
A$ = A$ + | datasets[set].data[i] = [i, s[i]];|
A$ = A$ + | }|
A$ = A$ + | xy.draw(datasets);|
A$ = A$ + |}|
jscript a$
A$ = "" ' clean memory
'create a "test set"
jscall |traceme(1, "1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24");|
timer0 500, counter
wait
counter:
v$ = ""
for z=0 to 24
v$ = v$ + str$(rnd(100) - 50) + " "
next z
if (cnt and 1) then
jscall |traceme(0,"| + v$ + |");|
else
jscall |traceme(1,"| + v$ + |");|
end if
cnt = (cnt + 1) mod 100
return
as a second example, I simply modified the previous one showing how is possible to create scrolling data always coming from the basic.
The result can be seen in this little video
"
"
Code: [Local Link Removed for Guests]
''''' Animated Graph Demo '''''''''
' by cicciocb 2020
' draw 2 sets of random data scrolled
' alternatively each second
'''''''''''''''''''''''''''''''''''
cls
' loads the library
jsexternal "/xy.min.js"
cnt = 0
a$ = ""
a$ = a$ + |<p>Temperature Graph</p><canvas id="canvas1" width="600" height="300"></canvas>|
html a$
pause 1000
A$ = ""
A$ = A$ + |var datasets = [|
A$ = A$ + | {|
A$ = A$ + | lineColor : 'rgba(220,0,0,1)',|
A$ = A$ + | pointColor : 'rgba(220,220,220,1)',|
A$ = A$ + | pointStrokeColor : '#fff',|
A$ = A$ + | data : []|
A$ = A$ + | },|
A$ = A$ + | {|
A$ = A$ + | lineColor : 'rgba(151,187,205,1)',|
A$ = A$ + | pointColor : 'rgba(151,187,205,1)',|
A$ = A$ + | pointStrokeColor : '#fff',|
A$ = A$ + | data : []|
A$ = A$ + | }|
A$ = A$ + |];|
A$ = A$ + |var ctx2 = document.getElementById('canvas1').getContext('2d');|
A$ = A$ + ||
A$ = A$ + |var xy = new Xy(ctx2, {rangeX:[0,24], rangeY:[-50,50], smooth:0.1, pointCircleRadius:4, pointStrokeWidth:2 });|
A$ = A$ + ||
A$ = A$ + |function traceme(set, data){|
A$ = A$ + | var s = data.split(" ");|
A$ = A$ + | for (var i=0; i<s.length; i++) {|
A$ = A$ + | datasets[set].data[i] = [i, s[i]];|
A$ = A$ + | }|
A$ = A$ + | xy.draw(datasets);|
A$ = A$ + |}|
jscript a$
A$ = ""
'create 2 random series
v1$ = ""
v2$ = ""
for z=0 to 24
v1$ = v1$ + str$(rnd(100) - 50) + " "
v2$ = v2$ + str$(rnd(100) - 50) + " "
next z
v1$ = trim$(v1$)
v2$ = trim$(v2$)
timer0 500, counter
wait
counter:
if (cnt and 1) then
' insert at the beginning and remove from the end
v1$ = str$(rnd(100) - 50) + " " + v1$
p = instr(-1, v1$, " ")
v1$ = left$(v1$, p -1)
jscall |traceme(0,"| + v1$ + |");|
else
' insert at the beginning and remove from the end
v2$ = str$(rnd(100) - 50) + " " + v2$
p = instr(-1, v2$, " ")
v2$ = left$(v2$, p -1)
jscall |traceme(1,"| + v2$ + |");|
end if
cnt = (cnt + 1) mod 100
return
The number of points can be increased (I tried up to 96 points who correspond at a point each 15 minutes and it works without any issue) but always consider that the ESP8266 has few memory.
Obviously the same program works for the ESP32 too.
cicciocb