How to build a control panel for your Particle-powered brewing projects
Tags: cpp, programming, web, iot
Published: 2019-03-27 22:42:17

---
title: How to build a control panel for your Particle-powered brewing projects
published: true
tags: cpp,programming,web,iot
canonical_url: 
---

A few weeks ago, I [detailed my process](https://dev.to/particle/upcycling-an-old-homebrewing-project-with-a-particle-argon-587k) for upcycling a Photon-based project of mine—the Brew Buddy—to the new Particle Argon. I covered creating a new breadboard prototype, adding a few new features not in the Photon version, and the process of converting the firmware to work with the Argon.

In this post, I’ll cover the second half of the project: from prototype to PCB and cloud-based control panel. As with the first part of this project, I’ve been [live-streaming all my work on this project over on Twitch](http://(https://twitch.tv/brandonsatrom)), so if you want to watch the replays, or join me for future projects, head over to my page and give me a follow to get notified.

### Designing a new PCB with Eagle and OSH park

Having the ability to breadboard a new project is amazing, but once I get everything working, I can’t wait to get rid of that rats nest of wires and replace them with a fancy, custom-designed Printed Circuit Board (PCB). My original Brew Buddy project saw several PCB revisions over its early life, so of course I had to spin another board for this Argon-based iteration.

![Various iterations of the Brew Buddy board](https://blog.particle.io/wp-content/uploads/2019/03/BoardIterations.png)<figcaption>Various iterations of the Brew Buddy custom PCB that I’ve used over the years.</figcaption>

#### Creating PCBs in Autodesk Eagle

There are a number of tools out there for designing PCBs, including free tools like KiCAD and high-end tools like Altium and OrCAD. I tend to do my PCB design in Autodesk Eagle. It’s a powerful tool with a bit of a learning curve (like all tools of its ilk), but once you get the hang of it, it makes the process of bringing your breadboard prototypes to life a fun and rewarding process.

Since I had an existing version of the PCB for my Photon-based project, my process here was a relatively straightforward one:

- Replace the Photon with the Argon
- Re-route the pins to the proper places on the Argon
- Add an additional pin for the SD card chip-select on the Adafruit TFT breakout
- Add the Piezo disc (and resistor)

When creating custom PCBs, you could etch your own with dangerous chemicals, or let fabrication pros handle the process at a fairly affordable price. For the digital design of the final PCB, there are two key assets you’ll create: a schematic, and a layout. The schematic is the logical design of the board and is meant to show where all of the electrical connections are made between components on the board. Here’s a before and after view of how my schematic changed for this project:

![](https://blog.particle.io/wp-content/uploads/2019/03/BBSchematic-1024x423-test-1024x423.png)<figcaption>A side-by-side comparison of the Brew Buddy schematic.</figcaption>

The layout describes the physical placement of the components on your PCB. It’s coupled tightly to the logical, schematic design so that your connections are logically, valid, but the layout is where you place components and draw copper traces between them. Here’s a before and after view of the physical layout of the PCB:

![](https://blog.particle.io/wp-content/uploads/2019/03/BBLayout-1024x703.png)<figcaption>A side-by-side comparison of the Brew Buddy layout</figcaption>

My new Brew Buddy PCB is larger, partly to accommodate the larger Argon, and also to make room for the new Piezo. I could have made it smaller, but then I wouldn’t have an excuse to spin another rev of the boards, now would I?

The most time-consuming aspect of the four-step migration was the first: moving from the Photon to the Argon required a re-mapping of every logical and physical connection. Eagle does have a Swap Part tool that makes this a bit easier, but in the spirit of being careful and thorough, I didn’t use it so that I could verify every connection.

All in all, this part of the process took me just a couple of hours. If you’re interested in watching how this process played out, I live streamed it on Twitch, and you can find the recording below.

{% youtube AQd3qdI9BUE %}

#### Ordering PCBs from OSH Park

With the board design done, it was time to order PCBs. There are a bevy of great, online PCB fabs around these days, but one of my personal favorites is [OSH Park](https://oshpark.com/). They are inexpensive, quick, and if you like the color purple, you’ll love their PCBs.

Ordering PCBs from OSH Park is simple. All you need to do is drag the Eagle `.brd` file onto the “Let’s get started” drop zone and OSH Park will read the file, generate the layer instructions and give you a price estimate. If you have a Zip file with Gerber files (a set of individual files that represent the layers in a fabricated PCB, and pronounced like the baby food) you can upload those as well.

OSH park also allows you to make your PCBs publicly available for others to consume and even order. [Here’s mine](https://oshpark.com/shared_projects/PQWUFWaS) for the Brew Buddy if you’d like to take a look for yourself.

Once I had my PCBs ordered, I passed the time waiting by working on my web-based control panel, which we’ll cover in the rest of this post. When the PCBs arrived a week or so later, I did live stream the assembly (often called PCBa) and testing, which you can check out below.

{% youtube 33dgf-r6pe4 %}

### Building a web-based control panel with Azure IoT and electric io

For the “cloud” portion of this project, I wanted to build a control panel, not just a dashboard. I wanted to be able to move between brew monitoring states (brewing vs. fermenting) and trigger actions from the same interface where I would view charts, graphs and the current state of my app. With the Azure IoT Hub and a great open source project called [electric io](https://github.com/noopkat/electric-io), I was able to do just that.

![](https://blog.particle.io/wp-content/uploads/2019/03/Screenshot-2019-03-27-08.40.58-1024x689.png)<figcaption>My electric io dashboard for Brew Buddy</figcaption>

The entire process consisted of the following steps:

- Wire my project up to Azure IoT Hub
- Configure electric io to display device data
- Add MQTT to my Firmware to receive cloud-to-device (C2D) messages from Azure
- Configure electric io to Send C2D Messages

The first step is covered extensively in our Docs on setting up an Azure IoT Hub integration with the Particle Device Cloud, so I won’t repeat them here. In addition, Paul DeCarlo from Microsoft [covered the second step in a recent blog post](https://blog.particle.io/2018/09/28/create-the-dashboard-of-your-dreams-with-particle-electric-io/), so I’m going to gloss over that section as well. Key and unique to this project are steps three and four, which enabled me to turn electric io from a dashboard, into a true control panel.

#### Using MQTT to listen for Azure IoT Hub Messages

The [Particle Device Cloud to Azure IoT Hub integration](https://docs.particle.io/tutorials/integrations/azure-iot-hub/) gives you a quick, painless connection between your Particle Device and Azure. It allows you to use the Particle.publish API as you would in any other project, and pipe that data into Azure directly.

In order to add Azure to Device communication, we need to do a bit more in our firmware. The Azure IoT Hub supports two modes of direct integration with the IoT hub: a language SDK, or through direct implementation of pub/sub through MQTT or AMQP. For this project, I opted to use MQTT.

For Particle devices, there are two great MQTT libraries to choose from, [MQTT](https://github.com/hirotakaster/MQTT) for basic support, and [MQTT-TLS](https://github.com/hirotakaster/MQTT-TLS) when a secure, certificate-based MQTT connection is needed. Azure IoT Hub requires a secure connection, so I installed the MQTT-TLS library and included it in my project:

```cpp
#include “MQTT-TLS.h”
```

To create a TLS-based connection, you also need a client certificate, which Microsoft provides in their SDKs. I grabbed the DigiCert Baltimore Root certificate from their GitHub repo, and created a new file called `certs/h` in my project, which I included right after the MQTT library include.

```cpp
#include "certs/certs.h"
```

The next step is to declare a callback function for all MQTT inbound messages, and create an MQTT client. I created a forward declaration for the callback and configured the client URI and port based on the online docs. Be sure to replace the `{your hub name}` string with the name of your own Azure IoT Hub, which you can find in the Azure Portal for your account.

```cpp
void mqttCB(char \*topic, byte \*payload, unsigned int length);
MQTT client("{your hub name}.azure-devices.net", 8883, mqttCB);
```

The next step is to connect to the Azure MQTT server when the project starts up. In the `setup` function, I enabled TLS and pass in the certificate I downloaded and created earlier. Then, I called the `connect` method with my deviceID (`deviceID = System.deviceID();`) and a username and password.

```cpp
client.enableTls(certificates, sizeof(certificates));
client.connect(deviceID, "{your hub name}.azure-devices.net/" + deviceID, 
  "SharedAccessSignature {your SAS Token here}");
```

In the case of the Azure IoT Hub, the username you provide should be your hub endpoint—like `myhub.azure-devices.net—plus` your Particle deviceID.

For the password, [Azure requires](https://docs.microsoft.com/en-us/azure/iot-hub/iot-hub-devguide-security) that you provide a SharedAccessSignature, or SAS Token. You can generate these for your own hubs with the Azure [device explorer](https://github.com/Azure/azure-iot-sdk-csharp/blob/master/tools/DeviceExplorer), the [Azure CLI](https://docs.microsoft.com/en-us/cli/azure/ext/azure-cli-iot-ext/iot/hub?view=azure-cli-latest#ext-azure-cli-iot-ext-az-iot-hub-generate-sas-token) or the [Azure IoT Tools for VS Code](https://marketplace.visualstudio.com/items?itemName=vsciot-vscode.azure-iot-tools), which is what I did. I was already in VSCode building my app with Particle Workbench, so it was easy!

![](https://blog.particle.io/wp-content/uploads/2019/03/VSCode.gif)<figcaption>The Azure IoT Hub VSCode extension in action</figcaption>

The next step is to check the `isConnected` method to determine if I successfully made an MQTT connection to the Azure IoT Hub. In either case, I added some Particle.publish calls so that I can double-check this from the console.

If I get a positive result, it’s time to set up a subscription. Azure IoT Hub provides two ways to receive communication on embedded devices, Direct Method calls (which always send a response) and Cloud-to-Device (or C2D) messages, which function more like fire-and-forget messages. I decided to use C2D messages. To receive these, the MQTT client needs to subscribe to the `devices/{deviceID}/messages/devicebound/#` topic filter.

```cpp
if (client.isConnected())
{ 
  Particle.publish("mqtt/status", "connected");
  bool msgSubResult = client.subscribe("devices/" + deviceID + 
    "/messages/devicebound/#", MQTT::QOS0);
  
  Particle.publish("mqtt/message-sub-result", msgSubResult 
    ? "subscribed to hub messages" 
    : "subscription failed");
}
else
{
  Particle.publish("mqtt/status", "failed");
}
```

With the subscription set up, the last step is to define the callback. On the electric io side, my plan was to send a payload to the device that contained at least a property named `methodName`, which would correspond to a brewing mode on the device, like “brew,” “ferment,” or “stop.” On the firmware side, that meant I needed to receive and parse the payload to extract the `methodName`. Thankfully, there’s a great [JsonParserGenerator library](https://github.com/rickkas7/JsonParserGeneratorRK) for just this purpose.

```cpp
void mqttCB(char \*topic, byte \*payload, unsigned int length)
{ 
  char pload[length + 1]; 
  memcpy(pload, payload, length); 
  pload[length] = NULL; 
  
  jsonParser.clear(); 
  jsonParser.addString(pload); 

  if (jsonParser.parse()) { 
    String methodName = 
      jsonParser.getReference().key("methodName").valueString(); 

    Particle.publish("mqtt/message-method", methodName); 

    setBrewMode(methodName); 
  }
}
```

This method takes the payload byte array, converts it to a character array, loads it into the `jsonParser`, and extracts the `methodName` from the payload before calling the `setBrewMode` function, which [fires off a number of actions based on the mode string](http://(https://github.com/bsatrom/brew-buddy/blob/master/brew-buddy-firmware/src/brew-buddy-firmware.ino#L365).

With MQTT in place, I was able to turn my electric io dashboard into a control panel!

#### Sending Messages from Electric IO to a Particle-powered project

Electric Io provides a Button type that makes it easy to call functions and send messages. Just select “button” in the Card Type dropdown and click “create.”

![](https://blog.particle.io/wp-content/uploads/2019/03/CreateButton.gif)<figcaption>Creating a new button card in electric io</figcaption>

Once you’ve created a button, you’ll need to choose the call type. If calling a Direct method on an Azure IoT device, you’ll want to specify the methodName and an optional payload. For a message, which is what I used, there’s no methodName, but you’ll want to specify a payload. In the example below, I define a payload of `{‘methodName’: ‘brew’}` to tell my device to move into brewing mode.

![](https://blog.particle.io/wp-content/uploads/2019/03/BrewMessage.gif)<figcaption>Defining the button call type and payload</figcaption>

After saving button settings, the card will change into just a title and button. To test, I can just click away!

![](https://blog.particle.io/wp-content/uploads/2019/03/StartBrew.gif)<figcaption>Triggering a C2D Message with electric io</figcaption>

And if everything was configured on the firmware side correctly, I’ll see my device respond to the inbound message from Azure IoT!

![](https://blog.particle.io/wp-content/uploads/2019/03/StartBrewDevice.gif)<figcaption>Brewing begins when the message is received!</figcaption>

### What’s next?

As an [endless tinkerer](https://dev.to/bsatrom/building-iot-firmware-with-azure-pipelines-and-particle-2m30), I’ll never claim that a project is done, but I feel pretty good about where this project is in terms of being on new Particle hardware and leveraging a sweet, cloud-based control panel.

I suppose the next logical step is to brew some beer!

If you’re interested in seeing the nitty-gritty as I assembled my custom PCB and built out the Azure IoT Hub integration with MQTT, you can check out the live stream replays below. I stream my IoT builds on Mondays and Thursdays on Twitch, so be sure to follow and join me for more Particle-powered fun!

- [Part 5 – PCB Soldering and Assembly](https://youtu.be/33dgf-r6pe4)
- [Part 6 – Implementing Sleep modes and fermentation support](https://youtu.be/t-lQW4xnHA4)
- [Part 7 – Integrating Brew Buddy with Azure IoT Hub and electric io](https://youtu.be/GVgVbZCyZ5w)
- [Part 8 – Adding MQTT Support to Brew Buddy firmware](https://youtu.be/eJM_d4UVQ9Y)
- [Part 9 – Adding MQTT Support (continued)](https://youtu.be/GJ9Qs-vwPyU)
- [Part 10 – Implementing C2D Message Support in electric io](https://youtu.be/ZMyPXpL0l44)
- [Part 11 – Implementing C2D Message Support in electric io (continued)](https://youtu.be/Iol2KemBENE)

The post [How to build a control panel for your Particle-powered brewing projects](https://blog.particle.io/2019/03/27/how-to-build-a-control-panel-for-your-particle-powered-brewing-projects/) appeared first on [Particle Blog](https://blog.particle.io).