Write new settings for toggling background image, picking file, and adjusting tint.

Also handles the opacity setting appropriately, taking control and disabling the slider when background image is used and returning control with the last stored value when the background image is toggled back off. Tint slider is disabled when background image is disabled.

app/qml/SettingsGeneralTab.qml

@@ -180,6 +180,66 @@ ColumnLayout {
         }
     }
 
+    GroupBox {
+        title: qsTr("Background Image")
+        signal opacity
+        ColumnLayout {
+            anchors.fill: parent
+            CheckBox {
+                id: useBackgroundImage
+                text: qsTr("Use background image instead of background color")
+                checked: appSettings.useBackgroundImage
+
+                property real lastOpacity: 0.0
+                property real thisOpacity: appSettings.windowOpacity
+                property real buffer: NaN
+                onCheckedChanged: appSettings.useBackgroundImage = checked, 
+                                  buttonUseBackground.enabled = appSettings.useBackgroundImage,
+                                  sliderBackgroundTint.enabled = appSettings.useBackgroundImage,
+                                  sliderOpacity.enabled = !appSettings.useBackgroundImage,
+
+                                  thisOpacity = appSettings.windowOpacity,
+                                  buffer = thisOpacity,
+
+                                  thisOpacity = lastOpacity,
+                                  lastOpacity = buffer,
+                                  appSettings.windowOpacity = thisOpacity
+                
+            }
+            // Workaround for QTBUG-31627 for pre 5.3.0
+            Binding {
+                target: useBackgroundImage
+                property: "checked"
+                value: appSettings.useBackgroundImage
+            }
+            Button {
+                Layout.fillWidth: true
+                id: buttonUseBackground
+                text: qsTr("Open")
+                enabled: useBackgroundImage
+                onClicked: {
+                    fileDialogImage.callBack = function (url) {
+                        loadFile(url)
+                    }
+                    fileDialogImage.open()
+                }
+                function loadFile(url) {
+                    try {
+                        if (appSettings.verbose)
+                                    console.log("Opening file: " + url)
+
+                        image.source = url
+                    } catch (err) {
+                        console.log(err)
+                        messageDialog.text = qsTr(
+                                    "There has been an error opening the file.")
+                        messageDialog.open()
+                    }
+                }
+            }
+        }
+    }
+
     GroupBox {
         title: qsTr("Screen")
         Layout.fillWidth: true
@@ -219,10 +279,25 @@ ColumnLayout {
                 visible: !appSettings.isMacOS
             }
             SimpleSlider {
+                id: sliderOpacity
+                enabled: !useBackgroundImage
                 onValueChanged: appSettings.windowOpacity = value
                 value: appSettings.windowOpacity
                 visible: !appSettings.isMacOS
             }
+            Label {
+                text: qsTr("Background Tint")
+            }
+            SimpleSlider {
+                id: sliderBackgroundTint
+                enabled: useBackgroundImage
+                onValueChanged: appSettings.backgroundTint = value
+                value: appSettings.backgroundTint
+            }
+            function reload() {
+                active = false
+                active = true
+            }
         }
     }
 
@@ -265,4 +340,21 @@ ColumnLayout {
             active = true
         }
     }
+    Loader {
+        property var callBack
+        id: fileDialogImage
+
+        sourceComponent: FileDialog {
+            nameFilters: ["Image files (*.png *.jpeg *.jpg)"]
+            selectMultiple: false
+            selectFolder: false
+            selectExisting: true
+            folder: shortcuts.pictures
+            onAccepted: callBack(fileUrl)
+        }
+
+        function open() {
+            item.open()
+        }
+    }
 }