Merge pull request #10600 from seefo/snapshot

Added Polaroid Feature to Snapshot

scripts/system/html/SnapshotReview.html

@@ -28,7 +28,11 @@
             </form>
         </div>
         <input type="button" id="snap-button" onclick="takeSnapshot()" />
-        <div id="snap-settings-right"></div>
+        <div id="snap-settings-right">
+            <button type="image" class="blueButton" id="print-button" onclick="printToPolaroid()">
+                <div id="print-icon" class="print-icon print-icon-default">
+            </button>
+        </div>
     </div>
 </body>
 </html>

scripts/system/html/css/SnapshotReview.css

@@ -286,6 +286,43 @@ input[type=button].naked:active {
 // END styling of snapshot controls (bottom panel) and its contents
 */
 
+
+/*
+// START polaroid styling
+*/
+
+#print-button {
+    width: 72px;
+    height: 72px;
+    margin-left: 30px;
+    margin-top: -10px;
+    box-sizing: content-box;
+    display: inline;
+    outline:none;
+}
+
+.print-icon {
+    margin: auto;
+}
+
+.print-icon-default {
+    background: url(../img/button-snap-print.svg) no-repeat;
+    margin-right: -1px;
+    width: 64px;
+    height: 64px;
+}
+
+.print-icon-loading {
+    background: url(../img/loader.gif) no-repeat;
+    width: 32px;
+    height: 32px;
+}
+
+/*
+// END polaroid styling
+*/
+
+
 /*
 // START misc styling
 */

scripts/system/html/img/button-snap-print.svg

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 199.8 231" style="enable-background:new 0 0 199.8 231;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g>
+	<g>
+		<path class="st0" d="M146.7,145.3H48V50.1h98.8V145.3z M56.2,122.8h83.1V57.6H56.2V122.8z"/>
+		<circle class="st0" cx="96.8" cy="83.5" r="10.9"/>
+		<path class="st0" d="M116.9,112.8h-40v-1.2c0-6.5,5.9-11.8,12.5-11.8H105c6.5,0,11.8,5.3,11.8,11.8V112.8z"/>
+		<polygon class="st0" points="155.5,80.6 155.5,125.7 170.9,39.2 74.6,19.6 70.3,43.7 78.3,43.7 81,28.8 161.7,45.6 		"/>
+	</g>
+	<g>
+		<path class="st0" d="M12.4,213.7v-29.8h14c6.5,0,10,4.4,10,9.6c0,5.2-3.6,9.6-10,9.6h-7.6v10.6H12.4z M29.9,193.4
+			c0-2.5-1.9-4-4.4-4h-6.7v8h6.7C28,197.4,29.9,195.9,29.9,193.4z"/>
+		<path class="st0" d="M69.9,213.7L64,203.1h-4.7v10.6H53v-29.8h14c6.2,0,10.1,4.1,10.1,9.6c0,5.2-3.4,8.1-6.6,8.9l6.8,11.4H69.9z
+			 M70.5,193.4c0-2.5-1.9-4-4.4-4h-6.7v8.1h6.7C68.6,197.5,70.5,195.9,70.5,193.4z"/>
+		<path class="st0" d="M94.4,213.7v-29.8h6.4v29.8H94.4z"/>
+		<path class="st0" d="M139.8,213.7l-14.2-19.5v19.5h-6.4v-29.8h6.5l13.8,18.7v-18.7h6.4v29.8H139.8z"/>
+		<path class="st0" d="M171.4,213.7v-24.2h-8.7v-5.6h23.8v5.6h-8.7v24.2H171.4z"/>
+	</g>
+</g>
+</svg>

scripts/system/html/js/SnapshotReview.js

@@ -311,10 +311,17 @@ function addImage(image_data, isLoggedIn, canShare, isGifLoading, isShowingPrevi
         if (isShowingPreviousImages && isLoggedIn && image_data.story_id) {
             updateShareInfo(id, image_data.story_id);
         }
+        if (isShowingPreviousImages) {
+            requestPrintButtonUpdate();  
+        } 
     };
     img.onerror = function () {
         img.onload = null;
         img.src = image_data.errorPath;
+        EventBridge.emitWebEvent(JSON.stringify({
+            type: "snapshot",
+            action: "alertSnapshotLoadFailed"
+        }));
     };
 }
 function showConfirmationMessage(selectedID, destination) {
@@ -670,10 +677,22 @@ window.onload = function () {
                     break;
                 case 'captureSettings':
                     handleCaptureSetting(message.setting);
+                    break;              
+                case 'setPrintButtonEnabled':
+                    setPrintButtonEnabled();
+                    break;
+                case 'setPrintButtonLoading':
+                    setPrintButtonLoading();
+                    break;
+                case 'setPrintButtonDisabled':
+                    setPrintButtonDisabled();
                     break;
                 case 'snapshotUploadComplete':
                     var isGif = fileExtensionMatches(message.image_url, "gif");
                     updateShareInfo(isGif ? "p1" : "p0", message.story_id);
+                    if (isPrintProcessing()) {                       
+                        setPrintButtonEnabled();
+                    }
                     break;
                 default:
                     console.log("Unknown message action received in SnapshotReview.js.");
@@ -703,6 +722,59 @@ function takeSnapshot() {
     }
 }
 
+function isPrintDisabled() { 
+    var printElement = document.getElementById('print-icon');
+    
+    return printElement.classList.contains("print-icon") &&
+           printElement.classList.contains("print-icon-default") &&
+           document.getElementById('print-button').disabled;
+}
+function isPrintProcessing() { 
+    var printElement = document.getElementById('print-icon');  
+    
+    return printElement.classList.contains("print-icon") &&
+           printElement.classList.contains("print-icon-loading") &&
+           document.getElementById('print-button').disabled;
+}
+function isPrintEnabled() {
+    var printElement = document.getElementById('print-icon');    
+    
+    return printElement.classList.contains("print-icon") &&
+           printElement.classList.contains("print-icon-default") &&
+           !document.getElementById('print-button').disabled;
+}
+
+function setPrintButtonLoading() {
+    document.getElementById('print-icon').className = "print-icon print-icon-loading";
+    document.getElementById('print-button').disabled = true;
+}
+function setPrintButtonDisabled() {
+    document.getElementById('print-icon').className = "print-icon print-icon-default";
+    document.getElementById('print-button').disabled = true;
+}
+function setPrintButtonEnabled() { 
+    document.getElementById('print-button').disabled = false;
+    document.getElementById('print-icon').className = "print-icon print-icon-default";
+}
+
+function requestPrintButtonUpdate() {
+    EventBridge.emitWebEvent(JSON.stringify({
+        type: "snapshot",
+        action: "requestPrintButtonUpdate"
+    }));
+}
+
+function printToPolaroid() {   
+    if (isPrintEnabled()) {        
+        EventBridge.emitWebEvent(JSON.stringify({
+            type: "snapshot",
+            action: "printToPolaroid"
+        }));       
+    } else {
+        setPrintButtonLoading();
+    }
+}
+
 function testInBrowser(test) {
     if (test === 0) {
         showSetupInstructions();

scripts/system/snapshot.js

@@ -99,11 +99,13 @@ function onMessage(message) {
                 Settings.setValue("previousStillSnapStoryID", "");
                 Settings.setValue("previousStillSnapBlastingDisabled", false);
                 Settings.setValue("previousStillSnapHifiSharingDisabled", false);
+                Settings.setValue("previousStillSnapUrl", "");
                 Settings.setValue("previousAnimatedSnapPath", "");
                 Settings.setValue("previousAnimatedSnapStoryID", "");
                 Settings.setValue("previousAnimatedSnapBlastingDisabled", false);
                 Settings.setValue("previousAnimatedSnapHifiSharingDisabled", false);
             }
+            updatePrintPermissions();
             break;
         case 'login':
             openLoginWindow();
@@ -140,12 +142,13 @@ function onMessage(message) {
             break;
         case 'shareSnapshotForUrl':
             isDomainOpen(Settings.getValue("previousSnapshotDomainID"), function (canShare) {
-                if (canShare) {
-                    isLoggedIn = Account.isLoggedIn();
+                var isGif = fileExtensionMatches(message.data, "gif");      
+                isLoggedIn = Account.isLoggedIn();                        
+                isUploadingPrintableStill = canShare && Account.isLoggedIn() && !isGif;               
+                if (canShare) {                  
                     if (isLoggedIn) {
                         print('Sharing snapshot with audience "for_url":', message.data);
-                        Window.shareSnapshot(message.data, Settings.getValue("previousSnapshotHref"));
-                        var isGif = fileExtensionMatches(message.data, "gif");
+                        Window.shareSnapshot(message.data, Settings.getValue("previousSnapshotHref"));                      
                         if (isGif) {
                             numGifSnapshotUploadsPending++;
                         } else {
@@ -156,6 +159,7 @@ function onMessage(message) {
                         snapshotToShareAfterLogin.push({ path: message.data, href: Settings.getValue("previousSnapshotHref") });
                     }
                 }
+                updatePrintPermissions();
             });
             break;
         case 'blastToConnections':
@@ -215,6 +219,18 @@ function onMessage(message) {
                 });
             }
             break;
+        case 'requestPrintButtonUpdate':
+            updatePrintPermissions();
+            break;
+        case 'printToPolaroid':
+            if (Entities.canRez() || Entities.canRezTmp()) {
+               printToPolaroid(Settings.getValue("previousStillSnapUrl"));
+               removeFromStoryIDsToMaybeDelete(Settings.getValue("previousStillSnapStoryID"));
+            }
+            break;
+        case 'alertSnapshotLoadFailed':
+            snapshotFailedToLoad = true;
+            break;
         case 'shareSnapshotWithEveryone':
             isLoggedIn = Account.isLoggedIn();
             if (isLoggedIn) {
@@ -262,6 +278,54 @@ function onMessage(message) {
     }
 }
 
+var POLAROID_PRINT_SOUND = SoundCache.getSound(Script.resolvePath("assets/sounds/sound-print-photo.wav"));
+var POLAROID_MODEL_URL  = 'http://hifi-content.s3.amazonaws.com/alan/dev/Test/snapshot.fbx';
+
+function printToPolaroid(image_url) {
+    var polaroid_url = image_url;                  
+
+    var model_pos = Vec3.sum(MyAvatar.position, Vec3.multiply(1.25, Quat.getForward(MyAvatar.orientation)));
+    
+    var model_q1 = MyAvatar.orientation;
+    var model_q2 = Quat.angleAxis(90, Quat.getRight(model_q1));
+    var model_rot = Quat.multiply(model_q2, model_q1);
+    
+    var properties = {                                
+        "type": 'Model',
+        "shapeType": 'box',
+
+        "name": "New Snapshot",
+        "description": "Printed from Snaps",                               
+        "modelURL": POLAROID_MODEL_URL,
+
+        "position": model_pos,
+        "rotation": model_rot,
+
+        "textures": JSON.stringify( { "tex.picture": polaroid_url } ),
+
+        "density": 200,
+        "restitution": 0.15,                            
+        "gravity": { "x": 0, "y": -4.5, "z": 0 },
+        
+        "velocity": { "x": 0, "y": 3.5, "z": 0 },
+        "angularVelocity": { "x": -1.0, "y": 0, "z": -1.3 },
+
+        "dynamic": true, 
+        "collisionsWillMove": true,
+
+        "userData": {
+            "grabbableKey": { "grabbable" : true }
+        }
+    };
+    
+    var polaroid = Entities.addEntity(properties);
+    Audio.playSound(POLAROID_PRINT_SOUND, {
+        position: model_pos,
+        localOnly: false,
+        volume: 0.2
+    });
+}
+
 function fillImageDataFromPrevious() {
     isLoggedIn = Account.isLoggedIn();
     var previousStillSnapPath = Settings.getValue("previousStillSnapPath");
@@ -349,6 +413,7 @@ function snapshotUploaded(isError, reply) {
                 Settings.setValue("previousAnimatedSnapStoryID", storyID);
             } else {
                 Settings.setValue("previousStillSnapStoryID", storyID);
+                Settings.setValue("previousStillSnapUrl", imageURL);
             }
         } else {
             print('Ignoring snapshotUploaded() callback for stale ' + (isGif ? 'GIF' : 'Still' ) + ' snapshot. Stale story ID:', storyID);
@@ -356,6 +421,7 @@ function snapshotUploaded(isError, reply) {
     } else {
         print(reply);
     }
+    isUploadingPrintableStill = false;
 }
 var href, domainId;
 function takeSnapshot() {
@@ -367,10 +433,16 @@ function takeSnapshot() {
     Settings.setValue("previousStillSnapStoryID", "");
     Settings.setValue("previousStillSnapBlastingDisabled", false);
     Settings.setValue("previousStillSnapHifiSharingDisabled", false);
+    Settings.setValue("previousStillSnapUrl", "");
     Settings.setValue("previousAnimatedSnapPath", "");
     Settings.setValue("previousAnimatedSnapStoryID", "");
     Settings.setValue("previousAnimatedSnapBlastingDisabled", false);
     Settings.setValue("previousAnimatedSnapHifiSharingDisabled", false);
+    
+    // Since we are taking a snapshot, we should make the print button appear to be loading/processing
+    snapshotFailedToLoad = false;
+    isUploadingPrintableStill = true;
+    updatePrintPermissions();
 
     // Raising the desktop for the share dialog at end will interact badly with clearOverlayWhenMoving.
     // Turn it off now, before we start futzing with things (and possibly moving).
@@ -612,6 +684,8 @@ function onUsernameChanged() {
                         }
                     });
                 }
+                isUploadingPrintableStill = canShare;
+                updatePrintPermissions();
             });
 
             shareAfterLogin = false;
@@ -619,6 +693,7 @@ function onUsernameChanged() {
         }
     }
 }
+
 function snapshotLocationSet(location) {
     if (location !== "") {
         tablet.emitScriptEvent(JSON.stringify({
@@ -628,12 +703,44 @@ function snapshotLocationSet(location) {
     }
 }
 
+function updatePrintPermissions() {
+    processRezPermissionChange(Entities.canRez() || Entities.canRezTmp());
+}
+
+var snapshotFailedToLoad = false;
+var isUploadingPrintableStill = false;
+function processRezPermissionChange(canRez) {
+    var action = "";
+    
+    if (canRez && !snapshotFailedToLoad) {  
+        if (Settings.getValue("previousStillSnapUrl")) {
+            action = 'setPrintButtonEnabled';
+        } else if (isUploadingPrintableStill) {
+            action = 'setPrintButtonLoading';
+        } else {
+            action = 'setPrintButtonDisabled';
+        }
+    } else {
+        action = 'setPrintButtonDisabled';
+    }
+    
+    tablet.emitScriptEvent(JSON.stringify({
+        type: "snapshot",
+        action : action
+    }));
+}
+
 button.clicked.connect(onButtonClicked);
 buttonConnected = true;
+
 Window.snapshotShared.connect(snapshotUploaded);
 tablet.screenChanged.connect(onTabletScreenChanged);
 GlobalServices.myUsernameChanged.connect(onUsernameChanged);
 Snapshot.snapshotLocationSet.connect(snapshotLocationSet);
+
+Entities.canRezChanged.connect(updatePrintPermissions);
+Entities.canRezTmpChanged.connect(updatePrintPermissions);
+
 Script.scriptEnding.connect(function () {
     if (buttonConnected) {
         button.clicked.disconnect(onButtonClicked);
@@ -645,6 +752,9 @@ Script.scriptEnding.connect(function () {
     Window.snapshotShared.disconnect(snapshotUploaded);
     tablet.screenChanged.disconnect(onTabletScreenChanged);
     Snapshot.snapshotLocationSet.disconnect(snapshotLocationSet);
+    
+    Entities.canRezChanged.disconnect(processRezPermissionChange);
+    Entities.canRezTmpChanged.disconnect(processRezPermissionChange);
 });
 
 }()); // END LOCAL_SCOPE