Mirrors/overte-HifiExperiments
3
0
Fork 0
mirror of https://github.com/HifiExperiments/overte.git synced 2025-08-09 06:59:03 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

fixes

Browse source
This commit is contained in:
Seiji Emery 2015-08-12 15:39:34 -07:00
parent 293f146cfc
commit 10ca3f7a8f
2 changed files with 288 additions and 123 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

83
examples/games/solarsystem.js
View file

@ -701,7 +701,6 @@ demoPane.setPosition(600, 200);
// demoButton.addAction('onMouseExit', setText("onMouseExit " + demoButton)); // demoButton.addAction('onMouseExit', setText("onMouseExit " + demoButton));
// demoButton.addAction() // demoButton.addAction()
var resizablePanel = new UI.Label({ var resizablePanel = new UI.Label({
text: "Resizable panel", text: "Resizable panel",
width: 200, height: 200, width: 200, height: 200,
@ -709,6 +708,17 @@ var resizablePanel = new UI.Label({
}); });
resizablePanel.setPosition(1100, 200); resizablePanel.setPosition(1100, 200);
var debugToggle = new UI.Box({
text: "debug", width: 150, height: 20
});
debugToggle.setPosition(1000, 0);
debugToggle.addAction('onClick', function () {
UI.debug.setVisible(!UI.debug.isVisible());
})
debugEvents.forEach(function (action) { debugEvents.forEach(function (action) {
resizablePanel.addAction(action, function (event, widget) { resizablePanel.addAction(action, function (event, widget) {
@ -743,7 +753,6 @@ var tooltipWidget = new UI.Label({
width: 500, height: 20, width: 500, height: 20,
visible: false visible: false
}); });
function addTooltip (widget, text) { function addTooltip (widget, text) {
widget.addAction('onMouseOver', function (event, widget) { widget.addAction('onMouseOver', function (event, widget) {
tooltipWidget.setVisible(true); tooltipWidget.setVisible(true);
@ -756,7 +765,6 @@ function addTooltip (widget, text) {
UI.updateLayout(); UI.updateLayout();
}); });
} }
UI.showWidgetList();
var mainPanel = addPanel({ dir: '+y' }); var mainPanel = addPanel({ dir: '+y' });
mainPanel.setPosition(500, 250); mainPanel.setPosition(500, 250);
@ -810,23 +818,75 @@ label.parent.addAction('onMouseExit', function () {
UI.updateLayout(); UI.updateLayout();
}); });
zoomPanel.add(new UI.Label()); var sliderLayout = zoomPanel.add(new UI.WidgetStack({
zoomPanel.add(new UI.Slider({ dir: '+x', visible: true, backgroundAlpha: 0.0
width: 120, }));
height: 25, 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), backgroundColor: UI.rgb(10, 10, 10),
backgroundAlpha: 0.5, backgroundAlpha: 1.0,
slider: { slider: { // slider knob
width: 30, width: 30,
height: 15, height: 18,
backgroundColor: UI.rgb(120, 120, 120), backgroundColor: UI.rgb(120, 120, 120),
backgroundAlpha: 1.0 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
});
}
}));
// checkbox.onValueChanged = function (red) {
// zoomPanel.getOverlay().update({
// // backgroundAlpha: 0.1,
// backgroundColor: red ? redColor : defaultColor
// });
// }
addIcon(zoomPanel, 'reverse'); addIcon(zoomPanel, 'reverse');
UI.updateLayout(); UI.updateLayout();
UI.showWidgetList();
var subpanels = [ systemViewPanel, zoomPanel ]; var subpanels = [ systemViewPanel, zoomPanel ];
@ -887,7 +947,6 @@ zoomButton.addAction('onClick', function() {
} }
}); });
UI.updateLayout(); UI.updateLayout();
UI.showWidgetList();
stopButton.addAction('onClick', function() { stopButton.addAction('onClick', function() {
// Script.stop(); // Script.stop();

328
examples/libraries/uiwidgets.js
View file

@ -454,7 +454,8 @@ Box.prototype.updateOverlays = function () {
var Label = UI.Label = function (properties) { var Label = UI.Label = function (properties) {
properties = properties || {}; properties = properties || {};
properties.text = properties.text || "< bad UI.Label call (text) >"; if (properties.text === undefined || properties.text === null)
properties.text = "< bad UI.Label call (text) >";
if (!properties.width) { if (!properties.width) {
ui.complain("UI.Label constructor expected width property, not " + properties.width); ui.complain("UI.Label constructor expected width property, not " + properties.width);
@ -493,47 +494,54 @@ var Slider = UI.Slider = function (properties) {
this.value = properties.value || 0.0; this.value = properties.value || 0.0;
this.maxValue = properties.maxValue || 1.0; this.maxValue = properties.maxValue || 1.0;
this.minValue = properties.minValue || 0.0; this.minValue = properties.minValue || 0.0;
this.padding = properties.padding || {
x: 4, y: 4
}
this.onValueChanged = properties.onValueChanged || function () {};
this.slider = new Box(properties.slider); this.slider = new Box(properties.slider);
this.slider.parent = this; this.slider.parent = this;
this.statusLabel = new Label({ var updateSliderPos = function (event, widget) {
text: "< UI.Slider Status log > ", var rx = Math.max(event.x * 1.0 - widget.position.x - widget.slider.width * 0.5, 0.0);
width: 300, var width = Math.max(widget.width - widget.slider.width - widget.padding.x * 2.0, 0.0);
height: 30, var v = Math.min(rx, width) / (width || 1);
color: UI.rgb(255, 255, 255),
alpha: 0.9
});
// this.statusLabel.parent = this;
// var x0; widget.value = widget.minValue + (
var i = 0; widget.maxValue - widget.minValue) * v;
this.addAction('onDragBegin', function (event) { widget.onValueChanged(widget.value);
statusLabel.setText("Drag begin");
UI.updateLayout(); UI.updateLayout();
i = 0; }
// x0 = event.x;
var widget = this;
this.addAction('onMouseDown', function (event) {
sliderRel.x = sliderRel.y = 0.0;
// sliderRel.x = widget.slider.width * 0.5;
// sliderRel.y = widget.slider.height * 0.5;
updateSliderPos(event, widget);
// hack
ui.clickedWidget = ui.draggedWidget = widget.slider;
}); });
this.addAction('onDragUpdate', function (event, widget) {
statusLabel.setText("Drag Update " + i++); var sliderRel = {};
var rx = Math.max(event.x - widget.position.x, 0.0); this.slider.addAction('onMouseDown', function (event) {
var v = Math.min(rx, widget.width) / widget.width; sliderRel.x = widget.slider.position.x - event.x;
widget.value = widget.minValue + (widget.maxValue - widget.minValue) * v; sliderRel.y = widget.slider.position.y - event.y;
UI.updateLayout(); event.x += sliderRel.x;
}); event.y += sliderRel.y;
this.addAction('onDragEnd', function () { updateSliderPos(event, widget);
statusLabel.setText("Drag end");
UI.updateLayout();
});
this.addAction('onMouseOver', function () {
print("Slider MOUSEOVER");
statusLabel.setText("mouseover");
UI.updateLayout();
});
this.addAction('onMouseExit', function () {
statusLabel.setText("mousexit");
UI.updateLayout();
}); });
this.slider.addAction('onDragBegin', function (event) {
event.x += sliderRel.x;
event.y += sliderRel.y;
updateSliderPos(event, widget);
})
this.slider.addAction('onDragUpdate', function (event) {
event.x += sliderRel.x;
event.y += sliderRel.y;
updateSliderPos(event, widget);
})
}; };
Slider.prototype = new Box(); Slider.prototype = new Box();
Slider.prototype.constructor = Slider; Slider.prototype.constructor = Slider;
@ -541,29 +549,79 @@ Slider.prototype.constructor = Slider;
Slider.prototype.toString = function () { Slider.prototype.toString = function () {
return "[UI.Slider " + this.id + " ]"; return "[UI.Slider " + this.id + " ]";
} }
Slider.prototype.applyLayout = function () { Slider.prototype.applyLayout = function () {
if (!this.slider) { if (!this.slider) {
ui.complain("Slider.applyLayout on " + this + " failed"); ui.complain("Slider.applyLayout on " + this + " failed");
return; return;
} }
var val = (this.value - this.minValue) / (this.maxValue - this.minValue); var val = (this.value - this.minValue) / (this.maxValue - this.minValue);
this.slider.position.x = this.position.x + this.width * val; this.slider.position.x = this.position.x + this.padding.x + (this.width - this.slider.width - this.padding.x * 2.0) * val;
this.slider.position.y = this.position.y + (this.height - this.slider.height) * 0.5; this.slider.position.y = this.position.y + /*this.padding.y +*/ (this.height - this.slider.height) * 0.5;
}
Slider.prototype.getValue = function () {
return this.value;
}
Slider.prototype.setValue = function (value) {
this.value = value;
this.onValueChanged(value);
UI.updateLayout();
} }
var Checkbox = UI.Checkbox = function (properties) { var Checkbox = UI.Checkbox = function (properties) {
Box.prototype.constructor.call(this, properties);
this.checked = properties.checked !== undefined ? properties.checked : true;
this.padding = properties.padding || { x: 4, y: 4 };
properties.checkMark = properties.checkMark || {};
// Keep square
var r = Math.min(this.width - this.padding.x * 2.0, this.height - this.padding.y * 2.0);
properties.checkMark.width = properties.checkMark.height = r;
properties.checkMark.visible = false;
properties.checkMark.backgroundColor = properties.checkMark.backgroundColor ||
properties.checkMark.color || rgb(77, 185, 77);
properties.checkMark.backgroundAlpha = properties.checkMark.backgroundAlpha ||
properties.checkMark.alpha || 1.0;
this.checkMark = new Box(properties.checkMark);
this.checkMark.setVisible(this.checked);
this.checkMark.setPosition(
this.position.x + (this.width - this.checkMark.width) * 0.5,
this.position.y + (this.height - this.checkMark.height) * 0.5
);
this.onValueChanged = properties.onValueChanged || function () {};
var widget = this;
this.addAction('onClick', function (event) {
widget.setChecked(!widget.isChecked());
});
this.checkMark.addAction('onClick', function (event) {
widget.setChecked(!widget.isChecked());
});
}; };
Checkbox.prototype = new Box();
Checkbox.prototype.constructor = Checkbox;
Checkbox.prototype.toString = function () {
return "[UI.Checkbox " + this.id + "]";
}
Checkbox.prototype.isChecked = function () {
return this.checked;
}
Checkbox.prototype.setChecked = function (value) {
this.checked = value;
this.checkMark.setVisible(this.checked);
this.onValueChanged(value);
UI.updateLayout();
}
Checkbox.prototype.applyLayout = function () {
this.checkMark && this.checkMark.setPosition(
this.position.x + (this.width - this.checkMark.width) * 0.5,
// New layout functions this.position.y + (this.height - this.checkMark.height) * 0.5
);
}
Icon.prototype.getWidth = function () { Icon.prototype.getWidth = function () {
@ -627,13 +685,15 @@ WidgetStack.prototype.applyLayout = function () {
}, this); }, this);
} }
WidgetStack.prototype.updateOverlays = function () { WidgetStack.prototype.updateOverlays = function () {
this.backgroundOverlay.update({ if (this.backgroundOverlay) {
width: this.getWidth(), this.backgroundOverlay.update({
height: this.getHeight(), width: this.getWidth(),
x: this.position.x, height: this.getHeight(),
y: this.position.y, x: this.position.x,
visible: this.isVisible() y: this.position.y,
}); visible: this.isVisible()
});
}
} }
UI.addAttachment = function (target, rel, update) { UI.addAttachment = function (target, rel, update) {
attachment = { attachment = {
@ -647,6 +707,9 @@ UI.addAttachment = function (target, rel, update) {
UI.updateLayout = function () { UI.updateLayout = function () {
if (ui.visible)
ui.updateDebugUI();
// Recalc dimensions // Recalc dimensions
ui.widgetList.forEach(function (widget) { ui.widgetList.forEach(function (widget) {
widget.clearLayout(); widget.clearLayout();
@ -724,7 +787,8 @@ function makeStatusWidget(defaultText, alpha) {
height: statusDim.y, height: statusDim.y,
color: COLOR_WHITE, color: COLOR_WHITE,
alpha: alpha || 0.98, alpha: alpha || 0.98,
backgroundAlpha: 0.0 backgroundAlpha: 0.0,
visible: ui.debug.visible
}); });
label.updateText = function (text) { label.updateText = function (text) {
label.getOverlay().update({ label.getOverlay().update({
@ -735,70 +799,109 @@ function makeStatusWidget(defaultText, alpha) {
statusPos.y += statusDim.y; statusPos.y += statusDim.y;
return label; return label;
} }
ui.debug = {};
ui.debug.visible = false;
ui.focusStatus = makeStatusWidget("<UI focus>"); ui.focusStatus = makeStatusWidget("<UI focus>");
ui.eventStatus = makeStatusWidget("<UI events>", 0.85); ui.eventStatus = makeStatusWidget("<UI events>", 0.85);
(function () {
var eventList = [];
var maxEvents = 8;
ui.logEvent = function (event) { UI.debug = {
eventList.push(event); eventList: {
if (eventList.length >= maxEvents) position: { x: 20, y: 20 }, width: 1, height: 1
eventList.shift(); },
ui.eventStatus.updateText(eventList.join('\n')); widgetList: {
position: { x: 500, y: 20 }, width: 1, height: 1
},
setVisible: function (visible) {
if (ui.debug.visible != visible) {
ui.focusStatus.setVisible(visible);
ui.eventStatus.setVisible(visible);
if (visible) {
ui.debug.showWidgetList(UI.debug.widgetList.position.x, UI.debug.widgetList.position.y);
} else {
ui.debug.hideWidgetList();
}
UI.updateLayout();
}
ui.debug.visible = visible;
},
isVisible: function () {
return ui.debug.visible;
} }
})(); }
// Add debug list of all widgets + attachments // Add debug list of all widgets + attachments
(function () { var widgetListHeader = makeStatusWidget("Widgets: ", 0.98);
var widgetListHeader = makeStatusWidget("Widgets: ", 0.98); var widgetList = makeStatusWidget("<widget list>", 0.85);
var widgetList = makeStatusWidget("<widget list>", 0.85); var attachmentListHeader = makeStatusWidget("Attachments: ", 0.98);
var attachmentListHeader = makeStatusWidget("Attachments: ", 0.98); var attachmentList = makeStatusWidget("<attachment list>", 0.85);
var attachmentList = makeStatusWidget("<attachment list>", 0.85); var lineHeight = 20;
var lineHeight = 20;
// widgetListHeader.getOverlay().update({ ui.debug.relayout = function () {
// // color: { red: 0.1, green: 0.5, blue: 0.9 }, var x = UI.debug.widgetList.position.x, y = UI.debug.widgetList.position.y;
// backgroundColor: { red: 120, green: 250, blue: 12 },
// backgroundAlpha: 0.9
// });
function relayout (x, y) { widgetListHeader.setPosition(x, y); y += lineHeight;
widgetListHeader.setPosition(x, y); y += lineHeight; widgetList.updateText(ui.widgetList.map(function (widget) {
widgetList.updateText(ui.widgetList.map(function (widget) { return "" + widget + " actions: " + (Object.keys(widget.actions).join(", ") || "none");
return "" + widget + " actions: " + (Object.keys(widget.actions).join(", ") || "none"); }).join("\n") || "no widgets");
}).join("\n") || "no widgets"); widgetList.setPosition(x, y);
widgetList.setPosition(x, y); y += lineHeight * (ui.widgetList.length || 1);
y += lineHeight * (ui.widgetList.length || 1);
attachmentListHeader.setPosition(x, y); y += lineHeight; attachmentListHeader.setPosition(x, y); y += lineHeight;
attachmentList.updateText(ui.attachmentList.map(function (attachment) { attachmentList.updateText(ui.attachmentList.map(function (attachment) {
return "[attachment target: " + attachment.target + ", to: " + attachment.rel + "]"; return "[attachment target: " + attachment.target + ", to: " + attachment.rel + "]";
}).join('\n') || "no attachments"); }).join('\n') || "no attachments");
attachmentList.setPosition(x, y); attachmentList.setPosition(x, y);
y += lineHeight * (ui.widgetList.length || 1); y += lineHeight * (ui.widgetList.length || 1);
// UI.updateLayout();
}
UI.updateLayout(); var defaultX = 500;
} var defaultY = 20;
ui.debug.showWidgetList = function (x, y) {
widgetListHeader.setVisible(true);
widgetList.setVisible(true);
attachmentListHeader.setVisible(true);
attachmentList.setVisible(true);
ui.debug.relayout(x || defaultX, y || defaultY);
}
ui.debug.hideWidgetList = function () {
widgetListHeader.setVisible(false);
widgetList.setVisible(false);
attachmentListHeader.setVisible(false);
attachmentList.setVisible(false);
}
ui.eventStatus.lastPos = {
x: ui.eventStatus.position.x,
y: ui.eventStatus.position.y
};
ui.updateDebugUI = function () {
ui.debug.relayout();
var dx = ui.eventStatus.position.x - ui.eventStatus.lastPos.x;
var dy = ui.eventStatus.position.y - ui.eventStatus.lastPos.y;
ui.focusStatus.position.x += dx;
ui.focusStatus.position.y += dy;
ui.eventStatus.position.x += dx;
ui.eventStatus.position.y += dy;
ui.eventStatus.lastPos.x = ui.eventStatus.position.x;
ui.eventStatus.lastPos.y = ui.eventStatus.position.y;
}
var eventList = [];
var maxEvents = 8;
ui.logEvent = function (event) {
eventList.push(event);
if (eventList.length >= maxEvents)
eventList.shift();
ui.eventStatus.updateText(eventList.join('\n'));
}
var defaultX = 500;
var defaultY = 20;
UI.showWidgetList = function (x, y) {
widgetListHeader.setVisible(true);
widgetList.setVisible(true);
attachmentListHeader.setVisible(true);
attachmentList.setVisible(true);
relayout(x || defaultX, y || defaultY);
}
UI.hideWidgetList = function () {
widgetListHeader.setVisible(false);
widgetList.setVisible(false);
attachmentListHeader.setVisible(false);
attachmentList.setVisible(true);
}
})();
UI.showWidgetList();
// Tries to find a widget with an overlay matching overlay. // Tries to find a widget with an overlay matching overlay.
// Used by getFocusedWidget(), dispatchEvent(), etc // Used by getFocusedWidget(), dispatchEvent(), etc
@ -841,13 +944,16 @@ var dispatchEvent = function (action, event, widget) {
} }
} }
UI.handleMouseMove = function (event) { UI.handleMouseMove = function (event, canStartDrag) {
if (canStartDrag === undefined)
canStartDrag = true;
// print("mouse moved x = " + event.x + ", y = " + event.y); // print("mouse moved x = " + event.x + ", y = " + event.y);
var focused = getFocusedWidget(event); var focused = getFocusedWidget(event);
print("got focus: " + focused); // print("got focus: " + focused);
if (ui.clickedWidget && !ui.draggedWidget && ui.clickedWidget.actions['onDragBegin']) { if (canStartDrag && !ui.draggedWidget && ui.clickedWidget && ui.clickedWidget.actions['onDragBegin']) {
ui.draggedWidget = ui.clickedWidget; ui.draggedWidget = ui.clickedWidget;
dispatchEvent('onDragBegin', event, ui.draggedWidget); dispatchEvent('onDragBegin', event, ui.draggedWidget);
} else if (ui.draggedWidget) { } else if (ui.draggedWidget) {
@ -865,8 +971,8 @@ UI.handleMousePress = function (event) {
print("Mouse clicked"); print("Mouse clicked");
UI.handleMouseMove(event); UI.handleMouseMove(event);
ui.clickedWidget = ui.focusedWidget; ui.clickedWidget = ui.focusedWidget;
if (ui.focusedWidget) { if (ui.clickedWidget) {
dispatchEvent('onMouseDown', event, ui.focusedWidget); dispatchEvent('onMouseDown', event, ui.clickedWidget);
} }
} }
@ -876,7 +982,7 @@ UI.handleMouseRelease = function (event) {
if (ui.draggedWidget) { if (ui.draggedWidget) {
dispatchEvent('onDragEnd', event, ui.draggedWidget); dispatchEvent('onDragEnd', event, ui.draggedWidget);
} else { } else {
UI.handleMouseMove(event); UI.handleMouseMove(event, false);
if (ui.focusedWidget) { if (ui.focusedWidget) {
dispatchEvent('onMouseUp', event, ui.focusedWidget); dispatchEvent('onMouseUp', event, ui.focusedWidget);