QML Label dispays images with a blue-ish tint

[gabrielg]

REPRODUCIBILITY (% or how often): 100%
BUILD ID = OS VERSION (Settings > About product): 4.2, and prior
HARDWARE (XA2, X10, X10 II, …): X, XA2, maybe JC?
UI LANGUAGE: N/A
REGRESSION: (compared to previous public release: Yes, No, ?): No

DESCRIPTION:

This: [Bug]Qml Label with images not correctly shown on xperia phones - together.jolla.com

PRECONDITIONS:

Have an image, preferably with white people skin in show.

STEPS TO REPRODUCE:

Create a simple Sailfish application with a QML page with something like:

Label {
  text: '<img src="/path/to/image">'
}

EXPECTED RESULT:

Image shows as normal

ACTUAL RESULT:

Image has a blue-ish tint, like in the TJC report - observe the faces.

ADDITIONAL INFORMATION:

This post is aimed at resurrecting the report in TJC as we can’t vote any more, but most importantly: to find out if there is any insight as to how to workaround it without parsing the rich text and separating the images into Image, which does display properly.
Also, this doesn’t show in the emulator.

[Edz]

Strange. I created a Page with 2 image sources. One is a .png wifi logo, the other, a random image of Marc Dillon and Sami Pekinniininninini.

On first build the image of Marc and Sammi displayed correctly, no blueish tinge. When I decided to edit the code and refresh it, the image then displayed with the blueish tinge.

Notably, I also tested this in QtCreator Community Build, the blue does NOT occur no matter what I do with the image or text. I kept the code as identical as I could for QtCreator and SailfishSDK.

In with the mix, I included a Label with a wifi.png logo just to see what happens, this displays as expected, no tinting/discolouring at all.

Here’s a screenshot of the first time build;

Here’s a screenshot after a subtle edit which I then decided not to apply, the image returns with the blue tint. I went to add an ‘id’ then realised I already had…;

Now Marc and Sammi look like they have been drinking colloidal silver, I stopped and rebuilt the application, now the image is displayed as shown in the first image, Marc and Sammi are ‘normal’ once again.

Here’s my code;

import QtQuick 2.2
import Sailfish.Silica 1.0
import "../images"

Page {
    id: page

    allowedOrientations: Orientation.All

    Column {
        spacing: 100
        width: parent.width
        anchors.centerIn: parent

        // png image
        Label {
            id: text
            text: "Available Here <img src='../images/wifi-logo.png'> Free To All Customers"
            font.pixelSize: 60
            anchors.horizontalCenter: parent.horizontalCenter
        }
        // jpg image
        Label {
            id: marcSammi
            text: "Marc <img src='../images/marc-sammi.jpg'> Sammi"
            font.pixelSize: 60
            anchors.horizontalCenter: parent.horizontalCenter
        }
    }
}

EDIT: I also note that each time I start the application on my Xperia 10 ii that the image of Marc and Sammi displays correctly, their colouring is normal. A strange bug indeed and notably, does not occur in normal QtCreator as previously mentioned.

Also, if I link directly to the image of Marc and Sammi (https://blog.jolla.com/content/uploads/2018/11/IMG_4162.jpg) the image still has this blueish tinge.

I tried both PNG and JPG of the same image in my Sailfish application, but both yield the same result.

[poetaster]

This bug (or a setting related to the highlight colours in a container?) also exists in tidings. In tidings it happens to html from feeds rendered after some filtering. There are too many wrapping elements to see it at a glance. It’s on the list but I’m stuck in another debugging adventure so it might take some time.

Is there some default setting like, color: Theme.highlightColor?

[Edz]

The highlight only affects the text color, not the image, if I set “white” for text colour, the image remains blueish.

[gabrielg]

yeah, resurfaced this because of tidings it’s also mentioned in the original tjc report. It must be some hw adaptation wierdness.

[gabrielg]

I did spot an image today that displayed correctly, I don’t remember seeing this before, the only difference to the state when I wrote this post is that I’m on 4.3 now (or perhaps I only noticed because you mentioned it and I started paying attention ).
Strangely, video thumbnails don’t seem to be affected.

[Edz]

Duplicate of Label / Text - RichText styling / theming - #2 by Edz

[tomin]

To me the picture looks like it has mixed red and blue channels, i.e. as if BGR was used instead of RGB. I wonder if there is some uninitialized value somewhere that just happens to be right or wrong depending on what was in memory before.

[poetaster]

I’m not sure about initialization but oddly enough, when looking a some content (netzpolitik.org/feed has full page items) … the first image renders bluish and the second image shows up normal. Very odd.

In the case of tidings, there is a complex scaling Item around the Label which makes it more difficult to debug https://github.com/poetaster/tidings/blob/ViewPageSlideShow/qml/pages/RescalingRichText.qml

With feeds from the guardian I just saw an Item/Article with the first two images in blue and the last image rendered normally.

[poetaster]

I just checked this again. Also substituting Text { for Label {

ALL images turn blue and it’s not Label but the Silica Context which is to blame. For Tidings, I’m going to try to stop rendering ‘large’ amounts of HTML in Labels. I think that’s ‘wrong’ ™ anyway. But it’s interesting to note it’s not Label.

[gabrielg]

Yup, and I don’t know if it’s Silica to blame, because this isn’t reproducible in the emulator at all. My suspicion is that it’s in the hardware adaptation, but go figure.

[poetaster]

I thought about this. But I don’t think it’s the case. Silica has a lot of colour palette stuff in it for doing the whole theme/ambience stuff. AND, it really is a bit ‘flake’ to pump html (like a < figure >< img > combo?) into a Text widget on steroids. Now, that latter complaint is directed at trolltech/qt.

In the practical case of Tidings HTML rendering, using Text or Label is just ‘the wrong solution’. But it’s ‘a solution’.

[attah]

That would suggest it is as @tomin suggests, a color order issue.
And i tried with @Edz sample as input, this “fixes” the image:
convert 936e1ea54107edee8763dbc69650c6e7c9350904.jpeg -separate +channel -swap 0,2 -combine -colorspace sRGB out.png

[poetaster]

Um. Ok, but this doesn’t address the colorspace (palette stuff) mangling in Label/Text does it? There are methods to apply colorspace mangling, though.

[gabrielg]

@poetaster

In the practical case of Tidings HTML rendering, using Text or Label is just ‘the wrong solution’. But it’s ‘a solution’.

I mean, I get it, it’s not the best rendering in the world, but the amount of time it saved me to read simple text based news articles vs. opening it in the rubbish QT web browser that doesn’t work 90% of the time AND THEN having to open it in the Browser, accepting the cookies (again), tapping to close that annoying ad popup, and then scrolling to the place where I was reading because sites are poorly designed?
I know it’s a bit of a rant, but while rendering HTML in Label/Text is not the most elegant solution, it is an extremely fast one to synchronise the internet’s content with your brain

[poetaster]

I agree. That’s why I took over maintaining and developing Tidings. But the way the html that is rendered is handled is a hack. I also still don’t handle img src sets. That means that often the biggest (!!!) image from a set (the default is usually an unscaled image) get’s pulled. That really sucks. So, I had decided to rewrite the RescalingRichText component and replace it with a component that contains alternating html text and images in native qml. But I’m not done yet.

[Kuba77]

I tested this with my one (for now non-released) app on the good old Nexus 4 wih SFOS 2.0.5.6 and it renders this ok without blue-ish (in photo it’s on the right side, on the left is Redmi 5 Plus with SFOS 4.3.0.15)

[poetaster]

Heh. So I implemented

// Swap color channels RGB → BGR
In paint and it is indeed just red an blue being swapped. At least in paint you can now swap em back

[poetaster]

Just a note for reference that @attah had found a case where converions BGR->RGB are performed here. For further research.

Made QImage::fill(uint pixel) for RGB888 accept QRgb values.

[flypig]

Thanks for all the useful info digging deeper into this bug. I’ve created an internal bug report about it and tagged it as “tracked”.