"big" png images are rendered in lower resolution

Mark81

I have a png of 100 x 76800 px. It's quite large but its size is less than 1.2 MB.
I show it in an Image object:

Rectangle {
    width: 100
    height: 640
    clip: true

    Image {
        source: "data/image.png"
    }
}

but it's rendered in a very poor resolution. If I reduce its height instead is rendered correctly. I attach here an example:

height 500 px

height 76800 px

It's a known behavior? Is there something I can do (a part of reduce the png height....) to avoid this?

timday

Two thoughts on this:

I'm not sure what Qt does when QML's OpenGL-based scene-graph tries to render images larger than the OpenGL texture size limit. The maximum texture dimension varies between HW platforms, but I'd typically expect it to be something in the range 2048 to 65536... I'd be surprised if it went high enough to include as 76800 on any platform though. It's possible (and fits what you're seeing) if Qt is simply reducing your image's resolution to fit the maximum texture size. A fix/workround would be to break your image up into multiple image tiles and lay them out using a Column.
I'm dubious it'll help, but does anything change if you add smooth: false and/or mipmap: true to the Image's properties?

Mark81

smooth doesn't help and mipmap is not available in the Qt versions I'm using.
I didn't know the limitation of the texture size limit. I thought it was a matter of RAM availability! But it makes sense about the observable effect.

I will try to tile together smaller pictures - though it won't be so easy due to the further drawings I need to do over them.

timday

If the images you're showing in your original post are representative of what you're trying to display (and not just some test image to illustrate the issue) then my instinct would be to generate the marks and the numeric labels using QML elements (Rectangles, Text, Repeater... some appropriate layout/container element) and not use Image at all.

Mark81

The image is the actual one. But the scale might be very long. I started drawing manually but I have some constraints I wasn't able to reach. First of all, my scale can grow up to 4000 "major" ticks (divided in 5 minor ones). Using such a huge amount of QML objects seems not a good solution.

Hence I tried to draw them manually using Context2D on a Canvas. In this way I would draw only the visible portion of the scale. Unfortunately the target version is Qt 4.8.5 embedded and has not the Canvas object. Furthermore I need to "easy" the movement of the scale and it's not trivial drawing directly on a surface.

I drew the scale using a Python script to generate an SVG (and also this is not supported bu the target device) then I converted it to png to save transparencies. A part the memory problem I'm facing it works very well because I can use the property animation to move the scale smoothly. And I can place on the top of it some elements (i.e. some Rectangles).

timday

Ah OK if you're back on Qt4.8 that'll presumably be the old "Declarative" rather than "Quick" QML. Back in those days QML was all rendered by CPU rather than GPU via OpenGL, I think, so my comments on OpenGL limits may not have any relevance.

Have you considered implementing a custom QDeclarativeItem element in C++? Assuming only part of the scale is actually visible then it ought to be easy enough to figure out which ticks and labels actually need rendering without drawing 1000s of them which will just be clipped.

Mark81

Unfortunately the device I'm working on (Microtronix DX-4400) doesn't allow a C++ application but only QML files.
Anyway, it seems it works nicely using 12 pictures tiled in a Column. I'm going to test this solution (simpler than I thought) before doing anything else.