WunderVision PIOT (Phase 3)
If you have been following along, a while back I demoed the ability to take apart one of those 3 outlet remote controls and rig it up in this very convoluted way to control the switches with an Arduino.
This is a demo of the Phase 3 outcome. Read on to learn about the road to get to this point!
Phase 1) Show that it is possible even if it isn't the best solution.
The original weekend hack used an Arduino to send the pulses to the different button inputs on the remote board and the Arduino was connected to an ESP8266 which listened for a UDP packet. I had my old Laptop setup as a webserver running Apache and listening for a POST from an IFTTT command. Once the Post was received, the laptop executed a little C# executable that fired off a UDP command to the Arduino. I set up IFTTT commands to send specific POST messages depending on what was said to Google Home. It required 6 different commands, plus 2 controlling the Wemo.
It was very messy, but it worked. I pulled together several bits of technology and code and learned a lot along the way which what this is all about :)
Phase 2) Refinement
I eliminated that whole Arduino/ESP8266/Laptop/Apache interface and replaced it with just a Raspberry Pi 3. I wanted to do make it a web app so that it was easily accessible from any device. It worked. It didn't look pretty. The buttons didn't scale. I was using the primitive built in HTTP library in python. But it worked, and it simplified things a lot. I still even had it respond to POSTs from the IFTTT commands. This was closer to my end goal. But I wanted to productize it. Make it something that I can plug in and it would just work. Plus the IFTTT setup made it a little cumbersome to change what the commands could be.
Phase 3) Make it a product
And finally we are here. The "end" product.
I bought a Raspberry Pi Zero W specifically for this project.
I soldered the switch panel to a header row to make that connection better. I made a little container box for the pi and the switch board. So that it looks nice sitting on the bar under the Google Home.
Over the course of the last few months I delved into web technologies a little more and learned a lot about specifically:
HTML
Javascript
Bootstrap
NodeJS
WebSockets
SocketIO
Flask
HTTPs
Things I didn't know much about back in 2016 during Phase 1. I applied all of those new learned skills into this end product.
The webpage itself uses Bootstrap for the layout, SocketIO for realtime updates of the switches
I went with a Flask server on the Pi because it was the simplest to set up and understand. I wanted to use the standard Python GPIO library rather than try to get a javscript version going on a NodeJS.
This piece of code returns the main switch panel.
I have the names of the switches defined in a map and a different page that allows the user to change the names of the switches without have to muck about with the code. (I have some grander plans for that, but for now it is very basic) So what this is doing is setting those template variables to the values in the map. Then when flask goes to render the page, it replaces the template variables with those.
This is the piece of template HTML. {{ switch_1 }} is an example of the template variable.
Flask also has a SocketIO implementation which made it really simple to get going with communicating with the client side javascript SocketIO
Here is the basic user connected signal
And here is the handler for the switch states. the PIOT library is a separate Python file that I do all of the GPIO handling in. It was just a choice to do webstuff in the main app, and the gpio stuff in an imported library.
Definitely can still be some refinement in there. But the important part is a I have a framework in place. I can make updates over time.
The Socket IO piece is what makes the page update dynamically. If someone switches on or off a light. The server handles that request and does a socketio.emit to update everyone else about the event that took place. That is why in the video, when I asked google to do different things in the light, the page updated in real time. There is a client side SocketIO javascript piece that is running that handles the updates to the webpage. Basically it swaps out the On/Off image depending on the state received.
My flask server is actually serving 2 different things. I have a local non encrypted HTTP web page, for use when on the local wifi. This is what serves up the switch panel.
And I opened up a port on the router to let out a HTTPS page that the IFTTT WebRequest talks to. I figured I'd want some encryption in there just so if someone was snooping around they couldn't easily see the payload required to activate/deactivate things.
I consolidated all of the IFTTT commands (which were 8) down to 2 using the variable input option. The commands being "Turn on $" or "Turn off $"
The $ part is sent to the server which it then processes and takes action.
I set up the server as to run as a service on the PI, so it is unplugged rebooted, the server will come right back up.
First create a file called <Something>.service with the service definition like above and copy it to /etc/systemd/system/ (might have to sudo)
Then do:
sudo systemctl daemon-reload
sudo systemctl start <Something>.service (To start the service)
sudo systemctl | grep <Something>.service (To check that the service is running fine)
sudo systemctl enable <Something>.service (To make it start on boot)
Et Voila! You now have a Web Server Service!
During this process I also learned a little bit about UPNP in order to directly control my Wemo outlet rather than rely on the IFTTT service to trigger it. This makes it way more responsive. The workings of that is for a another post. This already has a lot of content. More to come!
Commentaires