Start by putting the Node MCU onto the breadboard (if it wasn’t there already from previous labs). You can see clearly in Figure 10-4 how it should be oriented if you did not already do so.

Next take the DHT11 sensor module, and place it up against the IC ravine like you did with the sound sensor in the previous lab and shown in Figure 10-5.

You are going to wire up your breadboard with a 3v and a 5v power rail – one on either side. You are going to choose which is which now, by putting the photoresistor with one leg in the “+” rail and one leg in the breadboard field anywhere that isn’t occupied as in Figure 10-6.

Now we will put the LEDs into the breadboard. Again, as before, these will be controlled by a GPIO pin so they do not share the power rail. Place them across multiple columns, and not in the same column as anything else, as in Figure 10-7. Note that in the image, my anode “leg” is to the right on all of them. This will help me remember where the wire from the GPIO plugs into.

Now we can also plug in the three 68 Ohm (I used 100 Ohm) resistors for each of the three LEDs. Place one leg into the breadboard with the cathode leg, and the other into the “–” rail of the breadboard on the 3v side as in Figure 10-8.Note I rotated the board 180 degrees for the image for clarity, so the change in orientation doesn’t throw you off!

Now you will plug in the 10k Ohm resistor for the voltage divider circuit on the photoresistor. This will go from the same column as the photoresistor to the “–” rail on the 5v side of the breadboard as in Figure 10-9 (again – rotated the breadboard back to its original orientation for clarity in the image).

Now you will connect the MF wires to the soil moisture sensor. If you did not use the same sensor I have, but the other type you will need to do this as well but the connection is slightly different. Just pay attention to the labels on the small PCB for the sensor and the rest should be the same. Plug the Female end of the three wires into the socket on the sensor body. (It comes with a wire, but this is a more convenient arrangement for the breadboard and doesn’t impact functionality at all). See Figure 10-10 for the end result.

Now you will make all the remaining wire connections to get the system ready to work. You will start with the power and ground rails. Plug in one end of a MM wire to the “–” rail on each side of the breadboard as in Figure 10-11. I chose the spot I did as it is relatively close to a GND pin on the MCU.

Next plug those wires into the GND pin that you have chosen. See Figure 10-12 for the end result.

Now you will connect the 5V “+” rail – we won’t need a 3V rail, as only one sensor (the soil moisture) uses that voltage. You can save a wire this way which in a complex prototype is sometimes a nice thing! As before, start with one end of the MM into the “+” rail on the 5V side as in Figure 10-13.

Then plug the other end into the 5v pin on the Node32 as in Figure 10-14. Notice that I chose this location for proximity to that pin.

Now you can plug in the DHT11 to the power and ground rails using MM wires. The DHT11 pinout can vary depending on your sensor, so check yours carefully. The one used in the lab is shown in Figure 10-15 and goes “Signal, Voltage, GND” from left to right as you look at the front.

Start with two MM wire, one in each column with the middle and rightmost pin on the DHT11 as in Figure 10-16.

Take the other end of the corresponding wire and plug it into the “–” and “+” rail as shown in Figure 10-17. Middle wire to the “+” and right pin to the “–” rail.

Now plug in a MM wire to the column that corresponds to the left pin of the DHT 21 as in Figure 10-18.

The other end will go to pin 17 on the ESP32. How do you know that? It is determined in the code as the “DHT” pin number (17). If you change this, you need to update the code, but if not, it will work as is as you can see in Figure 10-19. Things are starting to get complex with wires crossing over, but it will all come together!

You can also finish off the voltage divider circuit for the photoresistor by connecting a MM wire in the same column as the photoresistor and one of the legs of the 10k Ohm resistor as in Figure 10-20.

Then connect the other end into the “light” pin which is pin 36 – again, this is determined by the code so if you change this, you will need to change the code as well. Figure 10-21 shows it plugged in to the right pin on the breadboard.

Now you can finalize the LEDs for the indication of Power, Execution, and Network connectivity. (Green, Red, and Blue respectively. A MM Wire in the same column as the anode (long) leg of the LED to start as in Figure 10-22. Again, I’ve rotated the board for clarity in the image.

Last part to connect is the moisture probe. You will need to connect the power, ground, and signal wire to the right pins. Start with power and ground by connecting the GND wire to the “–” rail on the 3v side of the breadboard, and the VCC wire directly to the 3v pin on the ESP32 as in Figure 10-24.

The last connection that completes the connector is to plug the signal wire from the probe into the pin as determined by the code. As with the other GPIO pins, if you change this you have to change the code. In this case pin 34 is the pin for the sensor to use and it will look like Figure 10-25 when connected.

In the Arduino IDE, select the Tools ➤ Manage Libraries option as in Figure 10-32.

In the library manager, click into the “Search” field on the upper right as in figure and type in “DHT-11” as in Figure 10-33 and hit Enter.

The library we want is by the fine folks at Adafruit, and should be the second one in the list, as highlighted in Figure 10-34.

Click the install button next to the version box as in Figure 10-35. You will likely be prompted to also install the Adafruit unified sensor library, so click the “Install All” button on the prompt in Figure 10-36 and wait for the install to complete. (It should only take a few seconds.)

It will now say “Installed” next to the library as in Figure 10-37.

Now in the search field type “esp32 wifi” and hit Enter.

Scroll down the list and select the ConfigManager library from the list and install it, as you did with the other library by clicking the Install button, as shown in Figure 10-38.

Last, replace “esp32 wifi” in the search bar with “pub sub” as in Figure 10-39.

Scroll down and find the PubSubClient by Nick O’Leary in the list that you can see in Figure 10-40,

and again, install by clicking the Install button.

Regardless whether you have used the Raspberry Pi, or your own Computer/Laptop, in your regular web browser on your laptop or computer, type in the IP address of your hub (Raspberry Pi or computer) and add :1880 to the end of the IP address (the “:” matters). This will open the Node-RED canvas to the default flow as you see in Figure 10-43.

Next step is to import the flow that was created for you and is in the repository for the book you cloned/downloaded from GitHub. In your web browser, click on the “hamburger menu” in the upper right of the UI, and select the “Import” menu as shown in Figure 10-54.

The “Import Nodes” dialog box will open as you see in Figure 10-55.

Click the “Import from File” button at the top of the box that you can see in Figure 10-56.

A directory browser will open, and you can browse to the file that you cloned/downloaded in the /smartdevicebook/plant_monitor directory. It is called plant_monitor.json and you can see it in Figure 10-57 (Mac screenshot).

Click the Open button when you have highlighted the file, and you will see that there is now some JSON code in the import screen as in Figure 10-58.

Click the “Import” button at the lower right of the dialog, and a confirmation will appear at the top of the screen as in Figure 10-59.

You will also notice a new tab has appeared behind the “Flow 1” tab in the canvas area as in Figure 10-60. This is the flow you will work with so you can click on that tab and it will move to the foreground.

The flow should look like the image in Figure 10-61 – if you have any errors about missing nodes, or nodes that are not right looking (dashed border line, or orange text), make sure you installed all three needed libraries from the preceding steps!

There are a couple of settings that you will need to change to make the flow work, but they are very easy. Start by double-clicking the node at the far upper left that is highlighted orange, called “All Sensors” as you see in Figure 10-62 – this is the first node of the flow, and it is an MQTT input node type. It reads the MQTT message queue and if a new message appears it will process it based on the rules in the flow.

Click on the little pencil icon next to the Server field where it says “Home Network” in Figure 10-64. This will open the server configuration node.

There is only one field you must change in this config, and that is the IP of the MQTT server. This should match the IP of your Raspberry Pi or computer depending on what you are using as the hub, as you can see in Figure 10-65 mine matches the IP I connected to for the Node-RED UI.

Once you’ve entered it in, click the “Update” button at the upper right to update that configuration as in Figure 10-66.

Then you can click “Done” in the node configuration screen as in Figure 10-67.

Back in the canvas, notice the small blue pip on the tops of all your nodes (same as in Figure 10-68)? That means that while the node is present, it is not actually running. Node-RED requires you to Deploy the flow before it executes (like flashing your ESP32 or executing the code on the Pi from before).

To deploy the flow, click on the big red “Deploy” button on the upper left, as in Figure 10-69.

You will see a confirmation pop in from the top of the browser, confirming the deployment as in Figure 10-70. The unused configuration nodes notice is an erratum from my prepping for the book and you can ignore it.

The Dashboard nodes that you installed earlier are what drives the UI for the sensor data. On the upper right of the UI, you will see a little button that looks like a bar graph and if you hover over it, it will say “Dashboard” as in Figure 10-71. Click the button to bring up the dashboard configuration options.

Another strange erratum of my prep work appears when you do this, showing what would appear to be three duplicate dashboards under the configuration, but when it opens there is only one. I tried to eliminate this, but since it isn’t broken, I left it. Just do not be surprised when you see Figure 10-72, it is not broken!

The dashboard UI is accessible from the tiny “go to” link on the upper right side of the configuration menus just below the bar graph button as you see in Figure 10-73. Clicking this will open the dashboard for your sensors.

The default dashboard shows up as in Figure 10-74.

Now, I personally do not like the “Light” color scheme as I find it hard to read. If you want to change it, click back on the tab in your browser for the Node-RED editor, and click the “Theme” tab in the dashboard config menu, seen in Figure 10-75.

Click on the drop down there at the top and choose “Dark” and then click “Deploy” again as in Figure 10-76 (remember, no change you make anywhere in the editor exists until you deploy it!).

Now if you click back, the dashboard will be in dark mode and a lot friendlier on the eyes as in Figure 10-77. Notice also, there is not data there. That is because your sensors are still sitting cold and dark on the workbench, waiting to be fired up!