Playground Improvements

[nick-thompson]

The browser playground is one of the most popular pages of the website, and it's very much my intention to lean into that to provide a really compelling first-touch with Elementary for new users, and a place for existing users to explore and iterate quickly.

Right now, it's a bit lacking in features, and the error handling story could be a lot better. Part of the Elem v4 roadmap is a much better error handling story across the library, which we can surface easily in the playground at that time. In the meantime, I'd like to hit a couple of features that extend the usability of the playground. I'll check these off below

• Use hotkeys to evaluate/render user code instead of automatically rendering on every keystroke
  • shift + enter to render
  • cmd/win + shift + enter to reset the runtime, reload the VFS, and re-render
• When the above is done we can effectively remove the bottom bar from the page layout and create more room. At the same time, I'd like to rearrange the right hand side into three panels stacked on top of one another: a console panel, and two plot panels
  • The console panel initially reads a very brief UX guide: "shift + enter to start, cmd + shift + enter to reset" and a link to the docs. Inspiration: https://zen.cephasteom.co.uk/
  • Once the user begins working, the console panel overwrites/updates itself on each render with either the latest error message or the latest render stats
  • The plot panels are initially blank, but begin real-time drawing as soon as the user renders a scope, meter, or fft
• Add support for mic input
  • This is just wiring the web media stream to the elem node and giving the user some config panel to allow them to enable it
• Add support for midi input
  • This is quite like the new web midi tutorial on the docs site, again with a config panel for the user to enable it
  • This one also has big implications for how user code should address state changes over time. I have a design for this already that I'd like to implement, but if any contributer wants to tackle this before me let me know! We can open a new issue with further details