mirror of
https://thingvellir.net/git/overte
synced 2025-03-27 23:52:03 +01:00
540 lines
19 KiB
QML
540 lines
19 KiB
QML
//
|
|
// SpectatorCamera.qml
|
|
// qml/hifi
|
|
//
|
|
// Spectator Camera v2.0
|
|
//
|
|
// Created by Zach Fox on 2018-04-18
|
|
// 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.7
|
|
import "qrc:////qml//styles-uit" as HifiStylesUit
|
|
import "qrc:////qml//controls-uit" as HifiControlsUit
|
|
import "qrc:////qml//controls" as HifiControls
|
|
import "qrc:////qml//hifi" as Hifi
|
|
|
|
Rectangle {
|
|
HifiStylesUit.HifiConstants { id: hifi; }
|
|
|
|
id: root;
|
|
// Style
|
|
color: hifi.colors.baseGray;
|
|
|
|
// The letterbox used for popup messages
|
|
Hifi.LetterboxMessage {
|
|
id: letterboxMessage;
|
|
z: 998; // Force the popup on top of everything else
|
|
}
|
|
function letterbox(headerGlyph, headerText, message) {
|
|
letterboxMessage.headerGlyph = headerGlyph;
|
|
letterboxMessage.headerText = headerText;
|
|
letterboxMessage.text = message;
|
|
letterboxMessage.visible = true;
|
|
letterboxMessage.popupRadius = 0;
|
|
}
|
|
|
|
//
|
|
// TITLE BAR START
|
|
//
|
|
Item {
|
|
id: titleBarContainer;
|
|
// Size
|
|
width: root.width;
|
|
height: 40;
|
|
// Anchors
|
|
anchors.left: parent.left;
|
|
anchors.top: parent.top;
|
|
|
|
// "Spectator" text
|
|
HifiStylesUit.RalewaySemiBold {
|
|
id: titleBarText;
|
|
text: "Spectator Camera";
|
|
// Text size
|
|
size: hifi.fontSizes.overlayTitle;
|
|
// Anchors
|
|
anchors.fill: parent;
|
|
anchors.leftMargin: 16;
|
|
// 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
|
|
//
|
|
|
|
//
|
|
// SPECTATOR APP DESCRIPTION START
|
|
//
|
|
Item {
|
|
id: spectatorDescriptionContainer;
|
|
// Size
|
|
width: root.width;
|
|
height: childrenRect.height;
|
|
// Anchors
|
|
anchors.left: parent.left;
|
|
anchors.top: titleBarContainer.bottom;
|
|
|
|
// (i) Glyph
|
|
HifiStylesUit.HiFiGlyphs {
|
|
id: spectatorDescriptionGlyph;
|
|
text: hifi.glyphs.info;
|
|
// Size
|
|
width: 20;
|
|
height: parent.height;
|
|
size: 60;
|
|
// Anchors
|
|
anchors.left: parent.left;
|
|
anchors.leftMargin: 20;
|
|
anchors.top: parent.top;
|
|
anchors.topMargin: 0;
|
|
// Style
|
|
color: hifi.colors.lightGrayText;
|
|
horizontalAlignment: Text.AlignHLeft;
|
|
verticalAlignment: Text.AlignTop;
|
|
}
|
|
|
|
// "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
|
|
//
|
|
|
|
Rectangle {
|
|
z: 999;
|
|
id: processingSnapshot;
|
|
anchors.fill: parent;
|
|
visible: !take360SnapshotButton.enabled;
|
|
color: Qt.rgba(0.0, 0.0, 0.0, 0.8);
|
|
|
|
// 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;
|
|
}
|
|
|
|
HifiStylesUit.RalewaySemiBold {
|
|
text: "Processing...";
|
|
// Anchors
|
|
anchors.top: processingImage.bottom;
|
|
anchors.topMargin: 4;
|
|
anchors.horizontalCenter: parent.horizontalCenter;
|
|
width: paintedWidth;
|
|
// Text size
|
|
size: 26;
|
|
// Style
|
|
color: hifi.colors.white;
|
|
verticalAlignment: Text.AlignVCenter;
|
|
}
|
|
}
|
|
|
|
//
|
|
// SPECTATOR CONTROLS START
|
|
//
|
|
Item {
|
|
id: spectatorControlsContainer;
|
|
// Size
|
|
height: root.height - spectatorDescriptionContainer.height - titleBarContainer.height;
|
|
// Anchors
|
|
anchors.top: spectatorDescriptionContainer.bottom;
|
|
anchors.topMargin: 8;
|
|
anchors.left: parent.left;
|
|
anchors.leftMargin: 25;
|
|
anchors.right: parent.right;
|
|
anchors.rightMargin: anchors.leftMargin;
|
|
|
|
// "Camera On" Button
|
|
HifiControlsUit.Button {
|
|
property bool camIsOn: false;
|
|
|
|
id: cameraToggleButton;
|
|
color: camIsOn ? hifi.buttons.red : hifi.buttons.blue;
|
|
colorScheme: hifi.colorSchemes.dark;
|
|
anchors.left: parent.left;
|
|
anchors.top: parent.top;
|
|
anchors.right: parent.right;
|
|
height: 40;
|
|
text: camIsOn ? "TURN OFF SPECTATOR CAMERA" : "TURN ON SPECTATOR CAMERA";
|
|
onClicked: {
|
|
camIsOn = !camIsOn;
|
|
sendToScript({method: (camIsOn ? 'spectatorCameraOn' : 'spectatorCameraOff')});
|
|
fieldOfViewSlider.value = 45.0;
|
|
sendToScript({method: 'updateCameravFoV', vFoV: fieldOfViewSlider.value});
|
|
}
|
|
}
|
|
|
|
// Instructions or Preview
|
|
Rectangle {
|
|
id: spectatorCameraImageContainer;
|
|
anchors.left: parent.left;
|
|
anchors.top: cameraToggleButton.bottom;
|
|
anchors.topMargin: 8;
|
|
anchors.right: parent.right;
|
|
height: 250;
|
|
color: cameraToggleButton.camIsOn ? "transparent" : "black";
|
|
|
|
AnimatedImage {
|
|
source: "static.gif"
|
|
visible: !cameraToggleButton.camIsOn;
|
|
anchors.fill: parent;
|
|
opacity: 0.15;
|
|
}
|
|
|
|
// Instructions (visible when display texture isn't set)
|
|
HifiStylesUit.FiraSansRegular {
|
|
id: spectatorCameraInstructions;
|
|
text: "Turn on Spectator Camera for a preview\nof " + (HMD.active ? "what your monitor shows." : "the camera's view.");
|
|
size: 16;
|
|
color: hifi.colors.lightGrayText;
|
|
visible: !cameraToggleButton.camIsOn;
|
|
anchors.fill: parent;
|
|
horizontalAlignment: Text.AlignHCenter;
|
|
verticalAlignment: Text.AlignVCenter;
|
|
}
|
|
|
|
// Spectator Camera Preview
|
|
Hifi.ResourceImageItem {
|
|
id: spectatorCameraPreview;
|
|
visible: cameraToggleButton.camIsOn;
|
|
url: monitorShowsSwitch.checked || !HMD.active ? "resource://spectatorCameraFrame" : "resource://hmdPreviewFrame";
|
|
ready: cameraToggleButton.camIsOn;
|
|
mirrorVertically: true;
|
|
anchors.fill: parent;
|
|
onVisibleChanged: {
|
|
ready = cameraToggleButton.camIsOn;
|
|
update();
|
|
}
|
|
}
|
|
}
|
|
|
|
Item {
|
|
id: fieldOfView;
|
|
visible: cameraToggleButton.camIsOn;
|
|
anchors.top: spectatorCameraImageContainer.bottom;
|
|
anchors.topMargin: 8;
|
|
anchors.left: parent.left;
|
|
anchors.leftMargin: 8;
|
|
anchors.right: parent.right;
|
|
height: 35;
|
|
|
|
HifiStylesUit.FiraSansRegular {
|
|
id: fieldOfViewLabel;
|
|
text: "Field of View (" + fieldOfViewSlider.value + "): ";
|
|
size: 16;
|
|
color: hifi.colors.lightGrayText;
|
|
anchors.left: parent.left;
|
|
anchors.top: parent.top;
|
|
anchors.bottom: parent.bottom;
|
|
width: 140;
|
|
horizontalAlignment: Text.AlignLeft;
|
|
verticalAlignment: Text.AlignVCenter;
|
|
}
|
|
|
|
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});
|
|
}
|
|
onPressedChanged: {
|
|
if (!pressed) {
|
|
sendToScript({method: 'updateCameravFoV', vFoV: value});
|
|
}
|
|
}
|
|
}
|
|
|
|
HifiControlsUit.GlyphButton {
|
|
id: resetvFoV;
|
|
anchors.verticalCenter: parent.verticalCenter;
|
|
anchors.right: parent.right;
|
|
anchors.rightMargin: 6;
|
|
height: parent.height - 8;
|
|
width: height;
|
|
glyph: hifi.glyphs.reload;
|
|
onClicked: {
|
|
fieldOfViewSlider.value = 45.0;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// "Monitor Shows" Switch Label Glyph
|
|
HifiStylesUit.HiFiGlyphs {
|
|
id: monitorShowsSwitchLabelGlyph;
|
|
visible: HMD.active;
|
|
text: hifi.glyphs.screen;
|
|
size: 32;
|
|
color: hifi.colors.blueHighlight;
|
|
anchors.top: spectatorCameraImageContainer.bottom;
|
|
anchors.topMargin: 13;
|
|
anchors.left: parent.left;
|
|
}
|
|
// "Monitor Shows" Switch Label
|
|
HifiStylesUit.RalewayLight {
|
|
id: monitorShowsSwitchLabel;
|
|
visible: HMD.active;
|
|
text: "MONITOR SHOWS:";
|
|
anchors.top: spectatorCameraImageContainer.bottom;
|
|
anchors.topMargin: 20;
|
|
anchors.left: monitorShowsSwitchLabelGlyph.right;
|
|
anchors.leftMargin: 6;
|
|
size: 16;
|
|
width: paintedWidth;
|
|
height: paintedHeight;
|
|
color: hifi.colors.lightGrayText;
|
|
verticalAlignment: Text.AlignVCenter;
|
|
}
|
|
// "Monitor Shows" Switch
|
|
HifiControlsUit.Switch {
|
|
id: monitorShowsSwitch;
|
|
visible: HMD.active;
|
|
height: 30;
|
|
anchors.left: parent.left;
|
|
anchors.right: parent.right;
|
|
anchors.top: monitorShowsSwitchLabel.bottom;
|
|
anchors.topMargin: 10;
|
|
labelTextOff: "HMD Preview";
|
|
labelTextOn: "Camera View";
|
|
labelGlyphOnText: hifi.glyphs.alert;
|
|
onCheckedChanged: {
|
|
sendToScript({method: 'setMonitorShowsCameraView', params: checked});
|
|
}
|
|
}
|
|
|
|
// "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;
|
|
visible: cameraToggleButton.camIsOn;
|
|
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;
|
|
visible: cameraToggleButton.camIsOn;
|
|
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: {
|
|
take360SnapshotButton.enabled = false;
|
|
take360SnapshotButton.text = "PROCESSING...";
|
|
sendToScript({method: 'takeSecondaryCamera360Snapshot'});
|
|
}
|
|
}
|
|
}
|
|
//
|
|
// SPECTATOR CONTROLS END
|
|
//
|
|
|
|
//
|
|
// FUNCTION DEFINITIONS START
|
|
//
|
|
//
|
|
// Function Name: fromScript()
|
|
//
|
|
// Relevant Variables:
|
|
// None
|
|
//
|
|
// Arguments:
|
|
// message: The message sent from the SpectatorCamera JavaScript.
|
|
// Messages are in format "{method, params}", like json-rpc.
|
|
//
|
|
// Description:
|
|
// Called when a message is received from spectatorCamera.js.
|
|
//
|
|
function fromScript(message) {
|
|
switch (message.method) {
|
|
case 'updateSpectatorCameraCheckbox':
|
|
cameraToggleButton.camIsOn = message.params;
|
|
break;
|
|
case 'updateMonitorShowsSwitch':
|
|
monitorShowsSwitch.checked = message.params;
|
|
break;
|
|
case 'updateControllerMappingCheckbox':
|
|
switchViewFromControllerCheckBox.checked = message.switchViewSetting;
|
|
switchViewFromControllerCheckBox.enabled = true;
|
|
takeSnapshotFromControllerCheckBox.checked = message.takeSnapshotSetting;
|
|
takeSnapshotFromControllerCheckBox.enabled = true;
|
|
|
|
if (message.controller === "OculusTouch") {
|
|
switchViewFromControllerCheckBox.text = "Clicking Touch's Left Thumbstick Switches Monitor View";
|
|
takeSnapshotFromControllerCheckBox.text = "Clicking Touch's Right Thumbstick Takes Snapshot";
|
|
} else if (message.controller === "Vive") {
|
|
switchViewFromControllerCheckBox.text = "Clicking Left Thumb Pad Switches Monitor View";
|
|
takeSnapshotFromControllerCheckBox.text = "Clicking Right Thumb Pad Takes Snapshot";
|
|
} else {
|
|
switchViewFromControllerCheckBox.text = "Pressing Ctrl+0 Switches Monitor View";
|
|
switchViewFromControllerCheckBox.checked = true;
|
|
switchViewFromControllerCheckBox.enabled = false;
|
|
takeSnapshotFromControllerCheckBox.visible = false;
|
|
}
|
|
break;
|
|
case 'showPreviewTextureNotInstructions':
|
|
console.log('showPreviewTextureNotInstructions recvd', JSON.stringify(message));
|
|
spectatorCameraPreview.url = message.url;
|
|
spectatorCameraPreview.visible = message.setting;
|
|
break;
|
|
case 'enable360SnapshotButton':
|
|
take360SnapshotButton.text = "Take 360 Snapshot";
|
|
take360SnapshotButton.enabled = true;
|
|
break;
|
|
default:
|
|
console.log('Unrecognized message from spectatorCamera.js:', JSON.stringify(message));
|
|
}
|
|
}
|
|
signal sendToScript(var message);
|
|
|
|
//
|
|
// FUNCTION DEFINITIONS END
|
|
//
|
|
}
|