Portrait Orientation

How to
1

I’m trying to rotate my display image from landscape to portrait. When this is done in the SLS project settings it works fine in the user interface but has no effect on the actual display. When I change the orientation in the Arduino code, ui.ino, using the tft.setRotation( ) function, the image rotates but becomes scrambled as shown below.
Does anyone know how to get a portrait image on their display?

Orientation
Orientation927×567 120 KB

2

I got a new display, tried to rotate the image from landscape to portrait and still have the same problem with the image being distorted.
I’m sure someone at SLS or in the community has run into this problem or knows a solution.
Any help?

Thanks,
Bryan

Picture1
Picture1780×257 45.1 KB

3

Squareline now support only one orientation resp. too 180 flip for rectangle displays.
All orientation is possible on square or round displays with same width and height.

But if your plan is only portrait you can use it, but need more steps as set orientation.

4

Thanks Marian.

Does anybody know that steps to take to change the physical display orientation from landscape to portrait?

5

Your images dont show what you plan. For example your project is now configured
320x240.

  1. 320x240 hw driver for display in config driver and SQUARELINE project
  2. 320x240 sw driver config in ino setup part and flush
  3. set orientation maybe 0 for hw

If you change only 3 result is as you see.
If you change 2 and 3 to 240 x 320 then image will ok but cut part because design is landscape.
Then for ok you need complete 123 change to 240 x 320 and orientation 3

6

With your help I got there :grinning:

Here is a quick explanation for others working in the Arduino environment…

Changing orientation from landscape to portrait:

Leaving the screen and width settings as shown.
static const uint16_t screenWidth = 320;
static const uint16_t screenHeight = 240;

But changing tft.setRotation () to tft.setRotation (3) or tft.setRotation (1) gives you landscape or the landscape flipped 180 deg. Changing to (0), (2) or (4) rotates the screen to portrait but the image is scrambled as shown in the previous post.

Switching the screen and width settings as shown.
static const uint16_t screenWidth = 240;
static const uint16_t screenHeight = 320;

And changing tft.setRotation () to tft.setRotation (2)

Gets me the portrait view I was looking for.
Portrait

FYI, if I change the rotation 90 degrees (to give me a portrait view) in SLS, the SLS display rotates to portrait view but has no effect on the physical display.

SLS rotate
SLS rotate738×262 32.4 KB

7

Yes this is only for WYSIWYG.

8

I am using an Elecrow esp32 and the gfx driver
This worked for me

disp_drv.drawbuf = 1;  //added lines below here
disp_drv.sw_rotate - 1;
disp_drv.rotate = LV_DISP_ROT_90;
lv_disp_drv_register(&disp_drv);  //added lines above here
1 Like
9

@MarkTecWiz is almost correct.

Here is the correct syntax:

    /*Initialize the display*/
    static lv_disp_drv_t disp_drv;
    lv_disp_drv_init(&disp_drv);
    disp_drv.hor_res = screenWidth;
    disp_drv.ver_res = screenHeight;
    disp_drv.flush_cb = my_disp_flush;
    disp_drv.draw_buf = &draw_buf;
    disp_drv.sw_rotate = 1;  // If you turn on software rotation, Do not update or replace LVGL
    disp_drv.rotated = LV_DISP_ROT_90;
    disp_drv.full_refresh = 1;  // full_refresh must be 1
    lv_disp_drv_register(&disp_drv);

Hope this helps!
Yash

1 Like
10

The screen rotation must be set in the display driver in order to drive a portrait display instead of landscape one.