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 id: checkBox
property int colorScheme: hifi.colorSchemes.light 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 readonly property bool isLightColorScheme: colorScheme == hifi.colorSchemes.light
property bool isRedCheck: false property bool isRedCheck: false
property int boxSize: 14 property int boxSize: 14

View file

@ -209,7 +209,7 @@ Rectangle {
colorScheme: hifi.colorSchemes.dark; colorScheme: hifi.colorSchemes.dark;
anchors.left: parent.left; anchors.left: parent.left;
anchors.top: parent.top; anchors.top: parent.top;
text: "Camera On"; text: "Spectator Camera On";
boxSize: 24; boxSize: 24;
onClicked: { onClicked: {
sendToScript({method: (checked ? 'spectatorCameraOn' : 'spectatorCameraOff')}); sendToScript({method: (checked ? 'spectatorCameraOn' : 'spectatorCameraOff')});
@ -217,39 +217,68 @@ Rectangle {
} }
} }
// Spectator Camera Preview // Instructions or Preview
Hifi.ResourceImageItem { Rectangle {
id: spectatorCameraPreview; id: spectatorCameraImageContainer;
url: "resource://spectatorCameraFrame";
ready: cameraToggleCheckBox.checked;
mirrorVertically: true;
height: 250;
anchors.left: parent.left; anchors.left: parent.left;
anchors.top: cameraToggleCheckBox.bottom; anchors.top: cameraToggleCheckBox.bottom;
anchors.topMargin: 20; anchors.topMargin: 20;
anchors.right: parent.right; anchors.right: parent.right;
onVisibleChanged: { height: 250;
ready = cameraToggleCheckBox.checked; color: spectatorCameraPreview.visible ? "transparent" : "black";
update();
}
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 // "Monitor Shows" Switch Label Glyph
HiFiGlyphs { HiFiGlyphs {
id: monitorShowsSwitchLabelGlyph; id: monitorShowsSwitchLabelGlyph;
text: hifi.glyphs.screen; text: hifi.glyphs.screen;
size: 32; size: 32;
color: hifi.colors.blueHighlight; color: hifi.colors.blueHighlight;
anchors.top: spectatorCameraPreview.bottom; anchors.top: spectatorCameraImageContainer.bottom;
anchors.topMargin: 20; anchors.topMargin: 13;
anchors.left: parent.left; anchors.left: parent.left;
} }
// "Monitor Shows" Switch Label // "Monitor Shows" Switch Label
RalewayLight { RalewayLight {
id: monitorShowsSwitchLabel; id: monitorShowsSwitchLabel;
text: "MONITOR SHOWS:"; text: "MONITOR SHOWS:";
anchors.top: spectatorCameraPreview.bottom; anchors.top: spectatorCameraImageContainer.bottom;
anchors.topMargin: 20; anchors.topMargin: 20;
anchors.left: monitorShowsSwitchLabelGlyph.right; anchors.left: monitorShowsSwitchLabelGlyph.right;
anchors.leftMargin: 6; anchors.leftMargin: 6;
@ -330,6 +359,9 @@ Rectangle {
switchViewFromControllerCheckBox.enabled = false; switchViewFromControllerCheckBox.enabled = false;
} }
break; break;
case 'showPreviewTextureNotInstructions':
spectatorCameraPreview.visible = message.setting;
break;
default: default:
console.log('Unrecognized message from spectatorCamera.js:', JSON.stringify(message)); 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 "" // 3. Camera is on; "Monitor Shows" is "HMD Preview": "url" is ""
// 4. Camera is on; "Monitor Shows" is "Camera View": "url" is "resource://spectatorCameraFrame" // 4. Camera is on; "Monitor Shows" is "Camera View": "url" is "resource://spectatorCameraFrame"
function setDisplay(showCameraView) { 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" : ""; var url = (camera && showCameraView) ? "resource://spectatorCameraFrame" : "";
sendToQml({ method: 'showPreviewTextureNotInstructions', setting: !!url });
Window.setDisplayTexture(url); Window.setDisplayTexture(url);
} }
const MONITOR_SHOWS_CAMERA_VIEW_DEFAULT = false; const MONITOR_SHOWS_CAMERA_VIEW_DEFAULT = false;