Merge pull request #11644 from cain-kilgore/21508

WL 21508 - Improve upon Skybox Changer

interface/resources/qml/hifi/SkyboxChanger.qml

@@ -1,6 +1,6 @@
 //
-//  skyboxchanger.qml
+//  SkyboxChanger.qml
-//
+//  qml/hifi
 //
 //  Created by Cain Kilgore on 9th August 2017
 //  Copyright 2017 High Fidelity, Inc.
@@ -9,33 +9,97 @@
 //  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
 //
 
-import QtQuick.Layouts 1.3
+import QtQuick 2.5
+import "../styles-uit"
+import "../controls-uit" as HifiControls
 
-Rectangle {
+Item {
     id: root;
+    HifiConstants { id: hifi; }
+    
+    property var defaultThumbnails: [];
+    property var defaultFulls: [];
+    
+    SkyboxSelectionModel {
+        id: skyboxModel;
+    }
+    
+    function getSkyboxes() {
+        var xmlhttp = new XMLHttpRequest();
+        var url = "http://mpassets.highfidelity.com/5fbdbeef-1cf8-4954-811d-3d4acbba4dc9-v1/skyboxes.json";
+        xmlhttp.onreadystatechange = function() {
+            if (xmlhttp.readyState === XMLHttpRequest.DONE && xmlhttp.status === 200) {
+                sortSkyboxes(xmlhttp.responseText);
+            }
+        }
+        xmlhttp.open("GET", url, true);
+        xmlhttp.send();
+    }
+    
+    function sortSkyboxes(response) {
+        var arr = JSON.parse(response);
+        for (var i = 0; i < arr.length; i++) {
+            defaultThumbnails.push(arr[i].thumb);
+            defaultFulls.push(arr[i].full);
+        }
+        setDefaultSkyboxes();
+    }
+    
+    function setDefaultSkyboxes() {
+        for (var i = 0; i < skyboxModel.count; i++) {
+            skyboxModel.setProperty(i, "thumbnailPath", defaultThumbnails[i]);
+            skyboxModel.setProperty(i, "fullSkyboxPath", defaultFulls[i]);
+        }
+    }
+    
+    function shuffle(array) {
+        var tmp, current, top = array.length;
+        if (top) {
+            while (--top) {
+                current = Math.floor(Math.random() * (top + 1));
+                tmp = array[current];
+                array[current] = array[top];
+                array[top] = tmp;
+            }
+        }
+      return array;
+    }
 
-    color: hifi.colors.baseGray;
+    function chooseRandom() {
-
+        for (var a = [], i=0; i < defaultFulls.length; ++i) {
+            a[i] = i;
+        }
+        
+        a = shuffle(a);
+        
+        for (var i = 0; i < skyboxModel.count; i++) {
+            skyboxModel.setProperty(i, "thumbnailPath", defaultThumbnails[a[i]]);
+            skyboxModel.setProperty(i, "fullSkyboxPath", defaultFulls[a[i]]);
+        }
+    }
+    
+    
+    Component.onCompleted: {
+        getSkyboxes();
+    }
+    
     Item {
         id: titleBarContainer;
-        // Size
         width: parent.width;
-        height: 50;
+        height: childrenRect.height;
-        // Anchors
         anchors.left: parent.left;
         anchors.top: parent.top;
-
+        anchors.right: parent.right;
-        RalewaySemiBold {
+        anchors.topMargin: 20;
+        RalewayBold {
             id: titleBarText;
             text: "Skybox Changer";
-            // Text size
             size: hifi.fontSizes.overlayTitle;
-            // Anchors
+            anchors.top: parent.top;
-            anchors.fill: parent;
+            anchors.left: parent.left;
-            anchors.leftMargin: 16;
+            anchors.leftMargin: 40
-            // Style
+            height: paintedHeight;
             color: hifi.colors.lightGrayText;
-            // Alignment
             horizontalAlignment: Text.AlignHCenter;
             verticalAlignment: Text.AlignVCenter;
         }
@@ -43,131 +107,68 @@ Rectangle {
             id: titleBarDesc;
             text: "Click an image to choose a new Skybox.";
             wrapMode: Text.Wrap
-            // Text size
             size: 14;
-            // Anchors
+            anchors.top: titleBarText.bottom;
-            anchors.fill: parent;
+            anchors.left: parent.left;
-            anchors.top: titleBarText.bottom
+            anchors.leftMargin: 40
-            anchors.leftMargin: 16;
+            height: paintedHeight;
-            anchors.rightMargin: 16;
-            // Style
             color: hifi.colors.lightGrayText;
-            // Alignment
             horizontalAlignment: Text.AlignHCenter;
             verticalAlignment: Text.AlignVCenter;
-        }        
+        }
+        HifiControls.Button {
+            id: randomButton
+            text: "Randomize"
+            color: hifi.buttons.blue
+            colorScheme: root.colorScheme
+            width: 100
+            anchors.right: parent.right
+            anchors.top: parent.top
+            anchors.topMargin: 5
+            anchors.rightMargin: 40
+            onClicked: {
+                chooseRandom()
+            }
+        }
     }
     
-    // This RowLayout could be a GridLayout instead for further expandability.
+    GridView {
-    // As this SkyboxChanger task only required 6 images, implementing GridLayout wasn't necessary.
+        id: gridView
-    // In the future if this is to be expanded to add more Skyboxes, it might be worth changing this.
+        interactive: false
-    RowLayout {
+        clip: true
-        id: row1
         anchors.top: titleBarContainer.bottom
-        anchors.left: parent.left
+        anchors.topMargin: 20
-        anchors.leftMargin: 30
+        anchors.horizontalCenter: parent.horizontalCenter
-        Layout.fillWidth: true
+        width: 400
-        anchors.topMargin: 30
+        height: parent.height
-        spacing: 10
+        currentIndex: -1
-        Image {
+        
-            width: 200; height: 200
+        cellWidth: 200
-            fillMode: Image.Stretch
+        cellHeight: 200
-            source: "http://mpassets.highfidelity.com/05904016-8f7d-4dfc-88e1-2bf9ba3fac20-v1/thumbnails/thumb_1.jpg"
+        model: skyboxModel
-            clip: true
+        delegate: Item {
-            id: preview1
+            width: gridView.cellWidth
-            MouseArea {
+            height: gridView.cellHeight
+            Item {
                 anchors.fill: parent
-                onClicked: {
+                Image {
-                    sendToScript({method: 'changeSkybox', url: 'http://mpassets.highfidelity.com/05904016-8f7d-4dfc-88e1-2bf9ba3fac20-v1/skyboxes/1.jpg'});
+                    source: thumbnailPath
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    anchors.verticalCenter: parent.verticalCenter
+                    fillMode: Image.Stretch
+                    sourceSize.width: parent.width
+                    sourceSize.height: parent.height
+                    mipmap: true
                 }
             }
-            Layout.fillWidth: true
-        }
-        Image {
-            width: 200; height: 200
-            fillMode: Image.Stretch
-            source: "http://mpassets.highfidelity.com/05904016-8f7d-4dfc-88e1-2bf9ba3fac20-v1/thumbnails/thumb_2.jpg"
-            clip: true
-            id: preview2
             MouseArea {
                 anchors.fill: parent
                 onClicked: {
-                    sendToScript({method: 'changeSkybox', url: 'http://mpassets.highfidelity.com/05904016-8f7d-4dfc-88e1-2bf9ba3fac20-v1/skyboxes/2.png'});
+                    sendToScript({method: 'changeSkybox', url: fullSkyboxPath});
-                }
-            }
-        }
-    }
-    RowLayout {
-        id: row2
-        anchors.top: row1.bottom
-        anchors.topMargin: 10
-        anchors.left: parent.left
-        Layout.fillWidth: true
-        anchors.leftMargin: 30
-        spacing: 10
-        Image {
-            width: 200; height: 200
-            fillMode: Image.Stretch
-            source: "http://mpassets.highfidelity.com/05904016-8f7d-4dfc-88e1-2bf9ba3fac20-v1/thumbnails/thumb_3.jpg"
-            clip: true
-            id: preview3
-            MouseArea {
-                anchors.fill: parent
-                onClicked: {
-                    sendToScript({method: 'changeSkybox', url: 'http://mpassets.highfidelity.com/05904016-8f7d-4dfc-88e1-2bf9ba3fac20-v1/skyboxes/3.jpg'});
-                }
-            }
-        }
-        Image {
-            width: 200; height: 200
-            fillMode: Image.Stretch
-            source: "http://mpassets.highfidelity.com/05904016-8f7d-4dfc-88e1-2bf9ba3fac20-v1/thumbnails/thumb_4.jpg"
-            clip: true
-            id: preview4
-            MouseArea {
-                anchors.fill: parent
-                onClicked: {
-                    sendToScript({method: 'changeSkybox', url: 'http://mpassets.highfidelity.com/05904016-8f7d-4dfc-88e1-2bf9ba3fac20-v1/skyboxes/4.jpg'});
-                }
-            }
-        }
-    }
-    RowLayout {
-        id: row3
-        anchors.top: row2.bottom
-        anchors.topMargin: 10
-        anchors.left: parent.left
-        Layout.fillWidth: true
-        anchors.leftMargin: 30
-        spacing: 10
-        Image {
-            width: 200; height: 200
-            fillMode: Image.Stretch
-            source: "http://mpassets.highfidelity.com/05904016-8f7d-4dfc-88e1-2bf9ba3fac20-v1/thumbnails/thumb_5.jpg"
-            clip: true
-            id: preview5
-            MouseArea {
-                anchors.fill: parent
-                onClicked: {
-                    sendToScript({method: 'changeSkybox', url: 'http://mpassets.highfidelity.com/05904016-8f7d-4dfc-88e1-2bf9ba3fac20-v1/skyboxes/5.png'});
-                }
-            }
-        }
-        Image {
-            width: 200; height: 200
-            fillMode: Image.Stretch
-            source: "http://mpassets.highfidelity.com/05904016-8f7d-4dfc-88e1-2bf9ba3fac20-v1/thumbnails/thumb_6.jpg"
-            clip: true
-            id: preview6
-            MouseArea {
-                anchors.fill: parent
-                onClicked: {
-                    sendToScript({method: 'changeSkybox', url: 'http://mpassets.highfidelity.com/05904016-8f7d-4dfc-88e1-2bf9ba3fac20-v1/skyboxes/6.jpg'});
                 }
             }
         }
     }
     
     signal sendToScript(var message);
-    
+}
-}

interface/resources/qml/hifi/SkyboxSelectionModel.qml

@@ -0,0 +1,40 @@
+//
+//  SkyboxSelectionModel.qml
+//  qml/hifi
+//
+//  Created by Cain Kilgore on 21st October 2017
+//  Copyright 2017 High Fidelity, Inc.
+//
+//  Distributed under the Apache License, Version 2.0.
+//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
+//
+
+import QtQuick 2.5
+
+ListModel {
+    id: root;
+    ListElement{
+        thumbnailPath: "http://mpassets.highfidelity.com/05904016-8f7d-4dfc-88e1-2bf9ba3fac20-v1/thumbnails/thumb_1.jpg"
+        fullSkyboxPath: "http://mpassets.highfidelity.com/05904016-8f7d-4dfc-88e1-2bf9ba3fac20-v1/skyboxes/1.jpg"
+    }
+    ListElement{
+        thumbnailPath: "http://mpassets.highfidelity.com/05904016-8f7d-4dfc-88e1-2bf9ba3fac20-v1/thumbnails/thumb_1.jpg"
+        fullSkyboxPath: "http://mpassets.highfidelity.com/05904016-8f7d-4dfc-88e1-2bf9ba3fac20-v1/skyboxes/1.jpg"
+    }
+    ListElement{
+        thumbnailPath: "http://mpassets.highfidelity.com/05904016-8f7d-4dfc-88e1-2bf9ba3fac20-v1/thumbnails/thumb_1.jpg"
+        fullSkyboxPath: "http://mpassets.highfidelity.com/05904016-8f7d-4dfc-88e1-2bf9ba3fac20-v1/skyboxes/1.jpg"
+    }
+    ListElement{
+        thumbnailPath: "http://mpassets.highfidelity.com/05904016-8f7d-4dfc-88e1-2bf9ba3fac20-v1/thumbnails/thumb_1.jpg"
+        fullSkyboxPath: "http://mpassets.highfidelity.com/05904016-8f7d-4dfc-88e1-2bf9ba3fac20-v1/skyboxes/1.jpg"
+    }
+    ListElement{
+        thumbnailPath: "http://mpassets.highfidelity.com/05904016-8f7d-4dfc-88e1-2bf9ba3fac20-v1/thumbnails/thumb_1.jpg"
+        fullSkyboxPath: "http://mpassets.highfidelity.com/05904016-8f7d-4dfc-88e1-2bf9ba3fac20-v1/skyboxes/1.jpg"
+    }
+    ListElement{
+        thumbnailPath: "http://mpassets.highfidelity.com/05904016-8f7d-4dfc-88e1-2bf9ba3fac20-v1/thumbnails/thumb_1.jpg"
+        fullSkyboxPath: "http://mpassets.highfidelity.com/05904016-8f7d-4dfc-88e1-2bf9ba3fac20-v1/skyboxes/1.jpg"
+    }
+}