Issue with logger JavaScript

[bill-orange]

Pieter,

Thanks for the excellent guide and examples.

I have a question regarding the A-Temperature_logger example. I got it working and am developing an application where the actual temperature reading is plotted against the Wunderground forecast. The 'previous' button called by < does not work in Chrome, Firefox or Safari (on my phone). I took a look at the code in temperatureGraph.js and it looks pretty reasonable but I really don't understand how this function works.

document.getElementById("prev").onclick = function() { maxDate = new Date(maxDate.getTime() - getZoomTime()/3); setRange(); }

Can you direct me to a resource that would help explain it? I just can not spot what's wrong. Can you help with the immediate problem at hand, getting the function to work?

[tttapa]

I guess the JavaScript could use some documentation indeed. I didn't add it to save space on the ESP, and because it wasn't the main focus of the guide.
I'm working on it right now, I don't know if I can finish it today.

In short, the "prev" function takes the maxDate (the time of the right boundary of the viewport) and subtracts one third of the width of the viewport (i.e. the result of getZoomTime()). Then setRange sets minDate to maxDate minus the viewport width. E.g. if maxDate = 25/09, and the width of the viewport width is 3 days: maxDate = 25/09 - 1 day = 24/09 And setRange will update minDate as well: minDate = maxDate - viewport width = 24/09 - 3 days = 21/09

The one third is completely arbitrary, by the way. It's just how many times you have to click to move the timeline across the entire width of the viewport.

[bill-orange]

That makes sense. I see no reason why it should not work, unless there is a problem with getZoomTime().

I am looking forward to your documentation. I have plenty to work on in the mean time. I quickly discovered that temp.csv will grow in size until memory is overwritten and the program blows up. I am working on a trim function to routinely trim it. The trimming works but the Java script can not read the trimmed file. I think that I am lost in getting the non-printing characters or I am missing an EOF.

This is something that maybe could be added to the example when it works right. Otherwise, my end product is starting to look like I want.

One other question. Let's say that the logging sketch has a string String fileVersion = esp_8266_3.2 It would be nice to have the file version displayed on the html page. How do you communicate a variable between the logging sketch and index.html? Can index.html read a value stored in EEPROM? Passing a file seems a rather awkward way to pass one variable or string. I am sure there must be a way, but a google search did not reveal the secret. Can you point me in the right direction?

[tttapa]

I have committed some updates with comments to the JS and HTML files.

Using a ring buffer instead of a normal file might be a more efficient approach than trimming it. Just make sure that your records have a constant number of characters.

Browsers really only talk HTTP (and WebSockets). There's no way the browser has direct access to the ESP's internal memory. If you need a value from the ESP, send an HTTP request. Editing the index.html file before serving it (like you would on a normal server that has PHP or some other server side scripts running) is not really recommended on the ESP8266. Just add another server handler for GET /fileVersion, for example, that responds with the version, and in your JS, add an XHR request to the ESP. If you can, use a null-terminated const char array instead of a String (note the capital S). const char *fileVersion = "esp_8266_3_2";

Pieter

[bill-orange]

Thanks for the advice on getting data from the sketch to the web page. That is what I will do.

I downloaded your files, added my second series to the .js script and all is well. The only thing that crossed me up was the line "var data = lines[i].split(",",2)"; I had to take the ",2" out to split out my third data field (forecast temperature). It looks pretty good now. I like the idea of using a ring buffer. My data fields are not of equal length because of the forecast data. It looks like this:

1506214800 | null | 71 1506201743 | 76.1 |   1506218400 | null | 68 1506202343 | 76.1 |   1506218400 | null | 68 1506202943 | 76.21 |   1506218400 | null | 68 1506203543 | 76.32 |   1506218400 | null | 68

Can you point me toward in example code that might work with this?

My trimmer still does not work right! Either I get extra at each trim or I am missing a , or something happens at the end that prevents the script from parsing the file. I will have to find an example somewhere. I could dig through boxes for my old 'C' book.

Thanks again,

Bill

Edit

Trim works now. I had my head on backwards and had the meaning of /n and /r reversed.