Complete Home Automation Control (One Pi to Rule Them All!)

I wanted a single interface to monitor and control all the IoT devices in my house. There are many third party apps available to do this but most are expensive or have to be downloaded to your phone. I tend to be a little skeptical of third party apps so I decided to build something myself. Right now it just monitors temperature and switches off and on a few lights, but it can easily be expanded to monitor house temperature, control a thermostat and monitor security sensors on windows and doors and possibly even a camera feed.

As this is a Raspberry Pi instructable I will focus on the Raspberry Pi part of this project. For activating the relays and getting the temperature I use the ESP01 and ESP8266.

Supplies

Raspberry Pi and a few of your favorite IoT devices.

Install an OS

I recently used the Raspberry Pi imager and it works great.

https://www.raspberrypi.com/software/

Setup a Static IP

This is a pretty clear document on setting up a static ip on the Pi:

https://www.makeuseof.com/raspberry-pi-set-static-ip/

Install Server Software and PHP

I had used Apache for many years and decided to use nginx just to try it out and I really like it. The following tutorial shows all steps for installing the web server and php:

https://www.electromaker.io/tutorial/blog/how-to-install-nginx-on-the-raspberry-pi-raspberry-pi-nginx-web-server

Port Forwarding

Port Forwarding is something that can be simple or painful depending on your router. It seems to have grown in popularity because it is necessary for many games. But we are setting up a server.

This seems to be a pretty comprehensive guide:

https://www.privacyaffairs.com/port-forwarding/

Here is another one that also covers static IP (but for windows):

https://www.lifewire.com/how-to-port-forward-4163829

Edit the Index.php File (the Fun Part!)

In step 4 the index.php file was referenced. That is really where the action takes place. What is so much fun about editing the file is primarily, if you make a syntax error, you will get a blank page. No warnings, no messages, just a blank page.

The index.php file is located in the directory /var/www/html .

It may become cumbersome to edit the file using nano or vim so I like to work on the file in a text editor and save it into a document directory then copy it into the /var/www/html directory.

This is a basic HTML starting point for the index.php file. I suggest starting with it and testing it to verify your first edit of the file works. Two things in the file to note is the title, which will show up on the browsers tab, and the <h1> tag since it will be the only information actually displayed on the page.

<!DOCTYPE html>

<html>

<head>

<title>Home Temperature</title>

<style>

body {

width: 35em;

margin: 0 auto;

font-family: Tahoma, Verdana, Arial, sans-serif;

}

</style>

</head>

<body>

<h1>Home Temperature</h1>

</body>

</html>

Information on using HTML can be found at:

https://www.w3schools.com/html/default.asp

Information on using PHP can be found at:

https://www.w3schools.com/php/php_syntax.asp

Just below the <h1>Home Temperature</h1> tag is where we will begin the action as that is the body of the document.

Any commands or dynamic content will be inside of a <?php … ?> tag. (Please see photos.)

The $ is used to create a variable to store the results.

The “curl” command calls the web page and returns its contents. You can test this by running the curl command straight from the command line. I would advice adding one device at a time to the php file and watch your syntax. The single quotes (‘) enclose the html commands and each line is terminated by a semicolon (;).

The code in the screenshot shows the php for the button commands and the html. This is only the buttons used for the relay. Each set of ON/OFF buttons require this configuration. All of the if statements can be included in the same php tag and then the html can all be included in the form tag. Notice the curl commands are used to send information across the header to the device. This will not show up on the main control page information.

Styles, such as size and color, can be added to make the buttons look nice. I am sure there is a lot more functionality that I have not explored that can make the page look much nicer and even add more functionality. I am not sure if JavaScript can be used but it is highly probable. (I have never been a JavaScript fan...)

Other Bits and Parts

I haven’t gotten around to exploring other devices like the ESP32 Camera. There may be an easy way to stream video using this. I mentioned JavaScript because a person could easily control the house thermostat with an ESP8266 or ESP32 and dynamic temperature controls would be interesting. Many other sensors could be added for homw security like window and door switches. I've seen a device to check if the garage door is close and am thinking of adding one of those to the page. (Even a button to close it would be easy enough....) You can see that there are many possibilities and probably man I cannot even begin to imagin. Have fun...