content/hifi-public/sam/temp/holo/Portal/Portal.qml

//
//  Portal.qml
//
//  Portal App
//
//  Created by Zach Fox on 2018-11-07
//  Copyright 2018 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 Hifi 1.0 as Hifi
import QtQuick 2.10
import QtQuick.Controls 2.3
import "qrc:////qml//styles-uit" as HifiStylesUit
import "qrc:////qml//controls-uit" as HifiControlsUit
import "qrc:////qml//controls" as HifiControls

Rectangle {
    HifiStylesUit.HifiConstants { id: hifi; }

    id: root;
    property bool uiReady: false;
    property bool portalARezzed: false;
    property bool portalBRezzed: false;
    // Style
    color: hifi.colors.darkGray;

    Rectangle {
        z: 999;
        id: processingSnapshot;
        anchors.fill: parent;
        visible: !root.uiReady;
        color: Qt.rgba(0.0, 0.0, 0.0, 0.85);        

        // This object is always used in a popup.
        // This MouseArea is used to prevent a user from being
        //     able to click on a button/mouseArea underneath the popup/section.
        MouseArea {
            anchors.fill: parent;
            hoverEnabled: true;
            propagateComposedEvents: false;
        }
                
        AnimatedImage {
            id: processingImage;
            source: "processing.gif"
            width: 74;
            height: width;
            anchors.verticalCenter: parent.verticalCenter;
            anchors.horizontalCenter: parent.horizontalCenter;
        }
    }

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

        // Title bar text
        HifiStylesUit.RalewaySemiBold {
            text: "Portal v1.0";
            // Text size
            size: hifi.fontSizes.overlayTitle;
            // Anchors
            anchors.top: parent.top;
			anchors.bottom: parent.bottom;
			anchors.left: parent.left;
            anchors.leftMargin: 16;
			width: paintedWidth;
            // Style
            color: hifi.colors.lightGrayText;
            // Alignment
            horizontalAlignment: Text.AlignHLeft;
            verticalAlignment: Text.AlignVCenter;
        }

        // Separator
        HifiControlsUit.Separator {
            anchors.left: parent.left;
            anchors.right: parent.right;
            anchors.bottom: parent.bottom;
        }
    }
    //
    // TITLE BAR END
    //

	HifiControlsUit.Button {
		id: portalAButton;
		color: hifi.buttons.blue;
		colorScheme: hifi.colorSchemes.dark;
        anchors.top: titleBarContainer.bottom;
        anchors.topMargin: 20;
        anchors.left: parent.left;
        anchors.leftMargin: 6;
        width: parent.width/2 - 12;
		height: 40;
		text: "Rez Blue Portal";
		onClicked: {
            root.portalARezzed = true;
            sendToScript({method: 'rezPortalA'});

            if (root.portalARezzed && root.portalBRezzed) {
                portalsEnabledSwitch.checked = true;
            }
		}
	}

	HifiControlsUit.Button {
		id: portalBButton;
		color: hifi.buttons.blue;
		colorScheme: hifi.colorSchemes.dark;
        anchors.top: titleBarContainer.bottom;
        anchors.topMargin: 20;
        anchors.right: parent.right;
        anchors.rightMargin: 6;
        width: parent.width/2 - 12;
		height: 40;
		text: "Rez Orange Portal";
		onClicked: {
            root.portalBRezzed = true;
            sendToScript({method: 'rezPortalB'});

            if (root.portalARezzed && root.portalBRezzed) {
                portalsEnabledSwitch.checked = true;
            }
		}
	}
    
    Switch {
        id: portalsEnabledSwitch;
        focusPolicy: Qt.ClickFocus;
        width: 100;
        height: 50;
        anchors.horizontalCenter: parent.horizontalCenter;
        anchors.top: portalBButton.bottom;
        anchors.topMargin: 30;
        hoverEnabled: true;
        enabled: root.portalARezzed && root.portalBRezzed;

        onHoveredChanged: {
            if (hovered) {
                switchHandle.color = hifi.colors.blueHighlight;
            } else {
                switchHandle.color = hifi.colors.lightGray;
            }
        }

        onClicked: {
            sendToScript({method: (checked ? 'enablePortals' : 'disablePortals')});
        }

        background: Rectangle {
            color: parent.checked ? "#1FC6A6" : hifi.colors.white;
            implicitWidth: portalsEnabledSwitch.width;
            implicitHeight: portalsEnabledSwitch.height;
            radius: height/2;
        }

        indicator: Rectangle {
            id: switchHandle;
            implicitWidth: portalsEnabledSwitch.height - 4;
            implicitHeight: implicitWidth;
            radius: implicitWidth/2;
            border.color: "#E3E3E3";
            color: "#404040";
            x: Math.max(4, Math.min(parent.width - width - 4, parent.visualPosition * parent.width - (width / 2) - 4))
            y: parent.height / 2 - height / 2;
            Behavior on x {
                enabled: !portalsEnabledSwitch.down
                SmoothedAnimation { velocity: 200 }
            }
        }
    }

    //
    // FUNCTION DEFINITIONS START
    //
    //
    // Function Name: fromScript()
    //
    // Relevant Variables:
    // None
    //
    // Arguments:
    // message: The message sent from the Portal JavaScript.
    //     Messages are in format "{method, params}", like json-rpc.
    //
    // Description:
    // Called when a message is received from portal.js.
    //
    function fromScript(message) {
        switch (message.method) {
        case 'initializeUI':
            portalsEnabledSwitch.checked = message.portalsEnabled;
            root.portalARezzed = message.portalARezzed;
            root.portalBRezzed = message.portalBRezzed;
            root.uiReady = true;
        break;
        default:
            console.log('Unrecognized message from portal.js: ' + JSON.stringify(message));
        }
    }
    signal sendToScript(var message);

    //
    // FUNCTION DEFINITIONS END
    //
}