diff --git a/interface/resources/qml/hifi/SkyboxChanger.qml b/interface/resources/qml/hifi/SkyboxChanger.qml index a4798ba959..2aa0460e15 100644 --- a/interface/resources/qml/hifi/SkyboxChanger.qml +++ b/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; - // Anchors + height: childrenRect.height; anchors.left: parent.left; anchors.top: parent.top; - - RalewaySemiBold { + anchors.right: parent.right; + anchors.topMargin: 20; + RalewayBold { id: titleBarText; text: "Skybox Changer"; - // Text size size: hifi.fontSizes.overlayTitle; - // Anchors - anchors.fill: parent; - anchors.leftMargin: 16; - // Style + anchors.top: parent.top; + anchors.left: parent.left; + anchors.leftMargin: 40 + 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.fill: parent; - anchors.top: titleBarText.bottom - anchors.leftMargin: 16; - anchors.rightMargin: 16; - // Style + anchors.top: titleBarText.bottom; + anchors.left: parent.left; + anchors.leftMargin: 40 + height: paintedHeight; 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. - // As this SkyboxChanger task only required 6 images, implementing GridLayout wasn't necessary. - // In the future if this is to be expanded to add more Skyboxes, it might be worth changing this. - RowLayout { - id: row1 + GridView { + id: gridView + interactive: false + clip: true anchors.top: titleBarContainer.bottom - anchors.left: parent.left - anchors.leftMargin: 30 - Layout.fillWidth: true - anchors.topMargin: 30 - spacing: 10 - Image { - width: 200; height: 200 - fillMode: Image.Stretch - source: "http://mpassets.highfidelity.com/05904016-8f7d-4dfc-88e1-2bf9ba3fac20-v1/thumbnails/thumb_1.jpg" - clip: true - id: preview1 - MouseArea { + anchors.topMargin: 20 + anchors.horizontalCenter: parent.horizontalCenter + width: 400 + height: parent.height + currentIndex: -1 + + cellWidth: 200 + cellHeight: 200 + model: skyboxModel + delegate: Item { + width: gridView.cellWidth + height: gridView.cellHeight + Item { anchors.fill: parent - onClicked: { - sendToScript({method: 'changeSkybox', url: 'http://mpassets.highfidelity.com/05904016-8f7d-4dfc-88e1-2bf9ba3fac20-v1/skyboxes/1.jpg'}); + Image { + 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'}); - } - } - } - } - 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'}); + sendToScript({method: 'changeSkybox', url: fullSkyboxPath}); } } } } signal sendToScript(var message); - -} +} \ No newline at end of file diff --git a/interface/resources/qml/hifi/SkyboxSelectionModel.qml b/interface/resources/qml/hifi/SkyboxSelectionModel.qml new file mode 100644 index 0000000000..45a964fcb3 --- /dev/null +++ b/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" + } +}