QR Plant Labelling

Simplifying Plant Care with Technology

4 min readFeb 18, 2024

Here’s how I’ve labeled my plants so that I have all the information about them at hand. The idea is to create a basic website in HTML, create QR codes and put them in the pots of your plants so that you can simply scan it and get the plant info.

Content

Step1 — Create the web server
Step2 — Create QR code
Step3 — Print QR code
Step4 — Create the placards
Step5 — Plant the placard
Step6 — Scan it
Conclusion

Step1 — Create the web server

Here’s my docker-compose for the web server. I’ve decided to expose it on port 8082, but you can choose any port you like for yours.

version: '3.8'
services:
  apache:
    image: httpd:latest
    container_name: plants-httpd
    ports:
    - '8082:80'
    volumes:
    - ./website:/usr/local/apache2/htdocs

You’ll find the website folder on my GitHub. It contains a basic HTML page, an image folder and a style folder for the CSS.

Download files

Don’t forget to adapt the 1.html file with your own informations (Plant name, watering frequency, light requirements and additional text if necessary)

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="./style/style.css">
</head>
<body>

<div class="container">
  <img class="main-image" src="./images/1.jpeg">
  <h1>Name of the plant</h1>
  <div class="grid-container">
    <div class="grid-item"><img class="logo" src="./images/water.png" alt="Logo 1"><p>1x / wk</p></div>
    <div class="grid-item"><img class="logo" src="./images/temp.png" alt="Logo 1"><p>18° - 24°</p></div>
    <div class="grid-item"><img class="logo" src="./images/sun.png" alt="Logo 1"><p>Indirect</p></div>
  </div>
  <p>Additional text.</p>
</div>

</body>
</html>

Once downloaded, place the folder in the directory indicated in your docker-compose.yml file and launch the web server with the following command:

docker-compose up -d

Step2 — Create QR code

Now let’s create the QR code(s) leading to your HTML page(s) if you have several plants, all you need to do is create additional HTML pages. For example, I’ve created a new page for each of my plants, simply changing the name as follows: 1.html, 2.html, 3.html, etc.

To create QR codes, you can visit the following website, where you can do so free of charge.

Press download and keep the default settings.

Step3 — Print QR code

If you have several QR codes, you can combine them in Photoshop before printing.

Step4 — Create the placards

Material

QR code printout
Cardboard
Scissors
Scotch tape
Toothpicks

Cut QR codes and cardboard to the same size.

Then tape the printed paper to the cardboard, making sure to tape horizontally along the lines of the cardboard (important for the next step, when you stick in a toothpick).

Finally, stick the toothpicks into the cardboard. They will hold well because they will be perpendicular to the lines of the cardboard.

Step5 — Plant the placard

Once the placard are finished, plant them in your plant pots.

In addition to a computerized look, your plants will now come with a description that can be scanned from your phone.

Step6 — Scan it

Here’s the web page you’ll see for your plants, feel free to change it as you want!

Conclusion

Here’s how I organized my plants. The annotations help me to remember watering times and the ideal location according to light and temperature. While this system works well for me, there’s always room for enhancement. For instance, integrating a database could provide a more structured approach to categorizing and managing your plants.