Mobile 12x Smart Home button panel with ePaper display

Mobile 12x smart home button panel with ePaper display. 
A mobile 1-click solution to smart home automation!

Do you want so set your smart home lights, blinds, devices or work status to ”Home Office“-mode,  or “Work Office”-mode with 1 click? 

You even want to set your morning wake-up alarm on your iPhone or iPad controlled by these status settings automatically? Press 1 button and the rest is done automatically for you in the background. I will try to give you some hints how to set this up. 

Add an easy to use 12 button panel to your smart home environment, which will work with all common smart home solutions like Apple HomeKit over HomeBridge, HomeAssistant, OpenHAB, ioBroker, Node-RED and many more solutions that can react on HTTP requests.

You can add to each of the 12 buttons a HTTP url in the integrated web portal as shown below. Each HTTP url calls a function in your smart home environment to control your devices, scenes or whatever you have set behind the link… It is completely up to your imagination what you add behind these 12 buttons…. And there is more to come… =)

Place the panel anywhere you want and have WiFi available. You can add a LiPo battery up to 10000mAh to the used ESP32 board to make it even more mobile for a several days. The use of the battery is optional. You can physically turn it off with a switch on the back and in the web configuration portal too.

To be able to know which action is on which button the integrated ePaper display shows a 3 line information to each of the 12 buttons in the same 4x3 grid orientation. See pictures below. Through the usage of the eInk or ePaper display the device is a super low power usage device. The display does not require any energy when it was set once - in fact it is fully turned off when it is not updated. 

I will give you a complete guide how to setup the panel including wiring, software setup, configuration and in addition I will show you how I setup my Apple HomeKit smart home with the usage of HomeBridge and the used plugins to make this work without the need of programming. This should give you a good idea how to replicate the steps in your setup…

The device looks complicated with all these cables? Yes - at first glance, but I guide you through this and then it should be easy to understand and reproduce this little project. =) 

Notes

• The software is V1.0.0, yes, but it has a lot of solutions included that are used for years now in my other projects, like the WordClock models for example.
• In this first version each of the buttons have 1 function only… In future it might be possible to react on short, long, very long or double presses differently to enhance the function even more. Therefore at the moment I use e.g. 1 button to turn a light on and a 2nd button to turn the same light off… This could be optimized for sure and would lead to more buttons and options…
• An option to use MQTT instead of the HTTP urls is already on my list. 
• The device has already OTA (Over The Air) software updates like my WordClock projects.
• The used ESP32 is a Wemos Lolin32 board which has a JST connector to attach the LiPo battery. Please use this board, because the case is made for it and the software will fit for this board only too.

Integrated web configuration interface

Setup the code for the ESP32 and WiFi setup

• Use the the new script to flash the ESP32 without the need of the Arduino IDE to flash the ESP32. Use option “7” to flash the “12x Smart Home button” code to your ESP32.
• Follow this video to see how it works:

Update the code of a running device

• Updates can be done “Over The Air” / “OTA” with the internal device web portal.
• You will find a section to get the update without the need of a computer with 2 clicks.

Parts needed

• 1x WaveShare 4.2“ ePaper display (Use this one. The case is made to fit to it only!
• 12x Push button Ø12mm 
• 1x Lolin32 ESP32 microcontroller (Use this one. The case is made to fit to it only!)
• 1x USB power supply 5V/2A 
• 1x USB-A to USB-C cable (5V, 3A) (No direct USB-C!) 
• 1x USB-C port (5V, 3A)
• 10x M3x8 screw
• 10x M3x12 screw
• 5x M3 nut 
• 1x Some wires in different colors
• Shrinking tube in different sizes 
• Optional: LiPo battery 2000 mAh to 10000mAh
• 2x 100kΩ resistors 
• 2x JST connector and 1x JST socket 

 Tools needed

• 1x FDM 3D printer and PLA filament
• 1x Wire stripper
• 1x M3 allen key
• 1x side cutters (to cut the cable ties and cables cleaner)
• 2x cable ties to fix the USB cable in the case
• 1x soldering iron set 
• 1x 3rd hand 

Wiring instructions

Wiring and mounting the parts after printing (Step By Step)

First screw in the 12 push buttons to the case.

Try to use a similar orientation. Here I put all red wires to the top. This will help in the next steps.

Attach the ePaper cable to the display and place it into the case.

You may need to bend the display cables a bit to get it into the case. The case has 4 like noses to guide you with the position of the display in the case. Just click it in place. We will fasten it in the next steps.

Final call to flash the ESP32 is now. After the next steps you will not be able to attach an USB cable to it anymore and you don't need to anyway after flashing the board. So please see the above shown information how to flash the ESP32 and do so.

After flashing the ESP32 put it into the ESP32 holder part upside down like shown.

Put the ESP32 clip part on top of it and…

… screw it in place with 6 M3x8 screws. 2 to 4 might be enough here too, but I wanted to go secure here.

Add 4 more M3x8 screws to the corners of the ESP32 holder like shown.

Set the ESP32 holder onto the 4 posts for it in the case and screw it in place.

Now to the fun part of this build -  the wiring… =) First we clean up a bit all these button cables.

Sort the black and red cables. To make working a bit more easy bind all the red ones together like shown.

As shown in the picture bend all black wires of each row to the right and secure the end with a cable tie…

… and cut the black cables to the same length. 

Use a wire stripper to strip each wire to 10-15mm. 15mm might be more easy for the next step to drill each row together…

… and then all 3 rows to 1 together too. Add solder to the 12 black wires and add a longer single one as shown. 

Add a heat shrink tube to secure the connections from shorts. 

Now solder the single black wire to the upper left “GND” pin of the ESP32 as shown. Roughly try to lay the cable down in the case to get some more space for the next steps.

The next few wires require your full attention so take your time to make the display work in the end. =)

Cut off the black connectors, because we need the space they would use for the LiPo battery later.

Strip those wires about 5mm and add some solder to each drilled wire like shown.

Use the above listed table to connect the display lines to each of the named numbers on the ESP32. The connections are all made on the left side of the ESP32. Start with the Busy (purple) wire and then wire for wire to the end of the display wires.

Try to lay them around the case as shown. Double check the connections.

Now take the first 4 of the red button wires. Take a moment to realize that the case is upside down. I have a added the button numbers in the picture for you to understand where button 1 to 4, 5 to 8 and 9 to 12 is…

Solder the red wire of button 1 to pin 12…

… and the red wire of button 2 to 13 and so on up to the 4th button. Check the 4 made connections.

Continue with this procedure for button 5 to 8…

… and button 9 to 12. Double check all connections and try to press a bit on the wires to check your soldering connections physically too. If one of the wires comes loose is now a good time to put it back to its pin now. After closing the case it would take more time to figure this error out later. Press the cables down a bit as shown to make space for the battery and the components in the lid later  have an eye on the screw post between buttons 2-3 and 6-7 to make sure no cables get squished later.

Enough soldering for now… Lets add some hardware to the lid part… 

Add 5 M3 nuts to the lid and bring them in place by pulling them in with an M3x12 screw.

To these nuts the stand part is attached later.

Now add the on/off switch and the USB-C connector to the lid. Carefully press them into their holes.

After they are in the case it should look like this.

Adding a LiPo battery to the device is optional, because you can use the device always connected to the power supply too. But if you want to use the device in its optional mobile way we need to do the next steps.

Now it is up to decide if you want to add a small or a BIG battery to the device. What ever you decide we need to change the JST connector from the battery. They usually come with these tiny connectors that do not fit to the ESP32 connector. 

IMPORTANT WARNING: When you cut the battery wires, always cut them one by one and NEVER together to avoid serious shorts…. These batteries look small but they have a high energy density which you don't want to play with… Always keep the red and black wire away from each other! You have been warned!

To my tests in the last weeks with this device a 2000mAh battery can operate about 1-2 days. So the 10000mAh battery should theoretically put this times 5. I cannot tell this now for sure, because it is still running… Keep in mind that this is depending on many variables like WiFi strength, usage of the device and so on. ;-)

What ever LiPo you want to add there is a 110x60x15mm space in the lid for it to be fastened. The named 10000mAh battery uses 102x60x12mm of this space. So this should be working fine.

Use some cable ties to fix it in place like shown.

As shown cut the red wire and route it to the switch pin. The black wire of the battery stays untouched.

Add the other end of the red battery wire to the other switch pin. With that we can turn off the battery.

The USB-C connector cable is a bit short to connect it to the ESP32 later…

So we use some wire and small shrinking tubes to make it a bit longer. This will help us the get it to the ESP32 without any hustle later.

To be able to measure the remaining battery capacity we need to add a so called “voltage divider” to the ESP32. Unfortunately there are not many ESP32 still out there that have this ability still on their own (like the good old Wemos Lolin D32 did), so we need to create our own. =)

The circuit is super simple: (I will add more details soon)

• Left upper corner: The black wire, left upper 100kΩ resistor pin and the upper pin of the white connector are 1 connection.
• Left lower corner: The red wire, left lower 100kΩ resistor pin and the lower pin of the white connector are 1 connection. 
• The 2 right pins of the 100kΩ resistors and the green wire are all 1 connection too.

Maybe a bit complicated to explain, but more easy to see from below?

After you created this voltage divider add it to the lid with a cable tie and add the battery connector to it.

Turn the switch to OFF to be able to see the first startup later. ;-)

Now up to the 4 last connections in this build. =)

Add the green wire to the pin 35 of the ESP32.

Add the red wire of the USB-C connector to 5V and the black wire to GND as shown.

Here better to see in the close up picture..

Add the battery connector to the ESP32 board too.

With that all connections are done. Well done. =)

Put the lid on the front case part and try not to pinch any cables inside.

Now add the stand part. Secure it in place with 5 M3x12 screws. 

Finally screw the lid to the front part of the case with 5 M3x12 screws.

In case the battery is not charged at all (like mine) keep the charger and USB-A to USB-C cable in reach. Note: A USB-C to USB-C cable will not work to power and charge the ESP32. It has to be a USB-A charger with a USB-A to USB-C cable.

WiFi setup and environment configuration

In case you turn the switch on the back to ON and you see this you did a great job. The display works. =)

To get the until now not connected panel to work in your network like the on the right shown 2nd one we need to continue.

The device will try to find a previous added WiFi connection for some seconds. On the first start this is not possible of course. This is detected…

… and therefore it will present you after some seconds this message on the display telling you that the temporary internal WiFi hotspot is now open to add your usual WiFi credentials. If you already have build one of my other projects, the next steps are familiar to you already. All others have the following pictures or the above linked video as help: 

Open your smartphone, tablet, computer or whatever device you are are using and enter your WiFi settings. 

In the WiFi list you will find the named temporary WiFi hotspot as written in the display. Select it and wait to be connected to it.

You should be forwarded to this page shown above. 
If not, open your browser and open “http://192.168.4.1” manually.

After using the first shown green button fill out the shown page and save the settings.

The device will reboot and try 100x to connect to the named WiFi with the set password. If it fails to connect it will tell you so after some seconds to be able to repeat the previous steps.

When the WiFi connection was successful you will see this screen and the URL you can configure the device with for 5 seconds. Remember the shown IP-address which you will need later.

The strength of the WiFi signal is shown in addition.

After the named 5 seconds you will see this on the first startup. 

Each of the 12 buttons has its own section on the display with up to 3 lines for the buttons name. These show now the default texts we need to change to fit to your needs.

To get something more useful on the screen like shown on the right device we now need to configure it.

Open a browser on your computer, smartphone or table and enter the previously shown URL.

You should see this configuration portal then. Here you can change all previously in the “Integrated web configuration interface” section shown settings, including the texts.

As written earlier each button has a 3 lines long name. Because of the little amount of space on the display the name needs to be word wrapped. This is done with the “/”. Add the short texts you want to have on the display and then use the button “Update Display” to update the display. Such ePaper displays are not meant to be updated every few seconds so try to not use this more than 2-3x per minute to avoid display damage… More on this you can read here.

Below the button names you will find the URLs to connect to your smart home environment to. Feel free to set them to your needs. Because this is different for every single smart home setup, I can just give you some hints how to use these in a super simple way that it will describe below later…

I am using a Raspberry Pi with HomeBridge setup to connect all my different solutions to Apple HomeKit.

So this is the way I will explain here. From here on you will need to find your way how to integrate the device with its HTTP requests to your environment. I can give you just some ideas how it it possible to do, knowing that there can be 10 other ways too to solve this…

In HomeBridge add the plugin “HomeBrigde Webhooks” and configure it.

Add 12 “pushbuttons” and set the name “pushbutton1” to “pushbutton12” and the desired text in HomeKit.

Here shown for pushbutton2  as well. All other settings can be unchanged. Save the config after button 12.

After the restart of the plugins you have these 12 new devices shown here in the folder "WebHooks".

The URLs from the 12 button panel trigger these 12 Webhooks pushbuttons. When pressed on the panel they light up as pressed white shortly as shown in the picture for “Home Office”.

After these 12 virtual pushbuttons were added in HomeBridge they are now part of your existing HomeBridge to Apple HomeKit connection and show up in the HomeKit configuration.

Here we can use these buttons now to have some good use in automations. We will need 12 of them. Each button gets his own automation here. =)

For example I have 4 an additional virtual status switches already in HomeKit (from HomeBridge plugin “Dummy”). These switches are used in my entire smart home automation to control several devices for my statuses “Work”, “HomeOffice”, “Holiday” and “Weekend”. With theses existing statuses I can tell my other automations how I like to use my smart home to set alarms, open and close blinds, control the heating, alarms, or whatever…

As shown in the last 2 pictures for “Home Office” and “Work” ("Arbeit" in German) when the defined pushbutton URL is triggered the statuses are set according to the requested status. So when “Arbeit im Büro” (Work in the office) is triggered by the URL from the button, then these 4 status switches are set…

Automate your ALARMS by such status switches

The below shown Apple shortcut might be the easiest way to set your alarms depending on such status switches. With this shortcut I set up my alarms for the next day fully automatic depending it I need to drive to work, stay in the home office or want to set the alarms later because it is weekend. See the comments in the pictures to see how it works:

Battery charging

To use the optional battery function with shown information about the status of the battery you need to enable the “Use battery function” in the web configuration portal first.

After that you get informations about the battery during a device restart as well as in the web portal too.

Depending on your specific battery you need to set a voltage maximum level to know when the battery really reached 100% of charge and the ESP32 charger will stop the charge. This is easy to see by the red LED on the ESP32. When it turnes off the before shown voltage is the 100% one. For me 4.35V seems to work.

In case the set minimum charge to warn about the almost empty battery was undercut 3x in the last 3 measurements (depending on the set interval) you will get this message displayed on the left device. Then it is time to recharge the device. The buttons still can be used. The display updates with the shown message until the battery is fully charged. Then it switches to the usual display shown on the right device again.

Final words to this project start

I hope you like this new project. I spent weeks on this and several prototype cases to make this work as easy as possible. Any comments to improve this are very welcome. =)
 

Printing instructions

• 0.2 speed profile.
• No supports needed except for the ESP32 holder part from the print bed.
• No brim needed.
• Fuzzy skin paint on option used too to give it a little more texture to the print.

Happy printing =)