Second project of TTGO Tdisplay ESP32 - remoting controls and screen

[jcrubin]

Continuing from our first project with the TTGO-Tdisplay we expand upon the functionality of our project which measures temperature and humidity, but only physically at the device.  In this video We will add on wireless network functionality, a webserver, Javascript and associated support code to facilitate this that it might be viewed from a web browser on a computer or smart phone.



  This example will use hardcoded wifi/ssid and password for simplification, using small steps to slowly write in support, this provides a better demonstration than simply showing a finished program and talking it through.


  The first goal is simply a bare bones webserver that can be hit on the network that does little but display connection success.  Reading the IP  info off of the terminal output to accomplish this.  The first improvment is how we will be storing HTML going forward, in one concise location, this is followed by MDns support so we can use a name for the device instead of an IP.


  After this, I thought it a good Idea to leverage the display to show the network information when the device boots up so the user knows how to connect to it.  Once the device connects to the network, the network info will display for five seconds and then jump to the normal programme.


  At this point some global variables are created so that we can start working on passing values to the web page.  A simple workup is made for the four values in simple DIV containers.  Following this, some simple Javascript is used to , at an interval request this data asynchronously, and populate those containers on receive.  It is then required on the back end to supply the data for those requests.  A small function that builds a JSON string and pushes it is assembled.


  This point in the project demonstrates a shortcoming of the webserver that comes with arduino IDE, and once demonstrated we segway to the installation of the asyncwebserver for esp32 as a replacement, then making the minor changes to accommodate it.  Also I took the opportunity to remove the buttons from the interrupts due to a known hardware issue with the TTGO.


Now the web page is bolstered with a F/C radio button and some computation to allow for conversion.  The conversion which could have been done on the esp, was moved to the browser as an exercise.


Finally to finish off we add CSS to make everything pretty.

Code posted at:
https://technocoma.blogspot.com/p/dht22-test-program-for-ttgo-t-display.html