WIP: Move polarplot and waterfallplot to use material and shaders

pingviewer.pro

@@ -24,7 +24,7 @@ RESOURCES += \
 
 # Warning as error
 *-g++ | *-clang {
-    QMAKE_CXXFLAGS += -Werror
+    #QMAKE_CXXFLAGS += -Werror
 }
 *msvc {
     QMAKE_CXXFLAGS += /WX \

qml/MainPage.qml

@@ -15,6 +15,8 @@ import PingEnumNamespace 1.0
 import SettingsManager 1.0
 import StyleManager 1.0
 
+import QQuickOpenGL 1.0
+
 Item {
     id: root
     visible: true
@@ -260,6 +262,20 @@ Item {
             radialGradient : sensorVisualizer.toString().includes("Ping360") ? radialGradient : linearGradient
     }
 
+    QQuickOpenGL {
+        id: potato
+        //width: 200
+        //height: 200
+        anchors.centerIn: parent
+        //anchors.fill: parent
+        width: Math.min(parent.height, parent.width)
+        height: width
+        //width: 200
+        //height: 200
+        visible: true
+        z: 10000000
+    }
+
     PingStatus {
         // We need to be over the mainvisualizer
         z: sensorVisualizer ? sensorVisualizer.z + 1 : 0

qml/Ping1DVisualizer.qml

@@ -62,8 +62,21 @@ Item {
         orientation: Qt.Horizontal
         anchors.fill: parent
 
-        WaterfallPlot {
-            id: waterfall
+        ShaderEffect {
+            id: shader
+
+            WaterfallPlot {
+                id: waterfall
+                visible: false
+                anchors.fill: parent
+            }
+
+            property variant src: waterfall
+            property variant horizontalRatio: waterfall.drawHorizontalRatio
+            property variant verticalRatio: waterfall.drawVerticalRatio
+            vertexShader: "qrc:/opengl/waterfallplot/vertex.glsl"
+            fragmentShader: "qrc:/opengl/waterfallplot/fragment.glsl"
+
             Layout.fillHeight: true
             Layout.fillWidth: true
             Layout.preferredWidth: 350

qml/Ping360Visualizer.qml

@@ -60,7 +60,7 @@ Item {
 
     onWidthChanged: {
         if(chart.Layout.minimumWidth === chart.width) {
-            shader.parent.width = width - chart.width
+            waterfall.parent.width = width - chart.width
         }
     }
 
@@ -73,25 +73,25 @@ Item {
             Layout.fillHeight: true
             Layout.fillWidth: true
 
-            /** TODO: The shader logic should be inside done inside of PolarPlot c++ Object
-             *   Or better encapsulated
-             */
-            ShaderEffect {
-                id: shader
+            PolarPlot {
+                id: waterfall
+                /*
                 height: Math.min(ping.sectorSize > 180 ? parent.height : parent.height*2, parent.width*scale)
                 width: height
                 anchors.horizontalCenter: parent.horizontalCenter
                 anchors.verticalCenter: ping.sectorSize > 180 ? parent.verticalCenter : parent.bottom
+                */
+                anchors.fill: parent
 
                 property var scale: ping.sectorSize >= 180 ? 1 : 0.8/Math.sin(ping.sectorSize*Math.PI/360)
-                property variant src: waterfall
+                //property variant src: waterfall
                 property var angle: 1
 
                 property bool verticalFlip: false
                 property bool horizontalFlip: false
 
-                vertexShader: "qrc:/opengl/polarplot/vertex.glsl"
-                fragmentShader: "qrc:/opengl/polarplot/fragment.glsl"
+                //vertexShader: "qrc:/opengl/polarplot/vertex.glsl"
+                //fragmentShader: "qrc:/opengl/polarplot/fragment.glsl"
 
                 Text {
                     id: northText
@@ -158,7 +158,7 @@ Item {
                 }
 
                 Shape {
-                    visible: waterfall.containsMouse
+                    //visible: waterfall.containsMouse
                     anchors.centerIn: parent
                     opacity: 0.5
                     ShapePath {
@@ -168,30 +168,24 @@ Item {
                         startY: 0
                         //TODO: This need to be updated in sensor integration
                         PathLine {
-                            property real angle: -Math.atan2(waterfall.mousePos.x - waterfall.width/2, waterfall.mousePos.y - waterfall.height/2) + Math.PI/2
+                            property real angle: 0//-Math.atan2(waterfall.mousePos.x - waterfall.width/2, waterfall.mousePos.y - waterfall.height/2) + Math.PI/2
                             x: waterfall.width*Math.cos(angle)/2
                             y: waterfall.height*Math.sin(angle)/2
                         }
                     }
                 }
 
                 transform: Rotation {
-                    origin.x: shader.width/2
-                    origin.y: shader.height/2
-                    axis { x: shader.verticalFlip; y: shader.horizontalFlip; z: ping.sectorSize > 180}
+                    origin.x: waterfall.width/2
+                    origin.y: waterfall.height/2
+                    axis { x: waterfall.verticalFlip; y: waterfall.horizontalFlip; z: ping.sectorSize > 180}
                     angle: -ping.heading*180/200
                 }
             }
 
-            PolarPlot {
-                id: waterfall
-                anchors.fill: shader
-                visible: false
-            }
-
             Text {
                 id: mouseReadout
-                visible: waterfall.containsMouse
+                //visible: waterfall.containsMouse
                 anchors.right: parent.right
                 anchors.top: parent.top
                 anchors.margins: 5
@@ -214,17 +208,17 @@ Item {
 
                     function calcAngleFromFlips(angle) {
                         var value = waterfall.mouseSampleAngle
-                        if(shader.verticalFlip && shader.horizontalFlip) {
+                        if(waterfall.verticalFlip && waterfall.horizontalFlip) {
                             value = (360 + 270 - value) % 360
                             return transformValue(value)
                         }
 
-                        if(shader.verticalFlip) {
+                        if(waterfall.verticalFlip) {
                             value = (360 + 180 - value) % 360
                             return transformValue(value)
                         }
 
-                        if(shader.horizontalFlip) {
+                        if(waterfall.horizontalFlip) {
                             value = 360 - value
                             return transformValue(value)
                         }
@@ -236,7 +230,7 @@ Item {
 
             PolarGrid {
                 id: polarGrid
-                anchors.fill: shader
+                anchors.fill: waterfall
                 angle: ping.sectorSize
                 maxDistance: waterfall.maxDistance
             }
@@ -246,7 +240,7 @@ Item {
                 height: 10
                 anchors.bottom: parent.bottom
                 anchors.right: parent.right
-                waterfallGradient: waterfall.waterfallGradient
+                //waterfallGradient: waterfall.waterfallGradient
             }
         }
 
@@ -311,7 +305,7 @@ Item {
                 Layout.columnSpan: 5
                 Layout.fillWidth: true
                 onCheckStateChanged: {
-                    shader.horizontalFlip = checkState
+                    waterfall.horizontalFlip = checkState
                 }
             }
 

qml/main.qml

@@ -29,6 +29,7 @@ ApplicationWindow {
             width: parent.width/2
             height: parent.height*0.9
             anchors.centerIn: parent
+            visible: false
         }
     }
 

qml/opengl/polarplot/fragment.glsl

@@ -3,10 +3,12 @@
  * Tilman Schmidt [KeyMaster-] example
  */
 uniform sampler2D src;
-uniform float angle;
 varying vec2 coord;
 
 void main() {
+    gl_FragColor = vec4(0, coord.x, coord.y, 1.0);
+    return;
+
     vec2 sizeOverRadius = vec2(2.0, 2.0);
     float sampleOffset = 0.0;
     float polarFactor = 1.0;
@@ -25,8 +27,8 @@ void main() {
     polar.y = sqrt(relPos.x * relPos.x + relPos.y * relPos.y);
 
     //Any radius over 1 would go beyond the source texture size, this simply outputs black for those fragments
-    if(polar.y > 1.0){
-        gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
+    if(polar.y > 0.5){
+        gl_FragColor = vec4(0.0, 1.0, 1.0, 1.0);
         return;
     }
 

qml/opengl/polarplot/vertex.glsl

@@ -1,8 +1,6 @@
-uniform highp mat4 qt_Matrix;
-attribute highp vec4 qt_Vertex;
-attribute highp vec2 qt_MultiTexCoord0;
-varying highp vec2 coord;
+attribute vec4 vertices;
+varying vec2 coords;
 void main() {
-    coord = qt_MultiTexCoord0;
-    gl_Position = qt_Matrix * qt_Vertex;
+    gl_Position = vertices;
+    coords = vertices.xy;
 }

qml/opengl/qquickopengl/fragment.glsl

@@ -0,0 +1,10 @@
+varying highp vec2 coord;
+uniform lowp float qt_Opacity;
+void main() {
+    float d = distance(coord, vec2(0.5, 0.5));
+    if ( d > 0.5) {
+        gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0) * qt_Opacity;
+        return;
+    }
+    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0) * qt_Opacity;
+}

qml/opengl/qquickopengl/vertex.glsl

@@ -0,0 +1,11 @@
+uniform highp mat4 qt_Matrix;
+
+attribute highp vec4 qt_Vertex;
+attribute highp vec2 qt_MultiTexCoord0;
+
+varying highp vec2 coord;
+
+void main() {
+    gl_Position = qt_Matrix * qt_Vertex;
+    coord = qt_MultiTexCoord0;// + vec2(1.0, 1.0)) / 2.0;
+}

qml/opengl/waterfallplot/fragment.glsl

@@ -0,0 +1,11 @@
+varying vec2 coord;
+uniform float horizontalRatio;
+uniform float verticalRatio;
+uniform sampler2D src;
+
+void main() {
+    // Mod is used to wrap around the 0-1 scaled x axis
+    vec2 shiftedCoord = mod(coord + vec2(horizontalRatio, 0), 1.0);
+    shiftedCoord.y = shiftedCoord.y * verticalRatio;
+    gl_FragColor = texture2D(src, shiftedCoord);
+}

qml/opengl/waterfallplot/vertex.glsl

@@ -0,0 +1,8 @@
+uniform highp mat4 qt_Matrix;
+attribute highp vec4 qt_Vertex;
+attribute highp vec2 qt_MultiTexCoord0;
+varying highp vec2 coord;
+void main() {
+    coord = qt_MultiTexCoord0;
+    gl_Position = qt_Matrix * qt_Vertex;
+}

resources.qrc

@@ -69,5 +69,9 @@
     <qresource prefix="/opengl">
         <file alias="polarplot/fragment.glsl">qml/opengl/polarplot/fragment.glsl</file>
         <file alias="polarplot/vertex.glsl">qml/opengl/polarplot/vertex.glsl</file>
+        <file alias="qquickopengl/fragment.glsl">qml/opengl/qquickopengl/fragment.glsl</file>
+        <file alias="qquickopengl/vertex.glsl">qml/opengl/qquickopengl/vertex.glsl</file>
+        <file alias="waterfallplot/fragment.glsl">qml/opengl/waterfallplot/fragment.glsl</file>
+        <file alias="waterfallplot/vertex.glsl">qml/opengl/waterfallplot/vertex.glsl</file>
     </qresource>
 </RCC>

src/CMakeLists.txt

@@ -8,6 +8,7 @@ set(INCLUDE_DIRS
     mavlink
     network
     notification
+    qquickcomponents
     sensor
     settings
     style

src/main.cpp

@@ -22,11 +22,14 @@
 #include "ping.h"
 #include "ping360.h"
 #include "polarplot.h"
+#include "qquickopengl.h"
 #include "settingsmanager.h"
 #include "stylemanager.h"
 #include "util.h"
 #include "waterfallplot.h"
 
+#include "qquickopengl.h"
+
 Q_DECLARE_LOGGING_CATEGORY(mainCategory)
 
 PING_LOGGING_CATEGORY(mainCategory, "ping.main")
@@ -68,6 +71,7 @@ int main(int argc, char *argv[])
     qmlRegisterType<Ping>("Ping", 1, 0, "Ping");
     qmlRegisterType<Ping360>("Ping360", 1, 0, "Ping360");
     qmlRegisterType<PolarPlot>("PolarPlot", 1, 0, "PolarPlot");
+    qmlRegisterType<QQuickOpenGL>("QQuickOpenGL", 1, 0, "QQuickOpenGL");
     qmlRegisterType<WaterfallPlot>("WaterfallPlot", 1, 0, "WaterfallPlot");
 
     qmlRegisterUncreatableMetaObject(

src/qquickcomponents/CMakeLists.txt

@@ -0,0 +1,11 @@
+add_library(
+    qquickcomponents
+STATIC
+    qquickopengl.cpp
+)
+
+target_link_libraries(qquickcomponents
+PRIVATE
+    Qt5::Core
+    Qt5::Quick
+)

src/qquickcomponents/qquickcomponents.pri

@@ -0,0 +1,7 @@
+INCLUDEPATH += $$PWD
+
+HEADERS += \
+    $$PWD/*.h
+
+SOURCES += \
+    $$PWD/*.cpp