ESP32 Web Server

Intro

ESP32 that acts as web server and controls the arduino that handles pump power.

It performs the following functions:

• Generate a web page with data from espresso machine, temperature, pressure, flow rate, timers, etc.
  HTML, script and style files for web page are stored in spiffs memory. Uses asynchronous web server and web sockets. Updates data on page once a sec. Go to http://192.168.xxx.xxx to call up the page, where xxx.xxx is the end of the ip address. I setup it as a static address with my router so the address won't change.

• Receive slider data from web page slider to set vibe pump power. Default pump power at start is full power.

• Control vibe pump power by setting DAC output voltage on GPIO25. This voltage is read by an arduino nano that is controlling the AC pump voltage.

• Receive data from other ESP32 (ESP32Flow) via ESP now protocol.

• Create and save a data file of shot data to SD card, after shot is finished. Shot data is saved once per second from beginning of water flow until 10 secs after flow ends. There is logic to decide if water was flowing to pull a shot, versus flowing to flush the HX or clean the screens. Only saves files after a shot when webpage button is pushed before the shot starts.

• Send email with shot data file after shot is finished.

• Saves comments/notes, that are added to the end of each shot data file.  So you can add bean type, grinder settings, etc for later reference.

• Data file name is created using date/time information from NTP

• Support OTA program mode for wifi program updates. There is a button on the bottom of webpage to enable OTA, then go to http://192.168.xxx.xxx/update to call up OTA page.

I started to use the SD card for storing the web server files, index.html script.js and css files, but later moved them to SPIFFS.  With SPIFFS, I can load them OTA using Elegant OTA.

Gitlab Software link

ESP NOW and Web Server together

I used this tutorial to help figure out how to write a program for a web server that also supports ESP Now.

Random Nerd link for web server and ESP Now

See  initWiFi() function for code for setting up wifi

Using websockets and the asynchronous web server library, I am refreshing the data once per second, and it automatically updates the web page.

Go to 192.168.xxx.xxx where xxx.xxx is the rest of the IP address for this ESP32.

Note that if you run the program with the Serial Monitor running, program sends the ip address to the monitor on startup.  If you don't see the address, hit the ESP32 reset button to restart it, and after a few seconds the ip address will be displayed

Over the Air Programming (OTA)

There is a button on the bottom of the webpage that you have to push to start the OTA function.

Then go to 192.168.xxx.xxx/update. This will bring up the Elegant OTA webpage.

Select bin file to upload.

Filesystem OTA

For loading filesystem  OTA. There are the files in the data folder, which are index.html, script.js and style.css.  They are all needed to create the webpage

https://randomnerdtutorials.com/esp32-ota-over-the-air-arduino/

Go down about 2/3 of the way, to find "Upload Files to Filesystem OTA (Over-the-Air) Updates" to find the section in the link above.

I use https://jsfiddle.net/ to make test the webpage appearance.  

Need to install to plugin to arduino from here
https://github.com/me-no-dev/arduino-esp32fs-plugin/releases/ 

Unzip, then create a folder called tools in /Documents/Arduino/.

Copy ESP32FS directory to tools so that you have this:

~Documents/Arduino/tools/ESP32FS/tool/esp32fs.jar

Close and restart Arduino program

Click the Sketch Data Upload.  It will fail "SPIFFS Upload failed!" because there is no board connected.

I had to unhide the var folder so I could find the file in Finder on my macbook.

Scroll up a little bit from the bottom, and find the line in the compiler comments (bottom window)

[SPIFFS] upload : /var/folders/21/y0tnzwm5417f8mfzzh6f9klm0000gn/T/arduino_build_735289/ESP32WebSocketSlider17.spiffs.bin

Arduino created a file in a hidden directory.  Go find the file in Finder
In Finder, you can use Finder, Go, Go to Folder, then copy folder name in and Finder will go there.

/var/folders/21/y0tnzwm5417f8mfzzh6f9klm0000gn/T/arduino_build_735289/ESP32WebSocketSlider17.spiffs.bin

Go to Arduino, sketch, show sketch folder, then move this bin file to the sketch folder

Or in terminal, use copy to copy to documents:

 cp /var/folders/21/y0tnzwm5417f8mfzzh6f9klm0000gn/T/arduino_build_735289/ESP32WebSocketSlider17.spiffs.bin ~/Documents

To load, go to ElegantOTA page  (addr/update) and then select filesystem instead of firmware.  Then pick the spiff.bin file and it will  load into spiffs memory.

Water Leverl Sensor

https://randomnerdtutorials.com/esp32-hc-sr04-ultrasonic-arduino/    Using ESP32 and sr04 ultrasonic distance sensor

HY-SRF05 

Shot Logic

There was logic in the code to figure out when you are starting a shot, but sometimes it didn't work.  Prefusion makes it harder to do, so I added a button on the top of the webpage.  

Push the webpage button right before starting the shot, and then data is saved and emailed.

The start shot logic is in the function OnDataRecv.  The code runs when Rate > 0 and start shot flag is true, so when the flow meter detects water is flowing and button was pushed.

If Rate > 0 and save shot flag is true, it opens a file and starts to save the shot data.   

There is logic at the end of WriteDataFile() to save the data file if it was a shot, and then to email the file.  Also resets flags for next shot.  Deletes the file if flow was on, but wasn't an actual shot.

uSD Card

Added a micro SD card adapter so I could add a uSD card.  I store the shot data files on  the uSD card.   The files are small, so my card will probably hold years of files.

GPIO 32     srf05 trigger

GPIO 33 srf05 echo

NTS Date/Time

NTS for date and time.  I used this to get the date and time to make the data file names.

https://randomnerdtutorials.com/esp32-data-logging-temperature-to-microsd-card/ 

Make sure to download library from the tutorial

I had some problems with NTS.  The timeClient.update() function seemed to get stuck when I called it, and nothing in the routine after it would execute.  I ended up only calling this function in setup when initializing the program, it works fine then.  

Then I calculated the total seconds elapsed at startup and save in  TotalSecStartUp.  

Later I convert millis() into seconds, and substract   TotalSecStartUp to see how much time has passed since I initized NTS.  Use this to figure out the current time. 
Current date assumes that the program started on the same date.  So I added some logic to restart the ESP at 1am every day.  When it restarts, it gets a new date.

Email

https://randomnerdtutorials.com/esp32-send-email-smtp-server-arduino-ide/

Used this to figure out how to send automatic emails with the data file attached.

I have a gmail account just for sending emails, my smarthome system also used the account for sending notifications.  For security, you should NOT use your main email account.

This information in credentials.h needs to be filled in:

//used by ESP32WebSocketSlider program

//Used for sending emails

#define emailSenderAccount    "sender@mail.com"

#define emailSenderPassword   "password"

#define emailRecipient        "rx@mail.com"

Photos