What ever settings I use in config.lua or build.settings, I cannot get it to properly fill the browser
It either leaves blank spaces top/bottom or left/right
I have tried the defaultMode, defaultWidth/Height etc
Obviously I do not know the size of a users browser so need to to scale to fill it
Hi,
What is your scale key set to in config.lua?
-dev
At moment, zoomStretch but also tried zoomEven, adaptive and letterbox
I notice all examples shared by others seem to have same issue
e.g. https://roaminggamer.github.io/RGDocs/pages/html5_tests/tests/h5_asteroids
Hi,
I’m not certain of your apps use case, but I recommend removing all the defaults from the build.settings in regards to sizing. Go with “landscapeRight” as the orientation. Set config.lua to “letterbox” and make sure to set a good size ratio for landscape.
At that point everything is working as it should. The app will be scaling, keeping the correct aspect ration, without distortion, which I think you would want.
The issue you’re running against is as opposed to a device, the browser can be resized at will by the user, so this needs to be handled in one of two ways. You either decide on a set size (using defaultMode), or what I outlined above. In either case you will need to add a background/background color to handle the overflow, just as you would in a device app using letterbox scaling.
I add a black background to my apps, but you may need or want a different color. You set the hex color in index.html (and index-debug.html if you use it) by adding it to the style tag near the top of the page:
\<style\> body \> div { ... background-color: #000000; /\* bg color \*/ } \</style\>
At this time I think that is the best that can be done. The index(s).html are not overwritten during builds.
Hope that helps.
-dev
Please note: I haven’t re-built those babies for while so they are not using the latest Corona HTML5 features and capabilities.
Thanks Chris
The use case is that I want the app to fill the browser when it launches and when its resized I need to fill the browser again just like any normal (non lua) web application.
I dont care about distortion, I can handle that in the app and recalculate positions and sizes of objects etc.
Thanks, but I dont believe that rebuilding them would make any difference. I cannot get an application to fill a browser window properly.
Hi,
I think you’re wanting the canvas layer to fill the whole browser. I’m not sure if that is possible ATM. You will need to wait until @vitaly1 chimes in.
-dev
Hi,
So this is as close as I could get at this point: https://coroniumcore.com/html5/fullcanvas/
You can download the source here https://s3.amazonaws.com/develephant-html5/fullcanvas.zip
The main caveat is that is the app goes full screen when it’s clicked. Look at the index.html, build.settings, and config.lua in particular for changes.
Hopefully this can be a feature that is added without it going fullscreen on the first click. It doesn’t do it after the first time.
-dev
Agreed, canvas cannot fill whole window because canvas’s width/height ratio should be always same.
I see what you are saying but if I build an app for windows or osX, the aspect ratio does not have to always be the same
The app window is re-sizable to any ratio and the code can account for that and re-position objects etc
Display default background color will be propagated to canvas.parentNode with build #3275
Hi,
What is your scale key set to in config.lua?
-dev
At moment, zoomStretch but also tried zoomEven, adaptive and letterbox
I notice all examples shared by others seem to have same issue
e.g. https://roaminggamer.github.io/RGDocs/pages/html5_tests/tests/h5_asteroids
Hi,
I’m not certain of your apps use case, but I recommend removing all the defaults from the build.settings in regards to sizing. Go with “landscapeRight” as the orientation. Set config.lua to “letterbox” and make sure to set a good size ratio for landscape.
At that point everything is working as it should. The app will be scaling, keeping the correct aspect ration, without distortion, which I think you would want.
The issue you’re running against is as opposed to a device, the browser can be resized at will by the user, so this needs to be handled in one of two ways. You either decide on a set size (using defaultMode), or what I outlined above. In either case you will need to add a background/background color to handle the overflow, just as you would in a device app using letterbox scaling.
I add a black background to my apps, but you may need or want a different color. You set the hex color in index.html (and index-debug.html if you use it) by adding it to the style tag near the top of the page:
\<style\> body \> div { ... background-color: #000000; /\* bg color \*/ } \</style\>
At this time I think that is the best that can be done. The index(s).html are not overwritten during builds.
Hope that helps.
-dev
Please note: I haven’t re-built those babies for while so they are not using the latest Corona HTML5 features and capabilities.
Thanks Chris
The use case is that I want the app to fill the browser when it launches and when its resized I need to fill the browser again just like any normal (non lua) web application.
I dont care about distortion, I can handle that in the app and recalculate positions and sizes of objects etc.
Thanks, but I dont believe that rebuilding them would make any difference. I cannot get an application to fill a browser window properly.
Hi,
I think you’re wanting the canvas layer to fill the whole browser. I’m not sure if that is possible ATM. You will need to wait until @vitaly1 chimes in.
-dev
Hi,
So this is as close as I could get at this point: https://coroniumcore.com/html5/fullcanvas/
You can download the source here https://s3.amazonaws.com/develephant-html5/fullcanvas.zip
The main caveat is that is the app goes full screen when it’s clicked. Look at the index.html, build.settings, and config.lua in particular for changes.
Hopefully this can be a feature that is added without it going fullscreen on the first click. It doesn’t do it after the first time.
-dev