[GCompris-devel] Scaling images based on screen size

[Holger Kaelberer]

Hi,

On 12/02/2014 07:35 AM, amit tomar wrote:

> As you can see, in the large size one, pegs and disc images look pretty small compared to the area
> available. I would thus like them to scale up/down based on screen size.
>
> I tried using the sourceSize.width and sourceSize.height, but was not able to keep the aspect ratio
> proper.

Yeah, the sourceSize props are really hard to understand and use correctly! ;-)

You should always have one of sourceSize.width/height set in the top level "pageComponent".

sourceSize.width: parent.width

IIRC, Bruno figured out, that all Image components should have sourceSize set, to improve scaling 
quality.

If working with a sourceSize.width/height to also scale child elements, you can maintain aspect 
ratio by definining one of the two (width or height) relative to the one set on pageComponent. Cf. 
e.g. in Imageid.qml

	Image {
             id: imageFrame
             source: "qrc:/gcompris/src/activities/imageid/resource/imageid_frame.svgz"
             fillMode: Image.Stretch
             sourceSize.width: parent.width / 1.7

I think you get problems with the ratio if you set both in a ratio that does not match the ratio of 
your image.

>
> Is there a standard way this is handled in GCompris? Any particular activity I could look into the
> code of which to get an idea ?

You can also work with relative width/height properties, all the way down the component hierarchie, 
i.e. define width/height relative to parent's (or parent's parent or ...) width/height. Look e.g. at 
Sudoku.qml how things are set up inside the Grid component.

Holger