Add first batch of default content

CMake/CMakeLists.txt

@@ -1,6 +1,8 @@
 project(CMake)
 
 set(FILES
+    CMakeVariables.h.in
+    GenerateCMakeVariableHeader.cmake
     CopyRecursive.cmake
     CreateIFWInstaller.cmake)
 

CMake/CMakeVariables.h.in

@@ -0,0 +1,3 @@
+#pragma once
+
+#define SCREENPLAY_SOURCE_DIR "@SOURCE_DIR@"

CMake/GenerateCMakeVariableHeader.cmake

@@ -0,0 +1,15 @@
+#! generate_cmake_variable_header : Generates a header CmakeVariables.h that contains defines for the variables specified in CmakeVariables.h.in!
+#
+# The generated CmakeVariables.h header can then be used to access e.g. the PROJECT_NAME define in C++ code.
+#
+# Example
+# generate_cmake_variable_header(${PROJECT_NAME})
+#
+function(generate_cmake_variable_header TARGET)
+    set(SOURCE_DIR ${CMAKE_SOURCE_DIR})
+
+    # Specify the configuration file from which the header file will be generated
+    configure_file(${CMAKE_SOURCE_DIR}/CMake/CMakeVariables.h.in ${CMAKE_CURRENT_BINARY_DIR}/${PROJECT_NAME}/CMakeVariables.h @ONLY)
+    # Add the directory containing the generated header
+    target_include_directories(${TARGET} PRIVATE ${CMAKE_CURRENT_BINARY_DIR})
+endfunction()

Content/wallpaper_landscape/Readme.md

@@ -0,0 +1 @@
+# Landscape

Content/wallpaper_landscape/main.qml

@@ -0,0 +1,16 @@
+// SPDX-License-Identifier: BSD-3-Clause
+
+import QtQuick
+import QtQuick.Effects
+import QtQuick.Particles
+
+Item {
+    id: root
+    anchors.fill: parent
+
+    Rectangle {
+        anchors.fill: parent
+        color: "gray"
+    }
+    
+}

Content/wallpaper_landscape/project.json

@@ -0,0 +1,11 @@
+{
+    "title": "Empty Example",
+    "description": "",
+    "file": "main.qml",
+    "preview": "preview.png",
+    "type": "qmlScene",
+    "tags": [
+        "example",
+        "empty"
+    ]
+}

Content/wallpaper_particles/main.qml

@@ -0,0 +1,152 @@
+// SPDX-License-Identifier: BSD-3-Clause
+
+import QtQuick
+import QtQuick.Effects
+import QtQuick.Particles
+
+Item {
+    id: root
+    anchors.fill: parent
+
+    property int attStrength: 8000000
+    //Emitter
+    property bool isEnabled: true
+    property int emitRate: 25
+    property int lifeSpan: 5000
+    property int endSize: 8
+    property int sizeVariation: 4
+    property int particleSize: 16
+
+    //Image
+    property real imgOpacity: .75
+
+
+    Rectangle {
+        id: gradient
+        anchors.fill: parent
+        gradient: Gradient {
+            GradientStop {
+                position: 0.0
+                color: "#199EF1"
+            }
+            GradientStop {
+                position: 1.0
+                color: "#092E6C"
+            }
+        }
+    }
+
+    Item {
+        anchors.fill: parent
+
+        MouseArea {
+            id: ma
+            anchors.fill: parent
+            hoverEnabled: true
+            Component.onCompleted: {
+                attractor.pointX = parent.width * .5
+                attractor.pointY = 0
+            }
+
+            onPressed: {
+                //attractor.enabled = true
+            }
+            onPositionChanged: {
+                    attractor.pointX = mouseX
+                    attractor.pointY = mouseY
+                    rct.x = mouseX
+                    rct.y = mouseY
+
+            }
+            onReleased: {
+                //attractor.enabled = false
+            }
+        }
+
+        Rectangle {
+            id:rct
+            color:"orange"
+            width:40
+            height:40
+
+        }
+
+        Attractor {
+            id: attractor
+            system: particleSystem
+            affectedParameter: Attractor.Acceleration
+            strength: root.attStrength
+            proportionalToDistance: Attractor.InverseQuadratic
+            anchors{
+                top:parent.top
+                topMargin: 100
+                horizontalCenter: parent.horizontalCenter
+
+            }
+        }
+
+        ParticleSystem {
+            id: particleSystem
+        }
+
+        Emitter {
+            id: emitter
+            enabled: root.isEnabled
+            anchors {
+                horizontalCenter: parent.horizontalCenter
+                bottom: parent.bottom
+            }
+
+            width: parent.width
+            height: parent.height * .5
+            system: particleSystem
+            emitRate: root.emitRate
+            lifeSpan: root.lifeSpan
+            lifeSpanVariation: 1000
+            size: root.particleSize
+            endSize: root.endSize
+            sizeVariation: root.sizeVariation
+            velocity: AngleDirection {
+                angle: -90
+                magnitude: 50
+                magnitudeVariation: 25
+                angleVariation: 10
+            }
+        }
+
+        ImageParticle {
+            height: 16
+            width: 16
+            source: "dot.png"
+            system: particleSystem
+            opacity: root.imgOpacity
+        }
+
+        Image {
+            id: bgGlow
+            width: parent.width * .75
+            height: width
+            opacity: .3
+            source: "backgroundGlow.png"
+            anchors {
+                horizontalCenter: parent.horizontalCenter
+                bottom: parent.bottom
+                bottomMargin: -width * .65
+            }
+            SequentialAnimation on opacity {
+                loops: Animation.Infinite
+
+                OpacityAnimator {
+                    from: 0
+                    to: .3
+                    duration: 100000
+                }
+                OpacityAnimator {
+                    from: .4
+                    to: 0
+                    duration: 100000
+                }
+            }
+        }
+    }
+}

Content/wallpaper_particles/project.json

@@ -0,0 +1,74 @@
+{
+    "description": "Quiet particles",
+    "file": "main.qml",
+    "preview": "preview.png",
+    "properties": {
+        "Attractor": {
+            "attStrength": {
+                "from": 0,
+                "stepSize": 100,
+                "to": 100000,
+                "type": "slider",
+                "value": 8000000
+            }
+        },
+        "Emitter": {
+            "emitRate": {
+                "from": 0,
+                "stepSize": 1,
+                "to": 2500,
+                "type": "slider",
+                "value": 25
+            },
+            "endSize": {
+                "from": 0,
+                "stepSize": 1,
+                "to": 100,
+                "type": "slider",
+                "value": 18
+            },
+            "isEnabled": {
+                "type": "bool",
+                "value": true
+            },
+            "lifeSpan": {
+                "from": 0,
+                "stepSize": 100,
+                "to": 10000,
+                "type": "slider",
+                "value": 5000
+            },
+            "sizeVariation": {
+                "from": 0,
+                "stepSize": 1,
+                "to": 10,
+                "type": "slider",
+                "value": 4
+            }
+        },
+        "ImageParticle": {
+            "color": {
+                "type": "color",
+                "value": "#ffffff"
+            },
+            "imgOpacity": {
+                "from": 0,
+                "stepSize": 1,
+                "to": 1,
+                "type": "slider",
+                "value": 1
+            },
+            "source": {
+                "formats": "*.png,*.jpg",
+                "type": "file",
+                "value": "backgroundGlow.png"
+            }
+        }
+    },
+    "tags": [
+        "particles"
+    ],
+    "title": "QML particles",
+    "type": "qmlWallpaper",
+    "visibility": "public"
+}

Content/widget_analogClock/Clock.qml

@@ -0,0 +1,107 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+
+Item {
+    id : clock
+    width: {
+        if (ListView.view && ListView.view.width >= 200)
+            return ListView.view.width / Math.floor(ListView.view.width / 200.0);
+        else
+            return 200;
+    }
+
+    height: {
+        if (ListView.view && ListView.view.height >= 240)
+            return ListView.view.height;
+        else
+            return 240;
+    }
+
+    property alias city: cityLabel.text
+    property int hours
+    property int minutes
+    property int seconds
+    property real shift
+    property bool night: false
+    property bool internationalTime: true //Unset for local time
+
+    function timeChanged() {
+        var date = new Date;
+        hours = internationalTime ? date.getUTCHours() + Math.floor(clock.shift) : date.getHours()
+        night = ( hours < 7 || hours > 19 )
+        minutes = internationalTime ? date.getUTCMinutes() + ((clock.shift % 1) * 60) : date.getMinutes()
+        seconds = date.getUTCSeconds();
+    }
+
+    Timer {
+        interval: 100; running: true; repeat: true;
+        onTriggered: clock.timeChanged()
+    }
+
+    Item {
+        anchors.centerIn: parent
+        width: 200; height: 240
+
+        Rectangle {
+            width: 200
+            height: width
+            color: clock.night ? "black" : "gray"
+            radius: width
+        }
+
+
+        Image {
+            x: 92.5; y: 27
+            source: "hour.png"
+            transform: Rotation {
+                id: hourRotation
+                origin.x: 7.5; origin.y: 73;
+                angle: (clock.hours * 30) + (clock.minutes * 0.5)
+                Behavior on angle {
+                    SpringAnimation { spring: 2; damping: 0.2; modulus: 360 }
+                }
+            }
+        }
+
+        Image {
+            x: 93.5; y: 17
+            source: "minute.png"
+            transform: Rotation {
+                id: minuteRotation
+                origin.x: 6.5; origin.y: 83;
+                angle: clock.minutes * 6
+                Behavior on angle {
+                    SpringAnimation { spring: 2; damping: 0.2; modulus: 360 }
+                }
+            }
+        }
+
+        Image {
+            x: 97.5; y: 20
+            source: "second.png"
+            transform: Rotation {
+                id: secondRotation
+                origin.x: 2.5; origin.y: 80;
+                angle: clock.seconds * 6
+                Behavior on angle {
+                    SpringAnimation { spring: 2; damping: 0.2; modulus: 360 }
+                }
+            }
+        }
+
+        Image {
+            anchors.centerIn: background; source: "center.png"
+        }
+
+        Text {
+            id: cityLabel
+            y: 210; anchors.horizontalCenter: parent.horizontalCenter
+            color: "white"
+            font.family: "Helvetica"
+            font.bold: true; font.pixelSize: 16
+            style: Text.Raised; styleColor: "black"
+        }
+    }
+}

Content/widget_analogClock/Readme.md

@@ -0,0 +1 @@
+Digital Clock

Content/widget_analogClock/ic_close_white_64px.svg

@@ -0,0 +1,4 @@
+<svg fill="#FFFFFF" height="64" viewBox="0 0 24 24" width="64" xmlns="http://www.w3.org/2000/svg">
+    <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+</svg>

Content/widget_analogClock/main.qml

@@ -0,0 +1,52 @@
+// SPDX-License-Identifier: BSD-3-Clause
+
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Effects
+import QtQuick.Particles
+
+Item {
+    id: root
+    implicitWidth: 640
+    implicitHeight: 350
+
+    ListView {
+        id: clockview
+        anchors.fill: parent
+        orientation: ListView.Horizontal
+        cacheBuffer: 2000
+        snapMode: ListView.SnapOneItem
+        highlightRangeMode: ListView.ApplyRange
+
+        delegate: Clock { city: cityName; shift: timeShift }
+        model: ListModel {
+            ListElement { cityName: "New York"; timeShift: -4 }
+            ListElement { cityName: "London"; timeShift: 0 }
+            ListElement { cityName: "Oslo"; timeShift: 1 }
+            ListElement { cityName: "Mumbai"; timeShift: 5.5 }
+            ListElement { cityName: "Tokyo"; timeShift: 9 }
+            ListElement { cityName: "Brisbane"; timeShift: 10 }
+            ListElement { cityName: "Los Angeles"; timeShift: -8 }
+        }
+    }
+
+    Image {
+        anchors.left: parent.left
+        anchors.bottom: parent.bottom
+        anchors.margins: 10
+        source: "arrow.png"
+        rotation: -90
+        opacity: clockview.atXBeginning ? 0 : 0.5
+        Behavior on opacity { NumberAnimation { duration: 500 } }
+    }
+
+    Image {
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        anchors.margins: 10
+        source: "arrow.png"
+        rotation: 90
+        opacity: clockview.atXEnd ? 0 : 0.5
+        Behavior on opacity { NumberAnimation { duration: 500 } }
+    }
+}

Content/widget_analogClock/project.json

@@ -0,0 +1,12 @@
+{
+    "title": "Digital Clock",
+    "description": "",
+    "file": "main.qml",
+    "preview": "preview.png",
+    "type": "qmlWidget",
+    "tags": [
+        "example",
+        "clock",
+        "digital"
+    ]
+}

Content/widget_digitalClock/Readme.md

@@ -0,0 +1 @@
+Digital Clock

Content/widget_digitalClock/ic_close_white_64px.svg

@@ -0,0 +1,4 @@
+<svg fill="#FFFFFF" height="64" viewBox="0 0 24 24" width="64" xmlns="http://www.w3.org/2000/svg">
+    <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+</svg>

Content/widget_digitalClock/main.qml

@@ -0,0 +1,131 @@
+import QtQuick
+import QtQuick.Window
+
+Item {
+    id: root
+    implicitWidth: 250
+    implicitHeight: 100
+
+    function timeChanged() {
+        var date = new Date
+        var hours = ""
+        var minutes = ""
+        var seconds = ""
+
+        if (date.getHours() < 10) {
+            hours = "0" + date.getHours().toString()
+        } else {
+            hours = date.getHours().toString()
+        }
+
+        if (date.getMinutes() < 10) {
+            minutes = "0" + date.getMinutes().toString()
+        } else {
+            minutes = date.getMinutes().toString()
+        }
+
+        if (date.getSeconds() < 10) {
+            seconds = "0" + date.getSeconds().toString()
+        } else {
+            seconds = date.getSeconds().toString()
+        }
+
+        var days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
+        var months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
+
+        var day = days[ date.getDay() ];
+        var month = months[ date.getMonth() ];
+
+        txtClock.text = hours + ":" + minutes + ":" + seconds
+        txtDate.text = day + ", " +date.getDay() + " " + month + ", " + date.getFullYear()
+    }
+
+    Timer {
+        interval: 100
+        triggeredOnStart: true
+        running: true
+        repeat: true
+        onTriggered: timeChanged()
+    }
+
+    Text {
+        id: txtClock
+        anchors {
+            top: parent.top
+            topMargin: 10
+            horizontalCenter: parent.horizontalCenter
+        }
+        font.pixelSize: 42
+        color: "white"
+        font.weight: Font.Light
+        renderType: Text.NativeRendering
+        font.family: "Segoe UI"
+    }
+    Text {
+        id: txtDate
+        anchors {
+            top: txtClock.bottom
+            right: txtClock.right
+            bottom: parent.bottom
+            left: txtClock.left
+        }
+
+        font.pixelSize: 12
+        color: "#59C1FE"
+        font.weight: Font.Light
+        renderType: Text.NativeRendering
+        font.family:"Segoe UI"
+    }
+
+    MouseArea {
+        z: 99
+        anchors {
+            top: parent.top
+            right: parent.right
+            margins: 5
+        }
+        height: 15
+        width: 15
+        onClicked: Qt.quit()
+        Image {
+            id: imgClose
+            opacity: 0
+            source: "ic_close_white_64px.svg"
+            anchors.fill: parent
+            width: parent.width
+            height: parent.height
+            sourceSize: Qt.size(parent.width, parent.height)
+        }
+    }
+
+    states: [
+        State {
+            name: ""
+            PropertyChanges {
+                target: imgClose
+                opacity: 0
+            }
+        },
+        State {
+            name: "hover"
+            PropertyChanges {
+                target: imgClose
+                opacity: 1
+            }
+        }
+    ]
+
+    transitions: [
+        Transition {
+            from: ""
+            to: "hover"
+            reversible: true
+
+            PropertyAnimation {
+                target: imgClose
+                property: "opacity"
+                duration: 200
+            }
+        }
+    ]
+}

Content/widget_digitalClock/project.json

@@ -0,0 +1,12 @@
+{
+    "title": "Digital Clock",
+    "description": "",
+    "file": "main.qml",
+    "preview": "preview.png",
+    "type": "qmlWidget",
+    "tags": [
+        "example",
+        "clock",
+        "digital"
+    ]
+}

Content/widget_xkcd/Readme.md

@@ -0,0 +1 @@
+Widget that shows the latest xkcd

Content/widget_xkcd/main.qml

@@ -0,0 +1,51 @@
+// SPDX-License-Identifier: BSD-3-Clause
+
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Effects
+import QtQuick.Particles
+
+Item {
+    id: root
+    implicitWidth: 360
+    implicitHeight: 360
+
+    Image {
+        id: img
+        anchors.fill: parent
+        onStatusChanged: {
+            if (img.status !== Image.Ready)
+                return
+            if(img.sourceSize.width === 0 || img.sourceSize.height === 0)
+                return
+            root.implicitHeight = img.sourceSize.height
+            root.implicitWidth = img.sourceSize.width
+        }
+
+        fillMode: Image.PreserveAspectCrop
+    }
+
+    Component.onCompleted: {
+        request("http://xkcd.com/info.0.json", function (o) {
+            if (o.status === 200) {
+                var d = eval('new Object(' + o.responseText + ')')
+                console.log(o.responseText)
+                img.source = d.img
+            } else {
+                console.log("Some error has occurred")
+            }
+        })
+    }
+
+    function request(url, callback) {
+        var xhr = new XMLHttpRequest()
+        xhr.onreadystatechange = (function (myxhr) {
+            return function () {
+                if (myxhr.readyState === 4)
+                    callback(myxhr)
+            }
+        })(xhr)
+        xhr.open('GET', url)
+        xhr.send('')
+    }
+}

Content/widget_xkcd/project.json

@@ -0,0 +1,10 @@
+{
+    "description": "Widget that shows the latest xkcd",
+    "file": "main.qml",
+    "preview": "preview.png",
+    "tags": [
+        "XKCD"
+    ],
+    "title": "XKCD",
+    "type": "qmlWidget"
+}

ScreenPlay/CMakeLists.txt

@@ -445,3 +445,7 @@ if(APPLE AND NOT OSX_BUNDLE)
     copy_recursive(${CMAKE_CURRENT_SOURCE_DIR}/assets/fonts ${FONTS_OUT_DIR} "*.otf")
 
 endif()
+
+# ##### USE CMAKE VARIABLES IN CODE #####
+include(GenerateCMakeVariableHeader)
+generate_cmake_variable_header(${PROJECT_NAME})

ScreenPlayWallpaper/CMakeLists.txt

@@ -111,3 +111,7 @@ if(WIN32)
     set_property(TARGET ${PROJECT_NAME} PROPERTY WIN32_EXECUTABLE true)
     configure_file(${CMAKE_CURRENT_SOURCE_DIR}/index.html ${CMAKE_RUNTIME_OUTPUT_DIRECTORY}/index.html COPYONLY)
 endif()
+
+# ##### USE CMAKE VARIABLES IN CODE #####
+include(GenerateCmakeVariableHeader)
+generate_cmake_variable_header(${PROJECT_NAME})

ScreenPlayWallpaper/main.cpp

@@ -9,6 +9,8 @@
 #include "ScreenPlayUtil/exitcodes.h"
 #include "ScreenPlayUtil/util.h"
 
+#include "ScreenPlayWallpaper/CMakeVariables.h"
+
 #if defined(Q_OS_WIN)
 #include "src/winwindow.h"
 Q_IMPORT_QML_PLUGIN(ScreenPlaySysInfoPlugin)
@@ -46,8 +48,15 @@ int main(int argc, char* argv[])
 
     // For testing purposes when starting the ScreenPlayWallpaper directly.
     if (argumentList.length() == 1) {
+        QString exampleContentPath = QString(SCREENPLAY_SOURCE_DIR) + "/Content";
+        QStringList contentFolder = {
+            "/wallpaper_particles",
+            "/wallpaper_particles"
+        };
+        QString projectPath = exampleContentPath + contentFolder.at(0);
+
         window.setActiveScreensList({ 0 });
-        window.setProjectPath("test");
+        window.setProjectPath(projectPath);
         window.setAppID("test");
         window.setVolume(1);
         window.setFillMode("fill");

ScreenPlayWidget/CMakeLists.txt

@@ -81,4 +81,9 @@ if(APPLE AND NOT OSX_BUNDLE)
         PROPERTIES
         RUNTIME_OUTPUT_DIRECTORY "${CMAKE_BINARY_DIR}/bin/ScreenPlay.app/Contents/MacOS/"
     )
-endif()
+endif()
+
+
+# ##### USE CMAKE VARIABLES IN CODE #####
+include(GenerateCmakeVariableHeader)
+generate_cmake_variable_header(${PROJECT_NAME})

ScreenPlayWidget/main.cpp

@@ -2,9 +2,12 @@
 
 #include <QGuiApplication>
 #include <QQmlApplicationEngine>
+#include <QString>
 #include <QStringList>
 #include <QtWebEngineQuick>
 
+#include "ScreenPlayWidget/CMakeVariables.h"
+
 #include "src/widgetwindow.h"
 
 #if defined(Q_OS_WIN)
@@ -23,8 +26,8 @@ int main(int argc, char* argv[])
     qputenv("QT_MEDIA_BACKEND", "ffmpeg");
 #endif
 
-    QtWebEngineQuick::initialize();
     QGuiApplication::setAttribute(Qt::AA_ShareOpenGLContexts);
+    QtWebEngineQuick::initialize();
 
     QGuiApplication app(argc, argv);
 
@@ -33,8 +36,22 @@ int main(int argc, char* argv[])
     // If we start with only one argument (path, appID, type),
     // it means we want to test a single widget
     if (argumentList.length() == 1) {
-        WidgetWindow spwmw("test", "appid", "qmlWidget", { 100, 100 }, true);
-        // WidgetWindow spwmw("C:/Program Files (x86)/Steam/steamapps/workshop/content/672870/2136442401", "appid", "qmlWidget", { 0, 0 }, true);
+        //WidgetWindow spwmw("test", "appid", "qmlWidget", { 100, 100 }, true);
+
+        QString exampleContentPath = QString(SCREENPLAY_SOURCE_DIR) + "/Content";
+        QStringList contentFolder = {
+            "/widget_analogClock",
+            "/widget_digitalClock",
+            "/widget_xkcd"
+        };
+        QString projectPath = exampleContentPath + contentFolder.at(0);
+
+        WidgetWindow spwmw(projectPath,
+            "appid",
+            "qmlWidget",
+            { 0, 0 },
+            true);
+
         return app.exec();
     }
 
@@ -60,8 +77,10 @@ int main(int argc, char* argv[])
         argumentList.at(2), // AppID
         argumentList.at(3), // Type
         QPoint { positionX, positionY });
+
 #if defined(Q_OS_OSX)
     MacUtils::showDockIcon(false);
 #endif
+
     return app.exec();
 }

ScreenPlayWidget/qml/Widget.qml

@@ -56,6 +56,20 @@ Item {
         opacity: 0
     }
 
+    Connections {
+        ignoreUnknownSignals: true
+        target: loader.item
+        // Some width do not know their implicit size,
+        // see the xkcd example.
+        function onImplicitWidthChanged() {
+            print()
+            root.width = loader.item.implicitWidth
+        }
+        function onImplicitHeightChanged() {
+            root.height = loader.item.implicitHeight
+        }
+    }
+
     Loader {
         id: loader
         opacity: 0