Merge pull request #10893 from zfox23/spectatorCamera_instructions

Spectator Camera preview instructions
This commit is contained in:
Zach Fox 2017-07-05 17:23:17 -07:00 committed by GitHub
commit 8c36e5c69f
4 changed files with 49 additions and 17 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 899 KiB

View file

@ -18,7 +18,7 @@ Original.CheckBox {
id: checkBox
property int colorScheme: hifi.colorSchemes.light
property string color: hifi.colors.lightGray
property string color: hifi.colors.lightGrayText
readonly property bool isLightColorScheme: colorScheme == hifi.colorSchemes.light
property bool isRedCheck: false
property int boxSize: 14

View file

@ -209,7 +209,7 @@ Rectangle {
colorScheme: hifi.colorSchemes.dark;
anchors.left: parent.left;
anchors.top: parent.top;
text: "Camera On";
text: "Spectator Camera On";
boxSize: 24;
onClicked: {
sendToScript({method: (checked ? 'spectatorCameraOn' : 'spectatorCameraOff')});
@ -217,39 +217,68 @@ Rectangle {
}
}
// Spectator Camera Preview
Hifi.ResourceImageItem {
id: spectatorCameraPreview;
url: "resource://spectatorCameraFrame";
ready: cameraToggleCheckBox.checked;
mirrorVertically: true;
height: 250;
// Instructions or Preview
Rectangle {
id: spectatorCameraImageContainer;
anchors.left: parent.left;
anchors.top: cameraToggleCheckBox.bottom;
anchors.topMargin: 20;
anchors.right: parent.right;
onVisibleChanged: {
ready = cameraToggleCheckBox.checked;
update();
}
height: 250;
color: spectatorCameraPreview.visible ? "transparent" : "black";
AnimatedImage {
source: "../../images/static.gif"
visible: !spectatorCameraPreview.visible;
anchors.fill: parent;
opacity: 0.15;
}
// Instructions (visible when display texture isn't set)
FiraSansRegular {
id: spectatorCameraInstructions;
text: "Turn on Spectator Camera for a preview\nof what your monitor shows.";
size: 16;
color: hifi.colors.lightGrayText;
visible: !spectatorCameraPreview.visible;
anchors.fill: parent;
horizontalAlignment: Text.AlignHCenter;
verticalAlignment: Text.AlignVCenter;
}
// Spectator Camera Preview
Hifi.ResourceImageItem {
id: spectatorCameraPreview;
visible: false;
url: "resource://spectatorCameraFrame";
ready: cameraToggleCheckBox.checked;
mirrorVertically: true;
anchors.fill: parent;
onVisibleChanged: {
ready = cameraToggleCheckBox.checked;
update();
}
}
}
// "Monitor Shows" Switch Label Glyph
HiFiGlyphs {
id: monitorShowsSwitchLabelGlyph;
text: hifi.glyphs.screen;
size: 32;
color: hifi.colors.blueHighlight;
anchors.top: spectatorCameraPreview.bottom;
anchors.topMargin: 20;
anchors.top: spectatorCameraImageContainer.bottom;
anchors.topMargin: 13;
anchors.left: parent.left;
}
// "Monitor Shows" Switch Label
RalewayLight {
id: monitorShowsSwitchLabel;
text: "MONITOR SHOWS:";
anchors.top: spectatorCameraPreview.bottom;
anchors.top: spectatorCameraImageContainer.bottom;
anchors.topMargin: 20;
anchors.left: monitorShowsSwitchLabelGlyph.right;
anchors.leftMargin: 6;
@ -330,6 +359,9 @@ Rectangle {
switchViewFromControllerCheckBox.enabled = false;
}
break;
case 'showPreviewTextureNotInstructions':
spectatorCameraPreview.visible = message.setting;
break;
default:
console.log('Unrecognized message from spectatorCamera.js:', JSON.stringify(message));
}

View file

@ -217,8 +217,8 @@
// 3. Camera is on; "Monitor Shows" is "HMD Preview": "url" is ""
// 4. Camera is on; "Monitor Shows" is "Camera View": "url" is "resource://spectatorCameraFrame"
function setDisplay(showCameraView) {
// It would be fancy if the app would show instructions when (url === ""), but that's out of scope for now.
var url = (camera && showCameraView) ? "resource://spectatorCameraFrame" : "";
sendToQml({ method: 'showPreviewTextureNotInstructions', setting: !!url });
Window.setDisplayTexture(url);
}
const MONITOR_SHOWS_CAMERA_VIEW_DEFAULT = false;