Merge pull request #12103 from ZappoMan/emoteApp

first cut at an emote app

scripts/defaultScripts.js

@@ -29,7 +29,8 @@ var DEFAULT_SCRIPTS_COMBINED = [
     "system/notifications.js",
     "system/dialTone.js",
     "system/firstPersonHMD.js",
-    "system/tablet-ui/tabletUI.js"
+    "system/tablet-ui/tabletUI.js",
+    "system/emote.js"
 ];
 var DEFAULT_SCRIPTS_SEPARATE = [
     "system/controllers/controllerScripts.js"

scripts/system/emote.js

@@ -0,0 +1,122 @@
+"use strict";
+
+//
+//  emote.js
+//  scripts/system/
+//
+//  Created by Brad Hefta-Gaub on 7 Jan 2018
+//  Copyright 2018 High Fidelity, Inc.
+//
+//  Distributed under the Apache License, Version 2.0.
+//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
+//
+/* globals Script, Tablet */
+/* eslint indent: ["error", 4, { "outerIIFEBody": 0 }] */
+
+(function() { // BEGIN LOCAL_SCOPE
+
+
+var EMOTE_ANIMATIONS = ['Crying', 'Surprised', 'Dancing', 'Cheering', 'Waving', 'Fall', 'Pointing', 'Clapping'];
+var ANIMATIONS = Array();
+
+
+EMOTE_ANIMATIONS.forEach(function (name) {
+    var animationURL = Script.resolvePath("assets/animations/" + name + ".fbx");
+    var resource = AnimationCache.prefetch(animationURL);
+    var animation = AnimationCache.getAnimation(animationURL);
+    ANIMATIONS[name] = { url: animationURL, animation: animation, resource: resource};
+});
+
+
+var EMOTE_APP_BASE = "html/EmoteApp.html";
+var EMOTE_APP_URL = Script.resolvePath(EMOTE_APP_BASE);
+var EMOTE_LABEL = "EMOTE";
+var EMOTE_APP_SORT_ORDER = 11;
+var FPS = 60;
+var MSEC_PER_SEC = 1000;
+var FINISHED = 3; // see ScriptableResource::State
+
+var onEmoteScreen = false;
+var button;
+var tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
+var activeTimer = false; // used to cancel active timer if a user plays an amimation while another animation is playing
+var activeEmote = false; // to keep track of the currently playing emote
+
+button = tablet.addButton({
+    //icon: "icons/tablet-icons/emote.svg", // TODO - we need graphics for this
+    text: EMOTE_LABEL,
+    sortOrder: EMOTE_APP_SORT_ORDER
+});
+
+function onClicked() {
+    if (onEmoteScreen) {
+        tablet.gotoHomeScreen();
+    } else {
+        onEmoteScreen = true;
+        tablet.gotoWebScreen(EMOTE_APP_URL);
+    }
+}
+
+function onScreenChanged(type, url) {
+    onEmoteScreen = type === "Web" && (url.indexOf(EMOTE_APP_BASE) == url.length - EMOTE_APP_BASE.length);
+    button.editProperties({ isActive: onEmoteScreen });
+}
+
+// Handle the events we're receiving from the web UI
+function onWebEventReceived(event) {
+
+    // Converts the event to a JavasScript Object
+    if (typeof event === "string") {
+        event = JSON.parse(event);
+    }
+
+    if (event.type === "click") {
+        var emoteName = event.data;
+
+        if (ANIMATIONS[emoteName].resource.state == FINISHED) {
+            if (activeTimer !== false) {
+                Script.clearTimeout(activeTimer);
+            }
+
+            // if the activeEmote is different from the chosen emote, then play the new emote. Other wise, 
+            // this is a second click on the same emote as the activeEmote, and we will just stop it.
+            if (activeEmote !== emoteName) {
+                activeEmote = emoteName;
+                var frameCount = ANIMATIONS[emoteName].animation.frames.length;
+                MyAvatar.overrideAnimation(ANIMATIONS[emoteName].url, FPS, false, 0, frameCount);
+
+                var timeOut = MSEC_PER_SEC * frameCount / FPS;
+                activeTimer = Script.setTimeout(function () {
+                    MyAvatar.restoreAnimation();
+                    activeTimer = false;
+                    activeEmote = false;
+                }, timeOut);
+            } else {
+                activeEmote = false;
+                MyAvatar.restoreAnimation();
+            }
+        }
+    }
+}
+
+button.clicked.connect(onClicked);
+tablet.screenChanged.connect(onScreenChanged);
+tablet.webEventReceived.connect(onWebEventReceived);
+
+Script.scriptEnding.connect(function () {
+    if (onEmoteScreen) {
+        tablet.gotoHomeScreen();
+    }
+    button.clicked.disconnect(onClicked);
+    tablet.screenChanged.disconnect(onScreenChanged);
+    if (tablet) {
+        tablet.removeButton(button);
+    }
+    if (activeTimer !== false) {
+        Script.clearTimeout(activeTimer);
+        MyAvatar.restoreAnimation();
+    }
+});
+
+
+}()); // END LOCAL_SCOPE

scripts/system/html/EmoteApp.html

@@ -0,0 +1,136 @@
+<!--
+//  EmoteApp.html
+//
+//  Created by Brad Hefta-Gaub on 7 Jan 2018
+//  Copyright 2018 High Fidelity, Inc.
+//
+//  Distributed under the Apache License, Version 2.0.
+//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
+-->
+<html>
+    <head>
+        <title>Emote App</title>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,600,700"" rel="stylesheet">
+        <style>
+            body {
+                margin: 0;
+                width: 100%;
+                font-family: 'Raleway', sans-serif;
+                color: white;
+                background: linear-gradient(#2b2b2b, #0f212e);
+            }
+
+            .top-bar {
+                height: 90px;
+                background: linear-gradient(#2b2b2b, #1e1e1e);
+                font-weight: bold;
+                padding-left: 30px;
+                padding-right: 30px;
+                display: flex;
+                align-items: center;
+                position: fixed;
+                width: 480px;
+                top: 0;
+                z-index: 1;
+            }
+
+            .content {
+                margin-top: 90px;
+                padding: 30px;
+            }
+
+            input[type=button] {
+                font-family: 'Raleway';
+                font-weight: bold;
+                font-size: 13px;
+                text-transform: uppercase;
+                vertical-align: top;
+                height: 28px;
+                min-width: 120px;
+                padding: 0px 18px;
+                margin-right: 6px;
+                border-radius: 5px;
+                border: none;
+                color: #fff;
+                background-color: #000;
+                background: linear-gradient(#343434 20%, #000 100%);
+                cursor: pointer;
+            }
+
+            input[type=button].white {
+                color: #121212;
+                background-color: #afafaf;
+                background: linear-gradient(#fff 20%, #afafaf 100%);
+            }
+
+            input[type=button]:enabled:hover {
+                background: linear-gradient(#000, #000);
+                border: none;
+            }
+            input[type=button].white:enabled:hover {
+                background: linear-gradient(#fff, #fff);
+                border: none;
+            }
+
+            input[type=button]:active {
+                background: linear-gradient(#343434, #343434);
+            }
+            input[type=button].white:active {
+                background: linear-gradient(#afafaf, #afafaf);
+            }
+
+            input[type=button]:disabled {
+                color: #252525;
+                background: linear-gradient(#575757 20%, #252525 100%);
+            }
+
+            input[type=button][pressed=pressed] {
+                color: #00b4ef;
+            }
+
+        </style>
+    </head>
+    <body>
+        <div class="top-bar">
+            <h4>Emote App</h4>
+        </div>
+        <div class="content">
+            <p>Click an emotion to Emote:<p>
+            <p><input type="button" class="emote-button white" value="Crying"></p>
+            <p><input type="button" class="emote-button white" value="Surprised"></p>
+            <p><input type="button" class="emote-button white" value="Dancing"></p>
+            <p><input type="button" class="emote-button white" value="Cheering"></p>
+            <p><input type="button" class="emote-button white" value="Waving"></p>
+            <p><input type="button" class="emote-button white" value="Fall"></p>
+            <p><input type="button" class="emote-button white" value="Pointing"></p>
+            <p><input type="button" class="emote-button white" value="Clapping"></p>
+        </div>
+
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+        <script>
+            function main() {
+                // Send an event to emote.js when the page loads and is ready to get things rolling
+                console.log("document ready");
+                var readyEvent = {
+                    "type": "ready",
+                };
+                // The event bridge handles event represented as a string the best. So here we first create a Javascript object, then convert to stirng
+                EventBridge.emitWebEvent(JSON.stringify(readyEvent));
+
+                // Send an event when user click on each of the emote buttons
+                $(".emote-button").click(function(){
+                    console.log(this.value + " button click");
+                    var clickEvent = {
+                        "type": "click",
+                        "data": this.value
+                    };
+                    EventBridge.emitWebEvent(JSON.stringify(clickEvent));
+                });
+            }
+
+            $(document).ready(main);
+        </script>
+    </body>
+</html>