Using a Stream Deck for productivity — a software developers solution

I recently purchased an Elgato Stream Deck. As the name suggests, a Stream Deck is geared towards people who stream content on YouTube or Twitch. I fall into neither of these camps, nor am I setting out to become a streamer.

Streamers will often setup their Stream Deck so that keys toggle actions such as starting and stopping streams, stream effects and other such actions. I wanted to see if I could use a Stream Deck to make myself more productive by having a handful of useful actions always readily available via a Stream Deck.

I actually bought the Stream Deck several months ago, and have already been using it on a daily basis for a while. I’ve only just had the time to finish writing the software so that it works how I originally intended it to work.

Here is a quick demo of what this looks like:

Why write your own software?

There are also other open source projects out there for controlling a streamdeck-ui. With streamdeck-uii, you can setup a key to run a specified command and have a static icon. Earlier versions of the official Elgato software also worked like this.

Although there is nothing wrong with using the Stream Deck to display static icons, I felt there was an opportunity to make the control software a little smarter, so that:

  • The icon on a key could change dynamically based on state
  • Keys could be fully animated to show something like a clock or timer in real timei
  • The software could be designed so that people can write their own plugins and controls for integration with other software (e.g. Slack, Home Assistant, etc.)

Building the Software

Concepts and Terminology

My current Stream Deck configuration

Let’s refer to each physical button as a key.

Within DevDeck there are two main concepts: Control and Deck.

A control is used to perform an action when a given key is pressed. A control represents the most basic element that can be displayed in a Stream Deck.

The top-left key is an example of a control. Pressing the key with toggle the microphone between being muted or un-muted and the icon will change accordingly.

A deck is indented to deal with either of the following scenarios:

  • Needing to display more controls than the device has physical keys for, or,
  • Showing a subset of relevant controls.

The Volume and Slack keys are examples of where a deck has been used:

The Volume and Slack keys link through to their own Decks.

So, if I select one of those two keys, the Stream Deck view will be re-rendered to show a set of keys (either controls or more decks) that are relevant to that specific action.

When I select the Volume key, I get the Volume deck:

After pressing the Volume key on the main deck I now see my Volume deck

When I select the Slack key, I get the Slack deck:

After pressing the Slack key on the main deck I now see my Slack deck

Programming Languages

  1. I ran through a load of publicly available example code and the library worked well and seemed robust
  2. The library was very well documented
  3. For me Python is a familiar language, so I’d be comfortable building the rest of the software in Python.

UI vs Configuration Files

YAML should also make it easy for plugin developers to capture any necessary configuration from the user, such as 3rd party API keys.

Here is an example of a configuration file:

decks:
- serial_number: "ABC123"
name: 'devdeck.decks.single_page_deck_controller.SinglePageDeckController'
settings:
controls:
- name: 'devdeck.controls.mic_mute_control.MicMuteControl'
key: 0
settings:
microphone: Scarlett Solo USB Digital Stereo (IEC958)
- name: 'devdeck.decks.volume_deck.VolumeDeck'
key: 1
settings:
output: Built-in Audio Analogue Stereo

When DevDeck launches, it needs a Deck to display for the given Stream Deck device. In this instance I’m displaying a SinglePageDeckController which allows its keys to be either controls or decks. In this particular example, key 0 is a control for muting/un-muting a microphone and key 1 is a deck for controlling the volume.

Because SinglePageDeckController can be configured with either controls or decks, it's even possible to nest a SinglePageDeckController inside a SinglePageDeckController.

Graphics

When implementing a control it is possible to render a static image file if that’s what is needed:

with context.renderer() as r:
r.image('/your/static/image/png').end()

However, DevDeck provides a DSL for graphical rendering which makes it possible to compose elements together to make the graphics that are required for a given key.

with context.renderer() as r:
# Display the percetange
r.text("{:.0f}%".format(round(self.volume, 2) * 100)) \
.center_horizontally() \
.end()
# Display the icon below the percentage
r.image('volume-up-solid.png')\
.width(380)\
.height(380) \
.center_horizontally() \
.y(132) \
.end()
# Colorize the whole image if the volume is currently set to this level
if round(self.volume, 2) == round(sink.volume.value_flat, 2):
r.colorize('red')

The above extract is from the implementation of the VolumeLevelControl that is used in the volume deck:

Each key uses the same speaker icon. The icon positioning, text rendering and colorizing (if applicable) is all handled with a few lines of code by the Rendering DSL that is provided in the DevDeck core library

Plugins

DevDeck ships with a small handful of built-in controls and decks that are fairly generic and independent of any third-party integration. Anything out side of that has to be built as a plugin.

I’ve built a couple of plugins already for a few things that others may find useful. This has allowed me to test out the plugin development experience for myself, as well as providing good examples for anyone wanting to develop their own plugins.

DevDeck — Slack — Provides a Slack deck that lets a user quick change their presence, status or DND settings. As a direct result of building this plugin, emoji support has been added as a core feature of the Rendering DSL provided by the DevDeck Core library.

DevDeck — Home Assistant — Provides toggle controls for lights and switches that are managed by Home Assistant.

I’ve also built a custom plugin for anything that’s entirely unique to my situation — such as controlling the homemade LED light strip on my desk.

Summary

One of the things that I’ve enjoyed about using the Stream Deck is that it has made conference calls for work much easier and slicker for me. Regardless of whatever conferencing software we happen to be using at the time I can immediately mute or un-mute my microphone from the Stream Deck, as the Stream Deck mutes the microphone at the operating system level. I never have to hunt around to find the mute button which can be a challenge if you’re unfamiliar with the conferencing software or are in the middle of a screen share and are getting buried by the various open windows.

And in a similar vein, I’m able to snooze Slack notification without having to open Slack, which can be very useful if I start receiving Slack messages in the middle of a screen share.

tl;dr — you don’t have to be a streamer to make good use of a Stream Deck!

As with most of my projects, all the code that I’ve written is publicly available and open source. Feel free to make feature requests, submit your own contributions or write a plugin!

Links:

Software engineer 🧑‍💻 and technology nerd 💻. Enthusiastic about designing high quality software.