Build an Environmental Monitor with the Johnny-Five Inventor's Kit

The Johnny-Five Inventor's Kit provides a bunch of hardware and sensors that can be used to build a wide variety of small projects. They also have an experiment guide that includes detailed instructions for nearly every component. In this tutorial, we're going to combine a few of the sensors and build an indoor environmental monitoring station with a full dashboard.

dashboard.png

Here's the dashboard we're going to build. It displays the real-time and historical values for temperature, humidity, pressure, and light level.

Tessel 2 Setup

The heart of the Johnny-Five Inventor's Kit is a Tessel 2 compute module. Follow the kit's guide to properly setup the Tessel 2. It's probably a good idea to do a few of the experiments in the guide as well, just to get more comfortable with the development flow.

Wiring

The next step is to wire up the sensors. Follow the kit's instructions to properly connect the BME280 and the Light Sensor to the Tessel. Once both are connected, it should look something like this:

wiring.jpg

The BME280 has temperature, humidity, and pressure sensors. We then add the light sensor for additional monitoring.

Losant SetUp

Now that we have everything wired up, we need to create a device in Losant that will collect all of this sensor data. If you haven't already, sign up for a Losant account.

Once signed up, create a new application using the Applications -> Create Application menu. You can name it anything you want.

Next, add a new device to the application using the Devices -> Add Device menu. You can name the device anything you'd like. Make sure "Standalone" is selected as the device type. Lastly, add device attributes for each of our sensors.

attributes.png

Add the following attributes and set their data type to "Number":

tempC, tempF, pressure, light, humidity

The source code we'll be flashing in the next section will read the attached sensors and report their values using the above attribute names. Attribute names are case-sensitive.

After you click "Save Device" the screen will change and display your device ID. Copy/paste this somewhere convenient since you'll need it soon.

device-id.png

Next, create an access key that we can use to authenticate this device. Create a new access key by selecting "Security" from the application menu bar and then choosing "Device Access Keys" in the left navigation. Once there, you can then click the "Add Access Key" button on the top-right.

Leave the "All Devices" option selected and click "Create Access Key". This will display a popup with your key and secret. Copy/paste these somewhere convenient. Losant doesn't store the secret, so it's very important you copy it somewhere secure.

access-key.png

We now have everything required to connect our Tessel to Losant and begin streaming data.

Tessel Firmware

The next thing we need to do is upload some firmware to the Tessel to read the sensor values and report them to Losant. If you're new to Tessel, I would highly recommend going through the hardware setup and blink an LED articles in the guide. These will cover how to connect the Tessel to WiFi and provide a good introduction to the Johnny-Five module.

The source code for the environment monitor is available at the following GitHub repo:

https://github.com/Losant/example-tessel-environment-monitor

After cloning or downloading the repository to your local computer, edit the index.js file to set the device ID and access key to the values you obtained earlier:

var device = new Device({
  id: 'my-device-id',
  key: 'my-access-key',
  secret: 'my-access-secret'
});

Near the top of the index.js file you'll see this section. Replace "my-device-id" with the ID you obtained after adding the device to your application. Replace "my-access-key" and "my-access-secret" with the key and secret values you created in the previous step.

Once those are replaced you're ready to run npm install and deploy the code to your Tessel.

npm install
t2 run index.js

It will take a few seconds to run, but you should eventually see the console print "Connected to Losant!". Once you see that, you can open your application dashboard and view the communication log to see sensor data streaming in.

app-comm-log.png

The firmware we just flashed reports sensor data once per second, so you'll see an entry in the communication log every second. If you see any errors, double-check your device id, access keys, and ensure the device attributes are spelled correctly.

Build the Dashboard

Now that data is streaming into the platform, we can create a dashboard to display it. Create a new dashboard by using the Dashboards -> Create Dashboard menu. Name it anything you'd like.

First, add a gauge block to view the real-time value of the temperature.

add-block.png

gauge-settings.png

1. Set the Gauge Type to "Dial" and set the minimum and maximum to temperature values that make sense for your region.
2. Under Block Data, make sure your device is selected. Next, set the label to anything you'd like, and choose "tempF" or "tempC" as the attribute. Which attribute you choose depends on your preferred temperature units.

The preview should update immediately and display your dial gauge. When everything looks correct, click "Add Block" to add it your dashboard.

dashboard-with-gauge.png

Repeat the same process again for the "humidity", "pressure", and "light" attributes. You can add a new block by clicking the green button on the top-right of the screen. Use the screenshot below for reasonable min and max values for each attribute.

gauges.png

Next, add a time series graph to show the temperature, humidity, and pressure over time.

graph-series.png

Add three series to your graph, one for each attribute. Set the colors, mins, and maxes to match the gauges you created earlier. When ready, click the "Add Block" button to add the graph to the dashboard.

dashboard-with-graph.png

The last graph we'll add will display the light level. Add a new time series graph and add one series for the "light" attribute.

full-dashboard.png

You now have a full dashboard showing the real-time and historical values for your indoor environment monitor. Feel free to continue exploring the dashboard features to configure the display in any way you'd like!

There are 2 Comments

What is Losant?

Losant is an Internet of Things developer platform that makes it easy to build secure, complex connected experiences.

Losant’s platform enables you to intelligently manage your devices, collect and visualize data, and ultimately take action on data through highly customizable workflows - all in real-time.

Get Started For Free

Build an Environmental Monitor with the Johnny-Five Inventor's Kit