Expose application options in the Launcher [DISCL-358]

apps/Launcher/qml/DefaultPanel.qml

@@ -19,6 +19,7 @@ Rectangle {
         color: Style.defaultPanelTextColor
     }
     Text {
+        id: smallText
         anchors.top: bigText.bottom
         anchors.horizontalCenter: parent.horizontalCenter
         font.pixelSize: 0.3 * bigText.font.pixelSize

apps/Launcher/qml/Menu.qml

@@ -10,6 +10,7 @@ Rectangle {
     signal clearSession()
     signal showFilesPanel()
     signal showSessionsPanel()
+    signal showOptionsPanel()
     signal showDemosPanel()
     signal startWebbrowser()
 
@@ -59,6 +60,13 @@ Rectangle {
             appCategory: "Session"
             appIsPanel: true
         }
+        ListElement {
+            appAction: "showOptionsPanel"
+            appName: "Settings"
+            appImage: "qrc:/images/settings.svg"
+            appCategory: "Options"
+            appIsPanel: true
+        }
         ListElement {
             appAction: "startWebbrowser"
             appName: "Webbrowser"
@@ -89,16 +97,23 @@ Rectangle {
 
     Component {
         id: sectionHeading
-        Rectangle {
-            width: appListView.width
-            height: 1.3 * sectionHeadingText.height
-            color: Style.menuSectionHeadingColor
-            Text {
-                id: sectionHeadingText
-                text: section
-                font.bold: true
-                font.pixelSize: menu.textSize
-                anchors.centerIn: parent
+        Column {
+            Rectangle {
+                width: appListView.width
+                height: 1.3 * sectionHeadingText.height
+                color: Style.menuSectionHeadingColor
+                Text {
+                    id: sectionHeadingText
+                    text: section
+                    font.bold: true
+                    font.pixelSize: menu.textSize
+                    anchors.centerIn: parent
+                }
+            }
+            Item {
+                id: spacer
+                width: appListView.width
+                height: width * 0.1
             }
         }
     }
@@ -112,11 +127,12 @@ Rectangle {
             anchors.horizontalCenter: parent.horizontalCenter
             Column {
                 spacing: 0.05 * width
+                anchors.horizontalCenter: parent.horizontalCenter
                 Image {
                     id: image
                     anchors.horizontalCenter: parent.horizontalCenter
-                    width: button.width
-                    height: button.width
+                    width: button.width * 0.7
+                    height: width
                     source: appImage
                     fillMode: Image.PreserveAspectFit
                     MouseArea {

apps/Launcher/qml/OptionsPanel.qml

@@ -0,0 +1,63 @@
+// Copyright (c) 2016, EPFL/Blue Brain Project
+//                          Raphael Dumusc <raphael.dumusc@epfl.ch>
+
+import QtQuick 2.0
+import QtQuick.Controls 1.2
+import "style.js" as Style
+
+DefaultPanel {
+    id: optionsPanel
+
+    signal buttonClicked(string optionName, bool value)
+    signal refreshOptions()
+
+    Grid {
+        id: optionsGrid
+        columns: 3
+        spacing: 20
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: parent.height * 0.15
+        anchors.horizontalCenter: parent.horizontalCenter
+
+        CheckBox {
+            id: windowBorders
+            text: "Window borders"
+            onClicked: buttonClicked("windowBorders", checked)
+        }
+        CheckBox {
+            id: windowTitles
+            text: "Window titles"
+            onClicked: buttonClicked("windowTitles", checked)
+        }
+        CheckBox {
+            id: autoFocusStreamers
+            text: "Auto-Focus Streamers"
+            onClicked: buttonClicked("autoFocusStreamers", checked)
+        }
+        CheckBox {
+            id: statistics
+            text: "Statistics"
+            onClicked: buttonClicked("statistics", checked)
+        }
+        CheckBox {
+            id: clock
+            text: "Clock"
+            onClicked: buttonClicked("clock", checked)
+        }
+        CheckBox {
+            id: alphaBlending
+            text: "Alpha blending"
+            onClicked: buttonClicked("alphaBlending", checked)
+        }
+    }
+
+    function updateCheckboxes(options) {
+        windowBorders.checked = options.windowBorders
+        windowTitles.checked = options.windowTitles
+        autoFocusStreamers.checked = options.autoFocusStreamers
+        statistics.checked = options.statistics
+        clock.checked = options.clock
+        alphaBlending.checked = options.alphaBlending
+    }
+    Component.onCompleted: refreshOptions()
+}

apps/Launcher/qml/main.qml

@@ -34,6 +34,7 @@ Rectangle {
             onShowFilesPanel: centralWidget.sourceComponent = fileBrowser
             onShowSessionsPanel: centralWidget.sourceComponent = sessionsBrowser
             onShowDemosPanel: centralWidget.sourceComponent = demoLauncher
+            onShowOptionsPanel: centralWidget.sourceComponent = optionsPanel
         }
         Loader {
             id: centralWidget
@@ -67,6 +68,14 @@ Rectangle {
         }
     }
 
+    Component {
+        id: optionsPanel
+        OptionsPanel {
+            onButtonClicked: sendRestOption(optionName, value)
+            onRefreshOptions: getRestOptions(updateCheckboxes)
+        }
+    }
+
     Component {
         id: demoLauncher
         DemoLauncher {
@@ -76,17 +85,36 @@ Rectangle {
     }
 
     function sendRestCommand(action, file) {
-        var xmlhttp = new XMLHttpRequest();
+        sendRestData(action, "uri", file);
+    }
+
+    function sendRestOption(optionName, value) {
+        sendRestData("options", optionName, value);
+    }
+
+    function sendRestData(action, key, value) {
+        var request = new XMLHttpRequest();
+        var url = "http://"+restHost+":"+restPort+"/tide/"+action;
+        var payload = typeof(value) === 'string' ? '{ "'+key+'" : "'+value+'" }'
+                                                 : '{ "'+key+'" : '+value+' }';
+        request.open("PUT", url, true);
+        request.send(payload);
+    }
+
+    function getRestOptions(callback) {
+        sendRestQuery("options", callback);
+    }
+
+    function sendRestQuery(action, callback) {
+        var request = new XMLHttpRequest()
         var url = "http://"+restHost+":"+restPort+"/tide/"+action;
 
-        xmlhttp.onreadystatechange = function() {
-            if (xmlhttp.readyState === XMLHttpRequest.DONE) {
-                if (xmlhttp.status == 200) {
-                    //var arr = JSON.parse(xmlhttp.responseText);
-                }
+        request.onreadystatechange = function() {
+            if (request.readyState === XMLHttpRequest.DONE && request.status == 200) {
+                callback(JSON.parse(request.responseText))
             }
         }
-        xmlhttp.open("PUT", url, true);
-        xmlhttp.send('{ "uri" : "'+file+'" }');
+        request.open("GET", url, true)
+        request.send()
     }
 }

apps/Launcher/resources.qrc

@@ -1,12 +1,13 @@
 <RCC>
     <qresource prefix="/qml">
-        <file>qml/main.qml</file>
-        <file>qml/FileBrowser.qml</file>
         <file>qml/style.js</file>
-        <file>qml/Menu.qml</file>
+        <file>qml/main.qml</file>
+        <file>qml/DefaultPanel.qml</file>
         <file>qml/DemoLauncher/DemoLauncher.qml</file>
         <file>qml/DemoLauncher/RenderingResourcesManager.js</file>
-        <file>qml/DefaultPanel.qml</file>
+        <file>qml/FileBrowser.qml</file>
+        <file>qml/Menu.qml</file>
+        <file>qml/OptionsPanel.qml</file>
     </qresource>
     <qresource prefix="/">
         <file>images/book.svg</file>
@@ -15,5 +16,6 @@
         <file>images/file.svg</file>
         <file>images/folder.svg</file>
         <file>images/left.svg</file>
+        <file>images/settings.svg</file>
     </qresource>
 </RCC>

doc/Changelog.md

@@ -3,6 +3,8 @@ Changelog {#Changelog}
 
 # git master (1.1.0)
 
+* [36](https://github.com/BlueBrain/Tide/pull/36):
+  The options can be modified from the Launcher panel.
 * [34](https://github.com/BlueBrain/Tide/pull/34):
   The options can be retrieved and modified through the REST interface.
 * [30](https://github.com/BlueBrain/Tide/pull/30):