Continue to Site

Welcome to our site!

Electro Tech is an online community (with over 170,000 members) who enjoy talking about and building electronic circuits, projects and gadgets. To participate you need to register. Registration is free. Click here to register now.

  • Welcome to our site! Electro Tech is an online community (with over 170,000 members) who enjoy talking about and building electronic circuits, projects and gadgets. To participate you need to register. Registration is free. Click here to register now.

Pumphouse Project - Logic to water pump control and IoT

Status
Not open for further replies.
I havent tried for a while but I think if you press alt at the same time as prt scrn you get an image just of the window thats selected at the time.

You need to install the tool for spiffs on the arduino ide, I found that fairly simple.
Then add the code to stream the file when accessed, serving the file from spiffs only needs a few lines.
Heres another how to:
 
Aha.
My works computer (I'm using now) wont allow me to open pdf's, maybe their afraid of me doing something naughty.
 
I have the SPIFF install tool installed and followed the example linked and just cut and pasted in the default "gauge" html from https://developers.google.com/chart/interactive/docs/gallery/gauge

I also created a data.csv file in the same directory of <data> and I think I am appending data to that csv.

My question is, what do I change in the index.html to pull the temperature value to the gauge?
I'm guessing I have two options:
1. Live data as in using the variable that has the most recent temperature reading
2. Last datapoint in the CSV file. Should I just use a data.txt instead of a data.csv?
How do I read this same type of data into a line graph?

I'm sure I'll have more questions after I figure out how to record the data and see something on the screen. so I'll stop here for now.

Here is my temperature gathering function:

Code:
void getTemp()
{
  if(currentMillis-tempMillis >= tempDelay) {
  float tempc;
  float tempc2;
  //char buffer[10];
  DS18B20.requestTemperatures();
  tempc = DS18B20.getTempCByIndex(0);
  tempc2 = DS18B20.getTempCByIndex(1);
  temp=(tempc*9/5+32); //converted to F.
  temp2=(tempc2*9/5+32); //converted to F.
  //String tempC = dtostrf(temp, 4, 1, buffer);//handled in sendTemp()
  //Serial.print("Temperature: ");
  //Serial.print(String(sent)+" Temperature: ");
  Serial.print("Uploaded temp to file: ");
  Serial.println(temp);
  tempMillis = currentMillis;
  File tempLog = SPIFFS.open("/temp.csv", "a"); // Write the time and the temperature to the csv file
      tempLog.print(currentMillis);
      tempLog.print(',');
      tempLog.println(temp);
      tempLog.close();
 
} 
}

Here is my output below and the /index.html code

120132


Code:
<html>
  <head>
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script type="text/javascript">
      google.charts.load('current', {'packages':['gauge']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Temp F', 80],
          ['CPU', 55],
          ['Network', 68]
        ]);

        var options = {
          width: 600, height: 320,
          redFrom: 90, redTo: 100,
          yellowFrom:75, yellowTo: 90,
          minorTicks: 5
        };

        var chart = new google.visualization.Gauge(document.getElementById('chart_div'));

        chart.draw(data, options);

        setInterval(function() {
          data.setValue(25);
          chart.draw(data, options);
        }, 13000);
        setInterval(function() {
          data.setValue(1, 1, 40 + Math.round(60 * Math.random()));
          chart.draw(data, options);
        }, 5000);
        setInterval(function() {
          data.setValue(2, 1, 60 + Math.round(20 * Math.random()));
          chart.draw(data, options);
        }, 26000);
      }
    </script>
  </head>
  <body>
  “<p>This is still a work in progress.</p>”
    <div id="chart_div" style="width: 400px; height: 120px;"></div>
  </body>
</html>
 
You see this bit:

var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Temp F', 80],
['CPU', 55],
['Network', 68]
]);

Thats the bit that tells the gauges what to display, for the temp gauge its :

['Temp F', 80],

To be exact:

80],

If you were serving the html/javascript from memory you could just replace 80], with String(temp) , that would put the temp in Fahrenheit into the guage.
However serving from spiffs you'd need to do it the 'proper' way and use ajax to supply the data from the arduino which would send a json file.

Heres an excellent tutorial on an arduino guage over the net controlled by a pot, with some savvy this could be made to work esp,


I see your code uses spiffs as the data logger memory, I just use ram on my weatherstation further up.
 
Last edited:
Ram is quick, which isnt necessary here, but its volatile, no power and bang goes all your data.
Spiffs slower which is fine here, and its non volatile, loose power and your data stays, you can however wear out the memory, I think you get a million write cycles. and with spiffs you get much more memory.
So I guess stick with spiffs.
Most of my projects are trial and error.
If you can progtam in C you can fo html and esp javascript, the latter is C with a few extra bits.
 
Sounds like I need an SD card or add another memory chip/option for the long term solution (greater than a year). I'll dig through the web some and see what others are doing. I'll have some time this weekend to see if I can start serving data from spiffs to the webpage when it is requested.
 
Sounds like I need an SD card or add another memory chip/option for the long term solution (greater than a year). I'll dig through the web some and see what others are doing. I'll have some time this weekend to see if I can start serving data from spiffs to the webpage when it is requested.

What's wrong with using SPIFF's? - the whole point of it is long term non-volatile memory - and it's already there.
 
Spiffs or sd is fine.
The advantage here with sd would be you could pull the card & read it with a pc and maybe use the data in excel or something.
Some clever folk can upload from a esp server direct into excel, but thats not something I can do.
 
I found some info on a library called steel series gauges, these are a lot more aesthetic than google gauges.
Some guy called Eric built a system for his tugboat using these, and posted the code for us to play with.
I adapted the code for my wether station, it looks good to me so far:

120250
 

Attachments

  • station.png
    station.png
    204.3 KB · Views: 273
Last edited:
Status
Not open for further replies.

New Articles From Microcontroller Tips

Back
Top