{"id":117,"date":"2020-11-19T21:36:20","date_gmt":"2020-11-19T21:36:20","guid":{"rendered":"http:\/\/garett-cook.com\/?p=117"},"modified":"2022-05-19T03:20:50","modified_gmt":"2022-05-19T03:20:50","slug":"smart-garage-dashboard","status":"publish","type":"post","link":"https:\/\/garett-cook.com\/index.php\/2020\/11\/19\/smart-garage-dashboard\/","title":{"rendered":"Smart Garage Dashboard"},"content":{"rendered":"\n
\"\"\/<\/figure>\n\n\n\n

Summary<\/h2>\n\n\n\n

With the number of IOT devices ever increasing, having an easy to use dashboard to both control and visualize the states of IOT devices is an extremely valuable piece to have in any embedded system. <\/p>\n\n\n\n

Application<\/h2>\n\n\n\n

IOT devices are powerful but not intuitive to use for the average consumer. Creating a dashboard allows the average joe to take full advantage of these devices. For example using a dashboard an average joe can control an IOT security system installed in their house and see whether the doors are locked or potentially lock all the doors in the house at curfew so that teenagers who come home late have to sleep in the garage (true story). <\/p>\n\n\n\n

Materials<\/h2>\n\n\n\n

To complete this lab, you will need the following materials:<\/p>\n\n\n\n

\u00b7        A Raspberry Pi with a bootable SD card<\/p>\n\n\n\n

\u00b7        A Raspberry Pi power supply<\/p>\n\n\n\n

\u00b7        A computer with a SD card reader and a MQTT broker installed<\/p>\n\n\n\n

\u00b7        The three Arduino devices made in Lab 4<\/a><\/p>\n\n\n\n

References<\/h2>\n\n\n\n

The following links may be helpful to compelte this tutorial:<\/p>\n\n\n\n

\u00b7        http:\/\/aaronnelson95.com\/IT441Lab4.php<\/a> – Lab 4 Instructions on how to set up the Mosquitto MQTT broker on a computer and how to develop 3 Arduino devices to communicate with MQTT<\/p>\n\n\n\n

\u00b7        https:\/\/www.home-assistant.io\/docs\/installation\/hassbian\/installation\/<\/a> – Steps on how to install Hassbian on a Raspberry Pi (as well as a link to the latest Hassbian image)<\/p>\n\n\n\n

\u00b7        https:\/\/www.juanmtech.com\/install-home-assistant-simple-steps\/<\/a> – Another helpful guide on installing Hassbian. This one includes more information about personally configuring the image and gaining access to it<\/p>\n\n\n\n

\u00b7        https:\/\/www.home-assistant.io\/integrations\/switch.mqtt\/<\/a> – Adding MQTT capabilities to Home Assistant<\/p>\n\n\n\n

\u00b7        https:\/\/www.home-assistant.io\/docs\/configuration\/devices\/<\/a> – Saving MQTT topics as sensors in Home Assistant<\/p>\n\n\n\n

\u00b7        https:\/\/www.home-assistant.io\/integrations\/template\/<\/a> – Working with templates to alter the way MQTT values are written<\/p>\n\n\n\n

Procedures (TAKEN FROM AaronNeilson95.com) <\/h2>\n\n\n\n

1.      Setup the Door Opener, Echo Sensor, and Stoplight devices from Lab 4<\/a>. In addition, you should have a Mosquitto MQTT server running. Verify that these devices work together and that they publish data to the following MQTT topics. This information will be used and read by Home Assistant:<\/p>\n\n\n\n

Topic<\/strong><\/td>Message<\/strong><\/td>Description<\/strong><\/td>Published By<\/strong><\/td>Subscribed By<\/strong><\/td><\/tr>
device\/doorSwitch<\/strong><\/td>Activated<\/td>Device came online<\/td>Door Opener<\/td> <\/td><\/tr>
device\/echoSensor<\/strong><\/td>Activated<\/td>Device came Online<\/td>Echo Sensor<\/td> <\/td><\/tr>
device\/stoplight<\/strong><\/td>Activated<\/td>Device came online<\/td>Stoplight<\/td> <\/td><\/tr>
garage\/doorSwitch<\/strong><\/td>0<\/td>Magnets are disconnected<\/td>Door Opener<\/td>Echo Sensor<\/td><\/tr>
1<\/td>Magnets are connected<\/td><\/tr>
garage\/echoSwitch\/color<\/strong><\/td>g<\/td>Distance read is > 35cm<\/td>Echo Sensor<\/td>Stoplight<\/td><\/tr>
y<\/td>Distance read is 20-35cm<\/td><\/tr>
r<\/td>Distance read is 10-20cm<\/td><\/tr>
b<\/td>Distance read is 0-10cm<\/td><\/tr>
o<\/td>Received \u201c0\u201d from garage\/doorSwitch<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

2.      Install the Hassbian operating system by following the instructions at https:\/\/www.home-assistant.io\/docs\/installation\/hassbian\/installation\/<\/a>.<\/p>\n\n\n\n

a.      Download the latest Hassbian image and flash the image onto an empty SD card.<\/p>\n\n\n\n

b.      Insert the card into a Raspberry Pi and either plug it into a monitor with a keyboard and ethernet cable or configure your Pi\u2019s wireless network by altering a file in the boot partition (as explained in the guide).<\/p>\n\n\n\n

c.       Wait several minutes for the latest version of Home Assistant to be installed. When prompted, you can login to Hassbian with the default username of \u201cpi\u201d and password of \u201craspberry\u201d (or you can SSH right into the Pi with its IP address if you are doing this without extra peripherals). When the installation is finished, you should be able to see some files populated in \u201c\/home\/homeassistant\/.homeassistant\/\u201d.<\/p>\n\n\n\n

d.      Type in \u201c$ sudo raspi-config\u201d to change the default password. You can also add a wifi network here and adjust other settings. If you would like to set multiple wifi networks for your device (I would highly recommend running it off of a hotspot hosted by the same computer your MQTT server is on), you can set those in the \u201c\/etc\/wpa_supplicant\/wpa_supplicant.conf\u201d file.<\/p>\n\n\n\n

e.      Using a device on the network, open a web browser and go to \u201chttp:\/\/<YOUR_PI_IP_ADDRESS>:8123\u201d. If Home Assistant appears, set an initial account up to log in with. If it does not appear, follow the troubleshooting steps in the Home Assistant instruction guide. Once you are in, you should see the main Home Assistant page, where you will add cards to for monitoring MQTT data.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Seeing the Home Assistant page come up is an indication that the installation worked<\/em><\/p>\n\n\n\n

3.      Add the MQTT Integration to Home Assistant to be able to work with your Mosquitto Server. This can either be done through the UI, or by editing the configuration yaml file for Home Assistant. Change this file with the command \u201c$ sudo nano \/home\/homeassistant\/.homeassistant\/configuration.yaml\u201d (we will be editing this file frequently throughout the lab). Simply insert the code below to connect to Mosquitto hosted at your Mosquitto server\u2019s IP:<\/p>\n\n\n\n

# Sets up the MQTT broker, which in this case is my computer’s Mosquitto servermqtt<\/strong>: # The IP of the Mosquitto server  broker<\/strong>: 192.168.137.1 # What the Home Assistant client should check in as  client_id<\/strong>: homeassistant       discovery<\/strong>: true<\/strong> # The MQTT Topic to watch (subscribe to)  discovery_prefix<\/strong>: garage <\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Afterwards, restart home assistant with the command \u201c$ sudo service home-assistant@homeassistant restart\u201d (this will also be done frequently, so memorize this command!). In the browser, under the Configuration tab and then Integrations, you should now see a listing for \u201cMQTT: configuration.yaml\u201d. You can test that this works by going to the Developer Tools tab, selecting MQTT, and then listen to the topic \u201c#\u201d, which should then populate when you use your Arduino devices.<\/p>\n\n\n\n

4.      Now that Home Assistant is connected to the MQTT server, the topics will be setup as different sensors. In Home Assistant, once a topic receives a different value, the sensor will reflect and also contain that value. This is done by editing the configuration.yaml file again and then restarting the Home Assistant service. You will add the following for each topic you wish to watch:<\/p>\n\n\n\n

sensor<\/strong>: # Directly returns the value of garage\/doorSwitch (a 0 or 1)  – platform<\/strong>: mqtt <\/strong>name<\/strong>: “Door Switch MQTT” <\/strong>state_topic<\/strong>: “garage\/doorSwitch”<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

5.      Because the MQTT sends simple values, it may be beneficial to create another sensor that uses a template to assign friendly names to these topics. This will create another sensor device, and will not alter the original MQTT feed. To test the syntax of any template, you can go to the Developer Tools tab of Home Assistant and then select Template. You can examine if your code works like you intend. In addition, under the Developer Tools, you can also select the States tab to view your sensors. As you adjust MQTT values, the state column for the sensor entity will change here. Create an easy to read sensor by following this example:<\/p>\n\n\n\n

sensor<\/strong>: # A template “adjusts” the values from a MQTT sensor to make it more readable   and user friendly # This makes the Door Switch MQTT either return “Opened” or “Closed”  – platform<\/strong>: template <\/strong>sensors<\/strong>:  <\/strong> <\/strong>door_switch<\/strong>:    <\/strong> <\/strong>friendly_name<\/strong>: “Door Switch”    <\/strong> <\/strong>value_template<\/strong>: >-      <\/strong> <\/strong>{% if is_state(‘sensor.door_switch_mqtt’, ‘1’) %}<\/strong>        <\/strong> <\/strong>Opened<\/strong>      <\/strong> <\/strong>{% else %}<\/strong>        <\/strong> <\/strong>Closed<\/strong>      <\/strong> <\/strong>{% endif %}<\/strong><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n

Viewing MQTT Sensor Values in Developer Tools -> States<\/em><\/p>\n\n\n\n

6.      Now that we have sensors reading data from the MQTT broker, we can add cards to the Overview tab of Home Assistant to view this data easily at a glance. In this tab, click the three dots in the top right corner and select the option to configure the UI. In the bottom right, click the + button to add a card. To display the sensor data plainly, select the Sensor card. The Entity will be the name of your easy to read sensor and you can adjust other properties here. Feel free to test out other cards as well, such as the history graph. When you make changes and add cards here, they are recorded to a JSON stored in \/home\/homeassistant\/.homeassistant\/.storage\/lovelace. Alternatively, you can manually insert card data in the code here.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Home Assistant Overview showing Sensor Values, histories, and other cards<\/em><\/p>\n\n\n\n

7.      Experiment with other sensors devices and cards. For example, I used a \u201cswitch\u201d to listen to a MQTT topic. It also provides a button I can push to post a value into that topic as well, acting as a \u201cmanual override\u201d mode for my garage door switch. I also created a sensor with a template to show whether or not my car is parked in the garage based on sensor readings.<\/p>\n\n\n\n

Images of Final Product<\/h2>\n\n\n\n

Our Mosquitto Server is properly setup from Lab 4. It listens to values passed by the Arduino devices<\/em><\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

When our devices are running and the distance from the sensor is relatively close, home assistant shows the current color of the stoplight, if the garage door is opened,<\/em><\/p>\n\n\n\n

and whether or not the car is likely still at home. Also, the garage door override button lights up, showing it is opened and that we can force it to close.<\/em><\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

I can also view a detailed history of my sensors and states in Home Assistant<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

Summary With the number of IOT devices ever increasing, having an easy to use dashboard to both control and visualize the states of IOT devices is an extremely valuable piece to have in any embedded system. Application IOT devices are powerful but not intuitive to use for the average consumer. Creating a dashboard allows the …<\/p>\n

Smart Garage Dashboard<\/span> Read More »<\/a><\/p>\n","protected":false},"author":1,"featured_media":101,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-117","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-internet-of-things"],"_links":{"self":[{"href":"https:\/\/garett-cook.com\/index.php\/wp-json\/wp\/v2\/posts\/117","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/garett-cook.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/garett-cook.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/garett-cook.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/garett-cook.com\/index.php\/wp-json\/wp\/v2\/comments?post=117"}],"version-history":[{"count":1,"href":"https:\/\/garett-cook.com\/index.php\/wp-json\/wp\/v2\/posts\/117\/revisions"}],"predecessor-version":[{"id":118,"href":"https:\/\/garett-cook.com\/index.php\/wp-json\/wp\/v2\/posts\/117\/revisions\/118"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/garett-cook.com\/index.php\/wp-json\/wp\/v2\/media\/101"}],"wp:attachment":[{"href":"https:\/\/garett-cook.com\/index.php\/wp-json\/wp\/v2\/media?parent=117"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/garett-cook.com\/index.php\/wp-json\/wp\/v2\/categories?post=117"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/garett-cook.com\/index.php\/wp-json\/wp\/v2\/tags?post=117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}