Scale/Change the Display Size of a Project for Same Device Type

How to
1

What do you want to achieve?

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

image
image888×437 46.2 KB

The screen is now resized though - but all the GUI widgets are the same size and in the same locations.
image

Others

  • SquareLine Studio version: 1.3.0
  • Operating system: Windows 10 Pro
  • Target hardware: ESP32S3 - 480x270 LCD (no TFT) 4827S043
2

The supported development boards have a display with a given resolution so we have limited the resolution accordingly.

Good point.

If you would like to create a responsive UI you can use percentage unit for width height and x and y and the flex layout.

3

Ok thanks for the repsonse.

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.

4

Yeah, but I really don’t recommend to update the project file manually. That file is not for humans :smiley:

I think updating the units to % would be much simpler even if you have a several screens.

5

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.

6

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.