Draggable toolBar.js, with persistence, and update some scripts for it.

examples/controllers/hydra/gun.js

@@ -99,6 +99,13 @@ var NUM_BUTTONS = 3;
 
 var screenSize = Controller.getViewportDimensions();
 var startX = screenSize.x / 2 - (NUM_BUTTONS * (BUTTON_SIZE + PADDING)) / 2;
+Script.include(["../../libraries/toolBars.js"]);
+const persistKey = "highfidelity.gun.toolbar.position";
+var toolBar = new ToolBar(0, 0, ToolBar.HORIZONTAL);
+toolBar.save = function () {
+    Settings.setValue(persistKey, JSON.stringify([toolBar.x, toolBar.y]));
+};
+var old = JSON.parse(Settings.getValue(persistKey) || '0');
 var reticle = Overlays.addOverlay("image", {
                     x: screenSize.x / 2 - (BUTTON_SIZE / 2),
                     y: screenSize.y / 2 - (BUTTON_SIZE / 2),
@@ -108,9 +115,9 @@ var reticle = Overlays.addOverlay("image", {
                     alpha: 1
                 });
 
-var offButton = Overlays.addOverlay("image", {
+var offButton = toolBar.addOverlay("image", {
-                    x: startX,
+                    x: old ? old[0] : startX,
-                    y: screenSize.y - (BUTTON_SIZE + PADDING),
+                    y: old ? old[1] : (screenSize.y - (BUTTON_SIZE + PADDING)),
                     width: BUTTON_SIZE,
                     height: BUTTON_SIZE,
                     imageURL: HIFI_PUBLIC_BUCKET + "images/gun/close.svg",
@@ -118,7 +125,7 @@ var offButton = Overlays.addOverlay("image", {
                 });
 
 startX += BUTTON_SIZE + PADDING;
-var platformButton = Overlays.addOverlay("image", {
+var platformButton = toolBar.addOverlay("image", {
                     x: startX,
                     y: screenSize.y - (BUTTON_SIZE + PADDING),
                     width: BUTTON_SIZE,
@@ -128,7 +135,7 @@ var platformButton = Overlays.addOverlay("image", {
                 });
 
 startX += BUTTON_SIZE + PADDING;
-var gridButton = Overlays.addOverlay("image", {
+var gridButton = toolBar.addOverlay("image", {
                     x: startX,
                     y: screenSize.y - (BUTTON_SIZE + PADDING),
                     width: BUTTON_SIZE,
@@ -493,10 +500,8 @@ function mousePressEvent(event) {
 }
 
 function scriptEnding() {
-    Overlays.deleteOverlay(reticle); 
+    Overlays.deleteOverlay(reticle);
-    Overlays.deleteOverlay(offButton);
+    toolBar.cleanup();
-    Overlays.deleteOverlay(platformButton);
-    Overlays.deleteOverlay(gridButton);
     Overlays.deleteOverlay(pointer[0]);
     Overlays.deleteOverlay(pointer[1]);
     Overlays.deleteOverlay(text);

examples/dice.js

@@ -3,6 +3,7 @@
 //  examples
 //
 //  Created by Philip Rosedale on February 2, 2015
+//  Persist toolbar by HRS 6/11/15.
 //  Copyright 2015 High Fidelity, Inc.
 //
 //  Press the dice button to throw some dice from the center of the screen. 
@@ -31,9 +32,16 @@ var screenSize = Controller.getViewportDimensions();
 var BUTTON_SIZE = 32;
 var PADDING = 3;
 
-var offButton = Overlays.addOverlay("image", {
+Script.include(["libraries/toolBars.js"]);
-  x: screenSize.x / 2 - BUTTON_SIZE * 2 + PADDING,
+var toolBar = new ToolBar(0, 0, ToolBar.HORIZONTAL);
-  y: screenSize.y - (BUTTON_SIZE + PADDING),
+const persistKey = "highfidelity.dice.toolbar.position";
+toolBar.save = function () {
+    Settings.setValue(persistKey, JSON.stringify([toolBar.x, toolBar.y]));
+};
+var old = JSON.parse(Settings.getValue(persistKey) || '0');
+var offButton = toolBar.addOverlay("image", {
+  x: old ? old[0] : (screenSize.x / 2 - BUTTON_SIZE * 2 + PADDING),
+  y: old ? old[1] : (screenSize.y - (BUTTON_SIZE + PADDING)),
   width: BUTTON_SIZE,
   height: BUTTON_SIZE,
   imageURL: HIFI_PUBLIC_BUCKET + "images/close.png",
@@ -45,7 +53,7 @@ var offButton = Overlays.addOverlay("image", {
   alpha: 1
 });
 
-var deleteButton = Overlays.addOverlay("image", {
+var deleteButton = toolBar.addOverlay("image", {
   x: screenSize.x / 2 - BUTTON_SIZE,
   y: screenSize.y - (BUTTON_SIZE + PADDING),
   width: BUTTON_SIZE,
@@ -59,7 +67,7 @@ var deleteButton = Overlays.addOverlay("image", {
   alpha: 1
 });
 
-var diceButton = Overlays.addOverlay("image", {
+var diceButton = toolBar.addOverlay("image", {
   x: screenSize.x / 2 + PADDING,
   y: screenSize.y - (BUTTON_SIZE + PADDING),
   width: BUTTON_SIZE,
@@ -140,10 +148,8 @@ function mousePressEvent(event) {
 }
 
 function scriptEnding() {
-  Overlays.deleteOverlay(offButton);
+  toolBar.cleanup();
-  Overlays.deleteOverlay(diceButton);
-  Overlays.deleteOverlay(deleteButton);
 }
 
 Controller.mousePressEvent.connect(mousePressEvent);
-Script.scriptEnding.connect(scriptEnding);
+Script.scriptEnding.connect(scriptEnding);

examples/edit.js

@@ -2,6 +2,7 @@
 //  examples
 //
 //  Created by Brad Hefta-Gaub on 10/2/14.
+//  Persist toolbar by HRS 6/11/15.
 //  Copyright 2014 High Fidelity, Inc.
 //
 //  This script allows you to edit entities with a new UI/UX for mouse and trackpad based editing
@@ -320,6 +321,7 @@ var toolBar = (function () {
         }
     }
 
+    const persistKey = "highfidelity.edit.toolbar.position";
     that.move = function () {
         var newViewPort,
             toolsX,
@@ -330,6 +332,15 @@ var toolBar = (function () {
         if (toolBar === undefined) {
             initialize();
 
+            toolBar.save = function () {
+                Settings.setValue(persistKey, JSON.stringify([toolBar.x, toolBar.y]));
+            };
+            var old = JSON.parse(Settings.getValue(persistKey) || '0');
+            if (old) {
+                windowDimensions = newViewPort;
+                toolBar.move(old[0], old[1]);
+                return;
+            }
         } else if (windowDimensions.x === newViewPort.x &&
                    windowDimensions.y === newViewPort.y) {
             return;

examples/libraries/toolBars.js

@@ -236,6 +236,7 @@ ToolBar = function(x, y, direction) {
                 y: y - ToolBar.SPACING
             });
         }
+        this.save();
     }
     
     this.setAlpha = function(alpha, tool) {
@@ -313,9 +314,8 @@ ToolBar = function(x, y, direction) {
     this.cleanup = function() {
         for(var tool in this.tools) {
             this.tools[tool].cleanup();
-            delete this.tools[tool];
         }
-        
+
         if (this.back != null) {
             Overlays.deleteOverlay(this.back);
             this.back = null;
@@ -327,7 +327,71 @@ ToolBar = function(x, y, direction) {
         this.width = 0;
         this.height = 0;
     }
+
+    var that = this;
+    this.contains = function (xOrPoint, optionalY) {
+        var x = (optionalY === undefined) ? xOrPoint.x : xOrPoint,
+            y = (optionalY === undefined) ? xOrPoint.y : optionalY;
+        return (that.x <= x) && (x <= (that.x + that.width)) &&
+            (that.y <= y) && (y <= (that.y + that.height));
+    }
+    that.hover = function (enable) {
+        that.isHovering = enable;
+        if (that.back) {
+            if (enable) {
+                that.oldAlpha = Overlays.getProperty(that.back, 'backgroundAlpha');
+            }
+            Overlays.editOverlay(this.back, {
+                visible: enable,
+                backgroundAlpha: enable ? 0.5 : that.oldAlpha
+            });
+        }
+    };
+    // These are currently only doing that which is necessary for toolbar hover and toolbar drag.
+    // They have not yet been extended to tool hover/click/release, etc.
+    this.mousePressEvent = function (event) {
+        if (!that.contains(event)) {
+            that.mightBeDragging = false;
+            return;
+        }
+        that.mightBeDragging = true;
+        that.dragOffsetX = that.x - event.x;
+        that.dragOffsetY = that.y - event.y;
+    };
+    this.mouseMove  = function (event) {
+        if (!that.mightBeDragging || !event.isLeftButton) {
+            that.mightBeDragging = false;
+            if (!that.contains(event)) {
+                if (that.isHovering) {
+                    that.hover(false);
+                }
+                return;
+            }
+            if (!that.isHovering) {
+                that.hover(true);
+            }
+            return;
+        }
+        that.move(that.dragOffsetX + event.x, that.dragOffsetY + event.y);
+    };
+    Controller.mousePressEvent.connect(this.mousePressEvent);
+    Controller.mouseMoveEvent.connect(this.mouseMove);
+    // Called on move. A different approach would be to have all this on the prototype,
+    // and let apps extend where needed. Ex. app defines its toolbar.move() to call this.__proto__.move and then save.
+    this.save = function () { };
+    // This compatability hack breaks the model, but makes converting existing scripts easier:
+    this.addOverlay = function (ignored, oldSchoolProperties) {
+        var properties = JSON.parse(JSON.stringify(oldSchoolProperties)); // a copy
+        if (that.numberOfTools() === 0) {
+            that.move(properties.x, properties.y);
+        }
+        delete properties.x;
+        delete properties.y;
+        var index = that.addTool(properties);
+        var id = that.tools[index].overlay();
+        return id;
+    }
 }
 ToolBar.SPACING = 4;
 ToolBar.VERTICAL = 0;
-ToolBar.HORIZONTAL = 1;
+ToolBar.HORIZONTAL = 1;

examples/pointer.js

@@ -3,6 +3,7 @@
 //
 //  Created by Seth Alves on May 15th
 //  Modified by Eric Levin on June 4
+//  Persist toolbar by HRS 6/11/15.
 //  Copyright 2015 High Fidelity, Inc.
 //
 //  Provides a pointer with option to draw on surfaces
@@ -31,9 +32,16 @@ HIFI_PUBLIC_BUCKET = "http://s3.amazonaws.com/hifi-public/";
 var screenSize = Controller.getViewportDimensions();
 
 var userCanPoint = false;
-var pointerButton = Overlays.addOverlay("image", {
+Script.include(["libraries/toolBars.js"]);
-  x: screenSize.x / 2 - BUTTON_SIZE * 2 + PADDING,
+const persistKey = "highfidelity.pointer.toolbar.position";
-  y: screenSize.y - (BUTTON_SIZE + PADDING),
+var toolBar = new ToolBar(0, 0, ToolBar.HORIZONTAL);
+toolBar.save = function () {
+    Settings.setValue(persistKey, JSON.stringify([toolBar.x, toolBar.y]));
+};
+var old = JSON.parse(Settings.getValue(persistKey) || '0');
+var pointerButton = toolBar.addOverlay("image", {
+  x: old ? old[0] : screenSize.x / 2 - BUTTON_SIZE * 2 + PADDING,
+  y: old ? old[1] : screenSize.y - (BUTTON_SIZE + PADDING),
   width: BUTTON_SIZE,
   height: BUTTON_SIZE,
   imageURL: HIFI_PUBLIC_BUCKET + "images/laser.png",
@@ -150,4 +158,4 @@ Script.scriptEnding.connect(cleanup);
 
 Controller.mouseMoveEvent.connect(mouseMoveEvent);
 Controller.mousePressEvent.connect(mousePressEvent);
-Controller.mouseReleaseEvent.connect(mouseReleaseEvent);
+Controller.mouseReleaseEvent.connect(mouseReleaseEvent);