For completeness, here is the Arduino sketch that goes with the SuperMon.h file above.
#include "SuperMon.h" //.h file that stores your html page code
//********************************************^************************************************
// Version YY/MM/DD Description
// ======= ======== ===========
// 1.00 22/12/05 Running code
// 1.10 23/06/15 Added DS18B20 code
//
//********************************************^************************************************
/*
- Youtube where this can be viewed:
https://www.youtube.com/watch?v=pL3dhGtmcMY&t=1183s
- This sketch came from here:
https://github.com/KrisKasprzak/ESP32_WebPage
- Web site to test the HTML code:
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
this example will show
1. how to use and ESP 32 for reading pins
2. building a web page for a client (web browser, smartphone, smartTV) to connect to
3. sending data from the ESP to the client to update JUST changed data
4. sending data from the web page (like a slider or button press) to the ESP to tell the ESP to do something
If you are not familiar with HTML, CSS page styling, and javascript, be patient, these code platforms are
not intuitive and syntax is very inconsitent between platforms
I know of 4 ways to update a web page
1. send the whole page--very slow updates, causes ugly page redraws and is what you see in most examples
2. send XML data to the web page that will update just the changed data--fast updates but older method
3. JSON strings which are similar to XML but newer method
4. web sockets very very fast updates, but not sure all the library support is available for ESP's
I use XML here...
compile options
1. esp32 dev module
2. upload speed 921600
3. cpu speed 240 mhz
flash speed 80 mhz
flash mode qio
flash size 4mb
partition scheme default
NOTE if your ESP fails to program press the BOOT button during programm when the IDE is "looking for the ESP"
*/
//********************************************^************************************************
#include <OneWire.h>
#include <DallasTemperature.h>
#include <WiFi.h> //standard library
#include <WebServer.h> //standard library
#include "SuperMon.h" //.h file that stores your html page code
//********************************************^************************************************
//GPIO where the DS18B20 is connected
const int oneWireBus = 5;
//Setup a oneWire instance to communicate with any OneWire devices
OneWire oneWire(oneWireBus);
// Pass our oneWire reference to Dallas Temperature sensor
DallasTemperature sensors(&oneWire);
float temperatureFreezerC;
float temperatureFreezerF;
float temperatureOutsideC;
float temperatureOutsideF;
//*******************************************
//Addresses of the DS18B20s
//
//Freezer = 0x1035B58A0208009B <-----<<<< change to the appropriate address
uint8_t freezerAddress[8] = {0x10, 0x35, 0xB5, 0x8A, 0x02, 0x08, 0x00, 0x9B};
//Outside = change to the appropriate address
uint8_t outsideAddress[8] = {0x10, 0x35, 0xB5, 0x8A, 0x02, 0x08, 0x00, 0x9B};
//********************************************^************************************************
//here you post web pages to your homes intranet which will make page debugging easier
//as you just need to refresh the browser as opposed to reconnection to the web server
#define USE_INTRANET
//replace this with your homes intranet connect parameters
#define LOCAL_SSID "abcdefg"
#define LOCAL_PASS "xxxxxxx"
//once you are read to go live these settings are what you client will connect to
#define AP_SSID "TestWebSite"
#define AP_PASS "023456789"
//start your defines for pins for sensors, outputs etc.
#define PIN_OUTPUT 26 //connected to nothing but an example of a digital write from the web page
#define PIN_FAN 12 //pin 12 and is a PWM signal to control a fan speed
#define PIN_LED 4 //On board LED
#define PIN_A0 34 //some analog input sensor
#define PIN_A1 35 //some analog input sensor
//variables to store measure data and sensor states
bool LED0 = false;
bool SomeOutput = false;
int BitsA0 = 0;
int BitsA1 = 0;
int FanSpeed = 0;
int FanRPM = 0;
uint32_t SensorUpdate = 0;
float VoltsA0 = 0;
float VoltsA1 = 0;
//the XML array size needs to be bigger that your maximum expected size. 2048 is way too big for this example
char XML[2048];
//just some buffer holder for char operations
char buf[32];
//********************************************^************************************************
//variable for the IP reported when you connect to your homes intranet (during debug mode)
IPAddress Actual_IP;
//definitions of your desired intranet created by the ESP32
IPAddress PageIP(192, 168, 1, 1);
IPAddress gateway(192, 168, 1, 1);
IPAddress subnet(255, 255, 255, 0);
IPAddress ip;
//*******************************************
//Set a Static IP address
//192.168.1.180
IPAddress local_IP(192, 168, 1, 180);
IPAddress primaryDNS(8, 8, 8, 8); //optional
IPAddress secondaryDNS(8, 8, 4, 4); //optional
//*******************************************
// gotta create a server
WebServer server(80);
//TIMER stuff
unsigned long temperatureMillis;
// s e t u p ( )
//********************************************^************************************************
void setup()
{
//standard stuff here
Serial.begin(115200);
pinMode(PIN_FAN, OUTPUT);
pinMode(PIN_LED, OUTPUT);
//turn off led
LED0 = false;
digitalWrite(PIN_LED, LED0);
//configure LED PWM functionalitites
ledcSetup(0, 10000, 8);
ledcAttachPin(PIN_FAN, 0);
ledcWrite(0, FanSpeed);
//if your web page or XML are large, you may not get a call back from the web page
//and the ESP will think something has locked up and reboot the ESP
//not sure I like this feature, actually I kinda hate it
//disable watch dog timer 0
disableCore0WDT();
//maybe disable watch dog timer 1 if needed
//disableCore1WDT();
//just an update to progress
Serial.println("starting server");
//if you have this #define USE_INTRANET, you will connect to your home intranet, again makes debugging easier
#ifdef USE_INTRANET
//*******************************************
//Configures to a static IP address
if (!WiFi.config(local_IP, gateway, subnet, primaryDNS, secondaryDNS))
{
Serial.println("STA Failed to configure");
}
//*******************************************
//log into the router
WiFi.begin(LOCAL_SSID, LOCAL_PASS);
while (WiFi.status() != WL_CONNECTED)
{
delay(500);
Serial.print(".");
}
Serial.print("IP address: ");
Serial.println(WiFi.localIP());
Actual_IP = WiFi.localIP();
#endif
//if you don't have #define USE_INTRANET, here's where you will creat and access point
//an intranet with no internet connection. But Clients can connect to your intranet and see
//the web page you are about to serve up
#ifndef USE_INTRANET
WiFi.softAP(AP_SSID, AP_PASS);
delay(100);
WiFi.softAPConfig(PageIP, gateway, subnet);
delay(100);
Actual_IP = WiFi.softAPIP();
Serial.print("IP address: "); Serial.println(Actual_IP);
#endif
printWifiStatus();
//*********************************
//these calls will handle data coming back from your web page
//this one is a page request, upon ESP getting / string the web page will be sent
server.on("/", SendWebsite);
//upon esp getting /XML string, ESP will build and send the XML, this is how we refresh
//just parts of the web page
server.on("/xml", SendXML);
//upon ESP getting /UPDATE_SLIDER string, ESP will execute the UpdateSlider function
//same notion for the following .on calls
//add as many as you need to process incoming strings from your web page
//as you can imagine you will need to code some javascript in your web page to send such strings
//this process will be documented in the SuperMon.h web page code
server.on("/UPDATE_SLIDER", UpdateSlider);
server.on("/BUTTON_0", ProcessButton_0);
server.on("/BUTTON_1", ProcessButton_1);
//finally begin the server
server.begin();
//Start the DS18B20 sensor
sensors.begin();
} //END of setup()
// l o o p ( )
//********************************************^************************************************
void loop()
{
//************************************************
//is it time to check the freezer temperature ?
if (millis() - temperatureMillis >= 2000ul)
{
//restart this TIMER
temperatureMillis = millis();
sensors.requestTemperatures();
//Freezer temperature
temperatureFreezerC = sensors.getTempC(freezerAddress);
//Serial.print(temperatureFreezerC);
//Serial.println("ºC");
temperatureFreezerF = sensors.getTempF(freezerAddress);
//Serial.print(temperatureFreezerF);
//Serial.println("ºF");
//Outside temperature
temperatureOutsideC = sensors.getTempC(outsideAddress);
//Serial.print(temperatureOutsideC);
//Serial.println("ºC");
temperatureOutsideF = sensors.getTempF(outsideAddress);
//Serial.print(temperatureOutsideF);
//Serial.println("ºF");
}
//************************************************
//you main loop that measures, processes, runs code, etc.
//note that handling the "on" strings from the web page are NOT in the loop
//that processing is in individual functions all managed by the wifi lib
//in my example here every 50 ms, i measure some analog sensor data (my finger dragging over the pins
//and process accordingly
//analog input can be from temperature sensors, light sensors, digital pin sensors, etc.
if ((millis() - SensorUpdate) >= 50)
{
//Serial.println("Reading Sensors");
SensorUpdate = millis();
BitsA0 = analogRead(PIN_A0);
BitsA1 = analogRead(PIN_A1);
//standard converion to go from 12 bit resolution reads to volts on an ESP
VoltsA0 = BitsA0 * 3.3 / 4096;
VoltsA1 = BitsA1 * 3.3 / 4096;
}
//no matter what you must call this handleClient repeatidly--otherwise the web page
//will not get instructions to do something
server.handleClient();
} //END of loop()
// U p d a t e S l i d e r ( )
//********************************************^************************************************
//function managed by an .on method to handle slider actions on the web page
//this example will get the passed string called VALUE and conver to a pwm value
//and control the fan speed
void UpdateSlider()
{
//many I hate strings, but wifi lib uses them...
String t_state = server.arg("VALUE");
//conver the string sent from the web page to an int
FanSpeed = t_state.toInt();
Serial.print("UpdateSlider"); Serial.println(FanSpeed);
//now set the PWM duty cycle
ledcWrite(0, FanSpeed);
//YOU MUST SEND SOMETHING BACK TO THE WEB PAGE--BASICALLY TO KEEP IT LIVE
//option 1: send no information back, but at least keep the page live
//just send nothing back
//server.send(200, "text/plain", ""); //Send web page
//option 2: send something back immediately, maybe a pass/fail indication, maybe a measured value
//here is how you send data back immediately and NOT through the general XML page update code
//my simple example guesses at fan speed--ideally measure it and send back real data
//i avoid strings at all caost, hence all the code to start with "" in the buffer and build a
//simple piece of data
FanRPM = map(FanSpeed, 0, 255, 0, 2400);
strcpy(buf, "");
sprintf(buf, "%d", FanRPM);
sprintf(buf, buf);
//now send it back
server.send(200, "text/plain", buf); //Send web page
} //END of UpdateSlider()
// P r o c e s s B u t t o n _ 0 ( )
//********************************************^************************************************
//now process button_0 press from the web site. Typical applications are the used on the web client can
//turn on / off a light, a fan, disable something etc
void ProcessButton_0()
{
//
LED0 = !LED0;
digitalWrite(PIN_LED, LED0);
Serial.print("Button 0 "); Serial.println(LED0);
//regardless if you want to send stuff back to client or not
//you must have the send line--as it keeps the page running
//if you don't want feedback from the MCU--or let the XML manage
//sending feeback
//option 1 -- keep page live but dont send any thing
//here i don't need to send and immediate status, any status
//like the illumination status will be send in the main XML page update
//code
server.send(200, "text/plain", ""); //Send web page
//option 2 -- keep page live AND send a status
//if you want to send feed back immediataly
//note you must have reading code in the java script
/*
if (LED0) {
server.send(200, "text/plain", "1"); //Send web page
}
else {
server.send(200, "text/plain", "0"); //Send web page
}
*/
} //END of ProcessButton_0()
// P r o c e s s B u t t o n _ 1 ( )
//********************************************^************************************************
//same notion for processing button_1
void ProcessButton_1()
{
//just a simple way to toggle a LED on/off. Much better ways to do this
Serial.println("Button 1 press");
SomeOutput = !SomeOutput;
digitalWrite(PIN_OUTPUT, SomeOutput);
Serial.print("Button 1 "); Serial.println(LED0);
//regardless if you want to send stuff back to client or not
//you must have the send line--as it keeps the page running
//if you don't want feedback from the MCU--or send all data via XML use this method
//sending feeback
server.send(200, "text/plain", ""); //Send web page
//if you want to send feed back immediataly
//note you must have proper code in the java script to read this data stream
/*
if (some_process) {
server.send(200, "text/plain", "SUCCESS"); //Send web page
}
else {
server.send(200, "text/plain", "FAIL"); //Send web page
}
*/
} //END of ProcessButton_1()
// S e n d W e b s i t e ( )
//********************************************^************************************************
//code to send the main web page
//PAGE_MAIN is a large char defined in SuperMon.h
void SendWebsite()
{
Serial.println("sending web page");
//you may have to play with this value, big pages need more porcessing time, and hence
//a longer timeout that 200 ms
server.send(200, "text/html", PAGE_MAIN);
} //END of SendWebsite()
// S e n d X M L ( )
//********************************************^************************************************
//code to send the main web page
//I avoid string data types at all cost hence all the char mainipulation code
void SendXML()
{
//Serial.println("sending xml");
strcpy(XML, "<?xml version = '1.0'?>\n<Data>\n");
//send Freezer Temperature F'
//one decimal place
sprintf(buf, "<B0>%d.%d</B0>\n", (int) (temperatureFreezerF), abs((int) (temperatureFreezerF * 10) - ((int) (temperatureFreezerF) * 10)));
strcat(XML, buf);
//send Freezer Temperature C'
//one decimal place
sprintf(buf, "<V0>%d.%d</V0>\n", (int) (temperatureFreezerC), abs((int) (temperatureFreezerC * 10) - ((int) (temperatureFreezerC) * 10)));
strcat(XML, buf);
//send Outside Temperature F'
//one decimal place
sprintf(buf, "<B1>%d.%d</B1>\n", (int) (temperatureOutsideF), abs((int) (temperatureOutsideF * 10) - ((int) (temperatureOutsideF) * 10)));
strcat(XML, buf);
//send Outside Temperature F'
//one decimal place
sprintf(buf, "<V1>%d.%d</V1>\n", (int) (temperatureOutsideC), abs((int) (temperatureOutsideC * 10) - ((int) (temperatureOutsideC) * 10)));
strcat(XML, buf);
//show led0 status
if (LED0)
{
strcat(XML, "<LED>1</LED>\n");
}
else
{
strcat(XML, "<LED>0</LED>\n");
}
if (SomeOutput)
{
strcat(XML, "<SWITCH>1</SWITCH>\n");
}
else
{
strcat(XML, "<SWITCH>0</SWITCH>\n");
}
strcat(XML, "</Data>\n");
//wanna see what the XML code looks like?
//actually print it to the serial monitor and use some text editor to get the size
//then pad and adjust char XML[2048]; above
Serial.println(XML);
//you may have to play with this value, big pages need more porcessing time, and hence
//a longer timeout that 200 ms
server.send(200, "text/xml", XML);
} //END of SendXML()
// p r i n t W i f i S t a t u s ( )
//********************************************^************************************************
//I think I got this code from the wifi example
void printWifiStatus()
{
//print the SSID of the network you're attached to:
Serial.print("SSID: ");
Serial.println(WiFi.SSID());
//print your WiFi shield's IP address:
ip = WiFi.localIP();
Serial.print("IP Address: ");
Serial.println(ip);
//print the received signal strength:
long rssi = WiFi.RSSI();
Serial.print("signal strength (RSSI):");
Serial.print(rssi);
Serial.println(" dBm");
//print where to go in a browser:
Serial.print("Open http://");
Serial.println(ip);
} //END of printWifiStatus()
//********************************************^************************************************
// END OF CODE
//********************************************^************************************************
