From aea5779ed6cdbcf56a1383c59e00bd196cd715ca Mon Sep 17 00:00:00 2001
From: Zach Fox <fox@highfidelity.io>
Date: Wed, 5 Jul 2017 12:22:16 -0700
Subject: [PATCH] When a display texture isn't set, show preview instructions

---
 .../resources/qml/hifi/SpectatorCamera.qml    | 49 +++++++++++++------
 scripts/system/spectatorCamera.js             |  2 +-
 2 files changed, 36 insertions(+), 15 deletions(-)

diff --git a/interface/resources/qml/hifi/SpectatorCamera.qml b/interface/resources/qml/hifi/SpectatorCamera.qml
index e3572a544f..514b6ffe57 100644
--- a/interface/resources/qml/hifi/SpectatorCamera.qml
+++ b/interface/resources/qml/hifi/SpectatorCamera.qml
@@ -217,39 +217,57 @@ Rectangle {
             }
         }
 
-        // Spectator Camera Preview
-        Hifi.ResourceImageItem {
-            id: spectatorCameraPreview;
-            url: "resource://spectatorCameraFrame";
-            ready: cameraToggleCheckBox.checked;
-            mirrorVertically: true;
-            height: 250;
+        // Instructions or Preview
+        Item {
+            id: spectatorCameraImageContainer;
             anchors.left: parent.left;
             anchors.top: cameraToggleCheckBox.bottom;
             anchors.topMargin: 20;
             anchors.right: parent.right;
-            onVisibleChanged: {
-                ready = cameraToggleCheckBox.checked;
-                update();
+            height: 250;
+            
+            // Instructions (visible when display texture isn't set)
+            Image {
+                id: spectatorCameraInstructions;
+                visible: !spectatorCameraPreview.visible;
+                anchors.fill: parent;
+                fillMode: Image.PreserveAspectFit;
+                horizontalAlignment: Image.AlignHCenter;
+                verticalAlignment: Image.AlignVCenter;
+                source: "http://1.bp.blogspot.com/-1GABEq__054/T03B00j_OII/AAAAAAAAAa8/jo55LcvEPHI/s1600/Winning.jpg";
+            }
+            
+            // 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 +348,9 @@ Rectangle {
                 switchViewFromControllerCheckBox.enabled = false;
             }
         break;
+        case 'showPreviewTextureNotInstructions':
+            spectatorCameraPreview.visible = message.setting;
+        break;
         default:
             console.log('Unrecognized message from spectatorCamera.js:', JSON.stringify(message));
         }
diff --git a/scripts/system/spectatorCamera.js b/scripts/system/spectatorCamera.js
index 3c011cad99..b77ab1d8af 100644
--- a/scripts/system/spectatorCamera.js
+++ b/scripts/system/spectatorCamera.js
@@ -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;