[ui] add ColorCheckerViewer

meshroom/ui/qml/Viewer/ColorCheckerEntity.qml

@@ -0,0 +1,57 @@
+import QtQuick 2.11
+
+Item {
+    id: root
+
+    // required for perspective transform
+    property real sizeX: 1675.0  // might be overrided in ColorCheckerViewer
+    property real sizeY: 1125.0  // might be overrided in ColorCheckerViewer
+
+    property var colors: null
+
+    Rectangle {
+        id: canvas
+        anchors.centerIn: parent
+
+        width: parent.sizeX
+        height: parent.sizeY
+
+        color: "transparent"
+        border.width: Math.max(1, (12.0 / zoom))
+        border.color: "red"
+
+        transformOrigin: Item.TopLeft
+        transform: Matrix4x4 {
+            id: transformation
+            matrix: Qt.matrix4x4()
+        }
+
+    }
+
+    Grid {
+        spacing: 12.5
+        rows: 4
+        columns: 6
+
+        Repeater {
+            model: root.colors
+
+            Rectangle {
+                width: 125
+                height: 125
+                color: Qt.rgba(modelData.r, modelData.g, modelData.b, 1.0)
+            }
+        }
+    }
+
+
+    function transform(matrix) {
+        var m = matrix
+        transformation.matrix = Qt.matrix4x4(
+                m[0][0], m[0][1],  0, m[0][2],
+                m[1][0], m[1][1],  0, m[1][2],
+                      0,       0,  1,       0,
+                m[2][0], m[2][1],  0, m[2][2] )
+    }
+
+}

meshroom/ui/qml/Viewer/ColorCheckerViewer.qml

@@ -0,0 +1,82 @@
+import QtQuick 2.11
+
+Item {
+    id: root
+
+    property url source: undefined
+    property var sourceLastModified: null
+    property var json: null
+    property var image: null
+    property var viewId: null
+    property real zoom: 1.0
+
+    // required for perspective transform
+    readonly property real ccheckerSizeX: 1675.0
+    readonly property real ccheckerSizeY: 1125.0
+
+    // offset the cchecker top left corner to match the image top left corner
+    x: -image.width / 2 + ccheckerSizeX / 2
+    y: -image.height / 2 + ccheckerSizeY / 2
+
+    property var ccheckers: []
+
+
+    onVisibleChanged: { update() }
+    onSourceChanged: { update() }
+    onJsonChanged: { update() }
+
+    function update() {
+        readSourceFile()
+        if (root.json === null)
+            return;
+
+        loadCCheckers();
+    }
+
+    function readSourceFile() {
+        var xhr = new XMLHttpRequest;
+        xhr.open("GET", "file:///" + root.source);
+
+        xhr.onreadystatechange = function() {
+            if (xhr.readyState === XMLHttpRequest.DONE && xhr.status == 200) {
+
+                if(root.sourceLastModified === null
+                   || root.sourceLastModified < xhr.getResponseHeader('Last-Modified')
+                  ) {
+                    try {
+                        root.json = JSON.parse(xhr.responseText);
+                    }
+                    catch(exc)
+                    {
+                        console.warn("Failed to parse ColorCheckerDetection JSON file: " + source);
+                        return;
+                    }
+                    root.sourceLastModified = xhr.getResponseHeader('Last-Modified');
+                    loadCCheckers();
+                }
+            }
+        };
+        xhr.send();
+    }
+
+    function loadCCheckers() {
+        if (root.json === null)
+            return;
+
+        for (var i = 0; i < root.json.checkers.length; i++) {
+            // Only load ccheckers for the current view
+            if (root.viewId == root.json.checkers[i].viewId) {
+                var c = Qt.createComponent("ColorCheckerEntity.qml");
+
+                var obj = c.createObject(root, {
+                    sizeX: root.ccheckerSizeX,
+                    sizeY: root.ccheckerSizeY,
+                    colors: root.json.checkers[i].colors
+                })
+                obj.transform(root.json.checkers[i].transform)
+                ccheckers.push(obj)
+            }
+        }
+    }
+
+}

meshroom/ui/qml/Viewer/Viewer2D.qml

@@ -342,6 +342,24 @@ FocusScope {
                         }
                     }
                 }
+
+                // ColorCheckerViewer: display color checker detection results
+                // note: use a Loader to evaluate if a ColorCheckerDetection node exist and displayColorChecker checked at runtime
+                Loader {
+                    id: colorCheckerViewerLoader
+                    anchors.centerIn: parent
+                    property var activeNode: _reconstruction.activeNodes.get("ColorCheckerDetection").node
+                    active: (displayColorCheckerViewerLoader.checked && activeNode)
+
+
+                    sourceComponent: ColorCheckerViewer {
+                        visible: activeNode.isComputed && json !== undefined
+                        source: activeNode.attribute("outputData").value
+                        image: imgContainer.image
+                        viewId: _reconstruction.selectedViewId
+                        zoom: imgContainer.scale
+                    }
+                }
             }
 
             ColumnLayout {
@@ -645,6 +663,18 @@ FocusScope {
                             enabled: activeNode && activeNode.attribute("useFisheye").value
                             visible: activeNode
                         }
+                        MaterialToolButton {
+                            id: displayColorCheckerViewerLoader
+                            property var activeNode: _reconstruction.activeNodes.get('ColorCheckerDetection').node
+                            ToolTip.text: "Display Color Checker: " + (activeNode ? activeNode.label : "No Node")
+                            text: MaterialIcons.view_comfy //view_module grid_on gradient view_comfy border_all
+                            font.pointSize: 11
+                            Layout.minimumWidth: 0
+                            checkable: true
+                            checked: activeNode && activeNode.isComputed && _reconstruction.selectedViewId != -1
+                            enabled: activeNode && activeNode.isComputed && _reconstruction.selectedViewId != -1
+                            visible: activeNode
+                        }
 
                         MaterialToolButton {
                             id: displayLdrHdrCalibrationGraph