From f6adce255d355d0914c3604553ae8bb77a46b2ef Mon Sep 17 00:00:00 2001
From: ZappoMan <bradh@konamoxt.com>
Date: Sat, 15 Feb 2014 16:26:34 -0800
Subject: [PATCH] more work on image overlays

---
 examples/overlaysExample.js       | 125 +++++++++++++++++++++++++++++-
 interface/src/ui/ImageOverlay.cpp | 106 ++++++++++++++++---------
 interface/src/ui/ImageOverlay.h   |  22 +++---
 3 files changed, 202 insertions(+), 51 deletions(-)

diff --git a/examples/overlaysExample.js b/examples/overlaysExample.js
index d297e2525d..36e88ea43c 100644
--- a/examples/overlaysExample.js
+++ b/examples/overlaysExample.js
@@ -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);
diff --git a/interface/src/ui/ImageOverlay.cpp b/interface/src/ui/ImageOverlay.cpp
index b85f05f557..7024cff533 100644
--- a/interface/src/ui/ImageOverlay.cpp
+++ b/interface/src/ui/ImageOverlay.cpp
@@ -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();
+    }
 }
 
 
diff --git a/interface/src/ui/ImageOverlay.h b/interface/src/ui/ImageOverlay.h
index d6fd289fdc..84838954b6 100644
--- a/interface/src/ui/ImageOverlay.h
+++ b/interface/src/ui/ImageOverlay.h
@@ -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;
 };