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