Merge pull request #9576 from hyperlogic/bug-fix/tablet-ui-image-urls

tablet-ui: button icon images now work with http urls.

interface/resources/qml/hifi/tablet/TabletButton.qml

@@ -75,6 +75,14 @@ Item {
         source: buttonOutline
     }
 
+    function urlHelper(src) {
+        if (src.match(/\bhttp/)) {
+            return src;
+        } else {
+            return "../../../" + src;
+        }
+    }
+
     Image {
         id: icon
         width: 50
@@ -84,7 +92,7 @@ Item {
         anchors.bottomMargin: 5
         anchors.horizontalCenter: parent.horizontalCenter
         fillMode: Image.Stretch
-        source: "../../../" + tabletButton.icon
+        source: tabletButton.urlHelper(tabletButton.icon)
     }
 
     ColorOverlay {
@@ -185,7 +193,7 @@ Item {
 
             PropertyChanges {
                 target: icon
-                source: "../../../" + tabletButton.activeIcon
+                source: tabletButton.urlHelper(tabletButton.activeIcon)
             }
         },
         State {

libraries/script-engine/src/TabletScriptingInterface.h

@@ -119,7 +119,7 @@ public:
      * @param msg {object|string}
      */
     Q_INVOKABLE void emitScriptEvent(QVariant msg);
-    
+
     Q_INVOKABLE bool onHomeScreen();
 
     QObject* getTabletSurface();
@@ -170,14 +170,14 @@ public:
     /**jsdoc
      * Returns the current value of this button's properties
      * @function TabletButtonProxy#getProperties
-     * @returns {object}
+     * @returns {ButtonProperties}
      */
     Q_INVOKABLE QVariantMap getProperties() const;
 
     /**jsdoc
      * Replace the values of some of this button's properties
      * @function TabletButtonProxy#editProperties
-     * @param properties {object} set of properties to change
+     * @param {ButtonProperties} properties - set of properties to change
      */
     Q_INVOKABLE void editProperties(QVariantMap properties);
 
@@ -199,4 +199,13 @@ protected:
     QVariantMap _properties;
 };
 
+/**jsdoc
+ * @typedef TabletButtonProxy.ButtonProperties
+ * @property {string} text - button caption
+ * @property {string} icon - url to button icon. (50 x 50)
+ * @property {string} activeText - button caption when button is active
+ * @property {string} activeIcon - url to button icon used when button is active. (50 x 50)
+ * @property {string} isActive - true when button is active.
+ */
+
 #endif // hifi_TabletScriptingInterface_h

scripts/system/libraries/WebTablet.js

@@ -24,6 +24,7 @@ var CAMERA_MATRIX = -7;
 var ROT_Y_180 = {x: 0, y: 1, z: 0, w: 0};
 var TABLET_TEXTURE_RESOLUTION = { x: 480, y: 706 };
 var INCHES_TO_METERS = 1 / 39.3701;
+var NO_HANDS = -1;
 
 var TABLET_URL = Script.resourcesPath() + "meshes/tablet-with-home-button.fbx";
 
@@ -35,18 +36,21 @@ var TABLET_MODEL_PATH = "http://hifi-content.s3.amazonaws.com/alan/dev/tablet-wi
 //    * position - position in front of the user
 //    * rotation - rotation of entity so it faces the user.
 function calcSpawnInfo(hand, height) {
-    var noHands = -1;
     var finalPosition;
-    if (HMD.active && hand !== noHands) {
+
+    var headPos = (HMD.active && Camera.mode === "first person") ? HMD.position : Camera.position;
+    var headRot = (HMD.active && Camera.mode === "first person") ? HMD.orientation : Camera.orientation;
+
+    if (HMD.active && hand !== NO_HANDS) {
         var handController = getControllerWorldLocation(hand, true);
         var controllerPosition = handController.position;
 
         // compute the angle of the chord with length (height / 2)
-        var theta = Math.asin(height / (2 * Vec3.distance(HMD.position, controllerPosition)));
+        var theta = Math.asin(height / (2 * Vec3.distance(headPos, controllerPosition)));
 
         // then we can use this angle to rotate the vector between the HMD position and the center of the tablet.
         // this vector, u, will become our new look at direction.
-        var d = Vec3.normalize(Vec3.subtract(HMD.position, controllerPosition));
+        var d = Vec3.normalize(Vec3.subtract(headPos, controllerPosition));
         var w = Vec3.normalize(Vec3.cross(Y_AXIS, d));
         var q = Quat.angleAxis(theta * (180 / Math.PI), w);
         var u = Vec3.multiplyQbyV(q, d);
@@ -64,8 +68,8 @@ function calcSpawnInfo(hand, height) {
             rotation: lookAtRot
         };
     } else {
-        var front = Quat.getFront(Camera.orientation);
-        finalPosition = Vec3.sum(Camera.position, Vec3.multiply(0.6, front));
+        var front = Quat.getFront(headRot);
+        finalPosition = Vec3.sum(headPos, Vec3.multiply(0.6, front));
         var orientation = Quat.lookAt({x: 0, y: 0, z: 0}, front, {x: 0, y: 1, z: 0});
         return {
             position: finalPosition,
@@ -198,6 +202,11 @@ WebTablet = function (url, width, dpi, hand, clientOnly) {
         _this.geometryChanged(geometry);
     };
     Window.geometryChanged.connect(this.myGeometryChanged);
+
+    this.myCameraModeChanged = function(newMode) {
+        _this.cameraModeChanged(newMode);
+    };
+    Camera.modeUpdated.connect(this.myCameraModeChanged);
 };
 
 WebTablet.prototype.setHomeButtonTexture = function() {
@@ -228,11 +237,11 @@ WebTablet.prototype.destroy = function () {
     Controller.mouseReleaseEvent.disconnect(this.myMouseReleaseEvent);
 
     Window.geometryChanged.disconnect(this.myGeometryChanged);
+    Camera.modeUpdated.disconnect(this.myCameraModeChanged);
 };
 
 WebTablet.prototype.geometryChanged = function (geometry) {
     if (!HMD.active) {
-        var NO_HANDS = -1;
         var tabletProperties = {};
         // compute position, rotation & parentJointIndex of the tablet
         this.calculateTabletAttachmentProperties(NO_HANDS, tabletProperties);
@@ -288,7 +297,6 @@ WebTablet.prototype.onHmdChanged = function () {
         Controller.mouseReleaseEvent.connect(this.myMouseReleaseEvent);
     }
 
-    var NO_HANDS = -1;
     var tabletProperties = {};
     // compute position, rotation & parentJointIndex of the tablet
     this.calculateTabletAttachmentProperties(NO_HANDS, tabletProperties);
@@ -370,6 +378,18 @@ WebTablet.prototype.mousePressEvent = function (event) {
     }
 };
 
+WebTablet.prototype.cameraModeChanged = function (newMode) {
+    // reposition the tablet.
+    // This allows HMD.position to reflect the new camera mode.
+    if (HMD.active) {
+        var self = this;
+        var tabletProperties = {};
+        // compute position, rotation & parentJointIndex of the tablet
+        self.calculateTabletAttachmentProperties(NO_HANDS, tabletProperties);
+        Entities.editEntity(self.tabletEntityID, tabletProperties);
+    }
+};
+
 function rayIntersectPlane(planePosition, planeNormal, rayStart, rayDirection) {
     var rayDirectionDotPlaneNormal = Vec3.dot(rayDirection, planeNormal);
     if (rayDirectionDotPlaneNormal > 0.00001 || rayDirectionDotPlaneNormal < -0.00001) {