Canvas Drawings

Recently I got myself an Elgato Stream Deck. I’ve had some fun configuring it, but - besides some scripting functionality - I was missing a decent On-Air Clock for one of my keys.

Coming from the broadcasting industry, I have to say that I love those kind of clock faces. They emit this distinct feeling of a studio and everything associated with it, which I love (as well as studios in general).

So I started studying the Elgato SDK documentation, which is not quite the best, and also started reverse engineering some of their sample plugins. Especially the one which draws the analog clock.

I could not really figure out how generating the plugins works, but at least I got a rough Idea how I could start doing this. Plugins can be made of a variety of programming languages. Of course, being a script kiddie, I decided to use javascript because it gets me there the fastest. Also I learned, that the Elgato developer used canvas to draw the clock.

After not really having an Idea how to build the plugin itself, I decided to start with just building a pure javascript & HTML prototype and first getting the code done required to draw the clockface and bring it to live. As I’m not that familiar with canvas drawings and especially not the best at trigonometrics, I was following this awesome tutorial to build a classic analog clock first. Afterwards I started to build a function drawing the 60 dots, then I built a function filling the first X dots by the seconds passed. Afterwards I introduced a scale with the hour marks and printed the time digitally in the middle. This is how it looks like:

I know it has not the best resolution, but that’s by intention, as stream deck’s display also doesn’t have a high res display. I’m having fun here. With trigonometrics! I guess my old maths teacher wouldn’t believe that.

Now that the clock drawing works, I’ll have to figure out how to put into a stream deck plugin next.