canvas-sketch icon indicating copy to clipboard operation
canvas-sketch copied to clipboard

Floating Playback Controls

Open mattdesl opened this issue 5 years ago • 8 comments

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.

mattdesl avatar Nov 25 '18 23:11 mattdesl