mirror of
https://github.com/overte-org/overte.git
synced 2025-04-21 09:44:21 +02:00
Adding the cookies sciprt that provide a simple ui useful for debug and example, complete the interface on the scene script interface to provide the getters
This commit is contained in:
Sam Gateau
parent
3b92910a91
commit
695a5bcfd7
1 changed files with 278 additions and 0 deletions
278
examples/utilities/tools/cookies.js
Executable file
278
examples/utilities/tools/cookies.js
Executable file
|
|
@ -0,0 +1,278 @@
|
|||
//
|
||||
// cookies.js
|
||||
//
|
||||
// version 1.0
|
||||
//
|
||||
// Created by Sam Gateau, 4/1/2015
|
||||
// A simple ui panel that present a list of porperties and the proper widget to edit it
|
||||
//
|
||||
// Distributed under the Apache License, Version 2.0.
|
||||
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
|
||||
//
|
||||
|
||||
// The Slider class
|
||||
Slider = function(x,y,width,thumbSize) {
|
||||
|
||||
this.thumb = Overlays.addOverlay("text", {
|
||||
backgroundColor: { red: 255, green: 255, blue: 255 },
|
||||
x: x,
|
||||
y: y,
|
||||
width: thumbSize,
|
||||
height: thumbSize,
|
||||
alpha: 1.0,
|
||||
backgroundAlpha: 1.0,
|
||||
visible: true
|
||||
});
|
||||
this.background = Overlays.addOverlay("text", {
|
||||
backgroundColor: { red: 125, green: 125, blue: 255 },
|
||||
x: x,
|
||||
y: y,
|
||||
width: width,
|
||||
height: thumbSize,
|
||||
alpha: 1.0,
|
||||
backgroundAlpha: 0.5,
|
||||
visible: true
|
||||
});
|
||||
|
||||
this.thumbSize = thumbSize;
|
||||
this.thumbHalfSize = 0.5 * thumbSize;
|
||||
|
||||
this.minThumbX = x + this.thumbHalfSize;
|
||||
this.maxThumbX = x + width - this.thumbHalfSize;
|
||||
this.thumbX = this.minThumbX;
|
||||
|
||||
this.minValue = 0.0;
|
||||
this.maxValue = 1.0;
|
||||
|
||||
this.clickOffsetX = 0;
|
||||
this.isMoving = false;
|
||||
|
||||
this.updateThumb = function() {
|
||||
thumbTruePos = this.thumbX - 0.5 * this.thumbSize;
|
||||
Overlays.editOverlay(this.thumb, { x: thumbTruePos } );
|
||||
};
|
||||
|
||||
this.onMouseMoveEvent = function(event) {
|
||||
if (this.isMoving) {
|
||||
newThumbX = event.x - this.clickOffsetX;
|
||||
if (newThumbX < this.minThumbX) {
|
||||
newThumbX = this.minThumbX;
|
||||
}
|
||||
if (newThumbX > this.maxThumbX) {
|
||||
newThumbX = this.maxThumbX;
|
||||
}
|
||||
this.thumbX = newThumbX;
|
||||
this.updateThumb();
|
||||
this.onValueChanged(this.getValue());
|
||||
}
|
||||
};
|
||||
|
||||
this.onMousePressEvent = function(event) {
|
||||
this.isMoving = true;
|
||||
var clickOffset = event.x - this.thumbX;
|
||||
if ((clickOffset > -this.thumbHalfSize) && (clickOffset < this.thumbHalfSize)) {
|
||||
this.clickOffsetX = clickOffset;
|
||||
} else {
|
||||
this.clickOffsetX = 0;
|
||||
this.thumbX = event.x;
|
||||
this.updateThumb();
|
||||
this.onValueChanged(this.getValue());
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
this.onMouseReleaseEvent = function(event) {
|
||||
this.isMoving = false;
|
||||
};
|
||||
|
||||
// Public members:
|
||||
|
||||
this.setNormalizedValue = function(value) {
|
||||
if (value < 0.0) {
|
||||
this.thumbX = this.minThumbX;
|
||||
} else if (value > 1.0) {
|
||||
this.thumbX = this.maxThumbX;
|
||||
} else {
|
||||
this.thumbX = value * (this.maxThumbX - this.minThumbX) + this.minThumbX;
|
||||
}
|
||||
this.updateThumb();
|
||||
};
|
||||
this.getNormalizedValue = function() {
|
||||
return (this.thumbX - this.minThumbX) / (this.maxThumbX - this.minThumbX);
|
||||
};
|
||||
|
||||
this.setValue = function(value) {
|
||||
var normValue = (value - this.minValue) / (this.maxValue - this.minValue);
|
||||
this.setNormalizedValue(normValue);
|
||||
};
|
||||
|
||||
this.getValue = function() {
|
||||
return this.getNormalizedValue() * (this.maxValue - this.minValue) + this.minValue;
|
||||
};
|
||||
|
||||
this.onValueChanged = function(value) {};
|
||||
|
||||
this.destroy = function() {
|
||||
Overlays.deleteOverlay(this.background);
|
||||
Overlays.deleteOverlay(this.thumb);
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
var textFontSize = 16;
|
||||
|
||||
function PanelItem(name, setter, getter, displayer, x, y, textWidth, valueWidth, height) {
|
||||
this.name = name;
|
||||
|
||||
|
||||
this.displayer = typeof displayer !== 'undefined' ? displayer : function(value) { return value.toFixed(2); };
|
||||
|
||||
var topMargin = (height - textFontSize);
|
||||
this.title = Overlays.addOverlay("text", {
|
||||
backgroundColor: { red: 255, green: 255, blue: 255 },
|
||||
x: x,
|
||||
y: y,
|
||||
width: textWidth,
|
||||
height: height,
|
||||
alpha: 1.0,
|
||||
backgroundAlpha: 0.5,
|
||||
visible: true,
|
||||
text: name,
|
||||
font: {size: textFontSize},
|
||||
topMargin: topMargin,
|
||||
});
|
||||
|
||||
this.value = Overlays.addOverlay("text", {
|
||||
backgroundColor: { red: 255, green: 255, blue: 255 },
|
||||
x: x + textWidth,
|
||||
y: y,
|
||||
width: valueWidth,
|
||||
height: height,
|
||||
alpha: 1.0,
|
||||
backgroundAlpha: 0.5,
|
||||
visible: true,
|
||||
text: this.displayer(getter()),
|
||||
font: {size: textFontSize},
|
||||
topMargin: topMargin
|
||||
|
||||
});
|
||||
this.getter = getter;
|
||||
|
||||
this.setter = function(value) {
|
||||
setter(value);
|
||||
Overlays.editOverlay(this.value, {text: this.displayer(getter())});
|
||||
if (this.widget) {
|
||||
this.widget.setValue(value);
|
||||
}
|
||||
};
|
||||
this.setterFromWidget = function(value) {
|
||||
setter(value);
|
||||
Overlays.editOverlay(this.value, {text: this.displayer(getter())});
|
||||
};
|
||||
|
||||
|
||||
this.widget = null;
|
||||
|
||||
this.destroy = function() {
|
||||
Overlays.deleteOverlay(this.title);
|
||||
Overlays.deleteOverlay(this.value);
|
||||
if (this.widget != null) {
|
||||
this.widget.destroy();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var textWidth = 180;
|
||||
var valueWidth = 100;
|
||||
var widgetWidth = 300;
|
||||
var rawHeight = 20;
|
||||
var rawYDelta = rawHeight * 1.5;
|
||||
|
||||
Panel = function(x, y) {
|
||||
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
this.nextY = y;
|
||||
|
||||
this.widgetX = x + textWidth + valueWidth;
|
||||
|
||||
this.items = new Array();
|
||||
this.activeWidget = null;
|
||||
|
||||
this.mouseMoveEvent = function(event) {
|
||||
if (this.activeWidget) {
|
||||
this.activeWidget.onMouseMoveEvent(event);
|
||||
}
|
||||
};
|
||||
|
||||
// we also handle click detection in our mousePressEvent()
|
||||
this.mousePressEvent = function(event) {
|
||||
// Make sure we quitted previous widget
|
||||
if (this.activeWidget) {
|
||||
this.activeWidget.onMouseReleaseEvent(event);
|
||||
}
|
||||
this.activeWidget = null;
|
||||
|
||||
var clickedOverlay = Overlays.getOverlayAtPoint({x: event.x, y: event.y});
|
||||
|
||||
// If the user clicked any of the slider background then...
|
||||
for (i in this.items) {
|
||||
widget = this.items[i].widget;
|
||||
|
||||
if (clickedOverlay == widget.background) {
|
||||
this.activeWidget = widget;
|
||||
this.activeWidget.onMousePressEvent(event);
|
||||
// print("clicked... widget=" + i);
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
this.mouseReleaseEvent = function(event) {
|
||||
if (this.activeWidget) {
|
||||
this.activeWidget.onMouseReleaseEvent(event);
|
||||
}
|
||||
this.activeWidget = null;
|
||||
};
|
||||
|
||||
this.newSlider = function(name, minValue, maxValue, setValue, getValue, displayValue) {
|
||||
|
||||
var sliderItem = new PanelItem(name, setValue, getValue, displayValue, this.x, this.nextY, textWidth, valueWidth, rawHeight);
|
||||
|
||||
var slider = new Slider(this.widgetX, this.nextY, widgetWidth, rawHeight);
|
||||
slider.minValue = minValue;
|
||||
slider.maxValue = maxValue;
|
||||
slider.onValueChanged = function(value) { sliderItem.setterFromWidget(value); };
|
||||
|
||||
|
||||
sliderItem.widget = slider;
|
||||
sliderItem.setter(getValue());
|
||||
this.items[name] = sliderItem;
|
||||
this.nextY += rawYDelta;
|
||||
// print("created Item... slider=" + name);
|
||||
};
|
||||
|
||||
this.destroy = function() {
|
||||
for (i in this.items) {
|
||||
this.items[i].destroy();
|
||||
}
|
||||
}
|
||||
|
||||
this.set = function(name, value) {
|
||||
var item = this.items[name];
|
||||
if (item != null) {
|
||||
return item.setter(value);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
this.get = function(name) {
|
||||
var item = this.items[name];
|
||||
if (item != null) {
|
||||
return item.getter();
|
||||
}
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
Loading…
Reference in a new issue