For my final project in the first year MCT at howest we had to submit an idea. After some searching I came across a Smart Extension Box with an ESP32 Module. I thought this was a nice idea. I adapted this idea to my own taste.

There will be several sensors in the smart extension box, which will make it smart. The multiple socket will consist of 8 sockets. You can switch these on and off separately using push buttons. There will be a temperature sensor and an air quality sensor in the smart socket so you can see what the temperature or air quality is in the room where the smart socket will be placed. There is a power sensor that measures the total consumption of the multiple socket. In the multiple socket there will be a server on which the backend is run. This will also do the data polling of the sensors. Via a responsive site you can see which sockets are on at that moment. You can also see in a graph how much the plug block consumes in total and through another graph you can see the temperature progression of the room. The plug block will work as follows. You can control the different sockets both via the site and via push buttons. These buttons will also light up to show whether a particular socket is on or off. The socket outlets are controlled via a relay module. This circuit will be fused.

You can find everything on my github.

Step 1: Supplies

In this step, I will explain which components I used. This list can be found at this link.

Raspberry Pi 4 B – 2 GB:

A Raspberry Pi is a small computer, it is slightly bigger than a credit card. The Rpi 4 comes in different models 1GB - 2GB - 4GB - 8GB. I myself have the 2GB. You can use the Rpi for different things like: Home server, Mini PC, Web server, database server, .....

In my project I will use the Rpi as a Webserver, database server and it will also log data from the temperature sensor and the air quality sensor.

MeanWell power supply 5V 15W:

This is the power supply I use to power the Rpi. This power supply is 15W because the Rpi requires 3A so 5V * 3A is 15W. This power supply is very compact so it can easily fit in my case.

Wemos Mega:

The name says it all: this is an Arduino mega but it has a built-in ESP8266 module. Now I had this one lying around and I used it but you can just as well use a normal Arduino mega because I do not use the ESP8266 module. The price of the Wemos Arduino is lower though.

I use the Wemos Mega to control my relays and LEDs and to read the push buttons. I also read in the power consumption with the Wemos Mega via an analogue port.

AC712 – 20 A (Current Sensor):

The AC712 is a hall effect sensor with which we can measure the current of both AC and DC voltage. The AC712 exists in different versions: ACS712 - 05A, ACS712 - 20A, ACS712 - 30A. This sensor has three connections: ground, VCC, OUT. The out gives a variable voltage between 0 and 5V. It is linear with the current.

I use the current sensor to find out the power consumption of the Smart Extension Box.

Automatic circuit breaker – 10A – 250VAC:

The automatic fuse is a safety device for the relays. These relays can handle a maximum of 10A on 230V (Belgium), which is why I used this safety.

Waterproof DS18B20 digital temperature sensor:

The DS18B20 is a digital temperature sensor that uses the one-wire protocol. It is very easy to read and is available in different formats.

I use this sensor to measure the temperature of the room.

Led buttons:

In my project, I use 8 push buttons to be able to switch the 8 outlets separately in case the internet is down, for example.

These are 8 push buttons that contain a blue LED and they are 16mm in size. You can choose the colour yourself.

8 Channel Relay Module:

With a relay, you can control a large voltage/current with a small voltage/current. For example: You can control with an arduino, a large AC motor. Now, the relays on my Relay Module are only designed to let through a maximum of 10A.

With this, I can switch the sockets on and off.

I2C LCD Display:

With an I2C LCD screen you can show text on an LCD display. You have them in different sizes. Personally I have a 16 x 2. This fits most data. You also have a 20 x 4 but this is not needed in this project.

I use the LCD screen to show the IP address to know which IP address to surf to in order to see the website.

Niko Socket:

These are 8 sockets that I have used.

I chose Niko sockets because I have worked with them before.

Grove Air Quality Sensor:

With this sensor you can know the air quality.
I measure this air quality sensor with an MCP3008.

USB-C power cable with free ends:

This is a USB-C cable with a VCC and GROUND connection so that you can easily connect it to the power supply.

Testprint 160 x 100 mm:

I have soldered as much as possible on this.

Ic – base 16 pins:

I use this to solder the mcp3008 on the test board.

Print Connector (2-polig):

These are screw terminals that you can solder on a test PCB. I have used 10 of them. It is always handy to order more.

Print Connector (3-polig):

These are screw terminals that you can solder on a test PCB. I have used 11 of them. It is always handy to order more.

Self-tapping screws 2.2 x 6.5mm:

I use this to secure the various components in the housing

Plywood 244x122 cm 3,6mm:

I use this for the case

Pinewood planed 18x18 mm 210cm:

I bought 4 bars and this was enough for me. Of course you can make the case as compact as you like

Step 2: Electrical Schematics

I drew the electrical diagram and the breadboard diagram with the help of Fritzing. Fritzing is an application you can download on your computer. With fritzing you can draw different electrical schematics like wire schematics, breadboard schematics but also PCB schematics. The nice thing about fritzing is that you can make your own components but you can also download libraries.

Download fritzing: http://fritzing.org/

When you connect the electric + electronic components please make sure that everything is connected correctly. I gave the cables different colours.

Red = 5V or 3.3V Black = Ground

Step 3: 3D Designing

I based my case on the picture above. In the middle is a rectangle for an LCD display. Below that is a 10A fuse to fuse the sockets. The temperature sensor will be placed against the fuse. The round holes will hold the 8 pushbuttons. The two large rectangles contain a flush-mounting box for 4 sockets. These flush-mounting boxes will each contain 4 sockets. On the left-hand side, a round hole is made for the power cable.

Step 4: Setup Raspberry Pi

In this step, I will explain how to configure your Raspberry Pi.

Installing Raspberry Pi OS:

Download Raspberry Pi OS: https://www.raspberrypi.org/software/operating-sys... .

I have downloaded the following Raspberry Pi OS: "Raspberry Pi OS with desktop and recommended software". Once this is downloaded you can unzip this zip file with Winzip or another program. Then I installed the Raspberry Pi OS Image on a SD card. I did this by using Win32DiskImager.

When this process is done you can open the file 'cmdline.txt' with your favourite text editor. At the end of the file add "ip=169.254.10.1". Keep in mind that everything has to be on one line and that there can't be any spaces at the '=' sign. After you have done this you can save the file and close it. Next, create a new text file called 'ssh' on the SD card. This will normally be a text file so you have to delete the '.txt'.

SSH Connection:

Here I will explain how to establish communication with my Raspberry Pi. The ssh connection can be made with different programs like PuTTY, CMD,.....
Personally, I will use PuTTY. Download PuTTY: https://www.putty.org .

When you have downloaded PuTTY, open PuTTY. At connection type, tick SSH. Then enter the ip address 169.254.10.1 in the hostname. Before you click on open on the right you need to connect an ethernet cable between your Rpi and your computer. When you have done this click on open. You will be asked for a username. Enter "Pi". Then you'll be asked to enter a password. Enter "Raspberry".

Raspi-config:

Before we can start coding the project and installing certain things.
In the CMD enter:

 sudo raspi-config

To rebuild the project we need to turn on some interfaces You can do this by clicking on interface options. Then you turn on the following interfaces:

SPI
I2C
Serial Port
1-Wire

Add Wifi Network:

First you have to be logged in as root, this can be done by executing the following command:

sudo -i

When you are logged in as root add the following command:

wpa_passphrase "Network_name" "Network_password" >> /etc/wpa_supplicant/wpa_supplicant.conf

After you have done this, you can remove the password by running the following command

nano /etc/wpa_supplicant/wpa_supplicant.conf

You can then remove the password.

After these steps have been completed run the following command:

wpa_cli

Then select the interface:

Interface wlan0

Then reload the file

reconfigure

When you have done this you can always check if you have wifi by executing the following command:

Ip a

Installing apache:

Apache is the web server I use to run the website.
You can install Apache with the following command:

sudo apt install apache2 -y

Installing MariaDB:

MariaDB is the database server I use. You can install MariaDB with the following command:

sudo apt install mariadb-server mariadb-client -y

Installing Python:

My backend will be written in Python so I will need to download python.
You can install Python using the following commands:

sudo apt update<br>

sudo apt install python3 idle3

Installing Python Packages:

After python has been downloaded, you need to download several packages:

his can be done with the following command:

pip3 install "PackageName"

Below you find a list of the different packages I used in my project:

flask-cors
flask-socketio
mysql-connector-python
gevent
gevent-websocket

Connecting MySQL to MariaDB:

To make a communication between MySQL and MariaDB we need MySQLWorkbench. When MySQLWorkbench is started create a new connection.
The connection method is "Standard TCP/IP over SSH". If something is not clear you can always find more information on this site. When this is done you can reboot the Raspberry Pi by executing the following command:

sudo reboot now

Step 5: Database Design

This plug-in block has a lot of information that needs to be stored. Firstly, the data of the 3 sensors is retrieved approximately every 15 seconds and stored in the Database. The status of the actuators is also logged in the history. Then, actions such as Temperature measured, Socket On, Socket Off, .... are added to this history.

You can find my database in my github repository.

Step 6: Backend

My backend is written in Python.

To be able to use the code I used Visual Studio Code. To be able to do this, there must be a connection between the Rpi and your computer.

Setting Up Visual Studio Code:

Open Visual Studio
Install the Remote-SSH extension.
Press F1 and tap SSH. Choose for the option Remote-SSH: Add New SSH Host
Tap ssh username@192.168.168.168 -A (Enter the IP address that you will use to connect to the Rpi).
Choose a way to save the file.
Press F1 and tap SSH. Choose the option Remote-SSH: Connect To Host
Choose the option 192.168.168
A new window will open and the password for the RasPi will be requested.
Type the password
After this Visual Studio Code will connect to the Rpi and install a few things on the RasPi. The first time this may take a bit longer than normal

Github Repository Clonen:

In Visual Studio Code, press the Source Control logo on the left and choose Clone Repository.
Paste this (https://github.com/BoeykensBrooklyn/SmartExtensionBox) link into Visual Studio Code and press enter.
Place the repo in the user folder
Visual Studio Code will then ask you to open this repo, click Yes

Information About backend Code:

My code consists of 2 threads and different routes from the API. I have written some classes to retrieve certain sensors more easily. These are especially useful in the 1 threading that takes care of retrieving the values of the sensors.

You can find the backend code on: https://github.com/BoeykensBrooklyn/SmartExtensionBox/tree/main/Backend

Step 7: Frontend

My frontend is written in HTML, CSS & javascript. To create the charts, I used ApexCharts.js (https://apexcharts.com).

Personally, I thought the first design of my frontend was good but my didn't agree with that so I had to make some adjustments. I think my responsive mobile first website turned out pretty well.

Of course you can adjust the HTML & CSS to your own preferences. Javascript was a bit easier for me because I like to do full stack web development. I especially like writing the APIs and Javascript, so this was easier than designing the website itself.

The home screen shows the current status of 8 outlets and the current consumption. On top of the screen there is the temperature and the air quality.

On the history screen, there is a 24-hour graph of the consumption and the temperature. When you click on one of these two, you will see a separate graph where you can say from when to when you want the data.

The front-end code can be found at: https://github.com/BoeykensBrooklyn/SmartExtensionBox/tree/main/Frontend

Step 8: Making the Case

The case is made of plywood. I made the case together with my godfather because it is easier to make with two. I put the components in by myself and sometimes I got an extra hand from someone to fix something. You can do this alone but sometimes an extra hand is handy.
Step 1: Soldering the buttons

First I provided the 8 buttons with 4 wires and 2 resistors. I made the wires long enough to make sure they would fit in the case. Above are some pictures of the buttons.

Step 2: Soldering the printed circuit boards

Next I soldered the 2 circuit boards. I took a board for the MCP3008, the level shifter and the temperature sensor. Then I took another solderplate where the pushbuttons and the outputs of the relays and leds come. So I have an overview of what is connected to Rpi and the Arduino. The second board I made to measure. I first made the layout and then broke off the board. You can easily do this by taking a slat and going over it a few times with a cutter. After a few good passes you can break it off with a little force.

Step 3: Making the casing.

It took quite a long time to make the casing. I made it bigger because I thought it would be easier to work with, but in the future I want to make it even more compact.

Step 4: Installing the components

After the enclosure was finished, I installed the components in the enclosure. I used the 2.2 x 6.5 mm self-tapping screws. Then I tested everything without the sockets on. Then I installed the sockets. This was not so difficult. The only thing was that it was a lot of cables. Then I installed the buttons. This was a little more difficult because it is a whole bunch of cables. You have to be very careful that you do not hold button 2 while it should be button 1.