mirror of
https://github.com/overte-org/overte.git
synced 2025-04-05 22:52:33 +02:00
439 lines
12 KiB
JavaScript
439 lines
12 KiB
JavaScript
//
|
|
// widgets-example.js
|
|
// games
|
|
//
|
|
// Copyright 2015 High Fidelity, Inc.
|
|
// Distributed under the Apache License, Version 2.0.
|
|
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
|
|
//
|
|
|
|
var paddingX = 8;
|
|
var paddingY = 8;
|
|
var buttonWidth = 30;
|
|
var buttonHeight = 30;
|
|
|
|
var ICONS_URL = 'https://s3.amazonaws.com/hifi-public/marketplace/hificontent/Scripts/planets/images/';
|
|
|
|
var panelX = 1250;
|
|
var panelY = 500;
|
|
var panelWidth = 50;
|
|
var panelHeight = 210;
|
|
|
|
// var mainPanel = new UIPanel(panelX, panelY, panelWidth, panelHeight);
|
|
// var systemViewButton = mainPanel.addImage('solarsystems');
|
|
// var zoomButton = mainPanel.addImage('magnifier');
|
|
// var satelliteButton = mainPanel.addImage('satellite');
|
|
// var settingsButton = mainPanel.addImage('settings');
|
|
// var stopButton = mainPanel.addImage('close');
|
|
//
|
|
// mainPanel.show();
|
|
//
|
|
// var systemViewPanel = new UIPanel(panelX - 120, panelY, 120, 40);
|
|
// var reverseButton = systemViewPanel.addImage('reverse');
|
|
// var pauseButton = systemViewPanel.addImage('playpause');
|
|
// var forwardButton = systemViewPanel.addImage('forward');
|
|
//
|
|
// var zoomPanel = new UIPanel(panelX - 60, panelY + buttonHeight + paddingY, 650, 50);
|
|
// for (var i = 0; i < planets.length; ++i) {
|
|
// zoomPanel.addText(planets[i].name);
|
|
// }
|
|
Script.include('../libraries/uiwidgets.js');
|
|
|
|
UI.setDefaultVisibility(true);
|
|
UI.setErrorHandler(function(err) {
|
|
teardown();
|
|
// print(err);
|
|
// Script.stop();
|
|
});
|
|
|
|
// Controller.mouseMoveEvent.connect(function panelMouseMoveEvent(event) { return settings.mouseMoveEvent(event); });
|
|
// Controller.mousePressEvent.connect( function panelMousePressEvent(event) { return settings.mousePressEvent(event); });
|
|
// Controller.mouseDoublePressEvent.connect( function panelMouseDoublePressEvent(event) { return settings.mouseDoublePressEvent(event); });
|
|
// Controller.mouseReleaseEvent.connect(function(event) { return settings.mouseReleaseEvent(event); });
|
|
// Controller.keyPressEvent.connect(function(event) { return settings.keyPressEvent(event); });
|
|
|
|
// var ICON_WIDTH = 50.0;
|
|
// var ICON_HEIGHT = 50.0;
|
|
var ICON_WIDTH = 40.0;
|
|
var ICON_HEIGHT = 40.0;
|
|
var ICON_COLOR = UI.rgba(45, 45, 45, 0.7);
|
|
var FOCUSED_COLOR = UI.rgba(250, 250, 250, 1.0);
|
|
|
|
var PANEL_BACKGROUND_COLOR = UI.rgba(50, 50, 50, 0.7);
|
|
|
|
var PANEL_PADDING = 7.0;
|
|
var PANEL_BORDER = 12.0;
|
|
var SUBPANEL_GAP = 1.0;
|
|
|
|
var icons = [];
|
|
function addImage(panel, iconId) {
|
|
var icon = panel.add(new UI.Image({
|
|
'imageURL': ICONS_URL + iconId + '.svg',
|
|
'width': ICON_WIDTH,
|
|
'height': ICON_HEIGHT,
|
|
'color': ICON_COLOR,
|
|
'alpha': ICON_COLOR.a
|
|
}));
|
|
icons.push(icon);
|
|
return icon;
|
|
}
|
|
|
|
var panels = [];
|
|
function addPanel (properties) {
|
|
properties.background = properties.background || {};
|
|
properties.background.backgroundColor = properties.background.backgroundColor ||
|
|
PANEL_BACKGROUND_COLOR;
|
|
properties.background.backgroundAlpha = properties.background.backgroundAlpha ||
|
|
PANEL_BACKGROUND_COLOR.a;
|
|
properties.padding = properties.padding || { x: PANEL_PADDING, y: PANEL_PADDING };
|
|
properties.border = properties.border || { x: PANEL_BORDER, y: PANEL_BORDER };
|
|
|
|
var panel = new UI.WidgetStack(properties);
|
|
panels.push(panel);
|
|
return panel;
|
|
}
|
|
|
|
function makeDraggable (panel, target) {
|
|
if (!target)
|
|
target = panel;
|
|
|
|
var dragStart = null;
|
|
var initialPos = null;
|
|
|
|
panel.addAction('onDragBegin', function (event) {
|
|
dragStart = { x: event.x, y: event.y };
|
|
initialPos = { x: target.position.x, y: target.position.y };
|
|
});
|
|
panel.addAction('onDragUpdate', function (event) {
|
|
target.setPosition(
|
|
initialPos.x + event.x - dragStart.x,
|
|
initialPos.y + event.y - dragStart.y
|
|
);
|
|
UI.updateLayout();
|
|
});
|
|
panel.addAction('onDragEnd', function () {
|
|
dragStart = dragEnd = null;
|
|
});
|
|
}
|
|
|
|
// var panelContainer = new UI.WidgetContainer();
|
|
// panelContainer.setPosition(500, 250);
|
|
// panelContainer.setVisible(true);
|
|
|
|
var demoPane = addPanel({ dir: '+y' });
|
|
var demoLabel = demoPane.add(new UI.Label({
|
|
text: "< no events >",
|
|
width: 400, height: 20
|
|
}));
|
|
var demoButton = demoPane.add(new UI.Box({
|
|
width: 200, height: 80,
|
|
text: "Button"
|
|
}));
|
|
function setText(text) {
|
|
return function () {
|
|
demoLabel.setText(text);
|
|
UI.updateLayout();
|
|
};
|
|
}
|
|
function addDebugActions(widget, msg, actions) {
|
|
actions.forEach(function(action) {
|
|
widget.addAction(action, setText(action + " " + msg + widget));
|
|
});
|
|
}
|
|
|
|
var debugEvents = [
|
|
'onMouseOver',
|
|
'onMouseExit',
|
|
'onMouseDown',
|
|
'onMouseUp',
|
|
'onDragBegin',
|
|
'onDragEnd',
|
|
'onDragUpdate'
|
|
];
|
|
addDebugActions(demoPane, "(container) ", debugEvents);
|
|
addDebugActions(demoButton, "(button) ", debugEvents);
|
|
addDebugActions(demoLabel, "(label) ", debugEvents);
|
|
|
|
// demoPane.addAction('onMouseOver', setText("onMouseOver " + demoPane));
|
|
// demoPane.addAction('onMouseExit', setText("onMouseExit " + demoPane));
|
|
// demoPane.addAction('onMouseDown', setText("onMouseDown " + demoPane));
|
|
// demoPane.addAction('onMouseUp', setText("onMouseUp " + demoPane));
|
|
makeDraggable(demoPane, demoPane);
|
|
demoPane.setPosition(600, 200);
|
|
|
|
// demoButton.addAction('onMouseOver', setText("onMouseOver " + demoButton));
|
|
// demoButton.addAction('onMouseExit', setText("onMouseExit " + demoButton));
|
|
// demoButton.addAction()
|
|
|
|
// var resizablePanel = new UI.Label({
|
|
// text: "Resizable panel",
|
|
// width: 200, height: 200,
|
|
// backgroundAlpha: 0.5
|
|
// });
|
|
// resizablePanel.setPosition(1100, 200);
|
|
|
|
var debugToggle = new UI.Box({
|
|
text: "debug", width: 150, height: 20
|
|
});
|
|
debugToggle.setPosition(200, 0);
|
|
debugToggle.addAction('onClick', function () {
|
|
UI.debug.setVisible(!UI.debug.isVisible());
|
|
});
|
|
|
|
// debugEvents.forEach(function (action) {
|
|
// resizablePanel.addAction(action, function (event, widget) {
|
|
// widget.setText(action + " " + widget);
|
|
// });
|
|
// })
|
|
|
|
function join(obj) {
|
|
var s = "{";
|
|
var sep = "\n";
|
|
for (var k in obj) {
|
|
s += sep + k + ": " + (""+obj[k]).replace("\n", "\n");
|
|
sep = ",\n";
|
|
}
|
|
if (s.length > 1)
|
|
return s + " }";
|
|
return s + "}";
|
|
}
|
|
|
|
// resizablePanel.getOverlay().update({
|
|
// text: "" + join(resizablePanel.actions)
|
|
// });
|
|
|
|
|
|
setText = addDebugActions = undefined;
|
|
|
|
|
|
var tooltipWidget = new UI.Label({
|
|
text: "<tooltip>",
|
|
width: 500, height: 20,
|
|
visible: false
|
|
});
|
|
function addTooltip (widget, text) {
|
|
widget.addAction('onMouseOver', function (event, widget) {
|
|
tooltipWidget.setVisible(true);
|
|
tooltipWidget.setPosition(widget.position.x + widget.getWidth() + 20, widget.position.y);
|
|
tooltipWidget.setText(text);
|
|
UI.updateLayout();
|
|
});
|
|
widget.addAction('onMouseExit', function () {
|
|
tooltipWidget.setVisible(false);
|
|
UI.updateLayout();
|
|
});
|
|
}
|
|
|
|
var mainPanel = addPanel({ dir: '+y' });
|
|
mainPanel.setPosition(500, 250);
|
|
mainPanel.setVisible(true);
|
|
|
|
var systemViewButton = addImage(mainPanel, 'solarsystems');
|
|
var zoomButton = addImage(mainPanel, 'magnifier');
|
|
var satelliteButton = addImage(mainPanel, 'satellite');
|
|
var settingsButton = addImage(mainPanel, 'settings');
|
|
var stopButton = addImage(mainPanel, 'close');
|
|
|
|
|
|
addTooltip(systemViewButton, "system view");
|
|
addTooltip(zoomButton, "zoom");
|
|
addTooltip(satelliteButton, "satelite view");
|
|
addTooltip(settingsButton, "settings");
|
|
addTooltip(stopButton, "exit");
|
|
|
|
var systemViewPanel = addPanel({ dir: '+x', visible: false });
|
|
var reverseButton = addImage(systemViewPanel, 'reverse');
|
|
var pauseButton = addImage(systemViewPanel, 'playpause');
|
|
var forwardButton = addImage(systemViewPanel, 'forward');
|
|
|
|
var zoomPanel = addPanel({ dir: '+y', visible: true });
|
|
var label = new UI.Label({
|
|
text: "Foo",
|
|
width: 120,
|
|
height: 15,
|
|
color: UI.rgb(245, 290, 20),
|
|
alpha: 1.0,
|
|
backgroundColor: UI.rgb(10, 10, 10),
|
|
backgroundAlpha: 0.0
|
|
});
|
|
zoomPanel.add(label);
|
|
label.addAction('onMouseOver', function () {
|
|
label.setText("Bar");
|
|
UI.updateLayout();
|
|
});
|
|
label.addAction('onMouseExit', function () {
|
|
label.setText("Foo");
|
|
UI.updateLayout();
|
|
});
|
|
label.setText("Label id: " + label.id + ", parent id " + label.parent.id);
|
|
label.parent.addAction('onMouseOver', function () {
|
|
label.setText("on parent");
|
|
UI.updateLayout();
|
|
});
|
|
label.parent.addAction('onMouseExit', function () {
|
|
label.setText('exited parent');
|
|
UI.updateLayout();
|
|
});
|
|
|
|
var sliderLayout = zoomPanel.add(new UI.WidgetStack({
|
|
dir: '+x', visible: true, backgroundAlpha: 0.0
|
|
}));
|
|
var sliderLabel = sliderLayout.add(new UI.Label({
|
|
text: " ", width: 45, height: 20
|
|
}));
|
|
var slider = sliderLayout.add(new UI.Slider({
|
|
value: 10, maxValue: 100, minValue: 0,
|
|
width: 300, height: 20,
|
|
backgroundColor: UI.rgb(10, 10, 10),
|
|
backgroundAlpha: 1.0,
|
|
slider: { // slider knob
|
|
width: 30,
|
|
height: 18,
|
|
backgroundColor: UI.rgb(120, 120, 120),
|
|
backgroundAlpha: 1.0
|
|
}
|
|
}));
|
|
sliderLabel.setText("" + (+slider.getValue().toFixed(1)));
|
|
slider.onValueChanged = function (value) {
|
|
sliderLabel.setText("" + (+value.toFixed(1)));
|
|
UI.updateLayout();
|
|
}
|
|
|
|
|
|
|
|
|
|
var checkBoxLayout = zoomPanel.add(new UI.WidgetStack({
|
|
dir: '+x', visible: true, backgroundAlpha: 0.0
|
|
}));
|
|
// var padding = checkBoxLayout.add(new UI.Label({
|
|
// text: " ", width: 45, height: 20
|
|
// }));
|
|
var checkBoxLabel = checkBoxLayout.add(new UI.Label({
|
|
text: "set red", width: 60, height: 20,
|
|
backgroundAlpha: 0.0
|
|
}));
|
|
checkBoxLabel.setText("set red");
|
|
|
|
var defaultColor = UI.rgb(10, 10, 10);
|
|
var redColor = UI.rgb(210, 80, 80);
|
|
|
|
var checkbox = checkBoxLayout.add(new UI.Checkbox({
|
|
width: 20, height: 20, padding: { x: 3, y: 3 },
|
|
backgroundColor: defaultColor,
|
|
backgroundAlpha: 0.9,
|
|
checked: false,
|
|
onValueChanged: function (red) {
|
|
zoomPanel.getOverlay().update({
|
|
// backgroundAlpha: 0.1,
|
|
backgroundColor: red ? redColor : defaultColor
|
|
});
|
|
}
|
|
}));
|
|
|
|
addImage(zoomPanel, 'reverse');
|
|
UI.updateLayout();
|
|
|
|
var subpanels = [ systemViewPanel, zoomPanel ];
|
|
function hideSubpanelsExcept (panel) {
|
|
subpanels.forEach(function (x) {
|
|
if (x != panel) {
|
|
x.setVisible(false);
|
|
}
|
|
});
|
|
}
|
|
|
|
function attachPanel (panel, button) {
|
|
button.addAction('onClick', function () {
|
|
hideSubpanelsExcept(panel);
|
|
panel.setVisible(!panel.isVisible());
|
|
UI.updateLayout();
|
|
})
|
|
|
|
UI.addAttachment(panel, button, function (target, rel) {
|
|
target.setPosition(
|
|
rel.position.x - (target.getWidth() + target.border.x + SUBPANEL_GAP),
|
|
rel.position.y - target.border.y
|
|
);
|
|
});
|
|
}
|
|
attachPanel(systemViewPanel, systemViewButton);
|
|
attachPanel(zoomPanel, zoomButton);
|
|
|
|
var addColorToggle = function (widget) {
|
|
widget.addAction('onMouseOver', function () {
|
|
widget.setColor(FOCUSED_COLOR);
|
|
});
|
|
widget.addAction('onMouseExit', function () {
|
|
widget.setColor(ICON_COLOR);
|
|
});
|
|
}
|
|
|
|
reverseButton.addAction('onClick', function() {});
|
|
|
|
systemViewPanel.addAction('onMouseOver', function() {
|
|
hideSubpanels();
|
|
UI.updateLayout();
|
|
});
|
|
|
|
|
|
zoomButton.addAction('onClick', function() {
|
|
hideSubpanels();
|
|
UI.updateLayout();
|
|
});
|
|
UI.updateLayout();
|
|
|
|
stopButton.addAction('onClick', function() {
|
|
// Script.stop();
|
|
teardown();
|
|
});
|
|
|
|
// Panel drag behavior
|
|
// (click + drag on border to drag)
|
|
(function () {
|
|
var dragged = null;
|
|
this.startDrag = function (dragAction) {
|
|
dragged = dragAction;
|
|
}
|
|
this.updateDrag = function (event) {
|
|
if (dragged) {
|
|
print("Update drag");
|
|
dragged.updateDrag(event);
|
|
}
|
|
}
|
|
this.clearDrag = function (event) {
|
|
if (dragged)
|
|
print("End drag");
|
|
dragged = null;
|
|
}
|
|
})();
|
|
|
|
var buttons = icons;
|
|
|
|
buttons.map(addColorToggle);
|
|
panels.map(function (panel) { makeDraggable(panel, mainPanel); });
|
|
|
|
// Cleanup script resources
|
|
function teardown() {
|
|
UI.teardown();
|
|
|
|
// etc...
|
|
};
|
|
|
|
var inputHandler = {
|
|
onMouseMove: function (event) {
|
|
updateDrag(event);
|
|
UI.handleMouseMove(event);
|
|
},
|
|
onMousePress: function (event) {
|
|
UI.handleMousePress(event);
|
|
},
|
|
onMouseRelease: function (event) {
|
|
clearDrag(event);
|
|
UI.handleMouseRelease(event);
|
|
}
|
|
};
|
|
Controller.mousePressEvent.connect(inputHandler.onMousePress);
|
|
Controller.mouseMoveEvent.connect(inputHandler.onMouseMove);
|
|
Controller.mouseReleaseEvent.connect(inputHandler.onMouseRelease);
|
|
|
|
Script.scriptEnding.connect(teardown);
|