Making progress towards file chooser dialog

scripts/system/html/SnapshotReview.html

@@ -27,8 +27,8 @@
                 <input type="radio" name="cameraCaptures" id="stillOnly" value="stillOnly" /><label for="stillOnly"><span><span></span></span>Still Only</label>
             </form>
         </div>
-        <div id="snap-button" onclick="takeSnapshot()">
-        </div>
+        <input type="button" id="snap-button" onclick="takeSnapshot()" />
+        <div id="snap-settings-right"></div>
     </div>
 </body>
 </html>

scripts/system/html/css/SnapshotReview.css

@@ -8,12 +8,6 @@
 //  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
 */
 
-body {
-    padding: 0;
-    margin: 0;
-    overflow: hidden;
-}
-
 /*
 // START styling of top bar and its contents
 */
@@ -60,6 +54,17 @@ input[type=button].naked:active {
 // END styling of top bar and its contents
 */
 
+/*
+// START styling of snapshot instructions panel
+*/
+.snapshotInstructions {
+    font-family: Raleway-Regular;
+    margin: 0 20px;
+}
+/*
+// END styling of snapshot instructions panel
+*/
+
 /*
 // START styling of snapshot pane and its contents
 */
@@ -172,17 +177,18 @@ input[type=button].naked:active {
 // START styling of snapshot controls (bottom panel) and its contents
 */
 #snapshot-controls {
-    padding-left: 8px;
-    padding-right: 8px;
     width: 100%;
     position: absolute;
     left: 0;
     margin-top: 8px;
     overflow: hidden;
+    display: flex;
+    justify-content: center;
 }
 #snap-settings {
-    float: left;
-    margin-left: 10px;
+    display: inline;
+    width: 150px;
+    margin: auto;
 }
 #snap-settings form input {
     margin-bottom: 5px;
@@ -191,18 +197,28 @@ input[type=button].naked:active {
 #snap-button {
     width: 65px;
     height: 65px;
+    padding: 0;
     border-radius: 50%;
     background: #EA4C5F;
     border: 3px solid white;
-    margin-left: auto;
-    margin-right: auto;
+    margin: auto;
+    box-sizing: content-box;
+    display: inline;
 }
-#snap-button:hover {
+#snap-button:disabled {
+    background: gray;
+}
+#snap-button:hover:enabled {
     background: #C62147;
 }
-#snap-button:active {
+#snap-button:active:enabled {
     background: #EA4C5F;
 }
+#snap-settings-right {
+    display: inline;
+    width: 150px;
+    margin: auto;
+}
 /*
 // END styling of snapshot controls (bottom panel) and its contents
 */
@@ -210,6 +226,22 @@ input[type=button].naked:active {
 /*
 // START misc styling
 */
+body {
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+}
+p {
+    margin: 2px 0;
+}
+h4 {
+    margin: 14px 0 0 0;
+}
+.centeredImage {
+    margin: 0 auto;
+    display: block;
+}
+
 .prompt {
     font-family: Raleway-SemiBold;
     font-size: 14px;

scripts/system/html/js/SnapshotReview.js

@@ -13,8 +13,28 @@
 var paths = [];
 var idCounter = 0;
 var imageCount = 0;
-function clearImages() {
+function showSetupInstructions() {
     var snapshotImagesDiv = document.getElementById("snapshot-images");
+    snapshotImagesDiv.className = "snapshotInstructions";
+    snapshotImagesDiv.innerHTML = '<img class="centeredImage" src="./img/snapshotIcon.png" alt="Snapshot Instructions" width="64" height="64"/>' +
+    '<br/>' +
+    '<p>This app lets you take and share snaps and GIFs with your connections in High Fidelity.</p>' +
+    "<h4>Setup Instructions</h4>" +
+    "<p>Before you can begin taking snaps, please choose where you'd like to save snaps on your computer:</p>" +
+    '<br/>' +
+    '<input type="button" value="CHOOSE" onclick="chooseSnapshotLocation()" />';
+    document.getElementById("snap-button").disabled = true;
+}
+function chooseSnapshotLocation() {
+    EventBridge.emitWebEvent(JSON.stringify({
+        type: "snapshot",
+        action: "chooseSnapshotLocation"
+    }));
+}
+function clearImages() {
+    document.getElementById("snap-button").disabled = false;
+    var snapshotImagesDiv = document.getElementById("snapshot-images");
+    snapshotImagesDiv.classList.remove("snapshotInstructions");
     while (snapshotImagesDiv.hasChildNodes()) {
         snapshotImagesDiv.removeChild(snapshotImagesDiv.lastChild);
     }
@@ -207,6 +227,7 @@ function handleCaptureSetting(setting) {
 
 }
 window.onload = function () {
+    testInBrowser(false);
     openEventBridge(function () {
         // Set up a handler for receiving the data, and tell the .js we are ready to receive it.
         EventBridge.scriptEventReceived.connect(function (message) {
@@ -218,6 +239,12 @@ window.onload = function () {
             }
             
             switch (message.action) {
+                case 'showSetupInstructions':
+                    showSetupInstructions();
+                    break;
+                case 'snapshotLocationChosen':
+                    clearImages();
+                    break;
                 case 'clearPreviousImages':
                     clearImages();
                     break;
@@ -274,8 +301,7 @@ window.onload = function () {
             type: "snapshot",
             action: "ready"
         }));
-    });
-
+    });;
 };
 function snapshotSettings() {
     EventBridge.emitWebEvent(JSON.stringify({
@@ -290,8 +316,12 @@ function takeSnapshot() {
     }));
 }
 
-function testInBrowser() {
-    imageCount = 1;
-    //addImage({ localPath: 'http://lorempixel.com/553/255' });
-    addImage({ localPath: 'C:/Users/Zach Fox/Desktop/hifi-snap-by-zfox-on-2017-04-25_11-35-13.jpg' }, false, true, true, false);   
+function testInBrowser(isTestingSetupInstructions) {
+    if (isTestingSetupInstructions) {
+        showSetupInstructions();
+    } else {
+        imageCount = 1;
+        //addImage({ localPath: 'http://lorempixel.com/553/255' });
+        addImage({ localPath: 'C:/Users/valef/Desktop/hifi-snap-by-zfox-on-2017-04-26_10-26-53.jpg' }, false, true, true, false);
+    }
 }

scripts/system/snapshot.js

@@ -104,13 +104,31 @@ function onMessage(message) {
                 action: "captureSettings",
                 setting: Settings.getValue("alsoTakeAnimatedSnapshot", true)
             }));
-            tablet.emitScriptEvent(JSON.stringify({
-                type: "snapshot",
-                action: "showPreviousImages",
-                options: snapshotOptions,
-                image_data: imageData,
-                canShare: !!isDomainOpen(Settings.getValue("previousSnapshotDomainID"))
-            }));
+            if (Settings.getValue("snapshotsLocation", "") !== "") {
+                tablet.emitScriptEvent(JSON.stringify({
+                    type: "snapshot",
+                    action: "showPreviousImages",
+                    options: snapshotOptions,
+                    image_data: imageData,
+                    canShare: !!isDomainOpen(Settings.getValue("previousSnapshotDomainID"))
+                }));
+            } else {
+                tablet.emitScriptEvent(JSON.stringify({
+                    type: "snapshot",
+                    action: "showSetupInstructions"
+                }));
+            }
+            break;
+        case 'chooseSnapshotLocation':
+            var snapshotPath = Window.browse("Choose Snapshots Directory","","");
+
+            if (!snapshotPath.isEmpty()) { // not cancelled
+                Settings.setValue("snapshotsLocation", snapshotPath);
+                tablet.emitScriptEvent(JSON.stringify({
+                    type: "snapshot",
+                    action: "snapshotLocationChosen"
+                }));
+            }
             break;
         case 'openSettings':
             if ((HMD.active && Settings.getValue("hmdTabletBecomesToolbar"))