Many of us are working from home these days. And we all fear those embarrassing moments when you are in a video conference, and your children rush in, blocking the camera while feeding you with a candy bar. Pete described his device which is a door sign lighted by LEDs: Red flashing says "Do not disturb" and green tells you "Feel free to enter". This 4.0 Version uses a WLAN attached ESP-32 controller and a 2.8" TFT touch display to offer better connectivity and more functions.
- ESP-32 Dev Kit C from AZ Delivery or Amazon (about 10 €)
- 2.8" TFT Touch Display 240 x 320 pixel, e.g. Amazon (about 15 €)
For a Breadboard version:
- 2 x Part number: (102-9147)
- 1 x MIKROE-513, 10 piece Breadboard Jumper Wire Kit from RS, Part number: (791-6463)
Or use a 3D print for the case:
- Your favourite 3D filament
- Solder iron
- coloured flat ribbon wire (10 cm)
- 3 ruthex threaded insert M3 x 5,7 mm (e.g. Amazon)
- 3 M3 x 8 mm screws
For power supply:
- USB Powerbank or 5 V USB power supply
- Local WLAN with known credentials, internet access and DHCP server
- Smartphone, tablet or PC connected to the WLAN and any browser
- PC with Arduino IDE installed
If you do not want to be disturbed, the display shows a red sign with a user-definable text. If you may allow entering, the display shows an orange sign with a different text. If you allow people to enter, the display shows a green sign with another text.
In the red or orange state, people may ask to get permission to enter by pressing the touch display. A pending request is indicated by a blue background colour of the display.
The device is controlled via a web interface using the ESP-32 WLAN capabilities. It must be connected to your local WLAN. You can use any browser (PC, Tablet, Smartphone) for the GUI. The ESP32 runs a web server with an HTML page showing three buttons to set green, red or orange state. There is another box shown on the Web page which indicates that someone has requested to enter.
In the red or orange state, you may start a countdown timer. Its start value is entered by pressing one of three buttons on the web page: "5" and "10" are adding 5 or 10 minutes to the current time left. "00" resets the timer. The time left (in minutes) is also displayed on the TFT display (door sign). When the timer elapses, the sign is automatically switched into the green state.
You can end the timer by clicking on one of the three state buttons.
How to build
If you do not want to 3D print a case, you may also use two breadboards to connect the ESP-32 and the display. In this case, you need to attach two breadboards side to side because the ESP module is too wide for a single normal breadboard.
If you are building your permanent case for the device, you may want to solder the connection wires to both devices (TFT and ESP). In this case, you need first to get rid of the breadboard pins soldered to the devices. I have pulled off the plastic spacers around the pins. Then I have removed (unsoldered) pin for pin. Finally, I have cleansed the pinholes using solder wick and my favourite flux paste. This allowed me to enter the tinned wire ends into the holes smoothly.
In either case, you need to connect the boards according to the following table:
Please be careful with the GND pins of the ESP-32 DevKit module! There is one pin labelled with "GND" which is not GND (the pin neighbour of V5 pin).
Powering the device
The nESP-32 Dev Kit comes with a built-in 5 V to 3.3 V converter. This makes power supply easy. You power the display from the 5V pin of the ESP module and get the 3.3 V supply for the background LED from the 3V3 pin of the ESP device.
You could use a wall plug 5 V USB power supply (charger) and use the micro USB connector of the ESP-32 module. I prefer to use a power bank instead (see pictures above). I have provided a resting cup integrated into my 3D printed case to place the power bank. The device will use about 100 mA @ 5 V which is about 0.5 W. My power bank is a 16.3 Wh device from "trust". So I can operate it for a full day without recharging.
Please download the DS Mechanical 4.0 file for the 3D construction of a case. The case is made of an upper and a lower shell. The lower shell has mounting holes for "ruthex" 3 mm x 5.7 mm press in thread bushes.
So the two shells can securely be screwed together. There are two hanger holes on top of the lower case which can be used to attach, e.g. a chain for hanging the device to a suction cup hook attached to the door.
Both shells do have little pins which fit the holes of the PCBs to hold them in place.
If you have never done HTML programming and HTTP server stuff before, this is an ideal project to learn how easy it is to set up a web server.
There are about 350 lines of code in Arduino slang C++. Lots of comments will help you understand the code. For the HTML part, I advise you to google and use a beginners tutorial to understand the concept. When you are new to HTTP client-server communication, please keep in mind there are two things in a server program: One part is receiving messages from the browser and interprets them. The other part is building and sending an HTML coded page description which is interpreted by the browser and used to build what you see on your phone's or PC's screen.
In our case, we do have a third part which is in charge of building the content of the TFT display and monitoring the touch output of the TFT. We are using the complete 2.8" display as a single touch area and therefore do not need to calibrate the touch output.
But let's first start to prepare the environment. You need to install the ESP-32 add on for the Arduino IDE:
Installing ESP32 Add-on in Arduino IDE
- In your Arduino IDE, go to File> Preferences.
- Open the Boards Manager. Go to Tools > Board > Boards Manager…
- Search for ESP32 and press install button for the “ESP32 by Espressif Systems“:
- That's it. It should be installed after a few seconds.
Now you have the ESP-32 core libraries instead of the standard libraries. This e.g. does replace the "time" library with a version that offers Time Server connectivity over WLAN (TSN support). I have used this feature to display the current Internet time on my web GUI. If you do not have internet connectivity in your WLAN or want to reduce the traffic for some reason, please remove the lines of the function "StringLocalTime()" and maybe also be the line in the "makepage()" function, which places the time string on the web page.
You will also need to install the "TFT_eSPI" library. Please use the library manager to do so.
This library needs to have access to a font file "MyFont.h" in the sketch directory. I have copied a version into the download folder.
You will also find a file "TFT_eSPI.h" in this folder. This is just for your convenience. You can look into the file and see the changes which need to be made for the display used. The file needs to be placed in the library folder of the "TFT_eSPI" library. It has explanations included what you need to change to declare, e.g. the pins used for display connection.
Before your ESP-32 can connect to the WLAN, you need to change the credentials in the code (SSID and password) to match those of your local network. For the first connection, you should also turn on the serial monitor on your Arduino IDE. You will need to look into the output data. I have placed a line into the code which will output the IP address of your device. This IP must be used in your browser to access the webserver. In most cases, it will not change while you connect to a single specific router (the one with the DHCP server).
When you have compiled and uploaded the sketch, the system should start with a green screen. It may not be responsive during the first seconds, depending on connection problems with a time server.
Please note that the ESP web server is very limited. I can only handle one client per time. So you may have difficulties using more that one browser simultaneously to access the devices web GUI.
Even more "over-engineering"?
Please surprise me with more ideas. How about getting the data into the cloud? Wouldn't that be a fantastic possibility for your boss to control your home office presence? You could add another button to manually acknowledge your presence whenever he is generating a "request to proof presence". And go on being inventive by designing a little servo-driven robot which detects such a request and clicks the mouse button for an acknowledgement to fake your presence while you enjoy your time with a "Science and Fun for Kids" project.