Creating 24h and 7 Days Sensor Data Charts Using Arduino, ESP8266 and DS18B20

Question

Hello I know Arduino not very well and WWW even less ... I'm not asking if it is possible but how to do it ... Namely, the heart of the system is Arduino, which I have TFT + SD display connected to, sensors e.g. DS18B20 and others, ESP8266, ... I know that ESP8266 is faster than Arduino but...

TechEkspert · Accepted Answer

It would be simpler if ESP has access to the Internet, then you can send measurement data to the cloud and using free services on sites like view generated charts on devices with internet access, examples here: http: / /www.elektroda.pl/rtvforum/topic3357545.html You can also send to your solution also providing data on the Internet, e.g. Another solution might be to use google charts:

Anonymous · Accepted Answer

There are libraries (e.g. in canvas) for displaying graphs from data, just configure and use. The whole idea of html, js and canvas is that you send the batch in the text and the browser parses it for you.

You can also do dynamic graphics such as bmp - also text processing - but judging by the platform you are using - there may be a problem with the refresh speed.

korteksik · Accepted Answer

In Elektronika Praktyczna no. 3/2017 on pp. 117-118 you have described step by step how to do it on one ESP8266 module.

pyton · Answer

Thank you all for your interest. About I read a cool thing, however, you need internet access and you do not expect such ... At least for now ... However, I will not fail to test it one day. I also started reading about Google charts, but I haven't explored it yet. drobok

TechEkspert · Answer

@drobok are there any examples of using this solution? This could be useful in some LAN applications and would work even without internet access.

Anonymous · Answer

In general, it all comes down to Then just the webmaster. So you add the data in a separate js file (which makes it easier to add a refresh later).

JacekCz · Answer

Yeah ... serving extensive AJAX (JS) data based on a few kilos of RAM, yeah ... this will work very well. I built a makeshift booth and I can see how to turn it into a skyscraper.

Anonymous · Answer

Note that what you serve for canvas is the text itself - where is the extensive data? It is known that this is not a server, but one / two clients should handle this.

pyton · Answer

In general, I mean that. I want ESP to be as an AP without internet access. Maybe later I will implement it more, I will change it ... I haven't covered this canvas yet but it looks promising initially.

JacekCz · Answer

I think that one pixel (also a larger structure, square, diagonal line, etc. ...) in text format costs more than an element that is part of the JPG / PNG chart. Sending via HTTP 1.1 without the length known in advance causes chunking, chunking many libraries are missing or have errors etc. ... (HTTP 2 I don't know what's new - I don't think it went into simplification) Optimistically it can be presumed (ask the author for details) that the chart is XY, i.e. it can be analyzed from left to right (and never come back), which is not a fairy tale if / how it is described. Yes, but at the expense of something. In any other case, the input and output buffers will compete fiercely for RAM. EDIT: the memory of a veteran, if it was a bitmap, this archaic PCX format has an extremely simple compression algorithm operating only on one image line, so there is hope for few buffers.

Anonymous · Answer

Canvas has nothing to do with bitmap. Bitmap was a separate idea that could be cropped (mentioned in the first post).

You don't send pixels there, only the library + data set. And ajax would be incremental.
Such canvasjs is 70kB, jquery.min.js second 70kB total 140kB + page 10kB + data (and this depends on sampling, you can, for example, assume sampling data every x and write down only changes - and some of the data is dropped). In my opinion, arduino sends 3 text files when refreshing + 1 small file at time x - which could possibly be kept in the frame - as long as it fits.

The only problem is arduino itself and its possibilities, but you can always lower the refresh rate or let it go completely. Since the guest from the link mentioned above uses it to display jpeg then three text files should not be a problem.

krzbor · Answer

The easiest way to do this is using HTML5 canvas. specifically, you save results to the variable (javascript table). Knowing the frequency of saving the result (e.g. 15 minutes), it is enough to provide the number of minutes or seconds since the last measurement during the query (in another javascript variable). Then you can create a graph placed in real time (e.g. last point 7 minutes from now, previous: 7 + 15, 7 + 2 * 15 etc.). The chart itself should be painted using javascript (the browser will do it), which downloads subsequent results, scales them to the size of the canvas and then draws.
It's best to create the whole first on your computer (it's a normal html page) and test there, and then transfer it to ESP.
The problem may be remembering previous results - the simplest is to use RAM - unfortunately after reboot we will lose our chart. If we use EEPROM then we should consider the problem of numerous write cycles allowed in EEPROM ESP8266 - I have not found this number anywhere.

Creating 24h and 7 Days Sensor Data Charts Using Arduino, ESP8266 and DS18B20

Post #1

Post #2

Post #3

Post #4

Post #5

Post #6

Post #7

Post #8

Post #9

Post #10

Post #11

Post #12

Post #13

Didn't find an answer? Ask Artificial Intelligence

Topic summary