Example: Move the shader code out of QML

In Qt 6, the fragment and vertex shader
programs have to be compiled into a package
using the shader tool offered. These packages
can then be added to the application's resource
and referred to using its relative URL.

In addition, addressed a few warnings
reported by Qt Creator.

Change-Id: Ic49f514d617182d21433d71bb3d18030667baeff
Reviewed-by: Topi Reiniö <topi.reinio@qt.io>
Reviewed-by: Laszlo Agocs <laszlo.agocs@qt.io>

12 files changed, 135 insertions, 49 deletions

diff --git a/examples/demos/tweetsearch/CMakeLists.txt b/examples/demos/tweetsearch/CMakeLists.txt
index 7ba34ee84..2e648e31d 100644
--- a/examples/demos/tweetsearch/CMakeLists.txt
+++ b/examples/demos/tweetsearch/CMakeLists.txt
@@ -52,9 +52,13 @@ set(qmake_content_resource_files
     "content/resources/icon-search.png"
     "content/tweetsearch.mjs"
     "tweetsearch.qml"
+    "content/shaders/effect.frag"
+    "content/shaders/effect.frag.qsb"
+    "content/shaders/effect.vert"
+    "content/shaders/effect.vert.qsb"
 )
 
-qt6_add_resources(tweetsearch "qmake_content"
+qt6_add_resources(tweetsearch "qml_and_shader_content"
     PREFIX
         "/demos/tweetsearch"
     FILES
diff --git a/examples/demos/tweetsearch/content/FlipBar.qml b/examples/demos/tweetsearch/content/FlipBar.qml
index 608f5cc08..04ac8d4f1 100644
--- a/examples/demos/tweetsearch/content/FlipBar.qml
+++ b/examples/demos/tweetsearch/content/FlipBar.qml
@@ -89,7 +89,7 @@ Item {
         effect.visible = true;
         effect.sourceA = effect.source1
         effect.sourceB = effect.source2
-        if (start == undefined)
+        if (start === undefined)
             start = 1.0;
         deltaAnim.from = start;
         deltaAnim.to = 0.0
@@ -101,7 +101,7 @@ Item {
         effect.visible = true;
         effect.sourceA = effect.source1
         effect.sourceB = effect.source2
-        if (start == undefined)
+        if (start === undefined)
             start = 0.0;
         deltaAnim.from = start;
         deltaAnim.to = 1.0
@@ -139,45 +139,9 @@ Item {
             hideSource: effect.visible
         }
 
-        fragmentShader: "
-            uniform lowp float qt_Opacity;
-            uniform sampler2D sourceA;
-            uniform sampler2D sourceB;
-            uniform highp float delta;
-            varying highp vec2 qt_TexCoord0;
-            void main() {
-                highp vec4 tex = vec4(qt_TexCoord0.x, qt_TexCoord0.y * 2.0, qt_TexCoord0.x, (qt_TexCoord0.y-0.5) * 2.0);
-                highp float shade = clamp(delta*2.0, 0.5, 1.0);
-                highp vec4 col;
-                if (qt_TexCoord0.y < 0.5) {
-                    col = texture2D(sourceA, tex.xy) * (shade);
-                } else {
-                    col = texture2D(sourceB, tex.zw) * (1.5 - shade);
-                    col.w = 1.0;
-                }
-                gl_FragColor = col * qt_Opacity;
-            }
-        "
+        fragmentShader: "shaders/effect.frag.qsb"
         property real h: height
-        vertexShader: "
-        uniform highp float delta;
-        uniform highp float factor;
-        uniform highp float h;
-        uniform highp mat4 qt_Matrix;
-        attribute highp vec4 qt_Vertex;
-        attribute highp vec2 qt_MultiTexCoord0;
-        varying highp vec2 qt_TexCoord0;
-        void main() {
-            highp vec4 pos = qt_Vertex;
-            if (qt_MultiTexCoord0.y == 0.0)
-                pos.x += factor * (1. - delta) * (qt_MultiTexCoord0.x * -2.0 + 1.0);
-            else if (qt_MultiTexCoord0.y == 1.0)
-                pos.x += factor * (delta) * (qt_MultiTexCoord0.x * -2.0 + 1.0);
-            else
-                pos.y = delta * h;
-            gl_Position = qt_Matrix * pos;
-            qt_TexCoord0 = qt_MultiTexCoord0;
-        }"
+        vertexShader: "shaders/effect.vert.qsb"
 
     }
 }
diff --git a/examples/demos/tweetsearch/content/ListFooter.qml b/examples/demos/tweetsearch/content/ListFooter.qml
index b84496d4c..40e9467c4 100644
--- a/examples/demos/tweetsearch/content/ListFooter.qml
+++ b/examples/demos/tweetsearch/content/ListFooter.qml
@@ -57,7 +57,7 @@ Rectangle {
     z: 2
     Connections {
         target: mainListView
-        onAutoSearch: {
+        function onAutoSearch() {
             if (type == 'tag') {
                 tagSearch.open()
                 tagSearch.searchText = str
diff --git a/examples/demos/tweetsearch/content/TweetDelegate.qml b/examples/demos/tweetsearch/content/TweetDelegate.qml
index dfcb3dc7f..3b975f800 100644
--- a/examples/demos/tweetsearch/content/TweetDelegate.qml
+++ b/examples/demos/tweetsearch/content/TweetDelegate.qml
@@ -94,11 +94,12 @@ Item {
                 id: placeHolder
                 source: "resources/anonymous.png"
                 x: 10; y: 9
-                visible: avatar.status != Image.Ready
+                visible: avatar.status !== Image.Ready
             }
 
             Image {
                 id: avatar
+                asynchronous: true
                 source: model.userImage
                 anchors.fill: placeHolder
                 MouseArea {
@@ -161,6 +162,7 @@ Item {
 
             Image {
                 id: avatar2
+                asynchronous: true
                 source: model.userImage
                 anchors.right: parent.right
                 anchors.rightMargin: 10
diff --git a/examples/demos/tweetsearch/content/TweetsModel.qml b/examples/demos/tweetsearch/content/TweetsModel.qml
index f2de931a4..d4edbf105 100644
--- a/examples/demos/tweetsearch/content/TweetsModel.qml
+++ b/examples/demos/tweetsearch/content/TweetsModel.qml
@@ -75,7 +75,7 @@ Item {
     function reload() {
         tweets.clear()
 
-        if (from == "" && phrase == "")
+        if (from === "" && phrase === "")
             return;
 
 //! [requesting]
@@ -90,7 +90,13 @@ Item {
             } else {
                 for (var key in objectArray.statuses) {
                     var jsonObject = objectArray.statuses[key];
-                    tweets.append(jsonObject);
+                    var cleanJsonObject = {};
+                    // iterate through the json objects
+                    // and drop those with 'null' values.
+                    for (var subkey in jsonObject)
+                        if (jsonObject[subkey] !== null)
+                            cleanJsonObject[subkey] = jsonObject[subkey]
+                    tweets.append(cleanJsonObject);
                 }
             }
             wrapper.isLoaded()
diff --git a/examples/demos/tweetsearch/content/shaders/compile.bat b/examples/demos/tweetsearch/content/shaders/compile.bat
new file mode 100644
index 000000000..c4211f274
--- /dev/null
+++ b/examples/demos/tweetsearch/content/shaders/compile.bat
@@ -0,0 +1,52 @@
+:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+::
+:: Copyright (C) 2020 The Qt Company Ltd.
+:: Contact: https://www.qt.io/licensing/
+::
+:: This file is part of the examples of the Qt Toolkit.
+::
+:: $QT_BEGIN_LICENSE:BSD$
+:: Commercial License Usage
+:: Licensees holding valid commercial Qt licenses may use this file in
+:: accordance with the commercial license agreement provided with the
+:: Software or, alternatively, in accordance with the terms contained in
+:: a written agreement between you and The Qt Company. For licensing terms
+:: and conditions see https://www.qt.io/terms-conditions. For further
+:: information use the contact form at https://www.qt.io/contact-us.
+::
+:: BSD License Usage
+:: Alternatively, you may use this file under the terms of the BSD license
+:: as follows:
+::
+:: "Redistribution and use in source and binary forms, with or without
+:: modification, are permitted provided that the following conditions are
+:: met:
+::   * Redistributions of source code must retain the above copyright
+::     notice, this list of conditions and the following disclaimer.
+::   * Redistributions in binary form must reproduce the above copyright
+::     notice, this list of conditions and the following disclaimer in
+::     the documentation and/or other materials provided with the
+::     distribution.
+::   * Neither the name of The Qt Company Ltd nor the names of its
+::     contributors may be used to endorse or promote products derived
+::     from this software without specific prior written permission.
+::
+::
+:: THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+:: "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+:: LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+:: A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+:: OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+:: SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+:: LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+:: DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+:: THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+:: (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+:: OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+::
+:: $QT_END_LICENSE$
+::
+:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+
+qsb --glsl "150,120,100 es" --hlsl 50 --msl 12 -c -o effect.frag.qsb effect.frag
+qsb -b --glsl "150,120,100 es" --hlsl 50 --msl 12 -c -o effect.vert.qsb effect.vert
diff --git a/examples/demos/tweetsearch/content/shaders/effect.frag b/examples/demos/tweetsearch/content/shaders/effect.frag
new file mode 100644
index 000000000..63017e8ad
--- /dev/null
+++ b/examples/demos/tweetsearch/content/shaders/effect.frag
@@ -0,0 +1,28 @@
+#version 440
+
+
+
+layout(location = 0) in vec2 qt_TexCoord0;
+layout(location = 0) out vec4 fragColor;
+
+layout(binding = 1) uniform sampler2D sourceA;
+layout(binding = 2) uniform sampler2D sourceB;
+
+layout(std140, binding = 0) uniform buf {
+    mat4 qt_Matrix;
+    float qt_Opacity;
+    float delta;
+};
+
+void main() {
+    vec4 tex = vec4(qt_TexCoord0.x, qt_TexCoord0.y * 2.0, qt_TexCoord0.x, (qt_TexCoord0.y-0.5) * 2.0);
+    float shade = clamp(delta*2.0, 0.5, 1.0);
+    vec4 col;
+    if (qt_TexCoord0.y < 0.5) {
+        col = texture(sourceA, tex.xy) * (shade);
+    } else {
+        col = texture(sourceB, tex.zw) * (1.5 - shade);
+        col.w = 1.0;
+    }
+    fragColor = col * qt_Opacity;
+}
diff --git a/examples/demos/tweetsearch/content/shaders/effect.frag.qsb b/examples/demos/tweetsearch/content/shaders/effect.frag.qsb
new file mode 100644
index 000000000..91a5c326e
--- /dev/null
+++ b/examples/demos/tweetsearch/content/shaders/effect.frag.qsb
diff --git a/examples/demos/tweetsearch/content/shaders/effect.vert b/examples/demos/tweetsearch/content/shaders/effect.vert
new file mode 100644
index 000000000..c56751427
--- /dev/null
+++ b/examples/demos/tweetsearch/content/shaders/effect.vert
@@ -0,0 +1,26 @@
+#version 440
+
+layout(location = 0) in vec4 qt_Vertex;
+layout(location = 1) in vec2 qt_MultiTexCoord0;
+layout(location = 0) out vec2 qt_TexCoord0;
+
+layout(std140, binding = 0) uniform buf {
+    mat4 qt_Matrix;
+    float qt_Opacity;
+    float delta;
+    float h;
+    float factor;
+};
+
+
+void main() {
+    vec4 pos = qt_Vertex;
+    if (qt_MultiTexCoord0.y == 0.0)
+        pos.x += factor * (1. - delta) * (qt_MultiTexCoord0.x * -2.0 + 1.0);
+    else if (qt_MultiTexCoord0.y == 1.0)
+        pos.x += factor * (delta) * (qt_MultiTexCoord0.x * -2.0 + 1.0);
+    else
+        pos.y = delta * h;
+    gl_Position = qt_Matrix * pos;
+    qt_TexCoord0 = qt_MultiTexCoord0;
+}
diff --git a/examples/demos/tweetsearch/content/shaders/effect.vert.qsb b/examples/demos/tweetsearch/content/shaders/effect.vert.qsb
new file mode 100644
index 000000000..23df5ca55
--- /dev/null
+++ b/examples/demos/tweetsearch/content/shaders/effect.vert.qsb
diff --git a/examples/demos/tweetsearch/tweetsearch.pro b/examples/demos/tweetsearch/tweetsearch.pro
index 3995a15f6..49fa7d7d4 100644
--- a/examples/demos/tweetsearch/tweetsearch.pro
+++ b/examples/demos/tweetsearch/tweetsearch.pro
@@ -19,7 +19,11 @@ content.files = \
         content/resources/icon-clear.png \
         content/resources/icon-loading.png \
         content/resources/icon-refresh.png \
-        content/resources/icon-search.png
+        content/resources/icon-search.png \
+        content/shaders/effect.frag \
+        content/shaders/effect.frag.qsb \
+        content/shaders/effect.vert \
+        content/shaders/effect.vert.qsb
 
 RESOURCES += content
 
diff --git a/examples/demos/tweetsearch/tweetsearch.qml b/examples/demos/tweetsearch/tweetsearch.qml
index 82a95c9f2..d9508ad99 100644
--- a/examples/demos/tweetsearch/tweetsearch.qml
+++ b/examples/demos/tweetsearch/tweetsearch.qml
@@ -63,7 +63,7 @@ Rectangle {
     property var idx
     property var ids
 
-    Component.onCompleted: ids = new Array()
+    Component.onCompleted: ids = []
 
     function idInModel(id)
     {
@@ -77,7 +77,7 @@ Rectangle {
         id: tweetsModel
         onIsLoaded: {
             console.debug("Reload")
-            idx = new Array()
+            idx = []
             for (var i = 0; i < tweetsModel.model.count; i++) {
                 var id = tweetsModel.model.get(i).id
                 if (!idInModel(id))
@@ -128,7 +128,7 @@ Rectangle {
         footer: ListFooter { }
 
         function clear() {
-            ids = new Array()
+            ids = []
             model.clear()
         }