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,119 @@
+"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 animURL = Script.resolvePath("assets/animations/" + name + ".fbx");
+    print(animURL);
+    var resource = AnimationCache.prefetch(animURL);
+    var animation = AnimationCache.getAnimation(animURL);
+    ANIMATIONS[name] = { url: animURL, animation: animation, resource: resource};
+});
+
+
+var EMOTE_APP_BASE = "html/EmoteApp.html";
+var EMOTE_APP_URL = Script.resolvePath(EMOTE_APP_BASE);
+
+
+var onEmoteScreen = false;
+var button;
+var tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
+
+var emoteLable = "EMOTE";
+
+button = tablet.addButton({
+    //icon: "icons/tablet-icons/emote.svg",
+    text: emoteLable,
+    sortOrder: 11
+});
+
+var enabled = false;
+function onClicked() {
+    if (onEmoteScreen) {
+        tablet.gotoHomeScreen();
+    } else {
+        onEmoteScreen = true;
+        tablet.gotoWebScreen(EMOTE_APP_URL);
+    }
+}
+
+function onScreenChanged(type, url) {
+    print("type:", type, "url:", 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) {
+   print("emote.js received a web event: " + event);
+
+    // Converts the event to a JavasScript Object
+    if (typeof event === "string") {
+        event = JSON.parse(event);
+    }
+
+    if (event.type === "click") {
+        var emoteName = event.data;
+        print("emote.js received a click event for " + emoteName);
+
+        print("ANIMATIONS[emoteName].resource.url:" + ANIMATIONS[emoteName].resource.url);
+
+
+        // ANIMATIONS[emoteName].animation.isLoaded
+        if (ANIMATIONS[emoteName].resource.state == 3) {
+            var frameCount = ANIMATIONS[emoteName].animation.frames.length;
+            print("the animation for " + emoteName + " is loaded, it has " + frameCount + " frames");
+            var frameCount = ANIMATIONS[emoteName].animation.frames.length;
+
+            var FPS = 30;
+            var MSEC_PER_SEC = 1000;
+            MyAvatar.overrideAnimation(ANIMATIONS[emoteName].url, FPS, false, 0, frameCount);
+
+            var timeOut = MSEC_PER_SEC * frameCount / FPS;
+            Script.setTimeout(function () {
+                MyAvatar.restoreAnimation();
+            }, timeOut);
+
+
+        } else {
+            print("the animation for " + emoteName + " is in state:" + ANIMATIONS[emoteName].resource.state);
+        }
+    }
+}
+
+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);
+    }
+});
+
+
+}()); // 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>