Based the ESP32 SoC using the Arduino Framework, Random Nerd Tutorials and the ESP32 examples from Espressif. The most significant difference in this code and what is seen on RNT is that I have setup the following: 1) Extreme modular approach such that there are a great number of small files, instead of a monolithic approach. 2) This dashboard is setup as a soft access point with the ESP32. This means the application will serve up the dashboard locally and doesn't access the internet. 3) Like RNT's example, this dashboard uses the concept of cards, with this approach using one card per file (actually two files card_n.h and card_n.cpp).
Additional information for this project will be on my website:
wellys.com - ESP32: Using arduino-cli
Here is a high level approach to adding to this code. Each new sensor will require a card. Cards are sections on the homepage which either report a value or allow a control to make a change on the ESP32 (for example, a slider on a card, dims an LED). To add a card, you need to do the following: 1) Add card_n.h and card_n.cpp files, typically its best to duplicate an existing card and make changes to it. 2) Add card_n content to index.html, again, duplicate and edit a card section on the index.html 3) Add a call to card_n(server) in serve.cpp, as in "card_n(serve);" 4) Add template processing to processor.cpp. This is a bit more complicated and based on what you want to accomplish. The function processor is used to replace %template% variables with data. More on this later.
The main code for development. The goal is to have a easy to maintain and easy to expand Access Point web page-based Dashboard.
LittleFS utility to print out the bytes used and free. Based on a sketch by Mischanti Renzo
Initializing FS...done.
File system info:
Total: 1507328 bytes
Used: 315392 bytes
Free: 1191936 bytes
favicon.png 717
gauge.min.js.map 229040
gauge.min.js 44751
index.html 2547
lightbulb.svg 547
script.js 3623
style.css 1782
switch-closed.svg 738
switch-open.svg 858
For more information as to why LittleFS, see joltwallet on Github
I integrated the code from RNT:DS18B20 Async Web Server into Dashboard. This includes changes to:
Please see this entry on Wellys for a full explanation. I changed the build approach from a custom Sublime Text build, to a more standardized approach using make. What is NOT included in this repository is a file called env.make:
board = esp32:esp32:featheresp32
port = /dev/cu.usbserial*
build = build
The makefile in the repository will include this file to capture the local environmental variables.
In order to use LittleFS, you need two things:
In \~/.arduino15/packages/esp32/tools, there needs to be mklittlefs, this is the tool which will make a littlefs filesystem on the ESP32
The .jar file in /home/lkoepsel/Arduino/tools/ESP32FS/tool/ must be replaced by the one on github, otherwise the three options will not appear in the Arduino dropdown Tools -> ESP32 Sketch Data Upload. As both .jar files have the same name, I added .spiffs to the end of the old one to remind me.
The Arduino core package as of v2.00 now contains LittleFS.h as indicated by this note. Make sure your IDE and arduino-cli are both version 2.0 or higher. The one I use is 2.0.2
The actual header file required to use LittleFS is located here: /home/lkoepsel/.arduino15/packages/esp32/hardware/esp32/2.0.2/libraries/LittleFS/src. Make sure it appears there, if not, reload the ESP32 package for the Arduino.
Check all four elements and make sure they exist/or are correct.
See sample output above. Use serial monitor to gather information about installed files on the ESP32 via LittleFS.
Switched from SPIFFS to LittleFS, it appears that LittleFS is faster (2-3x) and more reliable. Haven't confirmed either, however, no issues after switching.
Here are the detailed steps to adding a new card to the Website. (It doesn't include how to solve formatting issues as when one card is much longer to the one beside it in the row.):
The canvas-gauges library is great for embedded projects. There are two files which are not in the git folder and are not tracked, gauge.min.js and gauge.min.js.map. Both of these files are in the root directory of the canvas-gauges release. Download the latest from github, extract the folder and copy the two files in to the data folder.