Merge pull request #5196 from howard-stearns/toolbar-auto-persist-as-percentage-of-screen

Toolbar auto persist as percentage of screen

examples/controllers/hydra/gun.js

@@ -100,12 +100,12 @@ 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, "highfidelity.gun.toolbar", function (screenSize) {
-var toolBar = new ToolBar(0, 0, ToolBar.HORIZONTAL);
+    return {
-toolBar.save = function () {
+        x: startX,
-    Settings.setValue(persistKey, JSON.stringify([toolBar.x, toolBar.y]));
+        y: (screenSize.y - (BUTTON_SIZE + PADDING)),
     };
-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),
@@ -116,8 +116,6 @@ var reticle = Overlays.addOverlay("image", {
                 });
 
 var offButton = toolBar.addOverlay("image", {
-                    x: old ? old[0] : startX,
-                    y: old ? old[1] : (screenSize.y - (BUTTON_SIZE + PADDING)),
                     width: BUTTON_SIZE,
                     height: BUTTON_SIZE,
                     imageURL: HIFI_PUBLIC_BUCKET + "images/gun/close.svg",

examples/dice.js

@@ -33,15 +33,13 @@ var BUTTON_SIZE = 32;
 var PADDING = 3;
 
 Script.include(["libraries/toolBars.js"]);
-var toolBar = new ToolBar(0, 0, ToolBar.HORIZONTAL);
+var toolBar = new ToolBar(0, 0, ToolBar.HORIZONTAL, "highfidelity.dice.toolbar", function (screenSize) {
-const persistKey = "highfidelity.dice.toolbar.position";
+    return {
-toolBar.save = function () {
+        x: (screenSize.x / 2 - BUTTON_SIZE * 2 + PADDING),
-    Settings.setValue(persistKey, JSON.stringify([toolBar.x, toolBar.y]));
+        y: (screenSize.y - (BUTTON_SIZE + PADDING))
     };
-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",

examples/edit.js

@@ -49,7 +49,6 @@ selectionManager.addEventListener(function() {
     lightOverlayManager.updatePositions();
 });
 
-var windowDimensions = Controller.getViewportDimensions();
 var toolIconUrl = HIFI_PUBLIC_BUCKET + "images/tools/";
 var toolHeight = 50;
 var toolWidth = 50;
@@ -143,7 +142,12 @@ var toolBar = (function () {
         browseMarketplaceButton;
 
     function initialize() {
-        toolBar = new ToolBar(0, 0, ToolBar.VERTICAL);
+        toolBar = new ToolBar(0, 0, ToolBar.VERTICAL, "highfidelity.edit.toolbar", function (windowDimensions, toolbar) {
+            return {
+                x: windowDimensions.x - 8 - toolbar.width,
+                y: (windowDimensions.y - toolbar.height) / 2
+            };
+        });
 
         browseMarketplaceButton = toolBar.addTool({
             imageURL: toolIconUrl + "marketplace.svg",
@@ -321,38 +325,6 @@ var toolBar = (function () {
         }
     }
 
-    const persistKey = "highfidelity.edit.toolbar.position";
-    that.move = function () {
-        var newViewPort,
-            toolsX,
-            toolsY;
-
-        newViewPort = Controller.getViewportDimensions();
-
-        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;
-        }
-
-        windowDimensions = newViewPort;
-        toolsX = windowDimensions.x - 8 - toolBar.width;
-        toolsY = (windowDimensions.y - toolBar.height) / 2;
-
-        toolBar.move(toolsX, toolsY);
-    };
-
     var newModelButtonDown = false;
     var browseMarketplaceButtonDown = false;
     that.mousePressEvent = function (event) {
@@ -552,6 +524,7 @@ var toolBar = (function () {
         toolBar.cleanup();
     };
 
+    initialize();
     return that;
 }());
 
@@ -931,7 +904,6 @@ var lastPosition = null;
 
 // Do some stuff regularly, like check for placement of various overlays
 Script.update.connect(function (deltaTime) {
-    toolBar.move();
     progressDialog.move();
     selectionDisplay.checkMove();
     var dOrientation = Math.abs(Quat.dot(Camera.orientation, lastOrientation) - 1);

examples/libraries/toolBars.js

@@ -126,7 +126,7 @@ Tool.prototype = new Overlay2D;
 Tool.IMAGE_HEIGHT = 50;
 Tool.IMAGE_WIDTH = 50;
 
-ToolBar = function(x, y, direction) {
+ToolBar = function(x, y, direction, optionalPersistenceKey, optionalInitialPositionFunction) {
     this.tools = new Array();
     this.x = x;
     this.y = y;
@@ -336,7 +336,7 @@ ToolBar = function(x, y, direction) {
         return (that.x <= x) && (x <= (that.x + that.width)) &&
             (that.y <= y) && (y <= (that.y + that.height));
     }
-    that.hover = function (enable) {
+    that.hover = function (enable) { // Can be overriden or extended by clients.
         that.isHovering = enable;
         if (that.back) {
             if (enable) {
@@ -348,6 +348,26 @@ ToolBar = function(x, y, direction) {
             });
         }
     };
+    that.windowDimensions = Controller.getViewportDimensions();
+    // Maybe fixme: Keeping the same percent of the window size isn't always the right thing.
+    // For example, maybe we want "keep the same percentage to whatever two edges are closest to the edge of screen".
+    // If we change that, the places to do so are onResizeViewport, save (maybe), and the initial move based on Settings, below.
+    that.onResizeViewport = function (newSize) { // Can be overridden or extended by clients.
+        var fractionX = that.x / that.windowDimensions.x;
+        var fractionY = that.y / that.windowDimensions.y;
+        that.windowDimensions = newSize || Controller.getViewportDimensions();
+        that.move(fractionX * that.windowDimensions.x, fractionY * that.windowDimensions.y);
+    };
+    if (optionalPersistenceKey) {
+        this.fractionKey = optionalPersistenceKey + '.fraction';
+        this.save = function () {
+            var screenSize = Controller.getViewportDimensions();
+            var fraction = {x: that.x / screenSize.x, y: that.y / screenSize.y};
+            Settings.setValue(this.fractionKey, JSON.stringify(fraction));
+        }
+    } else {
+        this.save = function () { }; // Called on move. Can be overriden or extended by clients.
+    }
     // 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) {
@@ -375,15 +395,19 @@ ToolBar = function(x, y, direction) {
         }
         that.move(that.dragOffsetX + event.x, that.dragOffsetY + event.y);
     };
+    that.checkResize = function () { // Can be overriden or extended, but usually not. See onResizeViewport.
+        var currentWindowSize = Controller.getViewportDimensions();
+        if ((currentWindowSize.x !== that.windowDimensions.x) || (currentWindowSize.y !== that.windowDimensions.y)) {
+            that.onResizeViewport(currentWindowSize);            
+        }
+    };
     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,
+    Script.update.connect(that.checkResize);
-    // 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) {
+        if ((that.numberOfTools() === 0) && (properties.x != undefined)  && (properties.y != undefined)) {
             that.move(properties.x, properties.y);
         }
         delete properties.x;
@@ -392,6 +416,23 @@ ToolBar = function(x, y, direction) {
         var id = that.tools[index].overlay();
         return id;
     }
+    if (this.fractionKey || optionalInitialPositionFunction) {
+        var savedFraction = JSON.parse(Settings.getValue(this.fractionKey) || '0'); // getValue can answer empty string
+        var screenSize = Controller.getViewportDimensions();
+        if (savedFraction) {
+            // If we have saved data, keep the toolbar at the same proportion of the screen width/height.
+            that.move(savedFraction.x * screenSize.x, savedFraction.y * screenSize.y);
+        } else if (!optionalInitialPositionFunction) {
+            print("No initPosition(screenSize, intializedToolbar) specified for ToolBar");
+        } else {
+            // Call the optionalInitialPositionFunctinon() AFTER the client has had a chance to set up.
+            var that = this;
+            Script.setTimeout(function () {
+                var position = optionalInitialPositionFunction(screenSize, that);
+                that.move(position.x, position.y);
+            }, 0);
+        }
+    }
 }
 ToolBar.SPACING = 4;
 ToolBar.VERTICAL = 0;

examples/pointer.js

@@ -29,19 +29,13 @@ var buttonOnColor = {
 };
 
 HIFI_PUBLIC_BUCKET = "http://s3.amazonaws.com/hifi-public/";
-var screenSize = Controller.getViewportDimensions();
 
 var userCanPoint = false;
 Script.include(["libraries/toolBars.js"]);
-const persistKey = "highfidelity.pointer.toolbar.position";
+var toolBar = new ToolBar(0, 0, ToolBar.HORIZONTAL, "highfidelity.pointer.toolbar", function (screenSize) {
-var toolBar = new ToolBar(0, 0, ToolBar.HORIZONTAL);
+    return {x: screenSize.x / 2 - BUTTON_SIZE * 2 + PADDING, y: screenSize.y - (BUTTON_SIZE + PADDING)},
-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",