Mirrors/overte-HifiExperiments
3
0
Fork 0
mirror of https://github.com/HifiExperiments/overte.git synced 2025-07-23 04:49:14 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

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
Show stats Download patch file Download diff file Expand all files Collapse all files

125
examples/overlaysExample.js
View file

@ -18,6 +18,61 @@
QRect(170,100,62,40), QRect(0,80,62,40)); 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({ var toolA = Overlays.addOverlay({
x: 100, x: 100,
y: 100, y: 100,
@ -25,11 +80,77 @@ var toolA = Overlays.addOverlay({
height: 40, height: 40,
subImage: { x: 0, y: 0, width: 62, 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", imageURL: "https://s3-us-west-1.amazonaws.com/highfidelity-public/images/hifi-interface-tools.svg",
backgroundColor: { red: 255, green: 0, blue: 255}, backgroundColor: { red: 255, green: 255, blue: 255},
alpha: 1.0 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() { function scriptEnding() {
Overlays.deleteOverlay(toolA); 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); 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), _textureID(0),
_alpha(DEFAULT_ALPHA), _alpha(DEFAULT_ALPHA),
_backgroundColor(DEFAULT_BACKGROUND_COLOR), _backgroundColor(DEFAULT_BACKGROUND_COLOR),
_visible(true),
_renderImage(false), _renderImage(false),
_textureBound(false) _textureBound(false),
_wantClipFromImage(false)
{ {
} }
void ImageOverlay::init(QGLWidget* parent) { void ImageOverlay::init(QGLWidget* parent) {
qDebug() << "ImageOverlay::init() parent=" << parent; qDebug() << "ImageOverlay::init() parent=" << parent;
_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) { void ImageOverlay::setImageURL(const QUrl& url) {
// TODO: are we creating too many QNetworkAccessManager() when multiple calls to setImageURL are made? // TODO: are we creating too many QNetworkAccessManager() when multiple calls to setImageURL are made?
QNetworkAccessManager* manager = new QNetworkAccessManager(this); QNetworkAccessManager* manager = new QNetworkAccessManager(this);
@ -51,24 +47,18 @@ void ImageOverlay::setImageURL(const QUrl& url) {
} }
void ImageOverlay::replyFinished(QNetworkReply* reply) { void ImageOverlay::replyFinished(QNetworkReply* reply) {
qDebug() << "ImageOverlay::replyFinished() reply=" << reply;
// replace our byte array with the downloaded data // replace our byte array with the downloaded data
QByteArray rawData = reply->readAll(); QByteArray rawData = reply->readAll();
_textureImage.loadFromData(rawData); _textureImage.loadFromData(rawData);
_renderImage = true; _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() { void ImageOverlay::render() {
//qDebug() << "ImageOverlay::render _textureID=" << _textureID << "_bounds=" << _bounds; if (!_visible) {
return; // do nothing if we're not visible
}
if (_renderImage && !_textureBound) { if (_renderImage && !_textureBound) {
_textureID = _parent->bindTexture(_textureImage); _textureID = _parent->bindTexture(_textureImage);
_textureBound = true; _textureBound = true;
@ -79,17 +69,25 @@ void ImageOverlay::render() {
glBindTexture(GL_TEXTURE_2D, _textureID); glBindTexture(GL_TEXTURE_2D, _textureID);
} }
const float MAX_COLOR = 255; 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 imageWidth = _textureImage.width();
float imageHeight = _textureImage.height(); 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); glBegin(GL_QUADS);
if (_renderImage) { if (_renderImage) {
glTexCoord2f(x, 1.0f - y); glTexCoord2f(x, 1.0f - y);
@ -123,6 +121,7 @@ QScriptValue ImageOverlay::getProperties() {
// TODO: handle only setting the included values... // TODO: handle only setting the included values...
void ImageOverlay::setProperties(const QScriptValue& properties) { void ImageOverlay::setProperties(const QScriptValue& properties) {
//qDebug() << "ImageOverlay::setProperties()... properties=" << &properties;
QScriptValue bounds = properties.property("bounds"); QScriptValue bounds = properties.property("bounds");
if (bounds.isValid()) { if (bounds.isValid()) {
QRect boundsRect; QRect boundsRect;
@ -132,20 +131,48 @@ void ImageOverlay::setProperties(const QScriptValue& properties) {
boundsRect.setHeight(bounds.property("height").toVariant().toInt()); boundsRect.setHeight(bounds.property("height").toVariant().toInt());
setBounds(boundsRect); setBounds(boundsRect);
} else { } else {
setX(properties.property("x").toVariant().toInt()); QRect oldBounds = getBounds();
setY(properties.property("y").toVariant().toInt()); QRect newBounds = oldBounds;
setWidth(properties.property("width").toVariant().toInt());
setHeight(properties.property("height").toVariant().toInt()); 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"); QScriptValue subImageBounds = properties.property("subImage");
if (subImageBounds.isValid()) { if (subImageBounds.isValid()) {
QRect subImageRect; QRect subImageRect = _fromImage;
subImageRect.setX(subImageBounds.property("x").toVariant().toInt()); if (subImageBounds.property("x").isValid()) {
subImageRect.setY(subImageBounds.property("y").toVariant().toInt()); subImageRect.setX(subImageBounds.property("x").toVariant().toInt());
subImageRect.setWidth(subImageBounds.property("width").toVariant().toInt()); }
subImageRect.setHeight(subImageBounds.property("height").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); setClipFromSource(subImageRect);
qDebug() << "set subImage to " << getClipFromSource();
} }
QScriptValue imageURL = properties.property("imageURL"); 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 { class ImageOverlay : QObject {
Q_OBJECT 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: public:
ImageOverlay(); ImageOverlay();
~ImageOverlay(); ~ImageOverlay();
void init(QGLWidget* parent); void init(QGLWidget* parent);
void render(); void render();
public slots: //public slots:
// getters // getters
bool getVisible() const { return _visible; }
int getX() const { return _bounds.x(); } int getX() const { return _bounds.x(); }
int getY() const { return _bounds.y(); } int getY() const { return _bounds.y(); }
int getWidth() const { return _bounds.width(); } int getWidth() const { return _bounds.width(); }
@ -55,12 +48,13 @@ public slots:
QScriptValue getProperties(); QScriptValue getProperties();
// setters // setters
void setVisible(bool visible) { _visible = visible; }
void setX(int x) { _bounds.setX(x); } void setX(int x) { _bounds.setX(x); }
void setY(int y) { _bounds.setY(y); } void setY(int y) { _bounds.setY(y); }
void setWidth(int width) { _bounds.setWidth(width); } void setWidth(int width) { _bounds.setWidth(width); }
void setHeight(int height) { _bounds.setHeight(height); } void setHeight(int height) { _bounds.setHeight(height); }
void setBounds(const QRect& bounds) { _bounds = bounds; } 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 setBackgroundColor(const xColor& color) { _backgroundColor = color; }
void setAlpha(float alpha) { _alpha = alpha; } void setAlpha(float alpha) { _alpha = alpha; }
void setImageURL(const QUrl& url); void setImageURL(const QUrl& url);
@ -79,8 +73,10 @@ private:
QRect _fromImage; // where from in the image to sample QRect _fromImage; // where from in the image to sample
float _alpha; float _alpha;
xColor _backgroundColor; xColor _backgroundColor;
bool _renderImage; bool _visible; // should the overlay be drawn at all
bool _textureBound; 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;
}; };