Rotate screen

[schnapper79]

Is it possible (maybe by configuring femtovg) to rotate the application window? I am running slint on an old imx6 Board which doesnt support rotating using Xorg. When using Qt it's pretty easy to rotate main window, but qt is the thing I wanna get rid of...

[schnapper79]

Edit: I can rotate my touch screen. I also managed to rotate and translate the femtovg canvas. What I didn't master was resizing the canvas to the new dimensions. My screen is physically w: 1024 and h: 600. After rotation the displayed window has w:600 and h:600, it seems to be cut of... is there any way to change canvas size after rotation?

[ogoffart]

How do you rotate the femtovg?

slint::Window::setSize should resize the window and hence the canvas, but i guess you don't want to resize the window.

[schnapper79]

I use the canvas.rotate(angle) function of femtovg in internal/renderer/femtovg/lib.rs. as I have a fixed setup I want to use (full screen window on this specific device) I hardcoded the rotation and translation.

I can live with every solution as long as I get my window fullscreen and rotated. Where would I add window::setSize? Because I guess the canvas must already exist so after the run()... is there a callback I can use?

[tronical]

Before run() you could call show(). After show() the window is mapped and the femtovg canvas exists.

[schnapper79]

Nice... I will try that.

[tronical]

Otherwise… what are your options in terms of the rest of the software stack? :)

[schnapper79]

Like I said, the vivante drivers don't support low level rotation. Qt worked fine offering rotation for screen and touch... But that's what I want to replace..

[schnapper79]

That's a funny result...

slint::slint!{
    export component HelloWorld inherits Window{
        height: 1024px;
        width:600px;
        property <float> xx:0.;
        property <float> yy:0.;

        Text {
            text: "click at X="+root.xx+" Y="+root.yy;
            color: green;
            font-size: 30px;
        }
        area:=TouchArea{
           clicked=>{

                    root.xx = area.pressed-x/1px;
                    root.yy = area.pressed-y/1px;
                }
            }
        }
    }

I then rotate my canvas like this:

        femtovg_canvas.rotate(4.71239); //rotate 270 degrees
        femtovg_canvas.translate(-600., 0.0); //translate back to screen

this is my main:

fn main() {
    let ui= HelloWorld::new().unwrap();
    ui.show().unwrap();
    ui.window().set_size(PhysicalSize::new(600, 1024));
     ui.run().unwrap()
}

What happens is:

• the text appears right in the middle of the screen, as expected, correct orientation (rotatet by 270°).
• the lower 1/3 of the screen is black (the range between 600 and 1024)

if i change ui.window().set_size(PhysicalSize::new(600, 1024)); to ui.window().set_size(PhysicalSize::new(600, 1024));
the screen is all white (good) but the layout (position of text) gets mixed up as width and height are mixed up now...

somehow i need to change the visible window size to the right values without changing the inner size...

[schnapper79]

ok, solved it by using a main window with 1024 x 1024 and a rectangle in main window with h: 1024 and w: 600 which i fill with my design. Everything within this rectange is placed as expected.

but as an info: even when changing main window size by using a button to h:1024 and w:600, it would cut my rotated window to h:600, leaving one third of the screen in black.

I had a similar problem using the touch of my screen.. 0|0 and directions of axes is fine, but i had to scale the axes of x and y to get the right results, else the physical point of 600|1024 (right bottom corner) would give a pressed-x and pressed-y of 1024|600.

not because x and y is changed (i tried by switching them) but just for the scaling. I added a calculation like

    if cfg!(target_arch = "arm"){
          location.x=location.x*(600./1024.);
          location.y=location.y*(1024./600.);
      }

which finally got the touch working too.

Maybe this experience can give you some hints if you ever plan a feature for rotation of main window with all children. I was able to hardcode everything i need for my tests of slint, so I close this now...

[tronical]

Awesome, great that you found a solution - and thanks for reporting it back here. ❤️