You can toggle between raw values and a visual view. As you can see, the dweet app is ‘dweeting’ phone data like your accelerometer, speed, altitude, heading, location, and orientation. In other words, the app is publishing your phone’s data to dweet.io. Any other party may subscribe or follow your Thing’s datastream via dweet.io’s api (or simply typing the follow URL above if they know your thingname). Since our app is purely for demonstration, your thing’s data is public. If you were launching a product or service that used dweet.io, you can easily lock and secure your datastreams.

Okay, now what?

Now that you’re successfully publishing your phone’s data on dweet, what’s next? Well, imagine if you had multiple Things (sensors, robots, machines, etc) publishing data to dweet. Because dweet takes care of infrastructure so you don’t have to, you can start developing apps that define the relationships and logic amongst disparate Things. It’s like IFTTT applied to the physical world.

But wait, there’s more!

To help your development journey, Bug Labs also provides an open-sourced visualization web app called freeboard™. Freeboards are easily configurable dashboards that allow you to display a combination of Thing and web accessible data in realtime. Dashboards help you make better design decisions, observe and understand Thing behavior, spot trends, or identify issues quickly. Many of our customers use freeboard as their main enduser application, such as vehicle fleet management (location, speed, heading), public swimming pool temperature, and providing air quality information.

Getting started with freeboard

Freeboard is free to use unless you want to keep your dashboards private. Once you signup, click on “Create New” and give your first freeboard a name. A freeboard is comprised of three of things: 1)Widgets, which are different types of visualizations you may have; 2)Panes, which are display panels that hold one or more widgets (eg speed & heading); 3) Datasources, which are data streams that feed into your dashboard to be visualized. Datasources can be physical things dweeting, or any internet accessible API with JSON payloads. Freeboard supports several datasources by default, or you can add your own.

Step 1: Add a datasource

Once you’ve created a new dashboard, you will see a blank canvas a configuration panel on top. Before we add panels to your dashboard, we must add at least one datasource. Click on “add” under datasources and select dweet.io as the type.

Select dweet.io as your datasource type

Now give this dweet datasource a name, like MyPhone. For thingname, you must use the name that the app assigned to you. In my case, it was flawless-snail. Since our app dweets publicly, there is no value for key, so you can leave it blank.

To add a dweet datasource, you must know it’s thingname

Once you hit save, you’ll see the name of your datasource on the top panel. You’ll know that your datasource is alive if you see the time it was last updated.

My datasource is connected!

Step 2: Adding Panels and Widgets

Now that you have at least one datasource, you can start adding panels and widgets. A panel is a container that you can drag around your dashboard for your preferred placement. Panels can hold one or more widgets, usually in logical groupings.

There’s no limit to the number of widgets you can create, and one datasource may have dozens of different datatypes that need many separate visualizations. In the case of the dweet app, we can choose up to 21 different key-value pairs to display. The right type of widget or visualization depends on what you care about. For example, Freeboard supports a mapping widget that can display position on a google map.

Freeboard has several types of widgets or visualizations available

Click add pane to get started. You’ll see that a pane has an action bar on top. To add widgets to pane, click on the “+” and select your type. Our first widget will be a Google Map.

Configuring your widget involves selecting the datasource (in our case, there’s only one), and then selecting which key-values in that datasource you want. Here, the map widget requires a lat and a long value.

First, add your datasource to the the first input field by clicking on “+ datasource”.

Click on + DATASOURCE to see a list of your datasources

Next, you can traverse the key-value pairs in your datasource via a dropdown. Select Latitude. Repeat for Longitude and hit save.

Once you’ve selected your datasource, you can see what key-value pairs are available

And voila! You’ve got your first widget!

Yup, I’m on the Ontario-Quebec border

Try repeating these steps for different types of widgets and datasource values. Since I only have one datasource, I quickly created 3 widgets, each with it’s own pane so I could drag them around the screen. I did a sparkline widget for my phone’s altitude and a gauge widget for brightness. I ended up with this simple dashboard in about 2 minutes.

A simple freeboard for my iPhone!

That was easy

This was a pretty trivial example. But you can carry over the process and steps of using dweet.io and freeboard to make your own data mashups and IOT applications. We’ve purposely tried to keep things as frictionless as possible and hope you enjoy using the tools. Let us know how it goes!