If you've wanted to display sensor readings on your device running WipperSnapper, you're in luck! The Adafruit IO development team has been cooking up a new feature that fits perfectly with the new Block-based Actions system on Adafruit IO.

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

To demonstrate this, let's walk through the process together by building a sensor node to monitor a greenhouse.

Parts

WipperSnapper Firmware supports a wide variety of different boards from Adafruit and others. For this greenhouse monitor, we'll be using the Adafruit Feather ESP32-S2 since it has a LiPoly battery monitor (LC709203 chip), native USB, and 4 MB flash + 2 MB of PSRAM.

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

You may also want a Lithium Ion Battery Pack if you are running this in an outdoor greenhouse with no electrical hookups.

Assembly

Using two STEMMA QT to STEMMA QT cables, make the following connections:

• Connect the BME688's Stemma QT port to the Feather ESP32-S2's STEMMA QT Port
• Connect the Monochrome 128x64 OLED's STEMMA QT port to the BME688's Stemma QT Port

Install WipperSnapper and Connect to Adafruit IO

For the ESP32-S2 Feather, follow along with this Learn Guide for instructions to install WipperSnapper firmware. Once you've got your board connected to Adafruit IO, continue with this page.

Add the Display on Adafruit IO

To add the Monochrome 128x64 OLED to your Adafruit ESP32-S2 Feather, navigate to the device page. Click the "+" to bring up the component picker.

On the Component Picker, Search for the 128x64 OLED and select the 128x64 OLED (Default) component. This component uses the default font size. If you want a larger font size, you can select the 128x64 OLED (Large Font).

Click Create Component.

The 128x64 OLED component should appear on your device page. We are not going to manually update the display, we'll talk about that later in this note.

Add the BME688 on Adafruit IO

Repeat the workflow above to add the BME688 on your device.

Note: The BME688 can produce up to 6 data streams from its sensors and 6 corresponding Adafruit IO Feeds to store this data. As you add components, please keep in mind that Adafruit IO Free accounts are limited to 10 feeds per account.

Add the Feather's Battery Sensor

The Feather ESP32-S2 has a built-in chip to monitor battery level, the LC709203F. If you want to monitor the Feather's battery level on the display, repeat the workflow to add a LC709203F battery sensor to the Feather.

Add a New Adafruit IO Action

Next, we'll 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 >>> 

Navigate to the Actions page on Adafruit IO, create a new action, and give it a name (I named mine Greenhouse Monitor).

At this point, your Actions diagram should look like the following.

Let's make this diagram's Actions field execute every time the temperature sensor reads new data.

To do this, expand the Block Toolbox by clicking Triggers and select the When [feed] gets any data block. Click the dropdown to select the BME688's temperature sensor feed.

Next, we'll want to show sensor data on the OLED display. The display's "content" is represented as an Adafruit IO Feed. Writing to the display's feed changes whats shown on the display. The sensor's data is also stored in Adafruit IO feeds.

Therefore, to show the sensor data on the display, we'll need to write the feed values from the sensors to the display's feed.

Open the toolbox by clicking the Feeds category. Click the Set Feed to ... block and drag it to your diagram's Triggers block.

Update the feed in the Set Feed Block to match OLED's feed.

After the to: is a small block that takes in a string of text. This basic block sets what is shown on the OLED. While this block is perfect for displaying a string like "hello world!", it lacks the ability to display values from a feed.

Let's replace this block with a more advanced block - the Template Block. This block uses the Liquid Template Engine to render text. It's capable of loading dynamic content (such as your feed's values) into a text string.

To add this block, expand the Block Toolbox by clicking Text and select the Template Block with the {{ label. Drag it to the right-hand side of the Set Feed Block to replace the existing text block.

Your diagram should look like the following:

There are a few tricks for how to format data for a display with the Template Block:

• By default, a string displays from left to right, and wraps around the display until it hits the display's character limit.
• You can set which line to display text on by adding the \n character to your string.
• You can use a "template" to reference values on a feed, like the values from the BME688's temperature sensor sensor.
  • The feed's key needs to be referenced for this, we'll talk about it in a bit.
    • {{ feeds["feather-esp32s244138148.ws-0x77-ambient-temp-fahrenheit"].value }}

Voltage: {{ feeds["feather-esp32s244138148.ws-0xb-voltage"].value | round: 3 }} v

Displaying Feed Values on a Display Component

The template block ({{) can reference values on a feed, like the values from the BME688's temperature sensor sensor.

To do this, we'll need the feed's key. This can be found by navingating to the Feeds page on Adafruit IO and clicking on the name of the feed to display.

On the feed page, click Feed Info

Click "Show detailed feed JSON record" to reveal the feed key.

The feed key is underneath the key field in the JSON record. The feed key for my Feather's temperature sensor is:

feather-esp32s244138148.ws-0x77-ambient-temp-fahrenheit

Now that we have the feed key, we can add it to the Template Block.

To display the temperature on the display as "TEMP: {feed value}°F", you'd add the following line to the template block:

TEMP: {{ feeds["feather-esp32s244138148.ws-0x77-ambient-temp-fahrenheit"].value }}°F

On the top of the diagram, click "Save and Run". Then click "Enable, Save and Run" to enable the action to run whenever the BME688 temperature sensor gets new data.

The run report should show the text and include the last value sent by the sensor.

See how the temperature value has 16 precision points (numbers after the decimal)? While displaying the full value is accurate, it may not fit on the OLED.

To round a feed value to a specific number of decimal places, use a round function in the template. The following line will round the temperature value to 2 decimal points:

TEMP: {{ feeds["feather-esp32s244138148.ws-0x77-ambient-temp-fahrenheit"].value | round 2}}°F

After the action runs, the string will look like the following:

And you'll see the following output on the display:

TODO! Add picture of display

Now that we have one of the BME688's value, let's also display a title for the project.

To show strings on different lines of the display, use the newline (\n) character. 

For example, If I wanted the first line to read "GREENHOUSE MONITOR" and the second line to read "TEMP: 76F", set the template block to:

GREENHOUSE MONITOR\nTEMP: {{ feeds["feather-esp32s244138148.ws-0x77-ambient-temp-fahrenheit"].value | round 2}}°F

Once the Action runs, the display should show the two lines of text:

TODO: Add picture of display