Added a options panel.

* Added screenshot action that saves two images: one of the main
  view (plot + splat) and one of the bottom view (bar chart)
* Added methods/signals/slots to Scatterplot for handling glyph sizes
* Added methods/signals/slots to VoronoiSplat for handling the
  alpha/beta parameters, which are now also no longer fixed
* Options panel:
  - glyph sizes of both CPs and RPs
  - splat opacity
  - splat parameters (alpha & beta)
  - color scale combo box currently does nothing

1 files changed, 181 insertions, 68 deletions

diff --git a/main_view.qml b/main_view.qml
index 68d6fea..544f7dc 100644
--- a/main_view.qml
+++ b/main_view.qml
@@ -10,10 +10,8 @@ ApplicationWindow {
     id: mainWindow
     title: "Projection"
     visible: true
-    contentItem.minimumWidth: 532
+    contentItem.minimumWidth: 800
     contentItem.minimumHeight: 622
-    contentItem.maximumWidth: contentItem.minimumWidth
-    contentItem.maximumHeight: contentItem.minimumHeight
     Component.onCompleted: {
         setX(Screen.width / 2 - width / 2);
         setY(Screen.height / 2 - height / 2);
@@ -23,6 +21,7 @@ ApplicationWindow {
         Menu {
             title: "File"
             MenuItem { action: savePlotAction }
+            MenuItem { action: screenshotAction }
             MenuItem { action: quitAction }
         }
 
@@ -89,78 +88,193 @@ ApplicationWindow {
         }
     }
 
-    ColumnLayout {
-        spacing: 10
+    GridLayout {
         anchors.fill: parent
-        anchors.margins: this.spacing
-
-        Rectangle {
-            //Layout.fillWidth: true
-            //Layout.fillHeight: true
-            width: 512
-            height: 512
-            border.width: 1
-            border.color: "#cccccc"
-
-            VoronoiSplat {
-                id: splat
-                objectName: "splat"
-                x: parent.x
-                y: parent.y
-                anchors.fill: parent
-            }
+        anchors.margins: 10
 
-            Scatterplot {
-                id: plot
-                objectName: "plot"
-                x: parent.x
-                y: parent.y
-                anchors.fill: parent
-            }
+        // Main panel
+        ColumnLayout {
+            Rectangle {
+                width: 512
+                height: 512
+                border.width: 1
+                border.color: "#cccccc"
+
+                Item {
+                    id: mainView
+                    anchors.fill: parent
+                    VoronoiSplat {
+                        id: splat
+                        objectName: "splat"
+                        x: parent.x
+                        y: parent.y
+                        anchors.fill: parent
+                    }
+
+                    Scatterplot {
+                        id: plot
+                        objectName: "plot"
+                        x: parent.x
+                        y: parent.y
+                        anchors.fill: parent
+                    }
+
+                    Scatterplot {
+                        id: cpPlot
+                        objectName: "cpPlot"
+                        x: parent.x
+                        y: parent.y
+                        anchors.fill: parent
+                    }
 
-            Scatterplot {
-                id: cpPlot
-                objectName: "cpPlot"
-                x: parent.x
-                y: parent.y
-                anchors.fill: parent
+                    Colormap {
+                        id: colormap
+                        objectName: "colormap"
+                        x: parent.x + 5
+                        y: parent.y + 5
+                        width: 128
+                        height: 10
+                    }
+                }
             }
 
-            Colormap {
-                id: colormap
-                objectName: "colormap"
-                x: parent.x + 5
-                y: parent.y + 5
-                width: 128
-                height: 10
+            Rectangle {
+                Layout.minimumHeight: 80
+                width: mainView.width
+                border.width: 1
+                border.color: "#cccccc"
+
+                Item {
+                    id: bottomView
+                    anchors.fill: parent
+                    BarChart {
+                        id: barChart
+                        objectName: "barChart"
+                        anchors.fill: parent
+                    }
+
+                    //HistoryGraph {
+                    //    id: history
+                    //    objectName: "history"
+                    //    anchors.fill: parent
+                    //}
+                }
             }
         }
 
-        Rectangle {
-            Layout.fillWidth: true
-            Layout.minimumHeight: 80
-            border.width: 1
-            border.color: "#cccccc"
+        // Options panel
+        RowLayout {
+            anchors.margins: parent.anchors.margins
+
+            // Left column
+            ColumnLayout {
+                GroupBox {
+                    title: "Scatterplot"
+
+                    ColumnLayout {
+                        GridLayout {
+                            columns: 2
+
+                            Label { text: "Colors:" }
+                            ComboBox {
+                                id: colormapCombo
+                                model: [ "Categorical", "Continuous", "Divergent", "Rainbow" ]
+                            }
+                        }
+
+                        GroupBox {
+                            flat: true
+                            title: "Glyph size"
+
+                            GridLayout {
+                                columns: 2
+                                Label { text: "Control points:" }
+                                SpinBox {
+                                    id: cpGlyphSizeSpinBox
+                                    maximumValue: 50
+                                    minimumValue: 8
+                                    value: cpPlot.glyphSize()
+                                    decimals: 1
+                                    stepSize: 1
+                                    onValueChanged: cpPlot.setGlyphSize(this.value)
+                                }
+
+                                Label { text: "Regular points:" }
+                                SpinBox {
+                                    id: rpGlyphSizeSpinBox
+                                    maximumValue: 50
+                                    minimumValue: 8
+                                    value: plot.glyphSize()
+                                    decimals: 1
+                                    stepSize: 1
+                                    onValueChanged: plot.setGlyphSize(this.value)
+                                }
+                            }
+                        }
+                    }
+                }
+
+                GroupBox {
+                    title: "Splat"
+
+                    GridLayout {
+                        columns: 2
+
+                        Label { text: "Alpha:" }
+                        SpinBox {
+                            id: alphaSpinBox
+                            maximumValue: 100
+                            minimumValue: 1
+                            value: splat.alpha()
+                            decimals: 2
+                            stepSize: 1
+                            onValueChanged: splat.setAlpha(this.value)
+                        }
 
-            BarChart {
-                id: barChart
-                objectName: "barChart"
-                anchors.fill: parent
+                        Label { text: "Beta:" }
+                        SpinBox {
+                            id: betaSpinBox
+                            maximumValue: 100
+                            minimumValue: 1
+                            value: splat.beta()
+                            decimals: 2
+                            stepSize: 1
+                            onValueChanged: splat.setBeta(this.value)
+                        }
+
+                        Label { text: "Opacity (%):" }
+                        SpinBox {
+                            id: splatOpacitySpinBox
+                            maximumValue: 100
+                            minimumValue: 0
+                            value: 100 * splat.opacity
+                            decimals: 0
+                            stepSize: 1
+                            onValueChanged: splat.opacity = this.value / 100
+                        }
+                    }
+                }
             }
 
-            //HistoryGraph {
-            //    id: history
-            //    objectName: "history"
-            //    anchors.fill: parent
-            //}
+            // Right column
+            ColumnLayout {
+            }
         }
     }
 
     Action {
-        id: quitAction
-        text: "&Quit"
-        shortcut: "Ctrl+Q"
-        onTriggered: Qt.quit()
+        id: screenshotAction
+        text: "Save screenshot"
+        shortcut: "Ctrl+Shift+S"
+        onTriggered: {
+            mainView.grabToImage(function(result) {
+                result.saveToFile("screenshot-main.png");
+            });
+
+            bottomView.grabToImage(function(result) {
+                result.saveToFile("screenshot-bottom.png");
+            });
+        }
     }
 
     Action {
@@ -173,6 +287,13 @@ ApplicationWindow {
         }
     }
 
+    Action {
+        id: quitAction
+        text: "&Quit"
+        shortcut: "Ctrl+Q"
+        onTriggered: Qt.quit()
+    }
+
     ExclusiveGroup {
         id: techniqueGroup
 
@@ -269,12 +390,4 @@ ApplicationWindow {
             onTriggered: console.log("stub: Silhouette")
         }
     }
-
-    // TODO
-    //Window {
-    //    title: "Options"
-    //    minimumWidth: 500
-    //    minimumHeight: 300
-    //    visible: false
-    //}
 }