diff --git a/scripts/system/html/SnapshotReview.html b/scripts/system/html/SnapshotReview.html index 940adddd73..9469a9d313 100644 --- a/scripts/system/html/SnapshotReview.html +++ b/scripts/system/html/SnapshotReview.html @@ -27,8 +27,8 @@ -
-
+ +
diff --git a/scripts/system/html/css/SnapshotReview.css b/scripts/system/html/css/SnapshotReview.css index 0d1bd737e5..9db7e35b9f 100644 --- a/scripts/system/html/css/SnapshotReview.css +++ b/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; diff --git a/scripts/system/html/img/snapshotIcon.png b/scripts/system/html/img/snapshotIcon.png new file mode 100644 index 0000000000..5cb2742a32 Binary files /dev/null and b/scripts/system/html/img/snapshotIcon.png differ diff --git a/scripts/system/html/js/SnapshotReview.js b/scripts/system/html/js/SnapshotReview.js index 451767d93d..9ee45281ac 100644 --- a/scripts/system/html/js/SnapshotReview.js +++ b/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 = 'Snapshot Instructions' + + '
' + + '

This app lets you take and share snaps and GIFs with your connections in High Fidelity.

' + + "

Setup Instructions

" + + "

Before you can begin taking snaps, please choose where you'd like to save snaps on your computer:

" + + '
' + + ''; + 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); + } } diff --git a/scripts/system/snapshot.js b/scripts/system/snapshot.js index fe6ab3f28f..1f685924f6 100644 --- a/scripts/system/snapshot.js +++ b/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"))