From 3aec67bb364ae5ecd6907fd23fc152e284fc2fd6 Mon Sep 17 00:00:00 2001 From: David Rowe Date: Sat, 23 Apr 2016 16:05:34 +1200 Subject: [PATCH 1/2] Position default toolbar buttons bottom center of screen Expand edit toolbar horizontally. --- examples/directory.js | 7 ++++--- examples/edit.js | 7 ++++--- examples/examples.js | 7 ++++--- 3 files changed, 12 insertions(+), 9 deletions(-) diff --git a/examples/directory.js b/examples/directory.js index 243811c8d4..4af784d59e 100644 --- a/examples/directory.js +++ b/examples/directory.js @@ -27,6 +27,7 @@ var directoryWindow = new OverlayWebWindow({ var toolHeight = 50; var toolWidth = 50; +var TOOLBAR_MARGIN_Y = 25; function showDirectory() { @@ -53,10 +54,10 @@ var toolBar = (function() { browseDirectoryButton; function initialize() { - toolBar = new ToolBar(0, 0, ToolBar.VERTICAL, "highfidelity.directory.toolbar", function(windowDimensions, toolbar) { + toolBar = new ToolBar(0, 0, ToolBar.HORIZONTAL, "highfidelity.directory.toolbar", function(windowDimensions, toolbar) { return { - x: windowDimensions.x - 8 - toolbar.width, - y: 50 + x: windowDimensions.x / 2 - 3 * toolbar.height, // Use toolbar.height to match edit.js + y: windowDimensions.y - TOOLBAR_MARGIN_Y - toolHeight }; }); browseDirectoryButton = toolBar.addTool({ diff --git a/examples/edit.js b/examples/edit.js index f03915f5ad..929f8014dd 100644 --- a/examples/edit.js +++ b/examples/edit.js @@ -53,6 +53,7 @@ selectionManager.addEventListener(function() { var toolIconUrl = HIFI_PUBLIC_BUCKET + "images/tools/"; var toolHeight = 50; var toolWidth = 50; +var TOOLBAR_MARGIN_Y = 25; var DEGREES_TO_RADIANS = Math.PI / 180.0; var RADIANS_TO_DEGREES = 180.0 / Math.PI; @@ -179,10 +180,10 @@ var toolBar = (function() { newParticleButton function initialize() { - toolBar = new ToolBar(0, 0, ToolBar.VERTICAL, "highfidelity.edit.toolbar", function(windowDimensions, toolbar) { + toolBar = new ToolBar(0, 0, ToolBar.HORIZONTAL, "highfidelity.edit.toolbar", function(windowDimensions, toolbar) { return { - x: windowDimensions.x - 8 - toolbar.width, - y: (windowDimensions.y - toolbar.height) / 2 + x: windowDimensions.x / 2 + 2 * toolbar.height, // Use toolbar.height as a proxy for width of a single button + y: windowDimensions.y - TOOLBAR_MARGIN_Y - toolHeight }; }); diff --git a/examples/examples.js b/examples/examples.js index bfa85473de..1f764ebd8e 100644 --- a/examples/examples.js +++ b/examples/examples.js @@ -27,6 +27,7 @@ var examplesWindow = new OverlayWebWindow({ var toolHeight = 50; var toolWidth = 50; +var TOOLBAR_MARGIN_Y = 25; function showExamples(marketplaceID) { @@ -58,10 +59,10 @@ var toolBar = (function() { browseExamplesButton; function initialize() { - toolBar = new ToolBar(0, 0, ToolBar.VERTICAL, "highfidelity.examples.toolbar", function(windowDimensions, toolbar) { + toolBar = new ToolBar(0, 0, ToolBar.HORIXONTAL, "highfidelity.examples.toolbar", function(windowDimensions, toolbar) { return { - x: windowDimensions.x - 8 - toolbar.width, - y: 135 + x: windowDimensions.x / 2 - toolbar.height / 2, // Use toolbar.height to match edit.js + y: windowDimensions.y - TOOLBAR_MARGIN_Y - toolHeight }; }); browseExamplesButton = toolBar.addTool({ From 958c6f48c2665102d909e464f1893d1739356c8a Mon Sep 17 00:00:00 2001 From: David Rowe Date: Sat, 23 Apr 2016 18:16:20 +1200 Subject: [PATCH 2/2] Maintain relative spacing among toolbars as the window is resized --- examples/directory.js | 7 +++++-- examples/edit.js | 7 +++++-- examples/examples.js | 7 +++++-- examples/libraries/toolBars.js | 21 +++++++++++---------- 4 files changed, 26 insertions(+), 16 deletions(-) diff --git a/examples/directory.js b/examples/directory.js index 4af784d59e..ac426cafe7 100644 --- a/examples/directory.js +++ b/examples/directory.js @@ -56,9 +56,12 @@ var toolBar = (function() { function initialize() { toolBar = new ToolBar(0, 0, ToolBar.HORIZONTAL, "highfidelity.directory.toolbar", function(windowDimensions, toolbar) { return { - x: windowDimensions.x / 2 - 3 * toolbar.height, // Use toolbar.height to match edit.js - y: windowDimensions.y - TOOLBAR_MARGIN_Y - toolHeight + x: windowDimensions.x / 2, + y: windowDimensions.y }; + }, { + x: -2 * toolWidth, + y: -TOOLBAR_MARGIN_Y - toolHeight }); browseDirectoryButton = toolBar.addTool({ imageURL: toolIconUrl + "directory-01.svg", diff --git a/examples/edit.js b/examples/edit.js index 929f8014dd..c4c3b5a99b 100644 --- a/examples/edit.js +++ b/examples/edit.js @@ -182,9 +182,12 @@ var toolBar = (function() { function initialize() { toolBar = new ToolBar(0, 0, ToolBar.HORIZONTAL, "highfidelity.edit.toolbar", function(windowDimensions, toolbar) { return { - x: windowDimensions.x / 2 + 2 * toolbar.height, // Use toolbar.height as a proxy for width of a single button - y: windowDimensions.y - TOOLBAR_MARGIN_Y - toolHeight + x: windowDimensions.x / 2, + y: windowDimensions.y }; + }, { + x: toolWidth, + y: -TOOLBAR_MARGIN_Y - toolHeight }); activeButton = toolBar.addTool({ diff --git a/examples/examples.js b/examples/examples.js index 1f764ebd8e..90dca71f38 100644 --- a/examples/examples.js +++ b/examples/examples.js @@ -61,9 +61,12 @@ var toolBar = (function() { function initialize() { toolBar = new ToolBar(0, 0, ToolBar.HORIXONTAL, "highfidelity.examples.toolbar", function(windowDimensions, toolbar) { return { - x: windowDimensions.x / 2 - toolbar.height / 2, // Use toolbar.height to match edit.js - y: windowDimensions.y - TOOLBAR_MARGIN_Y - toolHeight + x: windowDimensions.x / 2, + y: windowDimensions.y }; + }, { + x: -toolWidth / 2, + y: -TOOLBAR_MARGIN_Y - toolHeight }); browseExamplesButton = toolBar.addTool({ imageURL: toolIconUrl + "examples-01.svg", diff --git a/examples/libraries/toolBars.js b/examples/libraries/toolBars.js index 6e54c0276c..4f560e6b8d 100644 --- a/examples/libraries/toolBars.js +++ b/examples/libraries/toolBars.js @@ -139,12 +139,13 @@ Tool.prototype = new Overlay2D; Tool.IMAGE_HEIGHT = 50; Tool.IMAGE_WIDTH = 50; -ToolBar = function(x, y, direction, optionalPersistenceKey, optionalInitialPositionFunction) { +ToolBar = function(x, y, direction, optionalPersistenceKey, optionalInitialPositionFunction, optionalOffset) { this.tools = new Array(); this.x = x; this.y = y; + this.offset = optionalOffset ? optionalOffset : { x: 0, y: 0 }; this.width = 0; - this.height = 0 + this.height = 0; this.backAlpha = 1.0; this.back = Overlays.addOverlay("rectangle", { color: { red: 255, green: 255, blue: 255 }, @@ -237,7 +238,7 @@ ToolBar = function(x, y, direction, optionalPersistenceKey, optionalInitialPosit } } - this.move = function(x, y) { + this.move = function (x, y) { var dx = x - this.x; var dy = y - this.y; this.x = x; @@ -370,14 +371,14 @@ ToolBar = function(x, y, direction, optionalPersistenceKey, optionalInitialPosit that.onResizeViewport = function (newSize) { // Can be overridden or extended by clients. var recommendedRect = Controller.getRecommendedOverlayRect(); var recommendedDimmensions = { x: recommendedRect.width, y: recommendedRect.height }; - var originRelativeX = (that.x - that.origin.x); - var originRelativeY = (that.y - that.origin.y); + var originRelativeX = (that.x - that.origin.x - that.offset.x); + var originRelativeY = (that.y - that.origin.y - that.offset.y); var fractionX = clamp(originRelativeX / that.windowDimensions.x, 0, 1); var fractionY = clamp(originRelativeY / that.windowDimensions.y, 0, 1); that.windowDimensions = newSize || recommendedDimmensions; that.origin = { x: recommendedRect.x, y: recommendedRect.y }; - var newX = (fractionX * that.windowDimensions.x) + recommendedRect.x; - var newY = (fractionY * that.windowDimensions.y) + recommendedRect.y; + var newX = (fractionX * that.windowDimensions.x) + recommendedRect.x + that.offset.x; + var newY = (fractionY * that.windowDimensions.y) + recommendedRect.y + that.offset.y; that.move(newX, newY); }; if (optionalPersistenceKey) { @@ -387,7 +388,7 @@ ToolBar = function(x, y, direction, optionalPersistenceKey, optionalInitialPosit var screenSize = { x: recommendedRect.width, y: recommendedRect.height }; if (screenSize.x > 0 && screenSize.y > 0) { // Guard against invalid screen size that can occur at shut-down. - var fraction = {x: that.x / screenSize.x, y: that.y / screenSize.y}; + var fraction = {x: (that.x - that.offset.x) / screenSize.x, y: (that.y - that.offset.y) / screenSize.y}; Settings.setValue(this.fractionKey, JSON.stringify(fraction)); } } @@ -456,7 +457,7 @@ ToolBar = function(x, y, direction, optionalPersistenceKey, optionalInitialPosit var screenSize = { x: recommendedRect.width, y: recommendedRect.height }; 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); + that.move(savedFraction.x * screenSize.x + that.offset.x, savedFraction.y * screenSize.y + that.offset.y); } else if (!optionalInitialPositionFunction) { print("No initPosition(screenSize, intializedToolbar) specified for ToolBar"); } else { @@ -464,7 +465,7 @@ ToolBar = function(x, y, direction, optionalPersistenceKey, optionalInitialPosit var that = this; Script.setTimeout(function () { var position = optionalInitialPositionFunction(screenSize, that); - that.move(position.x, position.y); + that.move(position.x + that.offset.x, position.y + that.offset.y); }, 0); } }