Fixed js interface after recent Tablet.qml changes

* TabletButton.inDebugMode defaults to false
* TabletButton now listens to onIsActiveChanged event to flip state of button.
* Fixed help.js and tabletTest.js to compensate for the removal of the TabletButton.color property

interface/resources/qml/hifi/tablet/Tablet.qml

@@ -172,7 +172,9 @@ Item {
             var component = Qt.createComponent("TabletButton.qml");
             var buttons = [];
             for (var i = 0; i < 5; i++) {
-                buttons.push(component.createObject(flowMain));
+                var button = component.createObject(flowMain);
+                button.inDebugMode = true;
+                buttons.push(button);
             }
 
             // set button text

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

@@ -7,7 +7,8 @@ Item {
     property string text: "EDIT"
     property string icon: "icons/edit-icon.svg"
     property bool isActive: false
-    property bool inDebugMode: true
+    property bool inDebugMode: false
+    property bool isEntered: false
     width: 129
     height: 129
 
@@ -17,6 +18,14 @@ Item {
         tabletButton[key] = value;
     }
 
+    onIsActiveChanged: {
+        if (tabletButton.isEntered) {
+            tabletButton.state = (tabletButton.isActive) ? "hover active state" : "hover sate";
+        } else {
+            tabletButton.state = (tabletButton.isActive) ? "active state" : "base sate";
+        }
+    }
+
     Rectangle {
         id: buttonBg
         color: "#000000"
@@ -51,19 +60,18 @@ Item {
     }
 
     DropShadow {
-            id: glow
+        id: glow
-            visible: false
+        visible: false
-            anchors.fill: parent
+        anchors.fill: parent
-            horizontalOffset: 0
+        horizontalOffset: 0
-            verticalOffset: 0
+        verticalOffset: 0
-            color: "#ffffff"
+        color: "#ffffff"
-            radius: 20
+        radius: 20
-            z: -1
+        z: -1
-            samples: 41
+        samples: 41
-            source: buttonOutline
+        source: buttonOutline
     }
 
-
     Image {
         id: icon
         width: 50
@@ -102,10 +110,8 @@ Item {
             console.log("Tablet Button Clicked!");
             if (tabletButton.inDebugMode) {
                 if (tabletButton.isActive) {
-                    tabletButton.state = "base state";
                     tabletButton.isActive = false;
                 } else {
-                    tabletButton.state = "active state";
                     tabletButton.isActive = true;
                 }
             }
@@ -113,6 +119,7 @@ Item {
         }
         onEntered: {
             console.log("Tablet Button Hovered!");
+            tabletButton.isEntered = true;
             if (tabletButton.isActive) {
                 tabletButton.state = "hover active state";
             } else {
@@ -121,6 +128,7 @@ Item {
         }
         onExited: {
             console.log("Tablet Button Unhovered!");
+            tabletButton.isEntered = false;
             if (tabletButton.isActive) {
                 tabletButton.state = "active state";
             } else {

scripts/developer/tests/tabletTest.js

@@ -12,25 +12,22 @@
 
 var tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
 var button = tablet.addButton({
-    icon: "https://s3.amazonaws.com/hifi-public/tony/icons/hat-up.svg",
-    color: "#ff6f6f",
     text: "BAM!!!"
 });
 
-// change the color and name every second...
+// change the name and isActive state every second...
-var colors = ["#ff6f6f", "#6fff6f", "#6f6fff"];
+var names = ["BAM!", "BAM!!", "BAM!!!", "BAM!!!!"];
-var names = ["BAM!", "BAM!!", "BAM!!!"];
+var nameIndex = 0;
-var colorIndex = 0;
 Script.setInterval(function () {
-    colorIndex = (colorIndex + 1) % colors.length;
+    nameIndex = (nameIndex + 1) % names.length;
     button.editProperties({
-        color: colors[colorIndex],
+        isActive: (nameIndex & 0x1) == 0,
-        text: names[colorIndex]
+        text: names[nameIndex]
     });
 }, 1000);
 
 button.clicked.connect(function () {
-    print("AJT: BAMM!!! CLICK from JS!");
+    print("AJT: BAM!!! CLICK from JS!");
 });
 
 Script.scriptEnding.connect(function () {

scripts/system/help.js

@@ -15,8 +15,6 @@
 
     var tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
     var button = tablet.addButton({
-        //icon: "help.svg",
-        color: "#ff6f6f",
         text: "HELP"
     });
 
@@ -28,7 +26,7 @@
     button.clicked.connect(onClicked);
 
     Script.scriptEnding.connect(function () {
-        tablet.removeButton(buttonName);
+        tablet.removeButton(button);
         button.clicked.disconnect(onClicked);
     });