Canvas to Base to git

After I built and refined the canvas drawing routines for the on air clock plugin on stream deck I’m planning, I’m now back to bringing the code actually to stream deck. And I was successful, at least partially.

As written in my last post, I failed to understand how they are updating the view of the stream deck plugin. As an ambitious athlete, I can’t admit defeat so easily and kept digging. Turns out the solution was rather easy, I was just missing the function that did the actual updating in the original analog clock plugin. Or maybe I didn’t just expect that it is that simple.

The flow is as follows:

1. Instantiate a canvas element in the DOM of the index.html.
2. Do all the drawing operations required
3. Convert the canvas data to a base64 encoded png using the js toDataURL() function (shame on me, I was missing on that step)
4. Update the stream deck button’s image using $SD.api.setImage() API function.

To do this every second, as required within a clock, I just used a setInterval() function with 1000ms (it seems that elgato did some patches on timers for stream deck). The timer is installed with the onWillAppear() action of the stream deck plugin’s app.js.

And it works! Now I have a simple on air clock on stream deck! Yeah!

Working instance of the onair clock in stream deck software

Unfortunately, I’m not at home and don’t have a physical stream deck with me, so I can just test using the preview software and the stream deck app on my iPhone.

To get started, I used the stream deck plugin sample, minimalised it and put my code inside. Still lots of work required.

As this is now a working prototype and I can begin moving this into a more final version I’ve set up a git repo and put it on github: streamdeck-onairclock

Things feel better when they’re under version control. Especially when I continue to break stuff while experimenting with it. Next up is fiddling around with stream deck software’s property inspector and managing to make the colors configurable by user.

I am not really sure if I want to just put three text inputs there, where the user can put HEX color values or if more user friendly sliders or presets are the way. First I need to manage saving settings and sending them to the plugin.

Also, I’m thinking about making the information displayed configurable. Checkboxes for ‘show seconds’ and ‘show date’ at least.