Setting the window's background image/ambiance

Applications QML
#1

Note: this is also partly a design question

Many media applications on big screens, like Jellyfin, tend to set an image as backdrop when browsing through their media collection. Since Sailfish OS applications by default show their ambiance through the ApplicationWindow, I thought it would be pretty neat if my Jellyfin application could achieve the same effect by changing the ApplicationWindow’s background image and updating the Theme properties, like the primary colour, accordingly.

Right now there is a workaround I’ve used, but it isn’t perfect. It is done by creating a QML object like this:

// Based on Hutspot's GlassyBackground
Rectangle {
    property alias source: backgroundImage.source
    property alias sourceSize: backgroundImage.sourceSize
    property real dimmedOpacity: Theme.opacityFaint
    readonly property alias status: backgroundImage.status
    color: Theme.colorScheme == Theme.DarkOnLight ? "#fff" : "#000"
    z: -9999 // Is this high enough?
    opacity: status == Image.Ready ? 1.0 : 0.0
    Behavior on opacity { FadeAnimator {} }

    Image {
        id: backgroundImage
        cache: true
        smooth: false
        asynchronous: true
        fillMode: Image.PreserveAspectCrop
        anchors.fill: parent
        visible: false
    }

    FastBlur {
        cached: true
        anchors.fill: backgroundImage
        source: backgroundImage
        opacity: dimmedOpacity
        radius: 100
    }

    Image {
        anchors.fill: parent
        fillMode:  Image.Tile
        source: "image://theme/graphic-shader-texture"
        opacity: 0.1
    }
}

and adding it to your ApplicationWindow. While it looks pretty convincing, it has several problems:

  1. The ApplicationWindow’s real background visibly shows through when for example a ComboBox is open.
  2. Colours do not match the background, although this could be fixed by extracting some colours out of an image and creating a Palette from that and applying it to the applicationWindow.
  3. This effect is highly likely to look out of place once Silica gets redesigned or the undocumented “image://theme” images disappear.

So my question is: is their a better way of doing this, or even better, does Silica have support for this?

  • If not: could Silica getting support for doing this? This would be really nice, because the workaround described above wouldn’t be needed and its flaws wouldn’t be visible.
  • Or should I consider stopping to try setting the ApplicationWindow’s background at all, because of designwise it is horrible?
#2

It seems like Sailfish 4.0 got support for this, but I cannot get it to work and the provided documentation is a bit vague to me. I’m trying to set an image loaded over the network as the background of a page.

I’ve tried the following:

import QtQuick 2.6
import Sailfish.Silica 1.0
import Sailfish.Silica.Background 1.0

Page {
    background: ThemeBackground {
        sourceItem: ImageWallpaper {
            id: backdrop
            imageUrl: "http://placekitten.com/g/500/500"
        }
    }
}

The console yields the following warning: “[W] unknown:0 - QQuickImage::textureProvider: can only be queried on the rendering thread of an exposed window” and I get a black background. If I change the “imageUrl” to a local file, like “/usr/share/ambience/air/images/ambience_air.jpg”, I get the same result. If I swap out the ImageWallpaper with an image with layer.enabled: true, I still get the same result. Should I be doing it in a different way?