Mirrors/overte
3
0
Fork 0
mirror of https://github.com/overte-org/overte.git synced 2025-04-22 16:13:28 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions2

more work on image overlays

Browse source
This commit is contained in:
ZappoMan 2014-02-15 16:26:34 -08:00
parent 2eac9c293f
commit f6adce255d
3 changed files with 202 additions and 51 deletions

125
examples/overlaysExample.js
View file

@ -18,6 +18,61 @@
QRect(170,100,62,40), QRect(0,80,62,40));
*/
var swatch1 = Overlays.addOverlay({
x: 100,
y: 200,
width: 31,
height: 54,
subImage: { x: 39, y: 0, width: 30, height: 54 },
imageURL: "http://highfidelity-public.s3-us-west-1.amazonaws.com/images/testing-swatches.svg",
backgroundColor: { red: 255, green: 0, blue: 0},
alpha: 1
});
var swatch2 = Overlays.addOverlay({
x: 130,
y: 200,
width: 31,
height: 54,
subImage: { x: 39, y: 55, width: 30, height: 54 },
imageURL: "http://highfidelity-public.s3-us-west-1.amazonaws.com/images/testing-swatches.svg",
backgroundColor: { red: 0, green: 255, blue: 0},
alpha: 1.0
});
var swatch3 = Overlays.addOverlay({
x: 160,
y: 200,
width: 31,
height: 54,
subImage: { x: 39, y: 0, width: 30, height: 54 },
imageURL: "http://highfidelity-public.s3-us-west-1.amazonaws.com/images/testing-swatches.svg",
backgroundColor: { red: 0, green: 0, blue: 255},
alpha: 1.0
});
var swatch4 = Overlays.addOverlay({
x: 190,
y: 200,
width: 31,
height: 54,
subImage: { x: 39, y: 0, width: 30, height: 54 },
imageURL: "http://highfidelity-public.s3-us-west-1.amazonaws.com/images/testing-swatches.svg",
backgroundColor: { red: 0, green: 255, blue: 255},
alpha: 1.0
});
var swatch5 = Overlays.addOverlay({
x: 220,
y: 200,
width: 31,
height: 54,
subImage: { x: 39, y: 0, width: 30, height: 54 },
imageURL: "http://highfidelity-public.s3-us-west-1.amazonaws.com/images/testing-swatches.svg",
backgroundColor: { red: 255, green: 255, blue: 0},
alpha: 1.0
});
var toolA = Overlays.addOverlay({
x: 100,
y: 100,
@ -25,11 +80,77 @@ var toolA = Overlays.addOverlay({
height: 40,
subImage: { x: 0, y: 0, width: 62, height: 40 },
imageURL: "https://s3-us-west-1.amazonaws.com/highfidelity-public/images/hifi-interface-tools.svg",
backgroundColor: { red: 255, green: 0, blue: 255},
alpha: 1.0
backgroundColor: { red: 255, green: 255, blue: 255},
alpha: 0.7,
visible: false
});
var slider = Overlays.addOverlay({
// alternate form of expressing bounds
bounds: { x: 100, y: 300, width: 158, height: 35},
imageURL: "https://s3-us-west-1.amazonaws.com/highfidelity-public/images/slider.png",
backgroundColor: { red: 255, green: 255, blue: 255},
alpha: 1
});
var thumb = Overlays.addOverlay({
x: 130,
y: 309,
width: 18,
height: 17,
imageURL: "https://s3-us-west-1.amazonaws.com/highfidelity-public/images/thumb.png",
backgroundColor: { red: 255, green: 255, blue: 255},
alpha: 1
});
// 270x 109
// 109... 109/2 = 54,1,54
// 270... 39 to 66 = 28 x 9 swatches with
// unselected:
// 38,0,28,54
// selected:
// 38,55,28,54
//http://highfidelity-public.s3-us-west-1.amazonaws.com/images/swatches.svg
// 123456789*123456789*123456789*
// 0123456789*123456789*123456789*
function scriptEnding() {
Overlays.deleteOverlay(toolA);
//Overlays.deleteOverlay(toolB);
//Overlays.deleteOverlay(toolC);
Overlays.deleteOverlay(swatch1);
Overlays.deleteOverlay(swatch2);
Overlays.deleteOverlay(swatch3);
Overlays.deleteOverlay(swatch4);
Overlays.deleteOverlay(swatch5);
Overlays.deleteOverlay(thumb);
Overlays.deleteOverlay(slider);
}
Script.scriptEnding.connect(scriptEnding);
var toolAVisible = false;
var minX = 130;
var maxX = minX + 65;
var moveX = (minX + maxX)/2;
var dX = 1;
function update() {
moveX = moveX + dX;
if (moveX > maxX) {
dX = -1;
}
if (moveX < minX) {
dX = 1;
if (toolAVisible) {
toolAVisible = false;
} else {
toolAVisible = true;
}
Overlays.editOverlay(toolA, { visible: toolAVisible } );
}
Overlays.editOverlay(thumb, { x: moveX } );
}
Script.willSendVisualDataCallback.connect(update);

106
interface/src/ui/ImageOverlay.cpp
View file

@ -18,21 +18,16 @@ ImageOverlay::ImageOverlay() :
_textureID(0),
_alpha(DEFAULT_ALPHA),
_backgroundColor(DEFAULT_BACKGROUND_COLOR),
_visible(true),
_renderImage(false),
_textureBound(false)
_textureBound(false),
_wantClipFromImage(false)
{
}
void ImageOverlay::init(QGLWidget* parent) {
qDebug() << "ImageOverlay::init() parent=" << parent;
_parent = parent;
/*
qDebug() << "ImageOverlay::init()... url=" << url;
_bounds = drawAt;
_fromImage = fromImage;
setImageURL(url);
*/
}
@ -43,6 +38,7 @@ ImageOverlay::~ImageOverlay() {
}
}
// TODO: handle setting image multiple times, how do we manage releasing the bound texture?
void ImageOverlay::setImageURL(const QUrl& url) {
// TODO: are we creating too many QNetworkAccessManager() when multiple calls to setImageURL are made?
QNetworkAccessManager* manager = new QNetworkAccessManager(this);
@ -51,24 +47,18 @@ void ImageOverlay::setImageURL(const QUrl& url) {
}
void ImageOverlay::replyFinished(QNetworkReply* reply) {
qDebug() << "ImageOverlay::replyFinished() reply=" << reply;
// replace our byte array with the downloaded data
QByteArray rawData = reply->readAll();
_textureImage.loadFromData(rawData);
_renderImage = true;
// TODO: handle setting image multiple times, how do we manage releasing the bound texture
qDebug() << "ImageOverlay::replyFinished() about to call _parent->bindTexture(_textureImage)... _parent" << _parent;
qDebug() << "ImageOverlay::replyFinished _textureID=" << _textureID
<< "_textureImage.width()=" << _textureImage.width()
<< "_textureImage.height()=" << _textureImage.height();
}
void ImageOverlay::render() {
//qDebug() << "ImageOverlay::render _textureID=" << _textureID << "_bounds=" << _bounds;
if (!_visible) {
return; // do nothing if we're not visible
}
if (_renderImage && !_textureBound) {
_textureID = _parent->bindTexture(_textureImage);
_textureBound = true;
@ -79,17 +69,25 @@ void ImageOverlay::render() {
glBindTexture(GL_TEXTURE_2D, _textureID);
}
const float MAX_COLOR = 255;
glColor4f((_backgroundColor.red / MAX_COLOR), (_backgroundColor.green / MAX_COLOR), (_backgroundColor.blue / MAX_COLOR), _alpha);
glColor4f(_backgroundColor.red / MAX_COLOR, _backgroundColor.green / MAX_COLOR, _backgroundColor.blue / MAX_COLOR, _alpha);
float imageWidth = _textureImage.width();
float imageHeight = _textureImage.height();
float x = _fromImage.x() / imageWidth;
float y = _fromImage.y() / imageHeight;
float w = _fromImage.width() / imageWidth; // ?? is this what we want? not sure
float h = _fromImage.height() / imageHeight;
//qDebug() << "ImageOverlay::render x=" << x << "y=" << y << "w="<<w << "h="<<h << "(1.0f - y)=" << (1.0f - y);
QRect fromImage;
if (_wantClipFromImage) {
fromImage = _fromImage;
} else {
fromImage.setX(0);
fromImage.setY(0);
fromImage.setWidth(imageWidth);
fromImage.setHeight(imageHeight);
}
float x = fromImage.x() / imageWidth;
float y = fromImage.y() / imageHeight;
float w = fromImage.width() / imageWidth; // ?? is this what we want? not sure
float h = fromImage.height() / imageHeight;
glBegin(GL_QUADS);
if (_renderImage) {
glTexCoord2f(x, 1.0f - y);
@ -123,6 +121,7 @@ QScriptValue ImageOverlay::getProperties() {
// TODO: handle only setting the included values...
void ImageOverlay::setProperties(const QScriptValue& properties) {
//qDebug() << "ImageOverlay::setProperties()... properties=" << &properties;
QScriptValue bounds = properties.property("bounds");
if (bounds.isValid()) {
QRect boundsRect;
@ -132,20 +131,48 @@ void ImageOverlay::setProperties(const QScriptValue& properties) {
boundsRect.setHeight(bounds.property("height").toVariant().toInt());
setBounds(boundsRect);
} else {
setX(properties.property("x").toVariant().toInt());
setY(properties.property("y").toVariant().toInt());
setWidth(properties.property("width").toVariant().toInt());
setHeight(properties.property("height").toVariant().toInt());
QRect oldBounds = getBounds();
QRect newBounds = oldBounds;
if (properties.property("x").isValid()) {
newBounds.setX(properties.property("x").toVariant().toInt());
} else {
newBounds.setX(oldBounds.x());
}
if (properties.property("y").isValid()) {
newBounds.setY(properties.property("y").toVariant().toInt());
} else {
newBounds.setY(oldBounds.y());
}
if (properties.property("width").isValid()) {
newBounds.setWidth(properties.property("width").toVariant().toInt());
} else {
newBounds.setWidth(oldBounds.width());
}
if (properties.property("height").isValid()) {
newBounds.setHeight(properties.property("height").toVariant().toInt());
} else {
newBounds.setHeight(oldBounds.height());
}
setBounds(newBounds);
//qDebug() << "set bounds to " << getBounds();
}
QScriptValue subImageBounds = properties.property("subImage");
if (subImageBounds.isValid()) {
QRect subImageRect;
subImageRect.setX(subImageBounds.property("x").toVariant().toInt());
subImageRect.setY(subImageBounds.property("y").toVariant().toInt());
subImageRect.setWidth(subImageBounds.property("width").toVariant().toInt());
subImageRect.setHeight(subImageBounds.property("height").toVariant().toInt());
QRect subImageRect = _fromImage;
if (subImageBounds.property("x").isValid()) {
subImageRect.setX(subImageBounds.property("x").toVariant().toInt());
}
if (subImageBounds.property("y").isValid()) {
subImageRect.setY(subImageBounds.property("y").toVariant().toInt());
}
if (subImageBounds.property("width").isValid()) {
subImageRect.setWidth(subImageBounds.property("width").toVariant().toInt());
}
if (subImageBounds.property("height").isValid()) {
subImageRect.setHeight(subImageBounds.property("height").toVariant().toInt());
}
setClipFromSource(subImageRect);
qDebug() << "set subImage to " << getClipFromSource();
}
QScriptValue imageURL = properties.property("imageURL");
@ -165,7 +192,14 @@ void ImageOverlay::setProperties(const QScriptValue& properties) {
}
}
setAlpha(properties.property("alpha").toVariant().toFloat());
if (properties.property("alpha").isValid()) {
setAlpha(properties.property("alpha").toVariant().toFloat());
}
if (properties.property("visible").isValid()) {
setVisible(properties.property("visible").toVariant().toBool());
qDebug() << "setting visible to " << getVisible();
}
}

22
interface/src/ui/ImageOverlay.h
View file

@ -26,23 +26,16 @@ const float DEFAULT_ALPHA = 0.7f;
class ImageOverlay : QObject {
Q_OBJECT
Q_PROPERTY(int x READ getX WRITE setX)
Q_PROPERTY(int y READ getY WRITE setY)
Q_PROPERTY(int width READ getWidth WRITE setWidth)
Q_PROPERTY(int height READ getHeight WRITE setHeight)
Q_PROPERTY(QRect bounds READ getBounds WRITE setBounds)
Q_PROPERTY(QRect subImage READ getClipFromSource WRITE setClipFromSource)
Q_PROPERTY(xColor backgroundColor READ getBackgroundColor WRITE setBackgroundColor)
Q_PROPERTY(float alpha READ getAlpha WRITE setAlpha)
Q_PROPERTY(QUrl imageURL READ getImageURL WRITE setImageURL)
public:
ImageOverlay();
~ImageOverlay();
void init(QGLWidget* parent);
void render();
public slots:
//public slots:
// getters
bool getVisible() const { return _visible; }
int getX() const { return _bounds.x(); }
int getY() const { return _bounds.y(); }
int getWidth() const { return _bounds.width(); }
@ -55,12 +48,13 @@ public slots:
QScriptValue getProperties();
// setters
void setVisible(bool visible) { _visible = visible; }
void setX(int x) { _bounds.setX(x); }
void setY(int y) { _bounds.setY(y); }
void setWidth(int width) { _bounds.setWidth(width); }
void setHeight(int height) { _bounds.setHeight(height); }
void setBounds(const QRect& bounds) { _bounds = bounds; }
void setClipFromSource(const QRect& bounds) { _fromImage = bounds; }
void setClipFromSource(const QRect& bounds) { _fromImage = bounds; _wantClipFromImage = true; }
void setBackgroundColor(const xColor& color) { _backgroundColor = color; }
void setAlpha(float alpha) { _alpha = alpha; }
void setImageURL(const QUrl& url);
@ -79,8 +73,10 @@ private:
QRect _fromImage; // where from in the image to sample
float _alpha;
xColor _backgroundColor;
bool _renderImage;
bool _textureBound;
bool _visible; // should the overlay be drawn at all
bool _renderImage; // is there an image associated with this overlay, or is it just a colored rectangle
bool _textureBound; // has the texture been bound
bool _wantClipFromImage;
};