14 January & February 2021 http://www.elektormagazine.com
excerpts from the WiFi and web server code are given in Listing 3.
MTheCam can display colourful thermal images on any smartphone.HTML and JSON
Request for the pages / and /index.html generate a web page
with an eight-by-eight grid of colour patches with the temperature
values superimposed on them. The page also contains the minimum,
maximum and average temperature values (tmin, tmax and tavg
respectively) over the frame. Different colours represent different
temperatures over the range tminrange to tmaxrange, with these
limits computed dynamically as described above. The ‘Image’ button
switches the display to a ‘high-resolution’ false colour mode with
interpolated values, and the ‘Values’ button returns to the original
mode. By default a new image is displayed every second. This period
can be adjusted using a slider. The ‘Grid’ check box overlays a grid
on the image.A request for the page /frame delivers the temperature values in
JSON format so that they can be processed further by another appli-
cation. It is best to leave at least a 200 ms delay between requests as
the sensor chip requires around 100 ms to take a set of readings. If
push had come to shove the JSON object could have been created
using ordinary string manipulation functions, but there is a very
convenient library called ArduinoJson.h that makes things much
neater. This library can also read JSON objects. A typical object
might appear as follows.connect the M5StickC to a wireless network and set it up as a web server.
The Arduino software includes the libraries WiFi.h and WifiClient.h
that implement just such a web server. All it needs as parameters are
the access details for the network’s SSID and password. After reset, or
a power cycle, the display will show that the device is trying to connect
to the network. If this is successful it will show the IP address to which
it has been assigned. If unsuccessful, it is necessary to verify that the
access details are correct and that the access point is in range. The
range of the device is surprisingly good and it can certainly hold its
own against smartphones in this respect.
The web server then sits waiting for requests on the local IP address
assigned to it by the router for the pages /, /index.html and /frame.
For example, it might respond to http://192.168.10.1/.
Once we have set up the WiFi connection we need to tell the web
server what to do when it receives a request from a client browser. A
corresponding function will be called so that, for example, a request for
/ (or equivalently for /index.html) will result in a call to MW_index()
that, in turn, delivers a document to the client:
webServer.send_P(200, “text/html”, _uidoc);
send_P is used because the HTML document _uidoc is stored in the
flash memory as PROGMEM in order to reduce RAM usage. Commented
Listing 3: WiFi and web server....
const char ssid = “YourSSIDHere”; // change...
const char password = “YourPasswordHere”; // ... to your WLAN
WebServer webServer(80); // listening on port 80 = standard
WiFi.mode(WIFI_STA); // switch to ESP station mode
WiFi.begin(ssid, password); // look for known WLAN & try to connect
while (WiFi.status() != WL_CONNECTED) // wait for connection
{
delay(500); // 500ms delay
Serial.print(“.”); // still alive
}
Serial.println(“\n[Setup] WIFI connected!”);
// what to do if browser request is coming in
webServer.on(“/”, MW_index); // call MW_index() for / or /index.html
webServer.on(“/index.html”, MW_index);
webServer.on(“/frame”, MW_frameJS); // /frame - output as JSON-Data
webServer.onNotFound(MW_notFound);
webServer.begin(); // webserver starts here...
// Webserver callback
void MW_index() // send HTML-Doc from literally defined PROGMEM var
{
webServer.send_P(200, “text/html”, _uidoc); // send_P: use PROGMEM-Var
}
...
// main loop
void loop()
{
// give webserver a chance to handle requests. No delay() in LOOP!
webServer.handleClient();
...
}
...