turn off mobile zooming, add editor zooming shortcuts and mobile useful functions

geikha commented 2 years ago

Changes are:

Editor class:

setFontSize(sz) :: sets the fontsize of the editor in the web
getFontSize() :: self-explanatory
const DEFAULT_FONTSIZE = 18 :: s-e, hardcoded value taken from the stylesheets
&show-code=false now hides the whole gui (by calling this.hide())
hide() now hides the whole editor, including the scroll bars

Keybindings:

Ctrl Alt + Increases the font size value
Ctrl Alt - Decreases said value

Why

Desktop

When using desktop browsers. Using the regular zoom in and out changes the size of the viewport. For this reason, the innerWidth and innerHeight of the webpage is not equivalent to the actual width and height on the screen. This can lead to Hydra loading with a lower or higher resolution than needed. Also, regular zooming in and out also affects the modal-header icons which may not be desired in some cases I guess (specially doing feedback from s0.initScreen)

Mobile

Users on mobiles and tables that have access to a physical keyboard can finally change the size of the code. This is also related to turning off mobile zooming (pinching gesture type zooming), which I believe is needed for getting the actual experience of the coded visuals and will also allow for use of pinch type gestures in coding interactivity for hydra (which you know i'm involved in right now with antlia).

Index / Global changes:

hideGui(clickback=true) :: function that does the same as Ctrl+Shift+H. I imagine this function would be used at the end of sketches instead of sending URLs with the show-code flag set to false. However, I also realized this would disallow mobile users without keyboards to see the code in the webpage, since with the URL flag you can simply reload the webpage. For this reason I added a clickback argument that defaults to true. When given this value (or any truthy) the editor will appear at the next click/tap. Coders doing interactive stuff that involves clicking or the total absence of a GUI can simply set this argument to false.
showGui() :: s-e
setFontSize(sz) :: Sets the editor's font size in pixels
Add user-scalable=no to the content of the viewport meta tag. Reason explained above.

geikha commented 2 years ago

Forgot to say I tested locally with desktop, mobile emulator (chrome) and chrome on android (with no physical keyboard).

ojack commented 2 years ago

I love the ideas behind this, but a few thoughts!

I am currently refactoring the editor -- please use the dev branch rather than main!
Fixing show editor and hide editor -- amazing!
Keybinds for scaling, and setting user-scalable I actually deliberately kept canvas scaling using innerWidth and innerHeight (rather than devicePixelRatio), as I personally use it as a shortcut to create lower or higher resolution sketches (i.e. zooming into the browser when I want a lower resolution sketch, then zooming back out once the page is loaded, and zooming back out to desired text). I am okay with switching to having a fixed zoom and using the keybinds, but I want to make sure that it is fully implemented and tested on mac, linux, and windows first, as this feature is really important during livecoding. In the future, I would like to also have a way to specify pixel scaling and resolution in the settings panel and url parameters.
showGUI(), hideGUI(), setFontSize() This introduces a new paradigm of adding functions to live code the editor from within itself. So far, one thing I have tried to do is keep the syntax consistent between hydra-synth, the editor, and the version in atom, and this seems like a hard break from that. I also don't like replacing javascript functions unless absolutely necessary. i.e. it is already possible to do these things using javascript. One thing we could think about is exposing an editor object globally, that would correspond to certain things within the editor (and would not be transferable to atom-hydra or hydra-synth). In my experience it can get a bit messy -- i.e. if you call hideEditor() to hide the editor, you no longer are able to type showEditor(). Let's start a github issue to discuss a potential API for livecoding the editor, as well as example use cases.

geikha commented 2 years ago

Okay, will do! I'll google how to change branches one of these days heh.
Thanks!
I agree! I also do the zoom in short-cut. User-scalable=no doesn't do anything on desktop luckily. It's only on mobile that it has effect.
True! Didn't even think about it much. I'll read your issues now.

btw lately both my electricity and internet service are spontaneously going off (i don't know what's the proper term in english for this) so I may be late to reply to stuff about this

geikha commented 2 years ago

Btw I just realized ( by seeing #159 ) that this totally should've been a PR draft. I didn't even know they existed heh. Lacking experience with some of this git stuff

geikha commented 2 years ago

closing so i can start a new fork from the dev branch; will come back with a new pr without hideGui() and stuff

hydra-synth / hydra