Introduction: IoT Level 1 Template Multi-Room Security System
This instructable and project was done in April 2018 by Sardor Taylakov and Jacob von der Lippe at Denison University as a project assigned in CS 402 - Fog Computing.
The main purpose of our project was to develop a security system using two or more Arduino sensors. to accomplish this, we developed a software to allow a user (for example a security officer) to interact with a web interface through their browser in order to prime one or more Arduino sensors connected to Raspberry Pi's. Then, whenever a sensor is activated (for example, a burglar makes a noise in one of the rooms being monitored), the user will be notified by an alarm sound from their computer and a notification on their web interface of the room currently being accessed. The user can then deal with the intruder and then reset the system easily from that same web interface.
To test the functionality of our software we practiced on a single Raspberry Pi connected to two Arduino sensors: Big Sound Sensor, and Water Detection Sensor. The following includes some background information on these sensors as well as how we used them to fulfill the purposes of our project.
Step 1: Identifying Sensors
The images provided and the PDF's below give accurate and thorough information about the Arduino sensors we used in our project. For more information, as well as other projects these sensors are used in, please visit these links:
Step 2: Materials Needed
To complete this project you will need:
Raspberry Pi 3 Model B V1.2 - Arduino Sensors, 2x3 female to female wires - RPI power cable - USB outlet brick - HDMI cable - Computer monitor with USB and HDMI outlets - USB keyboard
It is also important for the user to have access to the internet by the means of some Internet browser. We recommend using Google Chrome, however we have confirmed our web interface to work on Microsoft Edge.
Step 3: Constructing the Device
Now we can build the hardware component of the project. First step is to connect the RPI to the Sensors using the fem2fem wires. Use the photos above to get proper alignments of pins. We used input pin 21 for the sound sensor and input pin 20 for the water sensor. Also note that we only used the Digital output of the sound sensor.
Step 4: Constructing the System
Next, you will need to connect the RPI to the keyboard. Use the USB input slots on the side of the RPI to connect your keyboard. You can do the same for the HDMI and Power inputs as well. Photos of all of these are also provided.
Step 5: Powering Up
Make sure your desktop display is powered and turned on, then power up your RPI by reconnecting the power. The screen should display a rainbow then begin booting the RPI. Once it is complete you will be prompted to log in (You should be at the first photo at this point.) Go ahead and log into your RPI. If this is your first time using the RPI, you can use the following tutorial to get started and connected to the network:
https://raspberrypihq.com/how-to-connect-your-rasp...
Once you're logged in to your RPI, check to see if you have an Internet connection by running the following command:
ifconfig
Make sure that you are receiving more than 0 packets and more than 0 bytes, this will tell you if you are connected to the Internet or not. If you are unsure, run "ifconfig" a few times to check.
Take note of you inet IP address. This is crucial in the following steps.
In the example photos we give above, our IP value was 140.141.207.134.
Step 6: Software Environment
This is the most important section of this tutorial as it explains the software components for our system. If you wish to replicate our project, make sure that all of your files and directories are named, located and stored exactly as we describe them:
First, from your home directory, create a new directory called final.
Inside "final" create another directory called appfolder.
Inside "appfolder" create two more directories named static and templates.
Point your terminal at "final" and you should be ready to begin creating code.
Step 7: Iotapp.py
The first file you should create is iotapp.py and place it into "final" along with "appfolder."
We have given the code for iotapp.py as well as all other necessary files in the following steps.
iotapp.py is used only as a placeholder for the rest of your application and therefore only includes one line:
from appfolder import appFlask
Make sure you have Flask installed on your device using pip install Flask if needed.
Step 8: Init.py
Navigate into "appfolder" and create another file named __init__.py.
Remember that you must name all files and directories exactly as we do.
__init__.py is also very simple and should only include four lines of code. This is the file where your flask application will be initiated. Once this is run, all of the main commands and "meat" of the software will be handled by routes.py and forms.py.
Attachments
Step 9: Forms.py
Also inside "appfolder" create the file forms.py.
forms.py is used for creating and validating class
information to be passed between routes.py and the html templates. We use the library wtforms and wtforms.validators to create our user interface functions such as,
- String inputs
- Password Fields
- On/off buttons
- Submit buttons
More information on this library can be found at:
https://wtforms.readthedocs.io/en/stable/
Each of these fields is given some text to be printed next to the html rendered input as well as some location to store the user’s input if such a thing is needed. From our forms.py you can see we use two different classes:
- LoginForm
- Settings
The LoginForm is used only by the index.html. In this Form we allow for a StringField for the user to input their username, a PasswordField to hold a user’s input password, and a BooleanField for ‘remember me’ button. The username function will allow the user to input a username and have it be checked against our database of acceptable usernames and the same will be done for passwords as well. Now we only allow one user (admin, 12345678) although more can be added if needed.
The Settings form is used only by the dashboard.html and only contains one field type: BooleanField. This is because the dashboard only needs to take input on whether the system should be set to on or off.
Step 10: Routes.py
Lastly inside appfolder, create routes.py.
routes.py is by far the most important as well as code heavy file in the system. If you would like a description of how routes.py works, there is a PDF description below for you to download as well as the routes.py code itself.
Attachments
Step 11: Sounds
In the "static" folder, add the alarm.mp3 given below. This is what will allow your system to produce a sound when an intruder is detected.
Step 12: HTML Templates
Inside the folder "templates" create two new files named dashboard.html and index.html. These will be the sources for your webpage interface. For some reason, instructables does not like .html files so we cannot supply the code for you in a downloadable fashion. However, the images above should give you everything you need to recreate these files.
index.html:
At the very beginning of our index.html file, we extend a
base bootstrap template with all necessary links already included and import bootstrap wtf forms as wtf so that we can use the forms in the index page. Then we specify blocks for title and content. This is very handy because you do not need to use html tags for head, body, title and it is already taken care of by bootstrap.
In the content block, we build the bootstrap grid and use bootstrap components that can be found at https://getbootstrap.com/. We have a navigation bar at the top of our web page. In the middle, we have a form that uses HTTP POST method. We use earlier imported wtf object to render form fields to the form.
dashboard.html:
At the top of our dashboard.html file, we extend a base bootstrap template with
all necessary links already included and import bootstrap wtf forms as wtf so that we can use the forms in the dashboard page. Then we specify blocks for title and content. This is very handy because you do not need to use html tags for head, body, title and it is already taken care of by bootstrap.
In the content block, we build the bootstrap grid and use bootstrap components that can be found at https://getbootstrap.com/. We create a side navigation bar where we locate the brand name and links for the user to locate the same page or log out. Lower we place the form that is used to turn the system on and off. The form uses HTTP POST method to control the state of the system. We use earlier imported wtf object to render form field called power as a checkbox to the form.
The right side of the dashboard page displays the current state of the system indicating whether it is on or off. The grid below shows 9 rooms we have for this template with each sensor being set up in a different room. We display rooms in a bootstrap well inside the grid. However, instead of creating a separate well for each room, we take advantage of embedding python code in html to use a for loop for generating wells for rooms. In room 1 and 5 we check the value of signals that were sent from our sensor and if these signals do contain values, we display the sign ‘Burglar!’ in a corresponding room with an alarm sound going off.
Step 13: Starting Your System
Now you are ready to begin using the security system!!!
First thing you will need to do is navigate back to the folder "final." From there run the following command:
export FLASK_APP=iotapp.py
This will create the environment for your flask application and allow us to run the next command:
flask run --host 0.0.0.0
Upon completing these two commands you should see the terminal feed shown in the picture above.
Step 14: Sign In
Your server should now be running and waiting for a user to make a request. To issue a request, while using a different computer, aim your web browser at
[inet IP address]:5000
Our example url was 140.141.207.134:5000. If you have forgotten your inet IP address or did not write it down when we asked you to, use ctrl+z to close the server and run "ifconfig" again to check. Return to the previous step to continue.
Once you have pointed your browser at this address you should be redirected to [inet IP address]:5000/index. From here you can enter the username and password you picked in routes.py. Select "remember me" if you'd like. When your user connects, you should see a GET request appear in your RPI terminal.
Click Sign in and you will be redirected to the dashboard. Your terminal should print that a GET and POST request was made.
Step 15: Using the Dashboard
You should now be on the dashboard. Note the 3x3 grid of room numbers on the right. This is meant to represent the 9 different rooms you can be monitoring. Because this is a template project, it is possible to alter the number of rooms without inhibiting the overall process of the software.
There are also two user input buttons (on/off and submit). Pressing on/off means you are ready to start the system. On Pressing Submit, the sensors will begin listening for sounds or vibrations. Also, upon submitting, your terminal should show that another GET and POST request was made.
Step 16: Protect the Things That Matter Most to You <3
Your system should now be active, and your sensors are now checking for intruders. If you make loud noise, the sound sensor should activate, and if the water sensor contacts water, it will also activate. Go ahead and try this out by making a loud noise.
Your browser should respond by playing a siren noise and printing the word "Burgler" to Room 1 on the dashboard.
CONGRATULATIONS! Your system is functioning properly.
You can test the water detection system for Room 5 as well by pressing Submit to reset the system and checking on/off and pressing Submit again. Now both sensors are active again and listening for information.
