How to make a plant monitor dashboard: Part III

Published on under the Plant Monitor category.

A plant connected to a Raspberry Pi sitting on a desk

In parts one and two of this series, we built a program to monitor the moisture level in a plant and a program to convert our readings into a chart. The final step is to create a web page that lets us see our chart and download our logging file. That’s what we are going to cover in this tutorial. If you have not already read parts one and two, I’d recommend doing that before continuing. You can find links to these tutorials at the end of this post. Without any further ado, let’s get started.

You can find the code for this project at on GitHub if you want to take a look at the finished project.

Setting up the web server

We are going to use a piece of software called Apache to host our web page so that we can access it on devices on our local network. This will mean we can keep tabs on our plant from our phone or computer while we are on the same network as our Pi. To install Apache, run this command on your computer:


sudo apt install apache2

After installing Apache, an example web page will be available on your Pi. To view the web page, visit the IP address of your Pi on any device of your local network. You can find your IP address by running this command:


ifconfig

The number next to “inet” on the wlan0 result is your Pi local IP address (the IP address of your Pi on your local network). Your IP will look something like 192.168.1.111. This IP will only let you connect to your Pi web server on your local network but that’s all we need for this tutorial.

Open up your IP address in a web browser on your Pi or any device connected to the same network as your Pi.

Apache automatically creates a folder called /var/www/html/ with a default web page in it. This web page is called index.html and is the one that you can see above. We’re going to replace this file so that we can show our plant chart that we created in the last part of the tutorial whenever we go to our Pi’s IP address in a web browser.

Building the web page template

Create a file called index.html in the same folder as your other Python scripts you have written for this project. This file will contain the code for the web page that will let us see how our plant is doing. Then, open up the file. Let’s start by creating the basic template for our web page:

  
  
    
      Plant Feed

This code is the basic structure of a web page. Inside the head tag we specify a title for the page (“Plant Feed”) as well as a stylesheet. The body tag is where we will add the contents of our page. We’ll come back to the styles.css file later.

Open up the index.html file in a browser by right clicking on the file and clicking “Open.” Or you can drag the file icon from your file browser into your web browser. This will let you see your web page so far.

You will see the web page itself is blank. That’s fine because we haven’t actually told the browser what to show on the page yet.

Adding information to the web page

Now that we have an index.html file ready, we can add some content to our web page. We are going to add two things to our web page:

  1. A title.
  2. The chart we created earlier.

Here’s the code that you will need to add the title and the chart to the web page. Please add this code between the <body> and </body> tags in the index.html file we created.

Your plant monitor

This code creates a big heading (called a h1) that says “Your plant monitor”. It also creates an image (“img”) which shows the contents of the plant_data.png file. This is the chart that our create_charts.py program creates. Now open up your web page in your browser and see what happens.

Both our heading and our chart are now on our web page. We’re almost there. We have a web page that shows our plant data. But, the page is all black and white. It’s not very colourful. And the image is really big. This is where the styles.css file I mentioned in the last step comes in. We can use that file to add some design to our web page.

Adding a design to your web page

Create a file called styles.css. Open it up and add in this code:


html {
  background-color: #FFEFD5;
  font-family: "Helvetica Neue", Helvetica, sans-serif;
}
h1 {
  color: royalblue;
}
img {
  width: 75%;
}

The code after the word “html” sets the background color of our web page to peach and changes the font to “Helvetica Neue” if it is available. Otherwise, Helvetica is used. If neither of those are available, a default sans-serif font is used. The code after h1 sets the color of the text in h1 tags to royal blue. This will change the color of the heading we specified in our index.html file. The code after the “img” text will set our images to be 75% of the size of the container they are in (which will be our web pager.)

In sum, this code:

  • Adds a background color to our page.
  • Specifies a font for our web page.
  • Makes sure images are not too big.
  • Changes the h1 text color to royal blue.

The web page now looks a lot prettier than it did before.

Showing the file on the web server

Right now, this file is not accessible anywhere other than your Pi. If you want to monitor your plants from your phone or another computer, you’ll need to add the index.html and styles.css files you created to the web server that we set up at the start of this tutorial.

To do this, copy your index.html and styles.css files to the /var/www/html/ folder:


sudo cp /home/james/plant-sensor/index.html /var/www/html/index.html
sudo cp /home/james/plant-sensor/styles.css /var/www/html/styles.css
sudo cp /home/james/plant-sensor/plant_data.png /var/www/html/plant_data.png

Replace the /home/james/plant-sensor/ text with the path to the folder where you have written your code.

Open up your Pi IP address in a browser on your phone or computer. You should now see your web page that you created:

Now your web page is accessible to everyone on your local network. Remember, if you are not connected to the same WiFi network as your Pi, you will not be able to see the web page.

Wrapping up

In this tutorial, we have:

  1. Set up a basic web server.
  2. Created an index.html file with some code to show our chart.
  3. Created a styles.css file to make our web page look prettier.
  4. Added our web page to a web server so we can see it on all devices on our home network.

If you have followed all parts of this tutorial, congratulations! You now have a functioning home plant monitor. The plant monitor will record the moisture level in your plant every hour and create a chart of how your plant has been doing over the last 30 days. Using the web server you created, you can check in on how your plant is doing and see how moisture levels change over time.

Every time you see your plant go above a certain number on the chart you created, you’ll know that you need to water it. And the moisture number will only get higher until you water your plant.

If you are up for a challenge, there are a couple of things you can do to expand upon this project:

  1. Create a chart that shows how your plant has been doing over the last 24 hours.
  2. Add some text to your web page to explain how your project works and the moisture level that indicates you need to water your plants.
  3. Make a counter that tells you how many times your plant’s moisture level reached a certain amount. You could do this and check back in a month to see how many times you let your plant moisture level be over a certain amount before watering it.

These are just two ideas. There is plenty more you can do with this project! It’s up to you. Congratulations again on getting this far. With all of this set up, you will have all you need to check in on how your plants are doing whenever you want to.

If you have any feedback on this tutorial or any other in the series, I want to know. Email me at readers@jamesg.blog with your thoughts. If you have completed this project, let me know how it went. I am regularly using my plant monitor to check in on my plants and I’d love to see how your plant monitor turned out.

Go Back to the Top