[Guide] DIY Temperature and Humidity stream overlay

They call this dogfooding… let’s try it out. Here is a guide on how to build, configure and use a temperature and humidity stream overlay with Overlay.live.

This is a small project I completed by myself in less than 2 hours. Since all the code is written, you should be able to get to the same result within less than an hour. Ready, go!

Using the Overlay.live nodeJS Library

Before we start: earlier this month, we announced the release of the Overlay.live nodeJS library. This library allows anyone to build telemetry solutions for Overlay.live – with just a minimum amount of configuration.

Of course, I’m not going to lie to you. A minimal amount of coding, linux and electronic knowledge is helpful to complete this project. But if you’ve done small Arduino or RaspberryPi based projects using NodeJS or Python – then you should be fine.

Step 1: Requirements

Let’s start with a few requirements. Two categories, hardware and software:

1.1 Hardware

• 1x RaspberryPi 1, 2 or 3 – I recommend the 3 since it has WiFi and is noticeably faster
• 1x DHT 22 sensor also know as AM2302 – I’m using this one because … that’s what I found at the local electronic store.
• A bunch of patch cables – see wiring diagram below
• 1x SD Card – 8GB is fine

And of course, don’t forget the other indispensables: a monitor plus HDMI cable, keyboard and mouse, RPi power adapter and USB cable.

1.2 Software

• SD card with Operating System – simply download the latest Raspbian distro (recommended with desktop). Use Etcher to burn the .img on your SD Card. Insert in the Pi and boot it up.

Before doing anything, I recommend you make sure everything is up to date on your OS. Open the terminal and execute the following two commands:

$ sudo apt-get update

$ sudo apt-get upgrade (this one might take a little time)

And you are good to go!

Step 2: Wiring up the Hardware

This is a simple project. It’s literally 3x cables to connect. Here is how it looks. (image credit momenso)

Now if you’ve gotten the fancy grove breakout board like me, here is how you’d connect it:

• GND -> Black Cable -> GPIO Pin #39  (GND)
• VCC -> Red Cable -> GPIO Pin #2  (VCC 5V)
• NC -> White Cable -> Not connected, I removed it.
• SIG -> Yellow Cable -> GPIO Pin #7 (GPIO04)

For GND and VCC any of the other pins that do the same thing on the RPi would off course be OK to use. The DHT22 sensor can operate between 3.3-6V, so if necessary, you can also use the 3.3V VCC sources from the Pi. (DHT22 datasheet)

Tip: Never take anyone’s word for how to connect things – before connecting stuff, read the datasheets, think, and have a look at the pinout diagram. (Google -> RPi pinout)

Step 3: Software Setup

Now it’s time for a little bit of terminal. Before doing so, make sure your RPi is connected to the Internet!

3.1 Install the BCM2835 Library

Download files:  http://www.airspayce.com/mikem/bcm2835/bcm2835-1.52.tar.gz

Navigate with the Terminal to the Download Folder, unzip, enter the folder, compile, install.

$ tar zxvf bcm2835-1.52.tar.gz
$ cd bcm2835-1.52
$ ./configure
$ make
$ sudo make check
$ sudo make install

(project website and instructions – they may have a more up-to-date version)

3.2 Install the node-dht-sensor Library

$ npm install node-dht-sensor

(github project and documentation)

3.3 Install the overlay.live Device Library

$ npm install overlaylive-device-library

(github project and documentation)

Step 4: Test Your Sensor

Before going any further, I recommend that you test your sensor quickly. This is to make sure everything works before getting Overlay.live involved.

Download the following project files:  Download from GitHub

The three files you need are:

• device-config.js – this is the file you need to edit with your overlay.live credentials
• humtemp.js – this is the the node app
• test.js – this is the offline test script

For the test, we will use test.js. If you’ve connected everything properly, this script upon execution with display in the console temperature and humidity readout from the sensor. To run it:

$ node test.js

You should get a result that looks like this:

Step 5: Configure and Stream to Overlay.live

5.1 Edit device-config.js

To tell the library which user and device your little project corresponds to on our servers, you need to edit the device-config.js file. Using the text editor, open it and edit the following two items:

• apikey => replace YOUR_OVERLAYLIVE_API_KEY by your own key that you can find here : https://my.overlay.live/#/home/account
• devicekey => replace YOUR_CUSTOM_DEVICE_NAME by your manual device key.

Note: To create a new device key, head over to your Overlay.live Dashboard. Click “Add Manual Device” copy the proposed key, label the device and save.

Then save the edited config file. You are now ready to stream telemetry to your Overlay.live account.

5.2 Stream Telemetry to Overlay.live

To start the stream we will run the humtemp.js nodeJS script. This is a script that runs in the terminal and could be configured to run on you RPi startup (daemon).

$ node humtemp.js

and the output should be similar to this:

5.3 Monitor on the Overlay.live Dashboard

Now that the device is running and streaming telemetry to our servers, you can monitor the incoming date from the Dashboard. To visualize this data:

• Click the edit button of the device
• Click the “Update sensor list” button (this will re-load the sensors as configured on that device)
• Click the “Show realtime values” button

If it’s all working well, you should see the values being displayed and updated in realtime. Congrats!

Step 6: Create an Overlay and Display Live Telemetry on Your Stream

Final step, the overlay. The whole point is to overlay the Telemetric data over a video stream.

6.1 Create and Configure an Overlay

In your Dashboard, under Overlay, click the “Add Overlay” button. Name it to your liking and save.

On the right, select from the “Add Sensor” drop-down the two sensors we’ve just added. Temperature and Humidity.

These can be placed anywhere you like on the green screen. If you double click the sensor box, you can customize the looks of it.

Press “Save” to record the changes to the block.

Scroll down, copy the Overlay Link and save your overlay.

 

6.2 Configure Your Streaming Software

For this example we will use the Open Broadcaster Software – OBS. In the Sources add a new source type “webpage”.

In the configuration panel that opens, paste the Overlay link, change the display setting to 1920 x 1080 (Full HD is the recommended webpage load resolution). And Save.

Automatically, this will load the Overlay and display the values in real time. It all works, you can now configure your cameras and go live!

Conclusion

That’s it for this guide. Let me us know in the comments if you have any questions.