I have an existing project for a display size of 720x480 that uses an ESP32S3, I would now like to use the same project (including the same GUI assets) on the same device type with a different screen resolution - now to use 480x280. Is there an easy way to re-use a project and just scale the whole GUI automatically ?
What have you tried so far?
When I tried to change the resolution in the project settings dialog it would only let me change the Width from 720 to 480. Then everytime I tried to change the height to 280 it changed it back to 480, so I ended up with 480x480. I presume I cant change the screen size ? If so they should be greyed out, if I can, then this should work.
I tried to manually edit the files in the source folder and changed the resolution in the .spj and .sll files, setting the height to 280, and the width to 480 - but when I open the project it has changed the screen size correctly, but the project settings still say 480x480.
Now when I open that project, obviously all my GUI widgets are still in their original size and location. What I wanted was the IDE to scale the sizes, reducing the size by the same ratio of my screen resolution reduction, and also to move the GUI widgets to the right locations.
Screenshot or video
Resolution - couldnt change height from 480 to 280
Are all the GUI qualities like height, width, location x, location y, stored in the project file ? If so, I can calculate the width and height scaling ratios (based on original screen dimension/divided by the reduced screen size dimension), and then multiple all the GUI values in the project file by that those x and y ratios. I understand it won’t be perfect, and will require a manual clean up, but it’s probably a faster way to recreate the project, and a good starting point.
I would definitely use a % based layout for my widget sizes and locations in all future projects, especially if the project may be applicable to >1 screen resolution. Its a shame the GUI cant just convert them all automatically.
I noticed that the location x, location y coordinates assume the CENTER of the screen
is (0,0) which makes the coordinates either positive or negative from the center ???
Is there a way to set the screens with (0px,0px) being one corner and (800px,480px)
to be the opposite corner?
I need to dynamically position my components and using the center (0,0) with positive and negative values makes that unnecessarily complicated.
For objects that you want to have coordinates (0,0) at the top-left corner of the screen, you need to modify their alignment from ‘CENTER’ to ‘TOP_LEFT’ in the Inspector panel.