Automatically make sketch active after pressing play

[chrisorban]

Nature of issue?

• Found a bug
• Existing feature enhancement
• New feature request

Details about the bug:

• Web browser and version: All browsers (and specifically firefox and chrome

• Operating System: Linux, windows, mac, probably chromebooks

• Steps to reproduce this:

After you press play on the p5.js web editor, I find that you also need to click the mouse on the sketch in order to get the keyboard keys to work (this is with any computer -- the issue has nothing to do with iPad compatibility). As a result, I have to write the user a message "click this screen first then use arrow keys!" like I do in this sketch:

http://alpha.editor.p5js.org/ChrisOrban/sketches/SkgBnZBJf

This is unlike the behavior when the sketch is fullscreen:

http://alpha.editor.p5js.org/full/SkgBnZBJf

In fullscreen mode you don't have to click anything and the keyboard keys work fine. This is the behavior I would prefer.

Is there any way to configure the web editor so the keyboard keys automatically work after you press play? In other words, the web editor assumes that you are about to use the keyboard keys in the sketch after you press play? Is there some kind of command to make the sketch active and ready to accept key presses as soon as play is pressed?

http://alpha.editor.p5js.org/ChrisOrban/sketches/SkgBnZBJf

Notice that I have to tell the user to click the screen before moving the arrow keys. Without this added the user has to magically know to click the screen.

Feature enhancement details:

I suppose you could view this as an enhancement of the play button

New feature details:

[catarak]

thanks for this suggestion! i think it is confusing, that a user must click on the sketch in order to interact with it. however, i think users could find this to be confusing/annoying behavior if it is the default or done without configuration. for example, imagine a scenario in which you're working on a sketch, iteratively, without auto-refresh enabled, typing in the left pane and refreshing on the right by using the "play" keyboard shortcut (return + command). it would be really annoying to have to refocus on the left pane every time you refresh the sketch!

so what i'm saying is, maybe this would make sense to add as a preference? i'm not sure the clearest way to handle this and i am open to options.

[chrisorban]

A preference would solve the problem, but I would like to make sure that the preference gets saved when you save the code so that the next time you open it up you don't have to select it. This is important because I will be the one saving the code and some other user will be the one opening it up and running it.

The other option would be some kind of makeSketchActive(); command that you could add to the setup function.

[chrisorban]

I'm a little surprised that there isn't some hack or clever piece of code that could be put into the setup function or in index.html that would make the sketch active after pressing play.

[catarak]

sorry if i wasn't clear—i'm pretty sure it's possible to make the sketch active after pressing play. i'm saying that i don't think this is the right thing to do for all use cases, and i'm wondering if the best thing to do would be to put this in sketch preference, or possibly something else. my concern about putting it in a sketch preference is that one goal is to have as few preferences as possible.

[chrisorban]

I don't really need a sketch preference. All I need is the magic words to make the sketch active after pressing play.

[catarak]

i hear you! if you're cool with adding an extra line of code to your sketch, you can add

function setup() {
  this.focus();
  // ... continue with the rest of your setup function
}

you can add this.focus() outside of a p5 function if you are using Chrome.

[chrisorban]

Perfect!

This is super helpful, by the way, for iPads because you need to touch the canvas to make it active unless you use this.focus() Touching the canvas on an iPad sounds simple but it tends to highlight the whole canvas, turning it light blue. Using this.focus() is much better.

[siddhant1]

I will work on this :)