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



  • 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
        }
    
    ...
    
    }
    

  • Moderators

    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
    }
    


  • 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.


  • Moderators

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



  • @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?


  • Moderators

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



  • 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?


  • Moderators

    @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.



  • 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.


  • Moderators

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



  • 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;
                
                
                
            }
        }
        
        
    }

  • Moderators

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



  • 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.


  • Moderators

    @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 ?



  • two circles in one image*


  • Moderators

    @antemort A small pictorial representation would be helpful.



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

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


  • Moderators

    @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.



  • 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.


  • Moderators

    @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.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.