mirror of
https://github.com/overte-org/overte.git
synced 2025-08-08 14:58:03 +02:00
Draggable toolBar.js, with persistence, and update some scripts for it.
This commit is contained in:
parent
24fda9a733
commit
e6bafb9bf1
5 changed files with 119 additions and 25 deletions
|
@ -99,6 +99,13 @@ var NUM_BUTTONS = 3;
|
||||||
|
|
||||||
var screenSize = Controller.getViewportDimensions();
|
var screenSize = Controller.getViewportDimensions();
|
||||||
var startX = screenSize.x / 2 - (NUM_BUTTONS * (BUTTON_SIZE + PADDING)) / 2;
|
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", {
|
var reticle = Overlays.addOverlay("image", {
|
||||||
x: screenSize.x / 2 - (BUTTON_SIZE / 2),
|
x: screenSize.x / 2 - (BUTTON_SIZE / 2),
|
||||||
y: screenSize.y / 2 - (BUTTON_SIZE / 2),
|
y: screenSize.y / 2 - (BUTTON_SIZE / 2),
|
||||||
|
@ -108,9 +115,9 @@ var reticle = Overlays.addOverlay("image", {
|
||||||
alpha: 1
|
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,
|
width: BUTTON_SIZE,
|
||||||
height: BUTTON_SIZE,
|
height: BUTTON_SIZE,
|
||||||
imageURL: HIFI_PUBLIC_BUCKET + "images/gun/close.svg",
|
imageURL: HIFI_PUBLIC_BUCKET + "images/gun/close.svg",
|
||||||
|
@ -118,7 +125,7 @@ var offButton = Overlays.addOverlay("image", {
|
||||||
});
|
});
|
||||||
|
|
||||||
startX += BUTTON_SIZE + PADDING;
|
startX += BUTTON_SIZE + PADDING;
|
||||||
var platformButton = Overlays.addOverlay("image", {
|
var platformButton = toolBar.addOverlay("image", {
|
||||||
x: startX,
|
x: startX,
|
||||||
y: screenSize.y - (BUTTON_SIZE + PADDING),
|
y: screenSize.y - (BUTTON_SIZE + PADDING),
|
||||||
width: BUTTON_SIZE,
|
width: BUTTON_SIZE,
|
||||||
|
@ -128,7 +135,7 @@ var platformButton = Overlays.addOverlay("image", {
|
||||||
});
|
});
|
||||||
|
|
||||||
startX += BUTTON_SIZE + PADDING;
|
startX += BUTTON_SIZE + PADDING;
|
||||||
var gridButton = Overlays.addOverlay("image", {
|
var gridButton = toolBar.addOverlay("image", {
|
||||||
x: startX,
|
x: startX,
|
||||||
y: screenSize.y - (BUTTON_SIZE + PADDING),
|
y: screenSize.y - (BUTTON_SIZE + PADDING),
|
||||||
width: BUTTON_SIZE,
|
width: BUTTON_SIZE,
|
||||||
|
@ -493,10 +500,8 @@ function mousePressEvent(event) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function scriptEnding() {
|
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[0]);
|
||||||
Overlays.deleteOverlay(pointer[1]);
|
Overlays.deleteOverlay(pointer[1]);
|
||||||
Overlays.deleteOverlay(text);
|
Overlays.deleteOverlay(text);
|
||||||
|
|
|
@ -3,6 +3,7 @@
|
||||||
// examples
|
// examples
|
||||||
//
|
//
|
||||||
// Created by Philip Rosedale on February 2, 2015
|
// Created by Philip Rosedale on February 2, 2015
|
||||||
|
// Persist toolbar by HRS 6/11/15.
|
||||||
// Copyright 2015 High Fidelity, Inc.
|
// Copyright 2015 High Fidelity, Inc.
|
||||||
//
|
//
|
||||||
// Press the dice button to throw some dice from the center of the screen.
|
// 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 BUTTON_SIZE = 32;
|
||||||
var PADDING = 3;
|
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,
|
width: BUTTON_SIZE,
|
||||||
height: BUTTON_SIZE,
|
height: BUTTON_SIZE,
|
||||||
imageURL: HIFI_PUBLIC_BUCKET + "images/close.png",
|
imageURL: HIFI_PUBLIC_BUCKET + "images/close.png",
|
||||||
|
@ -45,7 +53,7 @@ var offButton = Overlays.addOverlay("image", {
|
||||||
alpha: 1
|
alpha: 1
|
||||||
});
|
});
|
||||||
|
|
||||||
var deleteButton = Overlays.addOverlay("image", {
|
var deleteButton = toolBar.addOverlay("image", {
|
||||||
x: screenSize.x / 2 - BUTTON_SIZE,
|
x: screenSize.x / 2 - BUTTON_SIZE,
|
||||||
y: screenSize.y - (BUTTON_SIZE + PADDING),
|
y: screenSize.y - (BUTTON_SIZE + PADDING),
|
||||||
width: BUTTON_SIZE,
|
width: BUTTON_SIZE,
|
||||||
|
@ -59,7 +67,7 @@ var deleteButton = Overlays.addOverlay("image", {
|
||||||
alpha: 1
|
alpha: 1
|
||||||
});
|
});
|
||||||
|
|
||||||
var diceButton = Overlays.addOverlay("image", {
|
var diceButton = toolBar.addOverlay("image", {
|
||||||
x: screenSize.x / 2 + PADDING,
|
x: screenSize.x / 2 + PADDING,
|
||||||
y: screenSize.y - (BUTTON_SIZE + PADDING),
|
y: screenSize.y - (BUTTON_SIZE + PADDING),
|
||||||
width: BUTTON_SIZE,
|
width: BUTTON_SIZE,
|
||||||
|
@ -140,10 +148,8 @@ function mousePressEvent(event) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function scriptEnding() {
|
function scriptEnding() {
|
||||||
Overlays.deleteOverlay(offButton);
|
toolBar.cleanup();
|
||||||
Overlays.deleteOverlay(diceButton);
|
|
||||||
Overlays.deleteOverlay(deleteButton);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
Controller.mousePressEvent.connect(mousePressEvent);
|
Controller.mousePressEvent.connect(mousePressEvent);
|
||||||
Script.scriptEnding.connect(scriptEnding);
|
Script.scriptEnding.connect(scriptEnding);
|
||||||
|
|
|
@ -2,6 +2,7 @@
|
||||||
// examples
|
// examples
|
||||||
//
|
//
|
||||||
// Created by Brad Hefta-Gaub on 10/2/14.
|
// Created by Brad Hefta-Gaub on 10/2/14.
|
||||||
|
// Persist toolbar by HRS 6/11/15.
|
||||||
// Copyright 2014 High Fidelity, Inc.
|
// Copyright 2014 High Fidelity, Inc.
|
||||||
//
|
//
|
||||||
// This script allows you to edit entities with a new UI/UX for mouse and trackpad based editing
|
// 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 () {
|
that.move = function () {
|
||||||
var newViewPort,
|
var newViewPort,
|
||||||
toolsX,
|
toolsX,
|
||||||
|
@ -330,6 +332,15 @@ var toolBar = (function () {
|
||||||
if (toolBar === undefined) {
|
if (toolBar === undefined) {
|
||||||
initialize();
|
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 &&
|
} else if (windowDimensions.x === newViewPort.x &&
|
||||||
windowDimensions.y === newViewPort.y) {
|
windowDimensions.y === newViewPort.y) {
|
||||||
return;
|
return;
|
||||||
|
|
|
@ -236,6 +236,7 @@ ToolBar = function(x, y, direction) {
|
||||||
y: y - ToolBar.SPACING
|
y: y - ToolBar.SPACING
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
this.save();
|
||||||
}
|
}
|
||||||
|
|
||||||
this.setAlpha = function(alpha, tool) {
|
this.setAlpha = function(alpha, tool) {
|
||||||
|
@ -313,9 +314,8 @@ ToolBar = function(x, y, direction) {
|
||||||
this.cleanup = function() {
|
this.cleanup = function() {
|
||||||
for(var tool in this.tools) {
|
for(var tool in this.tools) {
|
||||||
this.tools[tool].cleanup();
|
this.tools[tool].cleanup();
|
||||||
delete this.tools[tool];
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.back != null) {
|
if (this.back != null) {
|
||||||
Overlays.deleteOverlay(this.back);
|
Overlays.deleteOverlay(this.back);
|
||||||
this.back = null;
|
this.back = null;
|
||||||
|
@ -327,7 +327,71 @@ ToolBar = function(x, y, direction) {
|
||||||
this.width = 0;
|
this.width = 0;
|
||||||
this.height = 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.SPACING = 4;
|
||||||
ToolBar.VERTICAL = 0;
|
ToolBar.VERTICAL = 0;
|
||||||
ToolBar.HORIZONTAL = 1;
|
ToolBar.HORIZONTAL = 1;
|
||||||
|
|
|
@ -3,6 +3,7 @@
|
||||||
//
|
//
|
||||||
// Created by Seth Alves on May 15th
|
// Created by Seth Alves on May 15th
|
||||||
// Modified by Eric Levin on June 4
|
// Modified by Eric Levin on June 4
|
||||||
|
// Persist toolbar by HRS 6/11/15.
|
||||||
// Copyright 2015 High Fidelity, Inc.
|
// Copyright 2015 High Fidelity, Inc.
|
||||||
//
|
//
|
||||||
// Provides a pointer with option to draw on surfaces
|
// 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 screenSize = Controller.getViewportDimensions();
|
||||||
|
|
||||||
var userCanPoint = false;
|
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,
|
width: BUTTON_SIZE,
|
||||||
height: BUTTON_SIZE,
|
height: BUTTON_SIZE,
|
||||||
imageURL: HIFI_PUBLIC_BUCKET + "images/laser.png",
|
imageURL: HIFI_PUBLIC_BUCKET + "images/laser.png",
|
||||||
|
@ -150,4 +158,4 @@ Script.scriptEnding.connect(cleanup);
|
||||||
|
|
||||||
Controller.mouseMoveEvent.connect(mouseMoveEvent);
|
Controller.mouseMoveEvent.connect(mouseMoveEvent);
|
||||||
Controller.mousePressEvent.connect(mousePressEvent);
|
Controller.mousePressEvent.connect(mousePressEvent);
|
||||||
Controller.mouseReleaseEvent.connect(mouseReleaseEvent);
|
Controller.mouseReleaseEvent.connect(mouseReleaseEvent);
|
||||||
|
|
Loading…
Reference in a new issue