Floating Playback Controls

[mattdesl]

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]

I think this UI is a really neat 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.

Hm, I wonder if it could be enabled/disabled through a setting?

export default {
  dimensions: [8.5, 11],
  orientation: 'portrait',
  units: 'in',
+  showControls: true,
};

Another alternative could be to do this via a Chrome extension? That way it's something developers explicitly opt in for. I'm not sure it'd work in the case of a blog post with multiple instances (I imagine it would just trigger keyboard shortcuts, so it wouldn't know which to target), but then you wouldn't really need it "in production"

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.

I'll play with it a bit and see if I can come up with something... my design skills are WIP, though, so I may defer to someone else =)

[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]

I designed this in Figma, so if anyone wants to play around with it, here's the link: https://www.figma.com/file/FYx6whWAHf33QfIxs9BJTlm6/canvas-sketch-buttons-UI?node-id=0%3A1

[mattdesl]

Woah, this is great! Really cool stuff @joshwcomeau, thanks for working on it. :clap: I'm going to take a closer look this week – personally I am leaning toward the floating-right-below-the-canvas as it makes the most logical sense with the architecture of supporting multiple sketches in a single application, but it can 'snap' to a certain edge of the screen on full screen mode.

[joshwcomeau]

personally I am leaning toward the floating-right-below-the-canvas as it makes the most logical sense with the architecture of supporting multiple sketches in a single application, but it can 'snap' to a certain edge of the screen on full screen mode.

Sounds good! Glad they're helpful =) happy to contribute to this project, which so far has been a delight to use.

To make sure I'm understanding: what is the situation in which you'd want to show this UI with multiple canvases? I thought that during development / while making art, you only work with a single one at a time. And in production / while displaying the art, you could embed multiple canvases within a blog post or other website... but in that context, I don't think you'd want these controls... or would you? Maybe it's still helpful for readers to be able to interact with it?

[Pixelrobin]

I think it would also be nice to have some sort of scrubbing interface to be able to scroll through the animation at your own pace or to jump to a specific section. Though this seems to be a feature of the other incoming GUI feature.

Also, if there are plans to have a site embed sort of thing, wouldn't it be more elegant to hide the controls behind some sort of subtle toggle? Maybe something like a double click to show/reveal the controls with a message below the canvas on hover explaining that?

[pbeshai]

When I was building a similar tool, I really enjoyed having a scrubbing timeline where I could define subsections, turn on/off ping-pong or reverse or looping. Made for interesting creations when you didn't fully erase between frames.

Also it might be nice to have any GUI controls be turned off with an option. I sometimes like having no distractions on the page vs having buttons floating directly beneath the canvas.

[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.