From 92187e2424b952952f018fa27576e29fa5bee40e Mon Sep 17 00:00:00 2001
From: Zach Fox <fox@highfidelity.io>
Date: Wed, 26 Apr 2017 12:08:22 -0700
Subject: [PATCH] Making progress towards file chooser dialog
---
scripts/system/html/SnapshotReview.html | 4 +-
scripts/system/html/css/SnapshotReview.css | 60 ++++++++++++++++-----
scripts/system/html/img/snapshotIcon.png | Bin 0 -> 16358 bytes
scripts/system/html/js/SnapshotReview.js | 44 ++++++++++++---
scripts/system/snapshot.js | 32 ++++++++---
5 files changed, 110 insertions(+), 30 deletions(-)
create mode 100644 scripts/system/html/img/snapshotIcon.png
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 @@
<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>
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 0000000000000000000000000000000000000000..5cb2742a32bf362a6cf1e230e9ebad1ac8feffba
GIT binary patch
literal 16358
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
AX8-^I
literal 0
HcmV?d00001
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 = '<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);
+ }
}
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"))