Lab 6 User Interface

Lab 6 User Interface

Website: Brandonekins.com

sourcecode: https://github.com/BrandonEkins/Lab6UserInterface

Purpose

The purpose of this lab is to build a friendly user interface for the previously built IOT garage door system. To do this I will implement a web interface, a restfull api and a non-web interface (voice)

Sources

I used the following when working on this lab: – https://programminghistorian.org/en/lessons/creating-apis-with-python-and-flask – https://www.w3schools.com/w3css/w3css_templates.asp – http://www.steves-internet-guide.com/into-mqtt-python-client/ – https://www.digitalocean.com/community/tutorials/how-to-install-the-apache-web-server-on-debian-9 – https://www.taniarascia.com/how-to-connect-to-an-api-with-javascript/ ## Materials

  • The completed garage door opener system as outlined here: https://github.com/BrandonEkins/magnetswitch

  • Rasberry pi or other linux running machine that can interface with the mqtt server and run a webserver

Procedure

  1. Get the previous garage door opener system working according to https://github.com/BrandonEkins/magnetswitch

  2. The following is the layout of this lab: The parts that I will be working on in this writup are the flask API server, the Apache webserver, The PHP script, the Python Subscriber and IFTTT.

  3. Create a simple python mqtt subscriber using this guide. Subscribe to both the car and door channels set up in earlier labs and simply overwrite any contents in the door.txt and car.txt files with new published messages in the corresponding channels.

  4. Create a flask API server according to this guide. For the content of the API simply read in the door.txt and the car.txt file contents that we created earlier

  5. Next follow this to create a basic apache web server. then grab a template from w3schools in order to make the website look a little nicer. Then simply add some javascript to query the api information and update the website. This guide goes into some depth on how to do that.

  6. Finally we need to setup IFTTT to open the garage door. Just follow the guide mentioned earlier to create a python script that publishes to the relay channel. Then create a php script that calls the python script. The means that when anyone visits the php webpage the garage door will open or close. So in the IFTTT App you can create a webhook that is tied to an alexa command. Go ahead and set it up so that it queries your web page when you give a voice command.

Thought Questions

  1. How did you overcome the need for a full-featured interface, as well as the need for an accurate and easy to use interface? The way I overcame with was I created two entirely different interfaces. I created a website for the full features and then used IFTTT to allow for a simple interface

  2. What was the biggest challenge you overcame in this lab? The biggest challenge for me was coming up with the overall architecture of how I wanted everything to work together

  3. Please estimate the total time you spent on this lab and report. lab: 5hrs Report: 2hrs

Posted in IOT

Leave a Reply

Your email address will not be published. Required fields are marked *