Advice on a ESP8266 data logger/recorder/AP

Place code snippets and demo code here
Post Reply
Zim
Posts: 88
Joined: Mon Feb 08, 2021 9:15 pm
Has thanked: 61 times
Been thanked: 44 times

Advice on a ESP8266 data logger/recorder/AP

Post by Zim »

This is cicciocb's post.


Zim,
in the demo programs package delivered with the toolkit (in the files data-min.zip or data-full.zip), there are some examples of graph.
The example graph4.bas shows how interact with several javascript libraries (this demo handle with 4 different).

In particular there is the javascript xy.min.js that is probably what you are looking for.
This is the screenshot of demo4.bas running.
The xy can be easily configured using its documentation available here "[External Link Removed for Guests]"


image.png
You do not have the required permissions to view the files attached to this post.
Last edited by Zim on Fri Feb 19, 2021 5:41 pm, edited 1 time in total.
Zim
Posts: 88
Joined: Mon Feb 08, 2021 9:15 pm
Has thanked: 61 times
Been thanked: 44 times

Re: Advice on a ESP8266 data logger/recorder/AP

Post by Zim »

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
Post Reply