Change display aspect ratio

[arashsdr]

hi
first thanks for this project its very attractive
i have peugeot 206 1.6 16v petrol and installed 6.2inch android HU with 800x480 pixels resolution
when web page loaded in fullscreen , bottom of screen goes blank
is any way to change and fix this?

[0xCAFEDECAF]

Thanks 😊

The screen layout was designed for aspect ratio 19:9 (e.g. resolution of 2280 x 1080 pixels).

The only way to fit nicely into a 5:3 aspect ratio is to re-design the screeens.

You could tweak function resizeScreenToFit() to suite your needs. You can play with the calculation of the scale value.

[arashsdr]

I've tried different values ​​in the scale with no success, it seems that the scale calculation is based on the design of the aspect ratio of the screen, and when the scale is changed, the aspect ratio does not change.
no another way to change aspect ratio? all screens must edited manualy?

another problem is with background image , i used sketch data uploader to upload data folder without errors but its not work and file background.jpg doesnt exist to show

[0xCAFEDECAF]

Indeed, the screen layout is designed on aspect ratio 19:9, not 5:3.

To scale without preserving the aspect ratio, you could use the CSS "transform" property. For example like this to stretch the Y-axis appropriately:

$(":root").css("transform", "scale(1, " + String(19/9 / (5/3)))

To have your own background image, indeed you need to put a 'background.jpg' file in the data folder and upload it using "Arduino ESP8266 filesystem uploader". Also you need to uncomment line 170 in Config.h:

#define SERVE_FROM_SPIFFS

Please follow the detailed instructions as written above that line in the Config.h file. Most important is to set SPIFFS to "read-only" mode.

[arashsdr]

scale function worked but it start from center of screen not top-left (0,0) and cause screen to go out from top , so i added translateY (for moving screen in y axis) and scale together and works fine
also background problem solved
thanks for your help

[0xCAFEDECAF]

Nice 😃 Thanks for the update!