Using a Spark Core with ThingStudio

in recipes

Using a Spark core with ThingStudio

Last week, I was walking around Maker Faire UK with my walkabout ThingStudio demo. The hardware was based around the Spark Core Wifi dev board. I thought I’d go through the demo hardware and software so you can see how to use Spark with ThingStudio. This recipe should also work with the Spark Photon and Electron when they come out, especially if Spark send us some early units to test (hint, hint).

Let’s start with the hardware, this was pretty basic, just a potentiometer on A0, a servo attached to A1, and the RGB led on the board. This collection of bits was just intended to demonstrate the UI features of ThingStudio clearly, rather than to do anything in particular. A pack of AA’s on the back made the whole thing pocketable


So far, so obvious.

What does it do?

The goal of this demo is to show two-way, real-time control and monitoring of IoT devices.

The three vertical sliders control the red, green and blue of the RGB led on the SparkCore.

The circular indicator moves when you turn the potentiometer, and the horizontal slider moves the servo. The UI is shown below.


Programming the Spark

As always, the prerequisite for working with ThingStudio is to have some way of using the MQTT protocol. Fortunately, the nice people at Spark have already provided an MQTT library, so we are in good shape. You can download the Spark example from github here: Let’s work through the code pretty much line by line.

At the top of the file we declare the Servo the signature for the MQTT callback (more about that later), and the connection details for the MQTT client.

Note the top lines, inserted by the Spark IDE. To include the MQTT library, bring up the libraries tab (the bookmark-like icon fourth from the bottom of the left hand side), search for MQTT, and add it to the project.

We also declare some global ints to store the red, green and blue values as they come in from the ThingStudio UI.

Next, skip on to line 52 where the setup function is.


We start by initialising the RGB led, the Serial port (for debugging) the Servo and the potentiometer input pin.  Next, we actually attempt to connect to the MQTT broker. Finally, we wait for an MQTT connection, and when it is valid, we set the led color to green (again for debugging), and subscribe to the topics that our ThingStudio UI will send commands on.

Note: For this demo, I was using our open MQTT broker at In general, you should move to your own broker, but if you are going to use our broker, it’s good practice to prefix your topics, by a unique string, like your username, so you don’t accidentally get messages from someone else who is also using a topic like “/test”.

OK, now let’s turn to line 16, where the MQTT callback is declared, and where most of the actual work is done.


This function is called everytime a message is received from ThingStudio. We’ve just made the change that all messages to and from ThingStudio are in JSON format, which means that simple values are enclosed in quotes. You could fire up a full JSON parse to do this, and the Arduino/Spark one is available, but for now, its overkill, so all we do is, in the very first line of the callback, increment the char pointer to the payload by one, thereby stepping past the first quote mark.

The next few lines convert the ‘C’ strings to C++ Strings, which gives us the equals method.

We now test the topic of the incoming message.

For each of the RGB topics, we convert the R,G or B value and set one of the globals.

If the topic is the servo topic, we convert the position and write to the servo.

That’s incoming dealt with. Now to the output, publishing side, from line 77.

The first few lines are just a loop to keep handling incoming messages from MQTT/ThingStudio.

Next, we are going to send the value of the potentiometer. There are two issues here.

Firstly, there is always some noise on sensors like potentiometers, thermocouples, etc. and if we just tested to see if the value had changed before sending the value, we’d been sending thousands of messages a second to the browser, which would probably break it. So, we keep track of the previous readings and only send a message if the the difference between the two is greater than the noise level of the pot, which is typically in the region of 3 or 4.

The second issue is just one of a bit of safety if you happen to forget to connect the pot or connect it wrong. In this case the value of the ADC readings will swing wildly all over the place because the line would be floating, so we put in a small delay at the end of the function to limit the number of callbacks to 100/sec (10ms delay).

Designing the UI

I’ll assume that you have a working MQTT broker, or you are using our open one (if not, you can get one and learn how to set it up here).

First create the feeds for your app. When you have finished, your list of feeds should look like this, but with your username inserted in the topics


Next, let’s review the screen code.

The RGB sliders are enclosed in a a div with a CSS class that rotates them through 90 degrees to make them vertical.

Each of the of the sliders has a maximum value of 255 (for the RGB values), and the data attributes data-feed, which specifies which feed values go to and data-continuous=”true”, which means that they will output a continuous stream of MQTT messages while the slider is being moved.

The next section gives us our rudimentary SVG dial. It specifies an SVG viewport and draws a circle and a rectangle within it. When we receive messages on the MikeSparkPot feed, the rectangle will be rotated by the number of degrees specified by the messsage.

Finally, the servo slider works much the same what as the RGB sliders did, but outputting to the SparkServo feed.

A bit of style

I also made a custom Theme for this demo which does the 90 rotate and styles the SVG viewport here.

And that’s it!

Have fun, and give some feedback on the forum or comments here.

I make stuff.

Leave a Reply

Your email address will not be published. Required fields are marked *