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



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,

Arduino Analog Value Displayed on Gauge on Web Page

A gauge on the web page shows an analog value from the Arduino and is updated using Ajax. The gauge is a component written in JavaScript that uses the HTML5 canvas. The Arduino web server hosts the web page on a micro SD card.
startingelectronics.org

I see your code uses spiffs as the data logger memory, I just use ram on my weatherstation further up.
 
Last edited:
jclaudii said:
Which is better to use?

I'll see if I can follow along on that tutorial. It is alot of trial and error at this point in the project
Click to expand...

Depends on the application, SPIFF's is non-voltatile, and essentialy a simulated drive system.
 
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.
 

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:

 

Attachments

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

Similar threads

R
  • Question
Charging a Lifepo4 with a power supply and control current with a solid state relay controller by pwm. Good idee?
Replies
4
Views
1K
Rory1984
R
Automatic Water Level Controller for "Dr Fluffy Bottoms Quack House"
2 3
Replies
51
Views
14K
ThomsCircuit
V
  • Question
V/F Control Of Single Phase PSC Motors
Replies
7
Views
2K
rguttenb_newb
R
K
  • Question
Dual supply load control using MOSFET
Replies
8
Views
2K
crutschow
C
  • Solved
trying to locate crutschow...Converting -20V to 3V logic
Replies
10
Views
2K
crutschow
Menu
Log in
Register
Cookies are required to use this site. You must accept them to continue using the site. Learn more…