overte-HifiExperiments/interface/resources/qml/hifi/SkyboxChanger.qml

//
//  skyboxchanger.qml
//
//
//  Created by Cain Kilgore on 9th August 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
import QtQuick.Controls 1.5 as QQControls
import QtQuick.Layouts 1.3
import QtQuick.Controls.Styles 1.4

import QtWebEngine 1.2
import QtWebChannel 1.0

import "../styles-uit"
import "../controls-uit" as HifiControls
import "../windows"
import "../controls"

Rectangle {
    id: root;

    HifiConstants { id: hifi; }

    property string title: "";

    color: hifi.colors.baseGray;

    Item {
        id: titleBarContainer;
        // Size
        width: parent.width;
        height: 50;
        // Anchors
        anchors.left: parent.left;
        anchors.top: parent.top;

        RalewaySemiBold {
            id: titleBarText;
            text: "Skybox Changer";
            // Text size
            size: hifi.fontSizes.overlayTitle;
            // Anchors
            anchors.fill: parent;
            anchors.leftMargin: 16;
            // Style
            color: hifi.colors.lightGrayText;
            // Alignment
            horizontalAlignment: Text.AlignHCenter;
            verticalAlignment: Text.AlignVCenter;
        }
        RalewaySemiBold {
            id: titleBarDesc;
            text: "You can set the current Skybox of the Zone you're standing in by clicking on any of the 6 pre-determined skyboxes below.";
            wrapMode: Text.Wrap
            // Text size
            size: 14;
            // Anchors
            anchors.fill: parent;
            anchors.topMargin: 56;
            anchors.leftMargin: 16;
            anchors.rightMargin: 16;
            // Style
            color: hifi.colors.lightGrayText;
            // Alignment
            horizontalAlignment: Text.AlignHCenter;
            verticalAlignment: Text.AlignVCenter;
        }        
    }
    RowLayout {
        id: row1
        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.fill: parent
                onClicked: {
                    sendToScript({method: 'changeSkybox', url: 'http://mpassets.highfidelity.com/05904016-8f7d-4dfc-88e1-2bf9ba3fac20-v1/skyboxes/1.jpg'});
                }
            }
            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'});
                }
            }
        }
    }
    
    signal sendToScript(var message);
    
}