Update the emscripten template to allow for starting app without any html decoration

[ofTheo]

Currently all Emscripten builds produce the same sort of html output.

We've been discussing having Debug show the current view, but Release builds being full window by default.

Something like the following:

Debug:

Release:

or

Release:

Some other options would be to have it set via code. It could be done via the window settings in main.cpp, or a static call the later would keep the main.cpp non emscripten specific.

ie:

ofxEmscripten::setLayout(ofxEmscripten::Debug);
ofxEmscripten::setLayout(ofxEmscripten::Minimal);
ofxEmscripten::setLayout(ofxEmscripten::FillWindow);

( not sure if that is the correct api approach, but just to give an idea )

cc @dimitre @Jonathhhan @NickHardeman

Note: I don't think it is possible to have an emscripten app start in Full Screen, but that might be worth looking into at the same time.

[NickHardeman]

+1 for Fill Window as default for Release build.

[Jonathhhan]

There are two basic fullscreen options: "real" fullscreen and soft fullscreen. Soft fullscreen (full window) seems to be possible as a default.
https://glow3d.com/blog/2019/10/fullscreen-in-emscripten
Both have several options. Use fullscreen with resize canvas option (you can toggle that in the browser). It works very well for most examples, but some behave kind of strange (billboardRotationExample for example - maybe adjust those?).
Another option is to scale everything, but that can cause artifacts from stretching / resizing.
A third option would be to keep the original size in the center of the screen and have a black / white border.
There are more options, of course...
Edit: I also think fill window (soft fullscreen) is the best, maybe adjust a few patches (not sure, how easy that is)?

[Jonathhhan]

Here are some example that do not look as "expected" with resize canvas (but most do). With expected I mean, that the object is centered or resized:

advanced3dexample
modelnoiseexample
all cv examples
simpleeventsexample
billboardrotationexample
fbotrailsexample
mtextureshaderexample
pixelbufferexample
shaderexample
textureexample
screengrabexample
fontshapesexample
fontsexample
graphisexample
rectalignmentandscaling
dirlistexample
imagesaverexample
noise1dexample

[NickHardeman]

I tried out soft fullscreen recommended by @Jonathhhan and it feels pretty good for the assimp example.
If the app is started with OF_FULLSCREEN or OF_GAME_MODE (in main.cpp), the it enters soft fullscreen on launch. This example can toggle fullscreen with 'f'. When the app exits full screen it returns back to soft fullscreen.
If the app is started with OF_WINDOW, then it functions the same as before.

A few features to note:

• I added resize events for the window. A few too many get fired off when going from Fullscreen to soft fullscreen.
• Ability to prevent default for the touch to drag that moves the entire web page.
• Touch can emulate mouse. This enables ofEasyCam to work on mobile since it's tied to mouse. The touch events are still fired, but in this case so are mouse events for the first touch.

#if defined(TARGET_EMSCRIPTEN)
auto ewin =  dynamic_pointer_cast<ofxAppEmscriptenWindow>(ofGetCurrentWindow());
ewin->setTouchSimulatesMouse(true);
ewin->preventDefaultTouchMoveBehavior();
#endif

check it out, seems to work on iOS and Safari.
https://nickhardeman.com/temp/OFExamples/AssimpExample/

[Jonathhhan]

@NickHardeman very nice :)

[NickHardeman]

Here is an example that is windowed. I noticed that pressing the Fullscreen button with resize canvas selected does change the canvas resolution which is great.
When calling setFullscreen from OF, the canvas is currently not resized and there is no way to specify that at the moment. What should the default full screen behavior be for going into fullscreen from OF? Should it resize the canvas? Maybe the ability to specify?
https://nickhardeman.com/temp/OFExamples/AssimpExampleWindowed/

[NickHardeman]

I added the option to set the full screen scale strategy on the window. If none is set, then it acts the same as before.

#if defined(TARGET_EMSCRIPTEN)
auto ewin =  dynamic_pointer_cast<ofxAppEmscriptenWindow>(ofGetCurrentWindow());
ewin->setTouchSimulatesMouse(true);
ewin->preventDefaultBrowserTouchMoveBehavior();
ewin->setFullscreenScaleStrategy(EMSCRIPTEN_FULLSCREEN_SCALE_ASPECT);
bEnableAutoSwitch = true;
#endif

[NickHardeman]

@Jonathhhan, I noticed the touches have their id set to i inside the for loop. Any reason it shouldn't be set to the unique identifier?
https://www.w3.org/TR/touch-events/#idl-def-Touch