From 7acdc866440db2c95744de2210d256796d6aa582 Mon Sep 17 00:00:00 2001 From: Zach Fox Date: Wed, 19 Apr 2017 13:55:47 -0700 Subject: [PATCH] Progress --- scripts/system/html/SnapshotReview.html | 2 +- scripts/system/html/css/SnapshotReview.css | 33 +------ scripts/system/html/js/SnapshotReview.js | 102 +++++++++++---------- scripts/system/snapshot.js | 7 ++ 4 files changed, 67 insertions(+), 77 deletions(-) diff --git a/scripts/system/html/SnapshotReview.html b/scripts/system/html/SnapshotReview.html index 2a68217976..1dff573014 100644 --- a/scripts/system/html/SnapshotReview.html +++ b/scripts/system/html/SnapshotReview.html @@ -23,7 +23,7 @@

- +
diff --git a/scripts/system/html/css/SnapshotReview.css b/scripts/system/html/css/SnapshotReview.css index 058fe141dd..3985253a03 100644 --- a/scripts/system/html/css/SnapshotReview.css +++ b/scripts/system/html/css/SnapshotReview.css @@ -10,6 +10,7 @@ body { padding: 0; + margin: 0; } /* @@ -17,6 +18,7 @@ body { */ .snapsection { padding-top: 12px; + margin: 8px; } .snapsection.title { @@ -66,43 +68,18 @@ input[type=button].naked:active { // START styling of snapshot pane and its contents */ #snapshot-pane { + height: 510px; } #snapshot-images { position: relative; } -#snapshot-images > div { - position: relative; - text-align: center; -} - #snapshot-images img { max-width: 100%; max-height: 100%; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); vertical-align: middle; } - -#snapshot-images div.property { - margin-top: 0; - position: absolute; - top: 50%; - left: 7px; - transform: translate(0%, -50%); -} - -#snapshot-images img { - box-sizing: border-box; - padding: 0 7px 0 7px; -} - -#snapshot-images img.multiple { - padding-left: 28px; -} /* // END styling of snapshot pane and its contents */ @@ -123,10 +100,10 @@ input[type=button].naked:active { margin-left: 10px; } #snap-settings label { - margin-bottom: 50px; + height: 50px; } #snap-settings form input { - margin-bottom: 50px; + margin-bottom: 10px; } #snap-button { diff --git a/scripts/system/html/js/SnapshotReview.js b/scripts/system/html/js/SnapshotReview.js index 7fec372c94..4b95507309 100644 --- a/scripts/system/html/js/SnapshotReview.js +++ b/scripts/system/html/js/SnapshotReview.js @@ -10,43 +10,44 @@ // See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html // -var paths = [], idCounter = 0, imageCount; +var paths = [], idCounter = 0, imageCount = 1; function addImage(data) { if (!data.localPath) { return; } - var div = document.createElement("DIV"), - input = document.createElement("INPUT"), - label = document.createElement("LABEL"), - img = document.createElement("IMG"), - div2 = document.createElement("DIV"), - id = "p" + idCounter++; - img.id = id + "img"; - function toggle() { data.share = input.checked; } + var div = document.createElement("DIV"); + var id = "p" + idCounter++; + var img = document.createElement("IMG"); + img.id = "img" + id; div.style.height = "" + Math.floor(100 / imageCount) + "%"; if (imageCount > 1) { img.setAttribute("class", "multiple"); } img.src = data.localPath; div.appendChild(img); - if (imageCount > 1) { // I'd rather use css, but the included stylesheet is quite particular. - // Our stylesheet(?) requires input.id to match label.for. Otherwise input doesn't display the check state. - label.setAttribute('for', id); // cannot do label.for = - input.id = id; - input.type = "checkbox"; - input.checked = false; - data.share = input.checked; - input.addEventListener('change', toggle); - div2.setAttribute("class", "property checkbox"); - div2.appendChild(input); - div2.appendChild(label); - div.appendChild(div2); - } else { - data.share = true; - } document.getElementById("snapshot-images").appendChild(div); paths.push(data); } +function handleCaptureSetting(setting) { + var stillAndGif = document.getElementById('stillAndGif'); + var stillOnly = document.getElementById('stillOnly'); + stillAndGif.checked = setting; + stillOnly.checked = !setting; + + stillAndGif.onclick = function () { + EventBridge.emitWebEvent(JSON.stringify({ + type: "captureSettings", + action: true + })); + } + stillOnly.onclick = function () { + EventBridge.emitWebEvent(JSON.stringify({ + type: "captureSettings", + action: false + })); + } + +} function handleShareButtons(messageOptions) { var openFeed = document.getElementById('openFeed'); openFeed.checked = messageOptions.openFeedAfterShare; @@ -66,36 +67,41 @@ function handleShareButtons(messageOptions) { window.onload = function () { // Something like the following will allow testing in a browser. //addImage({localPath: 'c:/Users/howar/OneDrive/Pictures/hifi-snap-by--on-2016-07-27_12-58-43.jpg'}); - //addImage({ localPath: 'http://lorempixel.com/1512/1680' }); + addImage({ localPath: 'http://lorempixel.com/1512/1680' }); 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) { + message = JSON.parse(message); - if (message.type !== "snapshot") { - return; - } - // The last element of the message contents list contains a bunch of options, - // including whether or not we can share stuff - // The other elements of the list contain image paths. - var messageOptions = message.action.pop(); - handleShareButtons(messageOptions); + switch (message.type) { + case 'snapshot': + // The last element of the message contents list contains a bunch of options, + // including whether or not we can share stuff + // The other elements of the list contain image paths. + var messageOptions = message.action.pop(); + handleShareButtons(messageOptions); - if (messageOptions.containsGif) { - if (messageOptions.processingGif) { - imageCount = message.action.length + 1; // "+1" for the GIF that'll finish processing soon - message.action.unshift({ localPath: messageOptions.loadingGifPath }); - message.action.forEach(addImage); - document.getElementById('p0').disabled = true; - } else { - var gifPath = message.action[0].localPath; - document.getElementById('p0').disabled = false; - document.getElementById('p0img').src = gifPath; - paths[0].localPath = gifPath; - } - } else { - imageCount = message.action.length; - message.action.forEach(addImage); + if (messageOptions.containsGif) { + if (messageOptions.processingGif) { + imageCount = message.action.length + 1; // "+1" for the GIF that'll finish processing soon + message.action.unshift({ localPath: messageOptions.loadingGifPath }); + message.action.forEach(addImage); + } else { + var gifPath = message.action[0].localPath; + document.getElementById('imgp0').src = gifPath; + paths[0].localPath = gifPath; + } + } else { + imageCount = message.action.length; + message.action.forEach(addImage); + } + break; + case 'snapshotSettings': + handleCaptureSetting(message.action); + break; + default: + return; } }); EventBridge.emitWebEvent(JSON.stringify({ diff --git a/scripts/system/snapshot.js b/scripts/system/snapshot.js index 47abf41021..266f90c704 100644 --- a/scripts/system/snapshot.js +++ b/scripts/system/snapshot.js @@ -61,6 +61,10 @@ function onMessage(message) { var needsLogin = false; switch (message.action) { case 'ready': // Send it. + tablet.emitScriptEvent(JSON.stringify({ + type: "snapshotSettings", + action: Settings.getValue("alsoTakeAnimatedSnapshot", true) + })); tablet.emitScriptEvent(JSON.stringify({ type: "snapshot", action: readyData @@ -75,6 +79,9 @@ function onMessage(message) { tablet.loadQMLOnTop("TabletGeneralPreferences.qml"); } break; + case 'captureSettings': + Settings.setValue("alsoTakeAnimatedSnapshot", message.action); + break; case 'takeSnapshot': // In settings, first store the paths to the last snapshot //