diff --git a/interface/resources/qml/controls-uit/Switch.qml b/interface/resources/qml/controls-uit/Switch.qml new file mode 100644 index 0000000000..6db38b054d --- /dev/null +++ b/interface/resources/qml/controls-uit/Switch.qml @@ -0,0 +1,60 @@ +// +// Switch.qml +// +// Created by Zach Fox on 2017-06-06 +// 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.4 as Original +import QtQuick.Controls.Styles 1.4 + +import "../styles-uit" + +Item { + id: rootSwitch; + + property int colorScheme: hifi.colorSchemes.light; + readonly property bool isLightColorScheme: colorScheme == hifi.colorSchemes.light; + property int switchWidth: 100; + readonly property int switchRadius: 3; + property string offLabelText: ""; + property string onLabelText: ""; + property string switchLabelText: ""; + + Original.Switch { + id: originalSwitch; + activeFocusOnPress: true; + anchors.top: rootSwitch.top; + anchors.left: switchLabel.right; + anchors.leftMargin: 4; + + style: SwitchStyle { + groove: Rectangle { + implicitWidth: rootSwitch.switchWidth; + implicitHeight: rootSwitch.height; + radius: rootSwitch.switchRadius; + border.color: control.activeFocus ? "darkblue" : "gray"; + border.width: 1; + } + + handle: Rectangle { + opacity: rootSwitch.enabled ? 1.0 : 0.5 + implicitWidth: rootSwitch.height - 5; + implicitHeight: implicitWidth; + radius: implicitWidth/2; + border.color: hifi.colors.primaryHighlight; + } + } + } + + MouseArea { + anchors.fill: parent; + onClicked: { + originalSwitch.checked = !originalSwitch.checked; + } + } +} diff --git a/interface/resources/qml/hifi/SpectatorCamera.qml b/interface/resources/qml/hifi/SpectatorCamera.qml index f677efa347..d57315424a 100644 --- a/interface/resources/qml/hifi/SpectatorCamera.qml +++ b/interface/resources/qml/hifi/SpectatorCamera.qml @@ -20,13 +20,12 @@ import "../controls" as HifiControls // references HMD, XXX from root context Rectangle { + HifiConstants { id: hifi; } + id: spectatorCamera; // Size // Style - color: "#FFFFFF"; - // Properties - - HifiConstants { id: hifi; } + color: hifi.colors.baseGray; // // TITLE BAR START @@ -50,7 +49,7 @@ Rectangle { anchors.fill: parent; anchors.leftMargin: 16; // Style - color: hifi.colors.darkGray; + color: hifi.colors.lightGrayText; // Alignment horizontalAlignment: Text.AlignHLeft; verticalAlignment: Text.AlignVCenter; @@ -91,34 +90,34 @@ Rectangle { // Size width: 20; height: parent.height; - size: 48; + size: 60; // Anchors anchors.left: parent.left; - anchors.leftMargin: 45; + anchors.leftMargin: 20; anchors.top: parent.top; anchors.topMargin: 0; // Style - color: hifi.colors.blueAccent; + color: hifi.colors.lightGrayText; horizontalAlignment: Text.AlignHLeft; - verticalAlignment: Text.AlignVCenter; + verticalAlignment: Text.AlignTop; } // "Spectator" app description text - RalewaySemiBold { + RalewayLight { id: spectatorDescriptionText; - text: "Spectator lets you switch what your monitor displays while you're using an HMD."; + text: "Spectator lets you switch what your monitor displays while you're using an HMD. Use Spectator to stream and record video."; // Text size size: 14; // Size - width: parent.width - 90 - 60; + width: 350; height: paintedHeight; // Anchors anchors.top: parent.top; anchors.topMargin: 10; anchors.left: spectatorDescriptionGlyph.right; - anchors.leftMargin: 30; + anchors.leftMargin: 40; // Style - color: hifi.colors.darkGray; + color: hifi.colors.lightGrayText; wrapMode: Text.WordWrap; // Alignment horizontalAlignment: Text.AlignHLeft; @@ -187,16 +186,15 @@ Rectangle { anchors.top: spectatorDescriptionContainer.bottom; anchors.topMargin: 20; anchors.left: parent.left; - anchors.leftMargin: 40; + anchors.leftMargin: 25; anchors.right: parent.right; - anchors.rightMargin: 40; + anchors.rightMargin: anchors.leftMargin; // "Camera On" Checkbox HifiControlsUit.CheckBox { id: cameraToggleCheckBox; anchors.left: parent.left; anchors.top: parent.top; - //checked: true; // FIXME text: "Camera On"; boxSize: 30; onClicked: { @@ -204,7 +202,7 @@ Rectangle { } } - // Preview + // Spectator Camera Preview Image { id: spectatorCameraPreview; height: 300; @@ -217,6 +215,46 @@ Rectangle { verticalAlignment: Image.AlignVCenter; source: "http://1.bp.blogspot.com/-1GABEq__054/T03B00j_OII/AAAAAAAAAa8/jo55LcvEPHI/s1600/Winning.jpg"; } + + // "Monitor Shows" Switch Label + RalewayLight { + id: monitorShowsSwitchLabel; + text: "MONITOR SHOWS"; + anchors.top: spectatorCameraPreview.bottom; + anchors.topMargin: 20; + anchors.left: parent.left; + size: 16; + width: paintedWidth; + height: paintedHeight; + color: hifi.colors.lightGrayText; + verticalAlignment: Text.AlignVCenter; + } + // "Monitor Shows" Switch + HifiControlsUit.Switch { + id: monitorShowsSwitch; + height: 34; + anchors.left: parent.left; + anchors.right: parent.right; + anchors.top: monitorShowsSwitchLabel.bottom; + anchors.topMargin: 10; + switchLabelText: "Monitor Shows:"; + //onClicked: { + // sendToScript({method: (checked ? 'showCameraViewOnMonitor' : 'showMyViewOnMonitor')}); + //} + } + + // "Switch View From Controller" Checkbox + HifiControlsUit.CheckBox { + id: switchViewFromControllerCheckBox; + anchors.left: parent.left; + anchors.top: monitorShowsSwitch.bottom; + anchors.topMargin: 20; + text: "Pressing Vive's Left Thumbpad Switches Monitor View"; + boxSize: 30; + onClicked: { + sendToScript({method: 'changeSwitchViewFromControllerPreference', params: checked}); + } + } } // // SPECTATOR CONTROLS END diff --git a/scripts/system/spectatorCamera.js b/scripts/system/spectatorCamera.js index 88d2a9ebc1..3f855906e5 100644 --- a/scripts/system/spectatorCamera.js +++ b/scripts/system/spectatorCamera.js @@ -285,6 +285,15 @@ case 'disableSpectatorCamera': disableSpectatorCamera(); break; + case 'showCameraViewOnMonitor': + print('FIXME: showCameraViewOnMonitor'); + break; + case 'showMyViewOnMonitor': + print('FIXME: showMyViewOnMonitor'); + break; + case 'changeSwitchViewFromControllerPreference': + print('FIXME: Preference is now: ' + message.params); + break; default: print('Unrecognized message from SpectatorCamera.qml:', JSON.stringify(message)); }