Floating Playback Controls

There has been some suggestions to build a mini floating HUD to control the sketch – see #8. This could be useful in the interim until a more complete GUI system is added (see #20).

It would probably need to handle the following:

• Buttons to export a single frame and start/stop recording a frame sequence
• Button to play/pause loop
• Button to stop loop (going back to frame 0)
• Button to git commit & export (Ctrl + K)
• Skip to first frame / last frame
• Skip forward / backward by one frame

This seems like a good idea. One potential issue is that canvas-sketch is designed to work with multiple instances of itself (for example – if you are building a blog post with many canvas elements throughout), whereas HUD generally implies a singleton design. One solution might be to absolutely position the HUD just underneath the canvas element (or in the corner if the canvas fills the page) so each can be controlled independently.

If you’d like to help contribute, I think what would be most useful is posting different sketches and ideas in terms of the UX, layout and design of this sort of HUD/toolbar.

If it is floating below the canvas, it could be great to show a little ruler with ticks and dimensions (in user units, like inches) along the width and height of the canvas.

[joshwcomeau]

Ok! I tried some stuff out, came up with a few possible ideas.

First, I was inspired by software like Photoshop, which have an array of controls aligned along the left edge. I tried it in a “floating buttons” style, as well as with a backdrop to make it feel more like a toolbar.

The idea of a “toolbar” isn’t quite right, though, since they aren’t exactly tools that you can select, they’re controls that can be activated. So I don’t know that this is the right direction… although maybe it’s still intuitive enough?

Next I tried having the buttons positioned absolutely below the canvas, as @mattdesl suggested. I kinda like it!

I also played with having it be stuck to the bottom of the screen, with a backdrop:

And, finally, I imagined it having a draggable handle, so the user could put it wherever they wanted:

Each design shares the same button/icons. I tried to make them match the style of the existing canvas UI without being so similar that it seemed like mini-canvases. I also realized that they form logical groups, and used spacing to show which items are related.

I imagine each button could have a tooltip on hover, to explain what it does, since the icons aren’t entirely intuitive.

If it is floating below the canvas, it could be great to show a little ruler with ticks and dimensions (in user units, like inches) along the width and height of the canvas.

I think having a ruler, or another way to measure distances in user-supplied units, is really interesting! But I kinda feel like that should be its own issue? I can think of a number of ways to tackle that, and I think it might expand the scope of this feature quite a bit if it’s tackled at the same time. Just my humble opinion though =)

Again, while I’m working on my design skills, they’re not quite there yet. I expect many folks in this community will have a better eye for UX and UI design =)

[joshwcomeau]

++ to the suggestions for a timeline scrubber! Moving easily through ranges is one of those things GUIs are great for (compared to CLI / shortcuts).

To be honest, I haven’t used canvas-sketch for anything animated (so far my experimentation has been pen-plotter focused), so I’m super not the best person to attempt a design for it.