Thanks Mukul!

This commit is contained in:
Zach Fox 2018-05-14 16:48:40 -07:00
parent 0c76659324
commit e607c68bea
4 changed files with 301 additions and 234 deletions

View file

@ -27,6 +27,9 @@ Original.CheckBox {
property bool wrap: true; property bool wrap: true;
readonly property int checkSize: Math.max(boxSize - 8, 10) readonly property int checkSize: Math.max(boxSize - 8, 10)
readonly property int checkRadius: 2 readonly property int checkRadius: 2
property string labelFontFamily: "Raleway"
property int labelFontSize: 14;
property int labelFontWeight: Font.DemiBold;
focusPolicy: Qt.ClickFocus focusPolicy: Qt.ClickFocus
hoverEnabled: true hoverEnabled: true
@ -105,6 +108,9 @@ Original.CheckBox {
contentItem: Label { contentItem: Label {
text: checkBox.text text: checkBox.text
color: checkBox.color color: checkBox.color
font.family: checkBox.labelFontFamily;
font.pixelSize: checkBox.labelFontSize;
font.weight: checkBox.labelFontWeight;
x: 2 x: 2
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
wrapMode: checkBox.wrap ? Text.Wrap : Text.NoWrap wrapMode: checkBox.wrap ? Text.Wrap : Text.NoWrap

View file

@ -49,6 +49,7 @@ Item {
property string upgradeTitle; property string upgradeTitle;
property bool updateAvailable: root.upgradeUrl !== "" && !root.isShowingMyItems; property bool updateAvailable: root.upgradeUrl !== "" && !root.isShowingMyItems;
property bool isShowingMyItems; property bool isShowingMyItems;
property bool valid;
property string originalStatusText; property string originalStatusText;
property string originalStatusColor; property string originalStatusColor;
@ -239,6 +240,7 @@ Item {
width: 62; width: 62;
onLoaded: { onLoaded: {
item.enabled = root.valid;
item.buttonGlyphText = hifi.glyphs.gift; item.buttonGlyphText = hifi.glyphs.gift;
item.buttonText = "Gift"; item.buttonText = "Gift";
item.buttonClicked = function() { item.buttonClicked = function() {
@ -463,7 +465,7 @@ Item {
Item { Item {
id: statusContainer; id: statusContainer;
visible: root.purchaseStatus === "pending" || root.purchaseStatus === "invalidated" || root.numberSold > -1; visible: root.purchaseStatus === "pending" || !root.valid || root.numberSold > -1;
anchors.left: itemName.left; anchors.left: itemName.left;
anchors.right: itemName.right; anchors.right: itemName.right;
anchors.top: itemName.bottom; anchors.top: itemName.bottom;
@ -480,7 +482,7 @@ Item {
text: { text: {
if (root.purchaseStatus === "pending") { if (root.purchaseStatus === "pending") {
"PENDING..." "PENDING..."
} else if (root.purchaseStatus === "invalidated") { } else if (!root.valid) {
"INVALIDATED" "INVALIDATED"
} else if (root.numberSold > -1) { } else if (root.numberSold > -1) {
("Sales: " + root.numberSold + "/" + (root.limitedRun === -1 ? "\u221e" : root.limitedRun)) ("Sales: " + root.numberSold + "/" + (root.limitedRun === -1 ? "\u221e" : root.limitedRun))
@ -492,7 +494,7 @@ Item {
color: { color: {
if (root.purchaseStatus === "pending") { if (root.purchaseStatus === "pending") {
hifi.colors.blueAccent hifi.colors.blueAccent
} else if (root.purchaseStatus === "invalidated") { } else if (!root.valid) {
hifi.colors.redAccent hifi.colors.redAccent
} else { } else {
hifi.colors.baseGray hifi.colors.baseGray
@ -506,7 +508,7 @@ Item {
text: { text: {
if (root.purchaseStatus === "pending") { if (root.purchaseStatus === "pending") {
hifi.glyphs.question hifi.glyphs.question
} else if (root.purchaseStatus === "invalidated") { } else if (!root.valid) {
hifi.glyphs.question hifi.glyphs.question
} else { } else {
"" ""
@ -523,7 +525,7 @@ Item {
color: { color: {
if (root.purchaseStatus === "pending") { if (root.purchaseStatus === "pending") {
hifi.colors.blueAccent hifi.colors.blueAccent
} else if (root.purchaseStatus === "invalidated") { } else if (!root.valid) {
hifi.colors.redAccent hifi.colors.redAccent
} else { } else {
hifi.colors.baseGray hifi.colors.baseGray
@ -538,7 +540,7 @@ Item {
onClicked: { onClicked: {
if (root.purchaseStatus === "pending") { if (root.purchaseStatus === "pending") {
sendToPurchases({method: 'showPendingLightbox'}); sendToPurchases({method: 'showPendingLightbox'});
} else if (root.purchaseStatus === "invalidated") { } else if (!root.valid) {
sendToPurchases({method: 'showInvalidatedLightbox'}); sendToPurchases({method: 'showInvalidatedLightbox'});
} }
} }
@ -546,7 +548,7 @@ Item {
if (root.purchaseStatus === "pending") { if (root.purchaseStatus === "pending") {
statusText.color = hifi.colors.blueHighlight; statusText.color = hifi.colors.blueHighlight;
statusIcon.color = hifi.colors.blueHighlight; statusIcon.color = hifi.colors.blueHighlight;
} else if (root.purchaseStatus === "invalidated") { } else if (!root.valid) {
statusText.color = hifi.colors.redAccent; statusText.color = hifi.colors.redAccent;
statusIcon.color = hifi.colors.redAccent; statusIcon.color = hifi.colors.redAccent;
} }
@ -555,7 +557,7 @@ Item {
if (root.purchaseStatus === "pending") { if (root.purchaseStatus === "pending") {
statusText.color = hifi.colors.blueAccent; statusText.color = hifi.colors.blueAccent;
statusIcon.color = hifi.colors.blueAccent; statusIcon.color = hifi.colors.blueAccent;
} else if (root.purchaseStatus === "invalidated") { } else if (!root.valid) {
statusText.color = hifi.colors.redHighlight; statusText.color = hifi.colors.redHighlight;
statusIcon.color = hifi.colors.redHighlight; statusIcon.color = hifi.colors.redHighlight;
} }
@ -645,8 +647,8 @@ Item {
width: 160; width: 160;
height: 40; height: 40;
enabled: root.hasPermissionToRezThis && enabled: root.hasPermissionToRezThis &&
root.purchaseStatus !== "invalidated" && MyAvatar.skeletonModelURL !== root.itemHref &&
MyAvatar.skeletonModelURL !== root.itemHref; root.valid;
onHoveredChanged: { onHoveredChanged: {
if (hovered) { if (hovered) {

View file

@ -616,6 +616,7 @@ Rectangle {
upgradeTitle: model.upgrade_title; upgradeTitle: model.upgrade_title;
itemType: model.itemType; itemType: model.itemType;
isShowingMyItems: root.isShowingMyItems; isShowingMyItems: root.isShowingMyItems;
valid: model.valid;
anchors.topMargin: 10; anchors.topMargin: 10;
anchors.bottomMargin: 10; anchors.bottomMargin: 10;
@ -995,10 +996,6 @@ Rectangle {
for (var i = 0; i < purchasesModel.count; i++) { for (var i = 0; i < purchasesModel.count; i++) {
if (purchasesModel.get(i).title.toLowerCase().indexOf(filterBar.text.toLowerCase()) !== -1) { if (purchasesModel.get(i).title.toLowerCase().indexOf(filterBar.text.toLowerCase()) !== -1) {
if (!purchasesModel.get(i).valid) {
continue;
}
if (purchasesModel.get(i).status !== "confirmed" && !root.isShowingMyItems) { if (purchasesModel.get(i).status !== "confirmed" && !root.isShowingMyItems) {
tempPurchasesModel.insert(0, purchasesModel.get(i)); tempPurchasesModel.insert(0, purchasesModel.get(i));
} else if ((root.isShowingMyItems && purchasesModel.get(i).edition_number === "0") || } else if ((root.isShowingMyItems && purchasesModel.get(i).edition_number === "0") ||
@ -1055,10 +1052,6 @@ Rectangle {
var currentId; var currentId;
for (var i = 0; i < tempPurchasesModel.count; i++) { for (var i = 0; i < tempPurchasesModel.count; i++) {
currentId = tempPurchasesModel.get(i).id; currentId = tempPurchasesModel.get(i).id;
if (!purchasesModel.get(i).valid) {
continue;
}
filteredPurchasesModel.append(tempPurchasesModel.get(i)); filteredPurchasesModel.append(tempPurchasesModel.get(i));
filteredPurchasesModel.setProperty(i, 'cardBackVisible', false); filteredPurchasesModel.setProperty(i, 'cardBackVisible', false);
filteredPurchasesModel.setProperty(i, 'isInstalled', ((root.installedApps).indexOf(currentId) > -1)); filteredPurchasesModel.setProperty(i, 'isInstalled', ((root.installedApps).indexOf(currentId) > -1));

View file

@ -13,6 +13,9 @@
import Hifi 1.0 as Hifi import Hifi 1.0 as Hifi
import QtQuick 2.7 import QtQuick 2.7
import QtQuick.Controls 2.2
import QtGraphicalEffects 1.0
import "qrc:////qml//styles-uit" as HifiStylesUit import "qrc:////qml//styles-uit" as HifiStylesUit
import "qrc:////qml//controls-uit" as HifiControlsUit import "qrc:////qml//controls-uit" as HifiControlsUit
import "qrc:////qml//controls" as HifiControls import "qrc:////qml//controls" as HifiControls
@ -56,8 +59,6 @@ Rectangle {
HifiStylesUit.RalewaySemiBold { HifiStylesUit.RalewaySemiBold {
id: titleBarText; id: titleBarText;
text: "Spectator Camera"; text: "Spectator Camera";
// Text size
size: hifi.fontSizes.overlayTitle;
// Anchors // Anchors
anchors.left: parent.left; anchors.left: parent.left;
anchors.leftMargin: 30; anchors.leftMargin: 30;
@ -71,16 +72,51 @@ Rectangle {
verticalAlignment: Text.AlignVCenter; verticalAlignment: Text.AlignVCenter;
} }
HifiControlsUit.Switch { Switch {
id: masterSwitch; id: masterSwitch;
focusPolicy: Qt.ClickFocus;
width: 65; width: 65;
height: parent.height; height: 30;
anchors.verticalCenter: parent.verticalCenter;
anchors.right: parent.right; anchors.right: parent.right;
anchors.rightMargin: 30; anchors.rightMargin: 30;
hoverEnabled: true;
onHoveredChanged: {
if (hovered) {
switchHandle.color = hifi.colors.blueHighlight;
} else {
switchHandle.color = hifi.colors.lightGray;
}
}
onCheckedChanged: { onCheckedChanged: {
sendToScript({method: (checked ? 'spectatorCameraOn' : 'spectatorCameraOff')}); sendToScript({method: (checked ? 'spectatorCameraOn' : 'spectatorCameraOff')});
sendToScript({method: 'updateCameravFoV', vFoV: fieldOfViewSlider.value}); sendToScript({method: 'updateCameravFoV', vFoV: fieldOfViewSlider.value});
} }
background: Rectangle {
color: parent.checked ? "#1FC6A6" : hifi.colors.white;
implicitWidth: masterSwitch.switchWidth;
implicitHeight: masterSwitch.height;
radius: height/2;
}
indicator: Rectangle {
id: switchHandle;
implicitWidth: masterSwitch.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: !masterSwitch.down
SmoothedAnimation { velocity: 200 }
}
}
} }
} }
// //
@ -132,19 +168,17 @@ Rectangle {
// //
Item { Item {
id: spectatorControlsContainer; id: spectatorControlsContainer;
// Size
height: root.height - spectatorDescriptionContainer.height - titleBarContainer.height;
// Anchors // Anchors
anchors.top: titleBarContainer.bottom; anchors.top: titleBarContainer.bottom;
anchors.left: parent.left; anchors.left: parent.left;
anchors.right: parent.right; anchors.right: parent.right;
anchors.bottom: parent.bottom;
// Instructions or Preview // Instructions or Preview
Rectangle { Rectangle {
id: spectatorCameraImageContainer; id: spectatorCameraImageContainer;
anchors.left: parent.left; anchors.left: parent.left;
anchors.top: cameraToggleButton.bottom; anchors.top: parent.top;
anchors.topMargin: 8;
anchors.right: parent.right; anchors.right: parent.right;
height: 250; height: 250;
color: masterSwitch.checked ? "transparent" : "black"; color: masterSwitch.checked ? "transparent" : "black";
@ -161,7 +195,7 @@ Rectangle {
id: spectatorCameraInstructions; id: spectatorCameraInstructions;
text: "Turn on Spectator Camera for a preview\nof " + (HMD.active ? "what your monitor shows." : "the camera's view."); text: "Turn on Spectator Camera for a preview\nof " + (HMD.active ? "what your monitor shows." : "the camera's view.");
size: 16; size: 16;
color: hifi.colors.lightGrayText; color: hifi.colors.white;
visible: !masterSwitch.checked; visible: !masterSwitch.checked;
anchors.fill: parent; anchors.fill: parent;
horizontalAlignment: Text.AlignHCenter; horizontalAlignment: Text.AlignHCenter;
@ -172,7 +206,7 @@ Rectangle {
Hifi.ResourceImageItem { Hifi.ResourceImageItem {
id: spectatorCameraPreview; id: spectatorCameraPreview;
visible: masterSwitch.checked; visible: masterSwitch.checked;
url: monitorShowsSwitch.checked || !HMD.active ? "resource://spectatorCameraFrame" : "resource://hmdPreviewFrame"; url: showCameraView.checked || !HMD.active ? "resource://spectatorCameraFrame" : "resource://hmdPreviewFrame";
ready: masterSwitch.checked; ready: masterSwitch.checked;
mirrorVertically: true; mirrorVertically: true;
anchors.fill: parent; anchors.fill: parent;
@ -183,13 +217,22 @@ Rectangle {
} }
Item { Item {
visible: true//HMD.active; visible: HMD.active;
anchors.top: parent.top; anchors.top: parent.top;
anchors.left: parent.left; anchors.left: parent.left;
anchors.right: parent.right; anchors.right: parent.right;
height: 80; height: 40;
LinearGradient {
anchors.fill: parent;
start: Qt.point(0, 0);
end: Qt.point(0, height);
gradient: Gradient {
GradientStop { position: 0.0; color: hifi.colors.black }
GradientStop { position: 1.0; color: Qt.rgba(0, 0, 0, 0) }
}
}
// "Monitor Shows" Switch Label Glyph
HifiStylesUit.HiFiGlyphs { HifiStylesUit.HiFiGlyphs {
id: monitorShowsSwitchLabelGlyph; id: monitorShowsSwitchLabelGlyph;
text: hifi.glyphs.screen; text: hifi.glyphs.screen;
@ -200,10 +243,9 @@ Rectangle {
anchors.left: parent.left; anchors.left: parent.left;
anchors.leftMargin: 16; anchors.leftMargin: 16;
} }
// "Monitor Shows" Switch Label
HifiStylesUit.RalewayLight { HifiStylesUit.RalewayLight {
id: monitorShowsSwitchLabel; id: monitorShowsSwitchLabel;
text: "MONITOR SHOWS:"; text: "Monitor View:";
anchors.top: parent.top; anchors.top: parent.top;
anchors.bottom: parent.bottom; anchors.bottom: parent.bottom;
anchors.left: monitorShowsSwitchLabelGlyph.right; anchors.left: monitorShowsSwitchLabelGlyph.right;
@ -216,7 +258,7 @@ Rectangle {
} }
Item { Item {
anchors.left: monitorShowsSwitchLabel.right; anchors.left: monitorShowsSwitchLabel.right;
anchors.leftMargin: 10; anchors.leftMargin: 14;
anchors.right: parent.right; anchors.right: parent.right;
anchors.rightMargin: 10; anchors.rightMargin: 10;
anchors.top: parent.top; anchors.top: parent.top;
@ -225,8 +267,9 @@ Rectangle {
HifiControlsUit.RadioButton { HifiControlsUit.RadioButton {
id: showCameraView; id: showCameraView;
text: "Camera View"; text: "Camera View";
width: 140; width: 125;
anchors.left: parent.left; anchors.left: parent.left;
anchors.leftMargin: 10;
anchors.verticalCenter: parent.verticalCenter; anchors.verticalCenter: parent.verticalCenter;
colorScheme: hifi.colorSchemes.dark; colorScheme: hifi.colorSchemes.dark;
onClicked: { onClicked: {
@ -248,8 +291,8 @@ Rectangle {
id: showHmdPreview; id: showHmdPreview;
text: "HMD"; text: "HMD";
anchors.left: showCameraView.right; anchors.left: showCameraView.right;
anchors.leftMargin: 10; anchors.leftMargin: 20;
anchors.right: parent.right; width: 70;
anchors.verticalCenter: parent.verticalCenter; anchors.verticalCenter: parent.verticalCenter;
colorScheme: hifi.colorSchemes.dark; colorScheme: hifi.colorSchemes.dark;
onClicked: { onClicked: {
@ -268,223 +311,245 @@ Rectangle {
} }
} }
} }
HifiControlsUit.Button {
id: takeSnapshotButton;
enabled: masterSwitch.checked;
text: "SNAP PICTURE";
colorScheme: hifi.colorSchemes.dark;
color: hifi.buttons.white;
anchors.bottom: parent.bottom;
anchors.bottomMargin: 8;
anchors.right: take360SnapshotButton.left;
anchors.rightMargin: 12;
width: 135;
height: 35;
onClicked: {
sendToScript({method: 'takeSecondaryCameraSnapshot'});
}
}
HifiControlsUit.Button {
id: take360SnapshotButton;
enabled: masterSwitch.checked;
text: "SNAP 360";
colorScheme: hifi.colorSchemes.dark;
color: hifi.buttons.white;
anchors.bottom: parent.bottom;
anchors.bottomMargin: 8;
anchors.right: parent.right;
anchors.rightMargin: 12;
width: 135;
height: 35;
onClicked: {
root.processing360Snapshot = true;
sendToScript({method: 'takeSecondaryCamera360Snapshot'});
}
}
} }
Item { Item {
id: fieldOfView;
anchors.top: spectatorCameraImageContainer.bottom; anchors.top: spectatorCameraImageContainer.bottom;
anchors.topMargin: 8; anchors.topMargin: 8;
anchors.left: parent.left; anchors.left: parent.left;
anchors.leftMargin: 8; anchors.leftMargin: 26;
anchors.right: parent.right; anchors.right: parent.right;
height: 35; anchors.rightMargin: 26;
anchors.bottom: parent.bottom;
HifiStylesUit.FiraSansRegular { Item {
id: fieldOfViewLabel; id: fieldOfView;
text: "Field of View (" + fieldOfViewSlider.value + "\u00B0): "; visible: masterSwitch.checked;
size: 16; anchors.top: parent.top;
color: hifi.colors.lightGrayText;
anchors.left: parent.left; anchors.left: parent.left;
anchors.top: parent.top; anchors.right: parent.right;
anchors.bottom: parent.bottom; height: 35;
width: 140;
horizontalAlignment: Text.AlignLeft;
verticalAlignment: Text.AlignVCenter;
}
HifiControlsUit.Slider { HifiStylesUit.RalewaySemiBold {
id: fieldOfViewSlider; id: fieldOfViewLabel;
anchors.top: parent.top; text: "Field of View (" + fieldOfViewSlider.value + "\u00B0): ";
anchors.bottom: parent.bottom; size: 20;
anchors.right: resetvFoV.left; color: hifi.colors.white;
anchors.rightMargin: 8; anchors.left: parent.left;
anchors.left: fieldOfViewLabel.right; anchors.top: parent.top;
anchors.leftMargin: 8; anchors.bottom: parent.bottom;
colorScheme: hifi.colorSchemes.dark; width: 172;
from: 10.0; horizontalAlignment: Text.AlignLeft;
to: 120.0; verticalAlignment: Text.AlignVCenter;
value: 45.0;
stepSize: 1;
onValueChanged: {
sendToScript({method: 'updateCameravFoV', vFoV: value});
} }
onPressedChanged: {
if (!pressed) { HifiControlsUit.Slider {
id: fieldOfViewSlider;
anchors.top: parent.top;
anchors.bottom: parent.bottom;
anchors.right: resetvFoV.left;
anchors.rightMargin: 8;
anchors.left: fieldOfViewLabel.right;
anchors.leftMargin: 8;
colorScheme: hifi.colorSchemes.dark;
from: 10.0;
to: 120.0;
value: 45.0;
stepSize: 1;
onValueChanged: {
sendToScript({method: 'updateCameravFoV', vFoV: value}); sendToScript({method: 'updateCameravFoV', vFoV: value});
} }
onPressedChanged: {
if (!pressed) {
sendToScript({method: 'updateCameravFoV', vFoV: value});
}
}
}
HifiControlsUit.GlyphButton {
id: resetvFoV;
anchors.verticalCenter: parent.verticalCenter;
anchors.right: parent.right;
anchors.rightMargin: -8;
height: parent.height - 8;
width: height;
glyph: hifi.glyphs.reload;
onClicked: {
fieldOfViewSlider.value = 45.0;
}
} }
} }
HifiControlsUit.GlyphButton { Item {
id: resetvFoV; visible: HMD.active;
anchors.verticalCenter: parent.verticalCenter; anchors.top: fieldOfView.bottom;
anchors.topMargin: 18;
anchors.left: parent.left;
anchors.right: parent.right; anchors.right: parent.right;
anchors.rightMargin: 6; height: childrenRect.height;
height: parent.height - 8;
width: height; HifiStylesUit.RalewaySemiBold {
glyph: hifi.glyphs.reload; id: shortcutsHeaderText;
onClicked: { anchors.top: parent.top;
fieldOfViewSlider.value = 45.0; anchors.left: parent.left;
anchors.right: parent.right;
height: paintedHeight;
text: "Shortcuts";
size: 20;
color: hifi.colors.white;
}
// "Switch View From Controller" Checkbox
HifiControlsUit.CheckBox {
id: switchViewFromControllerCheckBox;
color: hifi.colors.white;
colorScheme: hifi.colorSchemes.dark;
anchors.left: parent.left;
anchors.top: shortcutsHeaderText.bottom;
anchors.topMargin: 8;
text: "";
labelFontSize: 20;
labelFontWeight: Font.Normal;
boxSize: 24;
onClicked: {
sendToScript({method: 'changeSwitchViewFromControllerPreference', params: checked});
}
}
// "Take Snapshot" Checkbox
HifiControlsUit.CheckBox {
id: takeSnapshotFromControllerCheckBox;
color: hifi.colors.white;
colorScheme: hifi.colorSchemes.dark;
anchors.left: parent.left;
anchors.top: switchViewFromControllerCheckBox.bottom;
anchors.topMargin: 4;
text: "";
labelFontSize: 20;
labelFontWeight: Font.Normal;
boxSize: 24;
onClicked: {
sendToScript({method: 'changeTakeSnapshotFromControllerPreference', params: checked});
}
}
}
Item {
id: spectatorDescriptionContainer;
// Size
height: childrenRect.height;
// Anchors
anchors.left: parent.left;
anchors.right: parent.right;
anchors.bottom: parent.bottom;
anchors.bottomMargin: 40;
// "Spectator" app description text
HifiStylesUit.RalewayRegular {
id: spectatorDescriptionText;
text: "While you're using a VR headset, you can use this app to change what your monitor shows. " +
"Try it when streaming or recording video.";
// Text size
size: 20;
// Size
height: paintedHeight;
// Anchors
anchors.left: parent.left;
anchors.right: parent.right;
anchors.top: parent.top;
// Style
color: hifi.colors.white;
wrapMode: Text.Wrap;
// Alignment
horizontalAlignment: Text.AlignHLeft;
verticalAlignment: Text.AlignVCenter;
}
// "Learn More" text
HifiStylesUit.RalewayRegular {
id: spectatorLearnMoreText;
text: "Learn More About Spectator";
// Text size
size: 20;
// Size
width: paintedWidth;
height: paintedHeight;
// Anchors
anchors.top: spectatorDescriptionText.bottom;
anchors.topMargin: 10;
anchors.left: parent.left;
anchors.right: parent.right;
// Style
color: hifi.colors.blueAccent;
wrapMode: Text.WordWrap;
font.underline: true;
// Alignment
horizontalAlignment: Text.AlignHLeft;
verticalAlignment: Text.AlignVCenter;
MouseArea {
anchors.fill: parent;
hoverEnabled: enabled;
onClicked: {
letterbox(hifi.glyphs.question,
"Spectator Camera",
"By default, your monitor shows a preview of what you're seeing in VR. " +
"Using the Spectator Camera app, your monitor can display the view " +
"from a virtual hand-held camera - perfect for taking selfies or filming " +
"your friends!<br>" +
"<h3>Streaming and Recording</h3>" +
"We recommend OBS for streaming and recording the contents of your monitor to services like " +
"Twitch, YouTube Live, and Facebook Live.<br><br>" +
"To get started using OBS, click this link now. The page will open in an external browser:<br>" +
'<font size="4"><a href="https://obsproject.com/forum/threads/official-overview-guide.402/">OBS Official Overview Guide</a></font><br><br>' +
'<b>Snapshots</b> taken using Spectator Camera will be saved in your Snapshots Directory - change via Settings -> General.');
}
onEntered: parent.color = hifi.colors.blueHighlight;
onExited: parent.color = hifi.colors.blueAccent;
}
} }
} }
} }
// "Switch View From Controller" Checkbox
HifiControlsUit.CheckBox {
id: switchViewFromControllerCheckBox;
visible: HMD.active;
colorScheme: hifi.colorSchemes.dark;
anchors.left: parent.left;
anchors.top: monitorShowsSwitch.bottom;
anchors.topMargin: 14;
text: "";
boxSize: 24;
onClicked: {
sendToScript({method: 'changeSwitchViewFromControllerPreference', params: checked});
}
}
// "Take Snapshot" Checkbox
HifiControlsUit.CheckBox {
id: takeSnapshotFromControllerCheckBox;
visible: HMD.active;
colorScheme: hifi.colorSchemes.dark;
anchors.left: parent.left;
anchors.top: switchViewFromControllerCheckBox.bottom;
anchors.topMargin: 10;
text: "";
boxSize: 24;
onClicked: {
sendToScript({method: 'changeTakeSnapshotFromControllerPreference', params: checked});
}
}
HifiControlsUit.Button {
id: takeSnapshotButton;
enabled: masterSwitch.checked;
text: "Take Still Snapshot";
colorScheme: hifi.colorSchemes.dark;
color: hifi.buttons.blue;
anchors.top: takeSnapshotFromControllerCheckBox.visible ? takeSnapshotFromControllerCheckBox.bottom : fieldOfView.bottom;
anchors.topMargin: 8;
anchors.left: parent.left;
width: parent.width/2 - 10;
height: 40;
onClicked: {
sendToScript({method: 'takeSecondaryCameraSnapshot'});
}
}
HifiControlsUit.Button {
id: take360SnapshotButton;
enabled: masterSwitch.checked;
text: "Take 360 Snapshot";
colorScheme: hifi.colorSchemes.dark;
color: hifi.buttons.blue;
anchors.top: takeSnapshotFromControllerCheckBox.visible ? takeSnapshotFromControllerCheckBox.bottom : fieldOfView.bottom;
anchors.topMargin: 8;
anchors.right: parent.right;
width: parent.width/2 - 10;
height: 40;
onClicked: {
root.processing360Snapshot = true;
sendToScript({method: 'takeSecondaryCamera360Snapshot'});
}
}
} }
// //
// SPECTATOR CONTROLS END // SPECTATOR CONTROLS END
// //
//
// SPECTATOR APP DESCRIPTION START
//
Item {
id: spectatorDescriptionContainer;
// Size
width: root.width;
height: childrenRect.height;
// Anchors
anchors.left: parent.left;
anchors.bottom: anchors.bottom;
// "Spectator" app description text
HifiStylesUit.RalewayLight {
id: spectatorDescriptionText;
text: "Spectator lets you change what your monitor displays while you're using a VR headset. Use Spectator when streaming and recording video.";
// Text size
size: 14;
// Size
width: 350;
height: paintedHeight;
// Anchors
anchors.top: parent.top;
anchors.topMargin: 15;
anchors.left: spectatorDescriptionGlyph.right;
anchors.leftMargin: 40;
// Style
color: hifi.colors.lightGrayText;
wrapMode: Text.Wrap;
// Alignment
horizontalAlignment: Text.AlignHLeft;
verticalAlignment: Text.AlignVCenter;
}
// "Learn More" text
HifiStylesUit.RalewayRegular {
id: spectatorLearnMoreText;
text: "Learn More About Spectator";
// Text size
size: 14;
// Size
width: paintedWidth;
height: paintedHeight;
// Anchors
anchors.top: spectatorDescriptionText.bottom;
anchors.topMargin: 10;
anchors.left: spectatorDescriptionText.anchors.left;
anchors.leftMargin: spectatorDescriptionText.anchors.leftMargin;
// Style
color: hifi.colors.blueAccent;
wrapMode: Text.WordWrap;
font.underline: true;
// Alignment
horizontalAlignment: Text.AlignHLeft;
verticalAlignment: Text.AlignVCenter;
MouseArea {
anchors.fill: parent;
hoverEnabled: enabled;
onClicked: {
letterbox(hifi.glyphs.question,
"Spectator Camera",
"By default, your monitor shows a preview of what you're seeing in VR. " +
"Using the Spectator Camera app, your monitor can display the view " +
"from a virtual hand-held camera - perfect for taking selfies or filming " +
"your friends!<br>" +
"<h3>Streaming and Recording</h3>" +
"We recommend OBS for streaming and recording the contents of your monitor to services like " +
"Twitch, YouTube Live, and Facebook Live.<br><br>" +
"To get started using OBS, click this link now. The page will open in an external browser:<br>" +
'<font size="4"><a href="https://obsproject.com/forum/threads/official-overview-guide.402/">OBS Official Overview Guide</a></font>');
}
onEntered: parent.color = hifi.colors.blueHighlight;
onExited: parent.color = hifi.colors.blueAccent;
}
}
// Separator
HifiControlsUit.Separator {
anchors.left: parent.left;
anchors.right: parent.right;
anchors.top: spectatorLearnMoreText.bottom;
anchors.topMargin: spectatorDescriptionText.anchors.topMargin;
}
}
//
// SPECTATOR APP DESCRIPTION END
//
// //
// FUNCTION DEFINITIONS START // FUNCTION DEFINITIONS START
// //
@ -507,7 +572,8 @@ Rectangle {
masterSwitch.checked = message.params; masterSwitch.checked = message.params;
break; break;
case 'updateMonitorShowsSwitch': case 'updateMonitorShowsSwitch':
monitorShowsSwitch.checked = message.params; showCameraView.checked = message.params;
showHmdPreview.checked = !message.params;
break; break;
case 'updateControllerMappingCheckbox': case 'updateControllerMappingCheckbox':
switchViewFromControllerCheckBox.checked = message.switchViewSetting; switchViewFromControllerCheckBox.checked = message.switchViewSetting;
@ -516,11 +582,11 @@ Rectangle {
takeSnapshotFromControllerCheckBox.enabled = true; takeSnapshotFromControllerCheckBox.enabled = true;
if (message.controller === "OculusTouch") { if (message.controller === "OculusTouch") {
switchViewFromControllerCheckBox.text = "Clicking Touch's Left Thumbstick Switches Monitor View"; switchViewFromControllerCheckBox.text = "Left Thumbstick: Switch Monitor View";
takeSnapshotFromControllerCheckBox.text = "Clicking Touch's Right Thumbstick Takes Snapshot"; takeSnapshotFromControllerCheckBox.text = "Right Thumbstick: Take Snapshot";
} else if (message.controller === "Vive") { } else if (message.controller === "Vive") {
switchViewFromControllerCheckBox.text = "Clicking Left Thumb Pad Switches Monitor View"; switchViewFromControllerCheckBox.text = "Left Thumb Pad: Switch Monitor View";
takeSnapshotFromControllerCheckBox.text = "Clicking Right Thumb Pad Takes Snapshot"; takeSnapshotFromControllerCheckBox.text = "Right Thumb Pad: Take Snapshot";
} else { } else {
switchViewFromControllerCheckBox.text = "Pressing Ctrl+0 Switches Monitor View"; switchViewFromControllerCheckBox.text = "Pressing Ctrl+0 Switches Monitor View";
switchViewFromControllerCheckBox.checked = true; switchViewFromControllerCheckBox.checked = true;