diff --git a/unpublishedScripts/marketplace/spectator-camera/SpectatorCamera.qml b/unpublishedScripts/marketplace/spectator-camera/SpectatorCamera.qml index dbce93b93d..a38888d3c0 100644 --- a/unpublishedScripts/marketplace/spectator-camera/SpectatorCamera.qml +++ b/unpublishedScripts/marketplace/spectator-camera/SpectatorCamera.qml @@ -24,7 +24,7 @@ Rectangle { id: root; property bool processing360Snapshot: false; // Style - color: hifi.colors.baseGray; + color: "#404040"; // The letterbox used for popup messages Hifi.LetterboxMessage { @@ -42,14 +42,15 @@ Rectangle { // // TITLE BAR START // - Item { + Rectangle { id: titleBarContainer; // Size width: root.width; - height: 40; + height: 60; // Anchors anchors.left: parent.left; anchors.top: parent.top; + color: "#121212"; // "Spectator" text HifiStylesUit.RalewaySemiBold { @@ -58,26 +59,343 @@ Rectangle { // Text size size: hifi.fontSizes.overlayTitle; // Anchors - anchors.fill: parent; - anchors.leftMargin: 16; + anchors.left: parent.left; + anchors.leftMargin: 30; + width: paintedWidth; + height: parent.height; + size: 22; // Style - color: hifi.colors.lightGrayText; + color: hifi.colors.white; // Alignment horizontalAlignment: Text.AlignHLeft; verticalAlignment: Text.AlignVCenter; } - // Separator - HifiControlsUit.Separator { - anchors.left: parent.left; + HifiControlsUit.Switch { + id: masterSwitch; + width: 65; + height: parent.height; anchors.right: parent.right; - anchors.bottom: parent.bottom; + anchors.rightMargin: 30; + onCheckedChanged: { + sendToScript({method: (checked ? 'spectatorCameraOn' : 'spectatorCameraOff')}); + sendToScript({method: 'updateCameravFoV', vFoV: fieldOfViewSlider.value}); + } } } // // TITLE BAR END // + Rectangle { + z: 999; + id: processingSnapshot; + anchors.fill: parent; + visible: root.processing360Snapshot; + color: Qt.rgba(0.0, 0.0, 0.0, 0.85); + + // 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: titleBarContainer.bottom; + anchors.left: parent.left; + anchors.right: parent.right; + + // Instructions or Preview + Rectangle { + id: spectatorCameraImageContainer; + anchors.left: parent.left; + anchors.top: cameraToggleButton.bottom; + anchors.topMargin: 8; + anchors.right: parent.right; + height: 250; + color: masterSwitch.checked ? "transparent" : "black"; + + AnimatedImage { + source: "static.gif" + visible: !masterSwitch.checked; + 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: !masterSwitch.checked; + anchors.fill: parent; + horizontalAlignment: Text.AlignHCenter; + verticalAlignment: Text.AlignVCenter; + } + + // Spectator Camera Preview + Hifi.ResourceImageItem { + id: spectatorCameraPreview; + visible: masterSwitch.checked; + url: monitorShowsSwitch.checked || !HMD.active ? "resource://spectatorCameraFrame" : "resource://hmdPreviewFrame"; + ready: masterSwitch.checked; + mirrorVertically: true; + anchors.fill: parent; + onVisibleChanged: { + ready = masterSwitch.checked; + update(); + } + } + + Item { + visible: true//HMD.active; + anchors.top: parent.top; + anchors.left: parent.left; + anchors.right: parent.right; + height: 80; + + // "Monitor Shows" Switch Label Glyph + HifiStylesUit.HiFiGlyphs { + id: monitorShowsSwitchLabelGlyph; + text: hifi.glyphs.screen; + size: 32; + color: hifi.colors.white; + anchors.top: parent.top; + anchors.bottom: parent.bottom; + anchors.left: parent.left; + anchors.leftMargin: 16; + } + // "Monitor Shows" Switch Label + HifiStylesUit.RalewayLight { + id: monitorShowsSwitchLabel; + text: "MONITOR SHOWS:"; + anchors.top: parent.top; + anchors.bottom: parent.bottom; + anchors.left: monitorShowsSwitchLabelGlyph.right; + anchors.leftMargin: 8; + size: 20; + width: paintedWidth; + height: parent.height; + color: hifi.colors.white; + verticalAlignment: Text.AlignVCenter; + } + Item { + anchors.left: monitorShowsSwitchLabel.right; + anchors.leftMargin: 10; + anchors.right: parent.right; + anchors.rightMargin: 10; + anchors.top: parent.top; + anchors.bottom: parent.bottom; + + HifiControlsUit.RadioButton { + id: showCameraView; + text: "Camera View"; + width: 140; + anchors.left: parent.left; + anchors.verticalCenter: parent.verticalCenter; + colorScheme: hifi.colorSchemes.dark; + onClicked: { + if (showHmdPreview.checked) { + showHmdPreview.checked = false; + } + if (!showCameraView.checked && !showHmdPreview.checked) { + showCameraView.checked = true; + } + } + onCheckedChanged: { + if (checked) { + sendToScript({method: 'setMonitorShowsCameraView', params: true}); + } + } + } + + HifiControlsUit.RadioButton { + id: showHmdPreview; + text: "HMD"; + anchors.left: showCameraView.right; + anchors.leftMargin: 10; + anchors.right: parent.right; + anchors.verticalCenter: parent.verticalCenter; + colorScheme: hifi.colorSchemes.dark; + onClicked: { + if (showCameraView.checked) { + showCameraView.checked = false; + } + if (!showCameraView.checked && !showHmdPreview.checked) { + showHmdPreview.checked = true; + } + } + onCheckedChanged: { + if (checked) { + sendToScript({method: 'setMonitorShowsCameraView', params: false}); + } + } + } + } + } + } + + Item { + id: fieldOfView; + 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 + "\u00B0): "; + 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; + } + } + } + + // "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 APP DESCRIPTION START // @@ -88,26 +406,7 @@ Rectangle { 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; - } + anchors.bottom: anchors.bottom; // "Spectator" app description text HifiStylesUit.RalewayLight { @@ -186,294 +485,6 @@ Rectangle { // SPECTATOR APP DESCRIPTION END // - Rectangle { - z: 999; - id: processingSnapshot; - anchors.fill: parent; - visible: root.processing360Snapshot; - color: Qt.rgba(0.0, 0.0, 0.0, 0.85); - - // 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')}); - 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; - 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 + "\u00B0): "; - 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: fieldOfView.bottom; - anchors.topMargin: 8; - anchors.left: parent.left; - } - // "Monitor Shows" Switch Label - HifiStylesUit.RalewayLight { - id: monitorShowsSwitchLabel; - visible: HMD.active; - text: "MONITOR SHOWS:"; - anchors.top: fieldOfView.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; - enabled: 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; - enabled: 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: { - root.processing360Snapshot = true; - sendToScript({method: 'takeSecondaryCamera360Snapshot'}); - } - } - } - // - // SPECTATOR CONTROLS END - // - // // FUNCTION DEFINITIONS START // @@ -493,7 +504,7 @@ Rectangle { function fromScript(message) { switch (message.method) { case 'updateSpectatorCameraCheckbox': - cameraToggleButton.camIsOn = message.params; + masterSwitch.checked = message.params; break; case 'updateMonitorShowsSwitch': monitorShowsSwitch.checked = message.params;