Hotkeys for Exporting & Controlling Sketches

As brought up by this thread by @fturcheti, it might be nice to get some feedback on hotkeys and “how to control the sketch” in a nice and easy way.

Currently these hotkeys work:

• Cmd + S / Ctrl + S = Export Single Frame
• Cmd + Shift + S / Ctrl + Shift S = Start/Stop Recording Multiple Frames
• Cmd + K = Commit & Export Single Frame
• Space to play/pause (only for animated sketches)

One issue with Cmd + S is that it sometimes triggers the native save dialog, i.e. when done from within DevTools. Unfortunately it doesn’t seem like a simple solve, since keydown events aren’t triggered in the window when DevTools are in focus.

I’m not sure if there are better default keystrokes for these – maybe some additional hotkeys could be added (e.g. stop/reset playhead), or some removed (the play/pause does not really fit right now). Maybe there is also some other method of exporting & controlling sketches that I have not considered.

[fturcheti]

@mattdesl The idea of a HUD with playhead and states controller is awesome, but definitely laborious. Maybe it’s an item to keep on a list of long term plans.

For now, I’d suggest something along the lines of what @guidoschmidt described above: a hidden GUI with (1) buttons to trigger the actions already defined with shortcuts, and (2) a help text describing these available keyboard shortcuts.

The GUI could be a hidden sidebar or popup toggled with a click on a discrete button placed on some corner of the screen – something like a [?] or a [i] or a [☰]. And here is a sketch of its content:

Exporting

[Export image] [Export frames] [Commit & Export]

Animation

[First frame] [Previous] [Play/Pause] [Next] [Last frame]

Shortcuts

Cmd + E = Export single frame Cmd + Shift + E = Start/Stop recording multiple frames Cmd + K = Commit & Export single frame

For animated sketches only:

Space = Play/Pause the animation loop ← = Previous frame → = Next frame Cmd + ← = Go to first frame Cmd + → = Go to last frame

[guidoschmidt]

@fturcheti I like your sketched out idea 🥇! Having such a tiny HUD UI on hotkey (maybe visible by default) could be also used to simplify the onboarding process and the learning curve for beginners with features like linked documentation, examples etc.

@mattdesl Maybe some plugin-architecture that works like a middleware could work well in that scenario, such as you import your plugin and pipe it through canvasSketch (UI properties could be passed in via props?):

canst canvasSketch = require("canvas-sketch")
const canvasSketchUI = require("canvas-sketch-ui")

// Setting up a UI could definitely have a better API
// as the quick sketch I'm layed out here
const myUI = canvasSketchUI.create({
    backgroundColor: "#FFF"
})
canvasSketch.plugin(myUI)

const sketch = () => {
  return ({ context, canvasWidth, canvasHeight, ui }) => {
      // Access UI defined properties
      context.fillStyle = ui.backgroundColor
      // ... rendering
  }
}

const settings = {}
canvasSketch(sketch, settings)

Unfortunately I’m currently quite busy with other stuff, but I would love to experiment with setting up UIs in canvas-sketch a bit more 🙂