Updating a background image

mozeni

Hello,

I'm working on a project in which a part of it is allowing the user to select a background image.

my main.qml is:
@import QtQuick 2.0

Rectangle {
id: main
StartScreen{}
Component.onCompleted: SetUpScript.createSpriteObjects();
}@

SetUpScript.createSpriteObjects() makes the other components of my project which in turn run other qml files

my StartScreen.qml is:
@import QtQuick 2.0
import "SetUp.js" as Logic

Image {
id: bgImage
source: Logic.bgSource
anchors.centerIn: parent
anchors.fill: parent
}@

where Logic.bgSource is a var that holds the url of the default image to be used.
The default image loads up fine when I run main.
I then make a list of images from which the user can pick one
I would've thought that in the MouseArea portion of the code, where Logic.bgSource is changed, the StartScreen{} would also update to the new source?

The following is in another qml file: SetUpQ2.qml

@ListView {
id: listModel
spacing: 2
snapMode: ListView.SnapToItem
boundsBehavior: Flickable.StopAtBounds
anchors.top: instructions.bottom
clip: true
x: parent.width0.08; y: parent.height0.27
width: parent.width0.5; height: parent.height0.75
FolderListModel {
folder: "../../layout/backgrounds"
id: folderModel
nameFilters: [".jpg"]
sortField: "Name"
}
Component {
id: fileDelegate
Rectangle {
id: imgSelect
width: listModel.width0.4; height: listModel.height*0.35

            Image {
                id: imgName
                width: parent.width*0.9; height: parent.height*0.9
                anchors.centerIn: parent
                fillMode: Image.Stretch
                source: folderModel.folder + "/" + fileName
                onSourceChanged: imageModel.append({name: imgName.source})
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        Logic.bgSource = imgName.source
                        console.log(Logic.bgSource)
                    }
                }
            }
        }
    }
    model: folderModel
    delegate: fileDelegate
    ListModel {
        id: imageModel
    }
    Rectangle {
        id: scrollbar
        x: listModel.width*0.385
        y: listModel.visibleArea.yPosition * listModel.height
        radius: 7
        width: 10
        height: listModel.visibleArea.heightRatio * listModel.height
        opacity: 0.7
        color: "black"
    }
}@

Any help or clarifications would be awesome!
Thanks