If you've wanted to display sensor readings on your device running WipperSnapper, you're in luck! This guide will walk you through the process of building a device that reads environmental measurements and displays them on an OLED.

The process for setting up and using a display on a development board running WipperSnapper is simple, there is no coding or soldering - you just click! 

What is WipperSnapper?

WipperSnapper is a firmware designed to turn any WiFi-capable board into an Internet-of-Things device without programming a single line of code. WipperSnapper connects to Adafruit IO, a web platform designed (by Adafruit!) to display, respond, and interact with your project's data.

Simply load the WipperSnapper firmware onto your board, add credentials, and plug it into power. Your board will automatically register itself with your Adafruit IO account.

From there, you can add components to your board such as buttons, switches, potentiometers, sensors, and more! Components are dynamically added to hardware, so you can immediately start interacting, logging, and streaming the data your projects produce without writing code.

Parts

WipperSnapper Firmware supports a wide variety of different boards from Adafruit and others. This greenhouse monitor will use the Adafruit QT Py ESP32 microcontroller board.

The Bosh BME688 is perfect for this greenhouse monitoring project as it provides temperature, humidity, barometric pressure, and VOC gas sensing capabilities in a sub-$20 package.

If you want to use a different sensor, WipperSnapper firmware supports 104 different types of components. 

I selected the "Monochrome 1.3" 128x64 OLED graphic display" for this project because the display makes its own light, no backlight is required. This reduces the power required to run the OLED.

At the time of release, WipperSnapper supports the following display components:

OLED Displays with I2C:

• Monochrome 1.3" 128x64 OLED graphic display - STEMMA QT / Qwiic
• Monochrome 0.91" 128x32 I2C OLED Display - STEMMA QT / Qwiic
• Monochrome 0.96" 128x64 OLED Graphic Display - STEMMA QT PID: 326

LED Displays with I2C Backpacks:

• Quad Alphanumeric Display - Red 0.54" Digits w/ I2C Backpack - STEMMA QT / Qwiic 
• Assembled Adafruit 0.56" 4-Digit 7-Segment Display - I2C Backpack - STEMMA QT
• i2c / SPI character LCD backpack - STEMMA QT / Qwiic

Character LCD Displays with I2C Backpacks:

• Assembled Standard LCD 16x2
• RGB backlight negative LCD 16x2
• Standard LCD 20x4
• RGB backlight positive LCD 16x2

The following parts are required to build the project's enclosure:

Optional Parts

Circuit Diagram

The diagram below provides a general visual reference for wiring the project's components. The project uses STEMMA QT cables and connectors to provide a no-soldering solution for wiring. 

NOTE: The BME680 is shown on this diagram instead of the BME688. The wiring for both is identical.

Assembly

The Snap-on Enclosure for the Adafruit QT Py does a lot of heavy lifting for us as it provides a both enclosure for the QT Py and mounting rails for the display and the BME280 sensor . 

Before we set up an Action, we need to attach and configure components (like the display and sensor) to the QT Py.

Add a Display Component

To add the Monochrome 128x64 OLED to your QT Py, navigate to the device page. Click the "+" to bring up the component picker.

The 128x64 OLED component should appear on your device page. 

Add a BME680 Component

To add the BME680 component, click the "+" icon.

Make sure the Device Page looks like the following screenshot before moving on to set up an Action.

Let's use Adafruit IO’s new (Blockly-based) Actions to show the values of the sensors on the OLED display.

• If you do not know what Adafruit IO Actions are - check out this guide here >>> 

Let's configure this workflow to execute every 15 minutes.

To do this, expand the Block Toolbox by clicking Triggers and select the Schedule block. 

Drag the Schedule block under the Triggers workflow. By default, it is configured to execute every 15 minutes.

Modifying Sensor Values 

The BME688 produces precise measurements. However, these measurements often have too many decimal points to display on an OLED.

Before displaying these sensor values, we are going to take these measurements and round them to fit on the OLED's screen.

Ensure your diagram should looks like the following screenshot before moving on:

Next, repeat the steps above for the BME688's humidity sensor and TVOC sensor.

Your diagram should look like the following.

Showing Temperature Values on the Display

Finally, we'll want to print the temperature values to the display.

• If you do not have an OLED - the process for this is the same for any "Display Component" in Adafruit IO.

Like the sensors component, the OLED component is an Adafruit IO Feed that you can write to. What's displayed on the OLED is the last value written to the feed.

To tell the display what to show, you'll need to write to the paragraph block. This block lives within the Template block but is presently grayed out.

The 128x64 OLED's Large Font mode can write up to 4 lines of text on the display. 

For the first line of the paragraph block, I added a label called Greenhouse. The next 3 lines of the display are populated with the temperature, humidity and TVOC values.

To render a variable on the display, you'll reference a variable by using the following syntax: {{vars.variable}}.

The string rendered by the following line:

T:{{ vars.temperature }}°F

Would look like this on the display:

T: 74°F

The snippet below is the value of the paragraph block, used by this project.

After placing the text above within the paragraph block, the final Action should look like the following screenshot.

With the Action complete, let's move on to using it!

Once you have your new Adafruit IO Action set up like above, click the Save and Run button. 

Once the Action runs, you should see a report showing the output of each block:

You should also see the OLED update, reflecting the final string you set: