Stream Deck allows custom plugins to be written in several different languages. However, writing the plugin in JavaScript has several advantages for communicating with Adafruit IO. First JavaScript is a platform independent language, so the plugin should work on both Windows and MacOS systems. Second, because we are communicating with a website, JavaScript is a natural choice and makes this very easy. And finally, there are plenty of examples available in JavaScript.

In the initial prototyping phase of creating the Message Panel, I tried using an existing plugin that allows communicating with IFTTT webhooks, which can perform an action on Adafruit IO, but there were several problems with this. It was pretty slow and would sometimes take a few seconds to update, messages were difficult to change and required drilling down into the IFTTT interface, and also the IFTTT was stripping certain characters away.

The Stream Deck plugin communicates directly through the Adafruit IO REST API and overcomes all of those limitations. REST stands for REpresentational State Transfer and works by making GET, POST, PUT, PATCH, and DELETE calls, although PATCH isn't as common as the other four. Each of these calls has a different purpose. For placing a value into an Adafruit IO feed, we only need the POST call. To learn more about REST, be sure to check out our All the Internet of Things - Episode Two: Protocols guide.

If you would like an excellent overview of Adafruit IO, be sure to check out our Welcome to Adafruit IO guide. If you would like to control the Message Panel from some other device, it is beyond the scope of the guide, but it would need to be something that is able to send values to Adafruit IO.

Installing the Plugin

First, make sure you are running the latest Stream Deck application for your computer. Next you can download it directly from this guide.

Once you have downloaded it, open it up and when it asks you if you would like to install it, click yes. Then either open up the Stream Deck application or if it is already running, choose the Configure Stream Deck option from your menu bar. The new plugin will appear on the right-hand side under Adafruit IO and be called Publish to Feed. 

Configuring the Plugin

Go ahead and drag Publish to Feed over to the desired spot on your Stream Deck and it will be automatically selected. After that, there are four required pieces of information.

First you will need your Adafruit IO Username and Active Key. You can find these by logging into Adafruit IO at https://io.adafruit.com and selecting the AIO Key link on the right side of the screen.

The other two pieces of information we need are the Feed Key and the Value that we want to publish. The feed key will need to be the Key of an existing feed. For more information on creating a feed, you can view our Adafruit IO Basics: Feeds guide page called Creating a Feed. Once that is created, you can look at your list of feeds by selecting Feeds → View All. Type in the Feed Key, which is the value in the column labeled Key.

Formatting Messages

By default, the color is white and If you would like to format a message, there are two different options available. Text will always be automatically centered both horizontally and vertically.

Color

First you can change the color by supplying either a value between 0-23 that corresponds to a rainbow color on the color wheel or a number above 23 for white. The number should be placed inside of a matched set of braces such as {4} to select color 4 on the color wheel. You will need to experiment to see which colors look best for your application. It will continue printing in that color until you change it again.

Text Size

You can also set the text size in a similar way, but it should placed inside of a matched set of angled brackets such as <2> for size 2. Just like with color, it will continue printing in that color until you change it again.

How it Works

Besides the usual store/retrieve values code that is part of all Stream Deck plugins, it works by simply making an XMLHttpRequest post call to the Adafruit IO REST API. The IO Key is included in one of the header parameters, the username and feed key are part of URL, and the message is the main piece of data. Here's the relevant JavaScript code from the plugin:

const request = new XMLHttpRequest();
var datum = {
  "value": feedvalue
};

request.open("POST", 'https://io.adafruit.com/api/v2/' + username + '/feeds/' + feedkey + '/data');
request.setRequestHeader("X-AIO-Key", iokey);
request.setRequestHeader("Content-Type", "application/json");
request.send(JSON.stringify(datum));

const request = new XMLHttpRequest();
var datum = {
  "value": feedvalue
};

request.open("POST", 'https://io.adafruit.com/api/v2/' + username + '/feeds/' + feedkey + '/data');
request.setRequestHeader("X-AIO-Key", iokey);
request.setRequestHeader("Content-Type", "application/json");
request.send(JSON.stringify(datum));

You can read more about the Adafruit IO REST API in our handy reference guide.