How do I change imagesize to fit on other screens and preserve aspect ratio

antemort

Hi I am relative new to qt and have build my first user interface with Qt quik qml- code. All images are put i the rigth place x and y coordinates and the standard size of the ui is width: 1540 and height:540. But i want it to fit on ipad with the resolution 1024 x 768. How do i scale the whole ui to fit on other screens and preserve aspect ratio and that the ui looks the same on both screens?

my code looks like this:

import QtQuick 2.0
import QtQuick.Window 2.0
import QtGraphicalEffects 1.0

Item{
    id: root
    focus: true
    width:1440
    height:540

...

 Image {
        id: layer_0
        source: "images/layer_0.png"
        x: 0
        y: 0
        opacity: 1
    }
    Image {
        id: layer_1
        source: "images/layer_1.png"
        x: 4
        y: 1
        opacity: 1
    }
    Image {
        id: emap
        source: "images/€map.png"
        opacity: 1
    }

...

}

p3c0

Hi @antemort and Welcome,
You should not hard-code the width and height instead use Screen qml item to get the actual resolution of the device it is running. More here
Usage:

import QtQuick 2.4
import QtQuick.Window 2.2
Item {
   width: Screen.width
   height: Screen.height
}

antemort

but if i want it to have like 1540 540 aspect ratio and I want to preserve it when changing resolution. Correct me if I'm wrong ( I probebly am) but doesn't screen.width make the images stretch to fit the screen and if for exampel screen size is like ipad 1024 x 768 it will not stay at the same aspect ratio as 1540: 540.

p3c0

@antemort Well in that case for Image element there is fillMode property.

antemort

@p3c0 I have tried with fillMode: Image.PreserveAspectFit on my images but they do not resize when I resize the window. Am I using it wrong? Now when I use Screen.width it only make the white space bigger around the image.

what am I doing wrong?

p3c0

@antemort May be it is due to fixed x and y properties for Image that you have set. Instead try using anchors.

antemort

Now I have worked with layouts and resized all images to same ratio 1440 x 540 except 2 images. Those two images are speedgauge pins and need to be positioning in the middle of the gauges. What I want now is that those pins should change position and size when resizing the window that are set in full screen. So if image window is resized then these two images should also resize and find their way to the center of the gauge again.

can you help me?

p3c0

@antemort If I understood you correctly then you just need to use anchors.centerIn and anchor it to its parent so that it centers even if you resize the parent window. To resize it according to parent you can bind it to parents dimensions. See the following example

import QtQuick 2.4

Item {
    width: 200
    height: 200

    Image {
        anchors.centerIn: parent
        width: parent.width / 2.0 // can be anything as per your requirements
        height: parent.height / 2.0
        source: "https://placeholdit.imgix.net/~text?txtsize=50&txt=Qt&w=100&h=100"
    }
}

Try using your image as the source.

antemort

I'm sorry, I must have explained it badly. I have two gauges on different sides off a symmetry line so those are not alligned in the center off the picture. The two pins are positioning with x and y values to be positioning in the center of the gauge circles. the pins are small images which have the orgin at the right side of the image facing the middle of the gaugecircle. So when the screen getting bigger or smaller i want width and height and the x and y values to be changed so it follows the other images that have anchors.fill: parent.

p3c0

@antemort Have you anchored the pin to the gauge circles or you have explicitly set x and y positions ?

antemort

I have explicity set x and y for the moment. I want to anchor but doesn't know how when the the pins are not position in the center of the image, only positioning so it is in the center of the circles.

Image {
    id: visare
    source: "images/visare_2_skugga.png"
    x: 113
    y: 271
    width: 210
    height: 13
    transformOrigin: Item.Right
    opacity: 1
    rotation: needleAngle
    smooth: true
    
    
    Behavior on rotation{
        SpringAnimation{
            spring: 0.5;
            damping: 0.2;
            mass:2;
            
            
            
        }
    }
    
    
}

Image {
    id: visare_rpm
    source: "images/visare_2_skugga.png"
    x: 912
    y: 270
    width: 210
    height: 13
    transformOrigin: Item.Right
    opacity: 1
    rotation: needleRpm
    smooth: true
    
    Behavior on rotation{
        SpringAnimation{
            spring: 0.5;
            damping: 0.2;
            mass:2;
            
            
            
        }
    }
    
    
}

p3c0

@antemort So why don't you use anchors.centerIn: parent and align it to center according to the gauge ? Here parent being the gauge.

antemort

because the gauge circle have the measure 1440x540 like the rest of the images there are two cirles in one circle. If i use anchors.centerIn it will end up in the center of the image in between those circles.

p3c0

@antemort Wow this is way too different than what I understood earlier.
You have a large image and it has some circles at some positions and you want that pins to be centered to that circles. Is it ? And for that you have hard-coded the pin's x and y positions by trial and error method (i.e manually). If thats the case then I think you should change the implementation. It would be too difficult to maintain that position when the image resizes.
Can you describe/explain it pictographically ?

antemort

two circles in one image*

p3c0

@antemort A small pictorial representation would be helpful.

antemort

http://postimg.org/image/62lrab1jt/

here it is. Print screen from Qt designer with pins in right position

p3c0

@antemort Hmm this is what I guessed and was afraid of. I thinks it a bad idea to go for this way of implementation. Instead you should divide it into seperate images. One being that speedometer image while other being the background. Then you can just use Image element to load that speedometer image and you will thus will able to place it anywhere. Now, the pins can be made child of speedometer Image element and can be centered to that of the speedometer (parent) using anchors.centerIn.
In this way it will be independent of any resolution changes.

antemort

I had it before but then I needed to position all images and then I couldn't anchor them. when I don't anchor them they doesn't scale or follow the window when it scales.

p3c0

@antemort You can put the 2 gauge images besides eachother inside a RowLayout and add it to the Image element which contains that background image. Advantage of layouts is that it automatically positions the items inside it when it resizes.