canvas-sketch

canvas-sketch copied to clipboard

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.

How about adding some HUD, that displays shortcuts (triggered/toggled by pressing ? or F1?) - It could also have buttons for exporting and maybe link to docs etc. 🤔

@guidoschmidt That would definitely be cool – one of my early prototypes of this tool had a slider HUD for the playhead (loop time), and state was persisted to local storage. So, for example, you could slide to 0.25% of the loop, pause & tweak code, and then continue playback to see the results. A bit like Bret Victor's "Inventing on Principle" talk. It's definitely a big undertaking, getting it all working though!

@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

Thanks for the feedback! I have been experimenting and agree that a full GUI would be a huge undertaking, and existing solutions like dat.gui always leave a little to be desired. I still haven’t found a way to express GUI controls as painlessly as e.g. Unity where it’s a language construct.

But yes maybe a small HUD that could be enabled/disabled would be valuable.

Matt

On Jul 14, 2018, at 5:51 PM, Felipe Turcheti [email protected] wrote:

@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

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

@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 🙂

In the ideas I outlined above I made a undeclared suggestion, so I'm making it explicit here.

To prevent triggering an undesirable "Save page" dialog window when trying to save frames with the focus on the browser's developer tools, I suggest changing the keyboard shortcuts to:

• Cmd + E = Export single frame
• Cmd + Shift + E = Start/Stop recording multiple frames

So instead of S to "save", we would have E to "export".

Thanks, definitely worth considering. One issue last I tried is that, when the DevTools is focused, you won't receive events on the browser/window page. So, the keystroke will do nothing. This is maybe preferable to a big "Save As" dialog, though.

Another much smaller issue is that "Cmd + E" is used for Edit > Find > Use Selection for Find. I don't think anybody would miss that, though.

One issue last I tried is that, when the DevTools is focused, you won't receive events on the browser/window page. So, the keystroke will do nothing.

Oops, haven't noticed that. In this case I don't know if my suggestion is a really good option. Because with Cmd + E you would get no response, so you could think you have exported that frame you actually have not. And with Cmd + S you would get that undesirable dialog but that's a feedback that "something is wrong" and you're not exporting your frame.

++ to the idea of adding some minimal UI to enable exporting. I'm bad at reading docs, and I spent my first few hours with this project not realizing it was possible to hit Cmd+S to save!

I know that there's some work to add a GUI in https://github.com/mattdesl/canvas-sketch/issues/20, but I wonder if we could start with something much more minimal. I'm imagining just a floating save button in the top left (maybe a series of buttons, for things like toggling recording a sequence for animation?)

Another tweak I'd love to see is to have some sort of indication in the UI that a save is in progress / was completed successfully. At first I thought it was broken, since there was nothing in the UI to indicate it had worked, and a brief delay meant I didn't see it in the filesystem either.

Happy to hack on this idea a bit, if the direction seems worthwhile. Of course I'd also understand if this is the kind of thing you'd want to tackle holistically with other design elements =)

@joshwcomeau FYI if you work with the console open, canvas-sketch outputs messages during saves, commits, and animation frames being recorded, which works pretty well for now until more UI is built (if ever).

@joshwcomeau FYI if you work with the console open, canvas-sketch outputs messages during saves, commits, and animation frames being recorded, which works pretty well for now until more UI is built (if ever).

Ah, thanks for the heads-up! I think there's still quite a bit of value in having an explicit UI, since presumably many newcomers won't think to check their console... but yeah, glad to learn about it :)