Up until now, I built the 'skeleton' of the platform: we have these three nodes in the smart home (Central Node, Sensors Node, User Node), which show the sensors data at different points. However, the platform lacks a nice access point for the residents to interact with the house. Furthermore, the competition module is still to be started! With this post, I will show the improvements in the house GUI as well as the setting up of the central node to start developing a competition system.
The improvements to be included in the Central Node are:
- Touch screen integration and GUI development
- Server set up to develop the competition system. Central Node will provide:
- Database storage service - to create a persistent system
- Web portal/ Web access service - to enable an interface with the competition devices when outside of the home
Touch screen and GUI development
Initial setup: Raspberry Pi 3 - Raspbian SO (Jessie) / SSH Enabled / Mosquitto MQTT Broker installed / MQTT Subsciber client / Console interface
The main GUI of the house is on the Central Node. Since it will make use of the provided touch screen, I introduce a link on how to integrate Raspi and screen as well as a description of the GUI development itself.
Touch screen integration
We will include the touch screen from the kit: '7" Touchscreen Display'. Luckily, this very same elemet14 page offers a very complete description of the product and how to get started 
Raspberry Pi 7” Touchscreen Display
The main steps:
1. In the Raspberry Pi 3, install the matchbox-keyboard (no more need of a keyboard connected via USB)
2. Do the hardware connections (we continue from step 5: attaching the DSI ribbon and then the 5V and GND jumper wires). Then, mount the Raspi to the back of the display.
Here is the final result in my case
GUI Design
Using Python, and the GTK library
Full code can be found at Github
This was an interesting project, as it is the first time I use Python to design a graphical interface. In the end, I went for the most basic way, using GTK directly. However, I have the impression there might be higher level libraries which will provide a nice final look (still, it was an exeprience). As far as this project goes, we will have a functional graphical design to display our significant data.
I started from the previous Python scripts, which already implemented an MQTT_Subscriber and a console interface. In the end, I work with three files:
- smart_home.py - main file
- mqtt_sub.py - the MQTT client to be connected to the broker. It receives the information for the smart house data
- main_gui.py - defines the graphical interface, using GTK library, and functions to update its labels
To generate a temperature gauge, there is the additional file gauge.py
NOTE - An extra file will be required to get the competition house information.
Initial approach for the temperature gauges - Plotly (FAILED)
Plotly is a powerful online tool to generate online graphs and dashboards. It gives enough freedom when creating this charts, and the additional option of exporting to a local directory. I decided to use it to generate a temperature graph which could be updated both in the central node and for a more remote solution. However, I realized this will not work for my case (see the end of this section for a dramatic outcome).
Using plotly
I created a new account in their webpage (as a free user) and started playing. Each account comes with a username and a key, which has to be included in the code using the platform or the environment.
INSTALLING PLOTTING IN CENTRAL NODE:
There are two main steps while installing plotly: installation of python library and authentication. The corresponding commands are:
To install the library:
pip install plotly
To authenticate, we have to start python, with the console command
python
There, the authentication process only requires two commands:
import plotly plotly.tools.set_credentials_file(username='DemoAccount', api_key='lr1c37zw81')
(Another option is to include this authentication process in the python files using plotly)
Now, our python scripts are ready to use Plotly!
GENERATING TEMPERATURE GAUGE
I included the gauge.py file in the project, which can generate different temp graph with small modifications. The code defines a chart, with different temperature regions (and some missplacement in the numbers :3, something to fix if using plotly). Depending on the temperature, we should see the pointer signaling the right section. Some examples:
The limits of plotly free account
After the setup and development, I could generate an image with any new temperature sample that emulated the effect of thermometer indicator. Nevertheless, the program will crash after a certain time without any chances of recovery. It is a bit embarrassing, but it took me a long time to realize why:
Free accounts have a limit of requests (kind of obvious). 30 request per hour and a maximum of 50 requests per day. I want to refresh the GUI in a regular basis, and, even if I can regulate and minimize the number of request, I would prefer finding another solution. For now, though, I will keep the static temperature image in the GUI (until I design a better solution!).
A single interface for the smart house and competition system
This interface has three frames:
1. CONNECTION STATUS
Shows whether we are connected to the broker and which local IP we are using
If connection was not established, we can enter and try a different local IP
2. SMART HOUSE
Displays:
- Temperature as a gauge
- Pressure and altitude values in real time
- Door state and alarm
There is a Log button, which will be used to retrieve past data
3. COMPETITION SYSTEM
Shows a table with the residents and state of the competition
Results are ordered, with the winning contestants on top
There is a History button, to be used to show past months results.
(*) We have only mock values so far. The real information will be read from our database once the competition system is implemented.
Server setup
The next step for our central node is to host a server. After the setup, it will provide:
- Remote and local storage, thanks to the MySQL database. The database itself could be built without the webserver, but we want it integrated and accessible form outside too (the competition system will be sending its information mainly outside of the house).
- Remote access to the node, thanks to a web interface
Next sections describe how to install each of the new capabilities
Installing and starting a database in the Raspberry Pi 3: MySQL
For the MySQL database, I will be installing the corresponding libraries (mysql as well as the python related one) it in the Raspberry Pi 3 with the following command:
sudo apt-get install mysql-server python-mysqldb
(*) If during the installation, you are not asked to set the root password you will have to set it after.
- Stop the service
service mysql stop
- Start with disabled grant-table, so that you don't need to enter root password
sudo mysqld_safe --skip-grant-tables
- Access as a root user
sudo mysql --user=root mysql
- Change root password
update user set Password=PASSWORD('new-password') where user='root';5. (Do not forget to stop and restart the server as normal!)
Create a database for the project and also, a user to manage the input data (but not as many privileges as the root)
Again, my main functions will be developed in Python, as scripts. Therefore, I will be using Python commands to:
1. Create table
2. Access table
3. Delete rows/tables
Installing a web server in the Raspberry Pi 3: Apache and PHP5
FULL TUTORIAL: http://readwrite.com/2014/06/27/raspberry-pi-web-server-website-hosting/
The command to install the packages is:
sudo apt-get install apache2 php5 libapache2-mod-php5
Afterwards, we will have in the main node:
- Apache2 - the server.
- PHP5 - to develop the web portal which communicates with the database.
- A bridge between the two of them
A usefull command :Activate the service
sudo service apache2 restart
At this point, we can access our web portal using the local IP for the Central node. In the end, we want the web server to be accessible from the outside (it will manage the remote functions). There are two steps needed still:
- Port forwarding to our Raspberry Pi 3- the router will redirect the traffic that comes through an specific port to out Central Node. This process depends on the router itself (lucky enough, there are usually plenty of Google entries on how to), but usually there is a "Port Forwarding" menu when accessing the advanced options of the router. Two things we need to keep in mind:
- External IP address & Start/End Port - which represents the IP address and Port to be access from the outside(START PORT). I leave the IP address to 0.0.0.0 and select an start port (will use it again when sending data to the central node from the competition mobile app) which is the same as the end port
- Internal IP address & Start/End Port - This Internal IP address should be the local IP of the central node and the start/end port that of the service.
We will be using this EXTERNAL IP PORT from the mobile application managing the "Competition application" in order to send data back home.
2. Obtaining a domain - instead of using the IP address, the web will be accessible using DNS. I obtain the domain from Absolutely Free Dynamic DNS / DDNS (the same page recognizes the public IP of your house network). No more IP memorizing for a while 
For an initial web portal we will just forward the port 80 (both, for the external IP and the internal IP). And here it comes!
http://competitionvault.wow64.net/
(Yes, yes... it is still a mock portal)
Services useful commands
Regarding MySQL and Apache servers, here are some useful commands:
RESTART THE SERVICE
sudo service mysql restart
START THE SERVICE
sudo service mysql start
STOPPING THE SERVICE
sudo service mysql stop
Developing a web portal
1. Design and content: HTML & CSS
The web will be located in the folder /var/www . The input point is the index.html file, so let's start changing things a bit.
In order to have a nicely designed looked, there are several free templates available. I chose mine from Free Website Templates. With some modifications in the CSS files for a different look as well as in the HTML to include the content, I will make some changes to include the Competition Application:
At this point, I will just display the information related tot he Competition System. It will be a nice feature to also be able to read the information sent from the Sensors Node also in this same web. However, I would include it only with a minimum of security (e.g. users login) so that it is not available to just anybody and everybody.
2. Adding functionalities: PHP5 and mySQL
For the competition system to work, our central node will be receiving each roommate status through the Internet. This information will be then stored on the database so that the main program (the previously developed Python GUI) can access it.
This will be done in PHP:
- Receive and decode the user's information to obtain the total distance (from an HTTP POST)
- Insert this data in the database (once the local user has open the database, using SQL commands)
Conclusion
With this post, the setting up of our central node is completed!!
- Smart house GUI is ready to show the house and competition state
- A mySQL server has been installed, allowing for some future persistence
- A web server is also installed,opening a bridge for the competition system to enter the house
- We keep in mind the domain of our Competition smart house (if accessed with a browser, it will show a simple web hosted in the central node) - http://competitionvault.wow64.net/
- And the port for our competition service
There is still much development to do on top of that!!
Top Comments