1 files changed, 121 insertions, 0 deletions
diff --git a/ImageViewer.qml b/ImageViewer.qml
new file mode 100644
index 0000000..30a28e2
--- /dev/null
+++ b/ImageViewer.qml
@@ -0,0 +1,121 @@
+import QtQuick
+import QtQuick.Controls
+
+Page {
+    id: root
+
+    implicitWidth: 550
+    implicitHeight: 300
+
+    contentItem: Control {
+        id: container
+
+        property real iscale: 1
+        property size fitSize: {
+            const ss = image.sourceSize;
+            const ratio = ss.width / ss.height;
+            return ratio < width/height ? Qt.size(height * ratio, height) : Qt.size(width, width / ratio);
+        }
+
+        contentItem: Flickable {
+            id: flickable
+
+            clip: true
+
+            leftMargin: Math.max(0, width - contentWidth) / 2 // Centering the content
+            topMargin: Math.max(0, height - contentHeight) / 2
+
+            contentWidth: container.fitSize.width
+            contentHeight: container.fitSize.height
+
+            rebound: Transition {}
+            boundsBehavior: Flickable.StopAtBounds
+            ScrollBar.vertical: ScrollBar {}
+            ScrollBar.horizontal: ScrollBar {}
+
+
+            Image {
+                id: image
+
+                cache: false
+                smooth: false
+                asynchronous: true
+                retainWhileLoading: true
+
+                source: apiRoot + "/sensor/image"
+
+                width: flickable.contentWidth
+                height: flickable.contentHeight
+
+                function updateImage() {
+                    if (image.source == apiRoot + "/sensor/image")
+                        image.source = apiRoot + "/sensor/image2"
+                    else
+                        image.source = apiRoot + "/sensor/image"
+
+                    //     console.log("\nflickImg.width: ", flickImg.width,
+                    //                 "\nflickImg.height: ", flickImg.height,
+                    //                 "\nimg.width: ", img.width,
+                    //                 "\nimg.width: ", img.height,
+                    //                 "\nimg.width: ", img.scale,
+                    //                 "\nimg.imgRatio: ", img.imgRatio,
+                    //                 "\n----------------------------------------"
+                    //                 );
+                }
+
+                Shortcut {
+                    sequence: "ctrl+m"
+                    onActivated: smooth = !smooth
+                }
+
+                onStatusChanged: {
+                    // console.log(image.source)
+                    if (status == Image.Ready) {
+                        updateImage();
+
+                        ++imageFpsTimer.fpsCounter;
+                    }
+                }
+
+                MouseArea {
+                    hoverEnabled: true
+                    anchors.fill: parent
+                    onWheel: function(e) {
+                        const { width, height } = container.fitSize;
+                        const mousePos = Qt.point(mouseX, mouseY);
+
+                        // container.iscale += e.angleDelta.y / 120;
+
+                        if (e.angleDelta.y < 0) {
+                            container.iscale /= 1.2
+                        } else {
+                            container.iscale *= 1.2
+                        }
+
+                        flickable.resizeContent(width * container.iscale, height * container.iscale, mousePos);
+                        flickable.returnToBounds();
+                    }
+                }
+
+                Timer {
+                    id: imageFpsTimer
+
+                    interval: 1000
+                    repeat: true
+                    running: true
+
+                    property int fpsCounter: 0
+
+                    onTriggered: {
+                        fpsLabel.text = qsTr("Fps") + ": " + fpsCounter
+                        fpsCounter = 0
+
+                        image.updateImage()
+                    }
+                }
+            }
+        }
+
+        background: Rectangle { color: "#121314" }
+    }
+}