// // 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 // }