#freeboard

Free! For the good citizens of Tumbl Town: an authentic Victorian Insult Freeboard!

You already know what Victorian insults are (don't you, you delicious little scallywag). But what's a freeboard? Simply a grid where you place separate yet connectable pieces of information, with the goal of making intuitive connections easier.

And as I'm quite sure I missed some of our favorite antiquated nouns and adjectives. Please feel free to add them.

Enjoy! Or don't!

||||||||||

[made using Monospace App and Adobe Spark

Part 3 of 3:

In Part 1 we showed you How to Connect your RaspberryPi to the dweetPro™ messaging system. In Part 2 we discuss how to Control your RPi with dweetPro.

In this tutorial, we show you how to connect your device and control it from a freeboard™ dashboard.  We are using the same RaspberryPi device from before. 

To get started, follow the previous tutorials to connect the RPi device to dweetPro, and write the python software to listen to dweetPro for a trigger. With that complete, we can set up our trigger anywhere, like on our freeboard dashboard.

First, we add a new button widget to the dashboard we previously built. Creating a button is easy with the HTML widget:

We use JavaScript to create the look of the button, made simple with a hosted .PNG file. Depending on the size of the picture, we may need to adjust margins and sizes. 

We shifted our picture to the right with margin-left, and reduced the picture size to fit our window, as seen below (which should all be one line in the .JS editor).

Next, we connect the new button to our dweetPro trigger with a custom freeboard plugin. Learn more about freeboard plugins here. 

Plugins are the best way to customize your freeboard dashboard. You can create any type of widget or datasource you like, and with some skill and JavaScript knowledge, the possibilities are unlimited!  

This tutorial covers only the most basic integration. For more complex integrations, see our other examples in our Twitter feed.

For this plugin, we first support CORS. This is good practice for any new datasource that does not have CORS supported by default. Next, we setup our button, so when it is clicked, we kick off the sendSpin function:

Next, we set up the dweetPro call as a variable, so we can more easily refer to it later:

Remember to use your own Thing ID and Key, but feel free to re-use the same content, or add your own key:value pairs as desired.

Now we create our sendSpin function:

For this example we used the AJAX call to transport our JSON data.  We designate the Type of call (POST), the URL to call, add our Headers (required for dweetPro), content and data types, and the data to send (the variable we setup earlier).

We also added a neat freeboard feature, the Loading Indicator.  This is a feature of freeboard that allows you to show an indicator that something is happening behind the scenes. This helps users understand that the dashboard is working for them, and keeps users from smashing the button over and over again. Read more about the features of freeboard and it’s hidden secrets here.

After creating our plugin, we load the plugin into the Developer Console of our dashboard:

Finally, we refresh the dashboard, and click our button! Watch the video below to see the Plant Spinner in Action!

Next up?  We will show you ways to trigger the Plant Spinner from any UI you want, including SMS, email, calendar events, Alexa, Google Home, Slack, and more.  Let us know which UIs you would like to control your device from, and we will show you how.