Loading images with original dimensions in qx.ui.embed.Gallery (0.7.3)

classic Classic list List threaded Threaded
9 messages Options
Reply | Threaded
Open this post in threaded view
|

Loading images with original dimensions in qx.ui.embed.Gallery (0.7.3)

Dalmazio Brisinda
Hello,

Does anyone know how to load an image into the gallery with it's original dimensions intact? Presently, I'm just setting the thumbwidth and thumbheight properties to some arbitrary value, but the images are always scaled unnaturally.

Is there a way to get this information from the image DOM element that corresponds to the actual dimensions of the image?

Best,
Dalmazio

Reply | Threaded
Open this post in threaded view
|

Re: Loading images with original dimensions in qx.ui.embed.Gallery (0.7.3)

Alexander Back
Hi Dalmazio,

Dalmazio Brisinda wrote:
> Does anyone know how to load an image into the gallery with it's original
> dimensions intact? Presently, I'm just setting the thumbwidth and
> thumbheight properties to some arbitrary value, but the images are always
> scaled unnaturally.
This is not supported by the gallery widget. All images get scaled down
to the size of the thumbWidh/thumbHeight values. However, if you want to
change this behaviour you can sublcass the gallery widget and overwrite
the "createImageCell" method to suit to your needs.

> Is there a way to get this information from the image DOM element that
> corresponds to the actual dimensions of the image?
If you look at the demo [0] you can see that the "galleryList" map also
holds information of width and height. These infos are handed in to the
gallery widget. So you can use these two fields to set the actual sizes
of the images.

cheers,
   Alex

[0] http://demo.qooxdoo.org/current/demobrowser/html/example/Gallery_1.html

-------------------------------------------------------------------------
This SF.Net email is sponsored by the Moblin Your Move Developer's challenge
Build the coolest Linux based applications with Moblin SDK & win great prizes
Grand prize is a trip for two to an Open Source event anywhere in the world
http://moblin-contest.org/redirect.php?banner_id=100&url=/
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Loading images with original dimensions in qx.ui.embed.Gallery (0.7.3)

Dalmazio Brisinda
Hi Alex,

Okay, I'll have a look at the createImageCell() and subclass as you suggest for performing the scaling.

However, on your second point -- this is part of the problem I'm having. The width and height attributes are not actually being used in the Gallery Widget. Looking more closely at the source for the Gallery widget we have the following in createImageCell():

inode.width = d.thumbWidth + 2;
inode.height = d.thumbHeight + 2;

It looks as if the width and height properties (assigned to d.width and d.height) are entirely unused in the Gallery widget. That the img element width height properties are being assigned the value of the thumbWidth and thumbHeight properties. I'm thinking that this might have been unintentional, but I'm not sure. But I can deal with this by subclassing and changing the functionality.

But even more importantly, even if I subclass the Gallery widget to actually use the supplied width and height properties, where do I get the *actual* width and height of the image just loaded, so I can pass correct width and height info to the Gallery widget? This information doesn't seem to be readily available anywhere. It almost seems like I need to load the image first (perhaps in an invisible iframe?) then get the x and y dimensions, then load the image again in the visible gallery with the now known x and y dimensions. Not sure about this though. Any thoughts on this?

Incidentally, I was able to get some degree of control over the scaling -- but not complete control by changing the createImageCell() method to only assign values to the properties if d.thumbWidth (and d.thumbHeight) are infact defined. If they are not, then it defaults to the browser's default behaviour of loading the images without scaling (no width or height attributes). And if only one attribute is defined, then the default browser behavior seems to be to scale to that dimension (automatically scaling the other proportionally). Of course, the problem still exists that we don't know which dimension to choose since we don't know the original size of the image.

So it all comes back to getting acccess to the original dimensions of the image.

Any ideas?

Best,
Dalmazio



Alexander Back wrote
Hi Dalmazio,

Dalmazio Brisinda wrote:
> Does anyone know how to load an image into the gallery with it's original
> dimensions intact? Presently, I'm just setting the thumbwidth and
> thumbheight properties to some arbitrary value, but the images are always
> scaled unnaturally.
This is not supported by the gallery widget. All images get scaled down
to the size of the thumbWidh/thumbHeight values. However, if you want to
change this behaviour you can sublcass the gallery widget and overwrite
the "createImageCell" method to suit to your needs.

> Is there a way to get this information from the image DOM element that
> corresponds to the actual dimensions of the image?
If you look at the demo [0] you can see that the "galleryList" map also
holds information of width and height. These infos are handed in to the
gallery widget. So you can use these two fields to set the actual sizes
of the images.

cheers,
   Alex

[0] http://demo.qooxdoo.org/current/demobrowser/html/example/Gallery_1.html

-------------------------------------------------------------------------
This SF.Net email is sponsored by the Moblin Your Move Developer's challenge
Build the coolest Linux based applications with Moblin SDK & win great prizes
Grand prize is a trip for two to an Open Source event anywhere in the world
http://moblin-contest.org/redirect.php?banner_id=100&url=/
_______________________________________________
qooxdoo-devel mailing list
qooxdoo-devel@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Loading images with original dimensions in qx.ui.embed.Gallery (0.7.3)

Dalmazio Brisinda
Aside from my previous query, looks like I might have another bug fix. This bug fix allows the event "loadComplete" to fire. In the member function imageOnComplete() the following code:

    if (this._processedImages == this._listSize) {      
        this.dispatchEvent(new qx.event.type.Event("loadComplete"), true);
    }

should be replaced with:

    if (this._processedImages == this._list.length) {      
        this.dispatchEvent(new qx.event.type.Event("loadComplete"), true);
    }

Since the this._listSize member variable is not kept up-to-date with the actual size of the list. In any case, it's probably better to just get the actual size of the list when needed from the list itself.

Also, the following lines needs to be added to the end of the following member functions so the number of processed images are kept in sync when images are deleted:

removeAll : function() {
    ...
    this._processedImages = 0;  // add this
}

and

deleteByPosition : function(vPos) {
    ...
    this._processedImages--;  // add this
}

This works for me when adding images (even after deleting images), the "loadComplete" now fires. But please confirm in case I've missed some rationale behind the original logic.

Best,
Dalmazio




Dalmazio Brisinda wrote
Hi Alex,

Okay, I'll have a look at the createImageCell() and subclass as you suggest for performing the scaling.

However, on your second point -- this is part of the problem I'm having. The width and height attributes are not actually being used in the Gallery Widget. Looking more closely at the source for the Gallery widget we have the following in createImageCell():

inode.width = d.thumbWidth + 2;
inode.height = d.thumbHeight + 2;

It looks as if the width and height properties (assigned to d.width and d.height) are entirely unused in the Gallery widget. That the img element width height properties are being assigned the value of the thumbWidth and thumbHeight properties. I'm thinking that this might have been unintentional, but I'm not sure. But I can deal with this by subclassing and changing the functionality.

But even more importantly, even if I subclass the Gallery widget to actually use the supplied width and height properties, where do I get the *actual* width and height of the image just loaded, so I can pass correct width and height info to the Gallery widget? This information doesn't seem to be readily available anywhere. It almost seems like I need to load the image first (perhaps in an invisible iframe?) then get the x and y dimensions, then load the image again in the visible gallery with the now known x and y dimensions. Not sure about this though. Any thoughts on this?

Incidentally, I was able to get some degree of control over the scaling -- but not complete control by changing the createImageCell() method to only assign values to the properties if d.thumbWidth (and d.thumbHeight) are infact defined. If they are not, then it defaults to the browser's default behaviour of loading the images without scaling (no width or height attributes). And if only one attribute is defined, then the default browser behavior seems to be to scale to that dimension (automatically scaling the other proportionally). Of course, the problem still exists that we don't know which dimension to choose since we don't know the original size of the image.

So it all comes back to getting acccess to the original dimensions of the image.

Any ideas?

Best,
Dalmazio



Alexander Back wrote
Hi Dalmazio,

Dalmazio Brisinda wrote:
> Does anyone know how to load an image into the gallery with it's original
> dimensions intact? Presently, I'm just setting the thumbwidth and
> thumbheight properties to some arbitrary value, but the images are always
> scaled unnaturally.
This is not supported by the gallery widget. All images get scaled down
to the size of the thumbWidh/thumbHeight values. However, if you want to
change this behaviour you can sublcass the gallery widget and overwrite
the "createImageCell" method to suit to your needs.

> Is there a way to get this information from the image DOM element that
> corresponds to the actual dimensions of the image?
If you look at the demo [0] you can see that the "galleryList" map also
holds information of width and height. These infos are handed in to the
gallery widget. So you can use these two fields to set the actual sizes
of the images.

cheers,
   Alex

[0] http://demo.qooxdoo.org/current/demobrowser/html/example/Gallery_1.html

-------------------------------------------------------------------------
This SF.Net email is sponsored by the Moblin Your Move Developer's challenge
Build the coolest Linux based applications with Moblin SDK & win great prizes
Grand prize is a trip for two to an Open Source event anywhere in the world
http://moblin-contest.org/redirect.php?banner_id=100&url=/
_______________________________________________
qooxdoo-devel mailing list
qooxdoo-devel@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Loading images with original dimensions in qx.ui.embed.Gallery (0.7.3)

Alexander Back
In reply to this post by Dalmazio Brisinda
Hi Dalmazio,

see my comments below.

Dalmazio Brisinda wrote:

> However, on your second point -- this is part of the problem I'm having. The
> width and height attributes are not actually being used in the Gallery
> Widget. Looking more closely at the source for the Gallery widget we have
> the following in createImageCell():
>
> inode.width = d.thumbWidth + 2;
> inode.height = d.thumbHeight + 2;
>
> It looks as if the width and height properties (assigned to d.width and
> d.height) are entirely unused in the Gallery widget. That the img element
> width height properties are being assigned the value of the thumbWidth and
> thumbHeight properties. I'm thinking that this might have been
> unintentional, but I'm not sure. But I can deal with this by subclassing and
> changing the functionality.
Yes you are right, these values are not used by the gallery widget.
However, if you subclass the gallery widget you can use them and as the
data structure is a map you can also easily add additional fields
without breaking the existing
functionality.

> But even more importantly, even if I subclass the Gallery widget to actually
> use the supplied width and height properties, where do I get the *actual*
> width and height of the image just loaded, so I can pass correct width and
> height info to the Gallery widget? This information doesn't seem to be
> readily available anywhere. It almost seems like I need to load the image
> first (perhaps in an invisible iframe?) then get the x and y dimensions,
> then load the image again in the visible gallery with the now known x and y
> dimensions. Not sure about this though. Any thoughts on this?

You can use the preloader manager of qooxdoo to achieve this.

--snip--
var preloader =
qx.io.image.PreloaderManager.getInstance().create("http://YOUR-IMAGE-URL");
preloader.addEventListener("load", function(e){
   // "this" refers to the preloader object
   // -> http://demo.qooxdoo.org/current/apiviewer/#qx.io.image.Preloader

   var height = this.getHeight();
   var width  = this.getWidth();
  });
--snip--

This way qooxdoo is preloading the image and you can get the width and
height infos from the preloader and add then the right values to the
gallery.

Hope this helps,
   Ale

-------------------------------------------------------------------------
This SF.Net email is sponsored by the Moblin Your Move Developer's challenge
Build the coolest Linux based applications with Moblin SDK & win great prizes
Grand prize is a trip for two to an Open Source event anywhere in the world
http://moblin-contest.org/redirect.php?banner_id=100&url=/
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Loading images with original dimensions in qx.ui.embed.Gallery (0.7.3)

Alexander Back
In reply to this post by Dalmazio Brisinda
Hi Dalmazio,

many thanks for the fixes! I've just committed them to the legacy_0_7_x
branch (Revision #14912)

cheers,
   Alex

Dalmazio Brisinda wrote:

> Aside from my previous query, looks like I might have another bug fix. This
> bug fix allows the event "loadComplete" to fire. In the member function
> imageOnComplete() the following code:
>
>     if (this._processedImages == this._listSize) {      
>         this.dispatchEvent(new qx.event.type.Event("loadComplete"), true);
>     }
>
> should be replaced with:
>
>     if (this._processedImages == this._list.length) {      
>         this.dispatchEvent(new qx.event.type.Event("loadComplete"), true);
>     }
>
> Since the this._listSize member variable is not kept up-to-date with the
> actual size of the list. In any case, it's probably better to just get the
> actual size of the list when needed from the list itself.
>
> Also, the following lines needs to be added to the end of the following
> member functions so the number of processed images are kept in sync when
> images are deleted:
>
> removeAll : function() {
>     ...
>     this._processedImages = 0;  // add this
> }
>
> and
>
> deleteByPosition : function(vPos) {
>     ...
>     this._processedImages--;  // add this
> }
>
> This works for me when adding images (even after deleting images), the
> "loadComplete" now fires. But please confirm in case I've missed some
> rationale behind the original logic.
>
> Best,
> Dalmazio

-------------------------------------------------------------------------
This SF.Net email is sponsored by the Moblin Your Move Developer's challenge
Build the coolest Linux based applications with Moblin SDK & win great prizes
Grand prize is a trip for two to an Open Source event anywhere in the world
http://moblin-contest.org/redirect.php?banner_id=100&url=/
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Loading images with original dimensions in qx.ui.embed.Gallery (0.7.3)

Dalmazio Brisinda
In reply to this post by Alexander Back
Hi Alex,

Your image preloader approach worked superbly. I'm now able to scale my images to fit within the image cell -- and I didn't even have to subclass qx.ui.embed.Gallery! Mucho thanks for this.

Best,
Dalmazio



Alexander Back wrote
Hi Dalmazio,

see my comments below.

Dalmazio Brisinda wrote:
> However, on your second point -- this is part of the problem I'm having. The
> width and height attributes are not actually being used in the Gallery
> Widget. Looking more closely at the source for the Gallery widget we have
> the following in createImageCell():
>
> inode.width = d.thumbWidth + 2;
> inode.height = d.thumbHeight + 2;
>
> It looks as if the width and height properties (assigned to d.width and
> d.height) are entirely unused in the Gallery widget. That the img element
> width height properties are being assigned the value of the thumbWidth and
> thumbHeight properties. I'm thinking that this might have been
> unintentional, but I'm not sure. But I can deal with this by subclassing and
> changing the functionality.
Yes you are right, these values are not used by the gallery widget.
However, if you subclass the gallery widget you can use them and as the
data structure is a map you can also easily add additional fields
without breaking the existing
functionality.

> But even more importantly, even if I subclass the Gallery widget to actually
> use the supplied width and height properties, where do I get the *actual*
> width and height of the image just loaded, so I can pass correct width and
> height info to the Gallery widget? This information doesn't seem to be
> readily available anywhere. It almost seems like I need to load the image
> first (perhaps in an invisible iframe?) then get the x and y dimensions,
> then load the image again in the visible gallery with the now known x and y
> dimensions. Not sure about this though. Any thoughts on this?

You can use the preloader manager of qooxdoo to achieve this.

--snip--
var preloader =
qx.io.image.PreloaderManager.getInstance().create("http://YOUR-IMAGE-URL");
preloader.addEventListener("load", function(e){
   // "this" refers to the preloader object
   // -> http://demo.qooxdoo.org/current/apiviewer/#qx.io.image.Preloader

   var height = this.getHeight();
   var width  = this.getWidth();
  });
--snip--

This way qooxdoo is preloading the image and you can get the width and
height infos from the preloader and add then the right values to the
gallery.

Hope this helps,
   Ale

-------------------------------------------------------------------------
This SF.Net email is sponsored by the Moblin Your Move Developer's challenge
Build the coolest Linux based applications with Moblin SDK & win great prizes
Grand prize is a trip for two to an Open Source event anywhere in the world
http://moblin-contest.org/redirect.php?banner_id=100&url=/
_______________________________________________
qooxdoo-devel mailing list
qooxdoo-devel@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Loading images with original dimensions in qx.ui.embed.Gallery (0.7.3)

Dalmazio Brisinda
In reply to this post by Alexander Back
Hi Alex,

I've made improved bug fixes to the qx.ui.embed.Gallery source since the last go, that will allow the loadComplete to fire more reliably. Specifically, with the previous bug fix, it still doesn't work when appending a list of images to the existing list via addFromPartialList() or addFromUpdatedList(). So the new and improved bug fix involves undoing the previous bug fix (i.e., undoing modifications to the _processedImages instance variable in the removeAll() and deleteByPosition() member functions) and doing the following instead:

1. Change the following:

    addFromPartialList : function(vPartialList)
    {            
      for (var i=0, a=vPartialList, l=a.length; i<l; i++) {
        this._list.push(a[i]);
        this._frame.appendChild(this.createCell(a[i], i));
      }
    },

to:

    addFromPartialList : function(vPartialList)
    {      
      this._listSize = this._list.length + vPartialList.length;
     
      for (var i=0, a=vPartialList, l=a.length; i<l; i++) {
        this._list.push(a[i]);
        this._frame.appendChild(this.createCell(a[i], i));
      }
    },

2. Change the following:

    addFromUpdatedList : function(vNewList)
    {
      for (var a=vNewList, l=a.length, i=this._list.length; i<l; i++) {
        this._frame.appendChild(this.createCell(a[i], i));
      }

      this._list = vNewList;
    },

to

    addFromUpdatedList : function(vNewList)
    {
      this._listSize = vNewList.length;
   
      for (var a=vNewList, l=a.length, i=this._list.length; i<l; i++) {
        this._frame.appendChild(this.createCell(a[i], i));
      }

      this._list = vNewList;
    },

3. Make imageOnComplete() look like this (i.e., how it looked originally before any mods):

    imageOnComplete : function()
    {
      this._processedImages++;
     
      if (this._processedImages == this._listSize) {      
        this.dispatchEvent(new qx.event.type.Event("loadComplete"), true);
      }
    },

We use the _listSize instance variable in imageOnComplete() afterall since it refers to the full combined image list size once all images have been appended to the current list -- provided it is kept up to date by the modifications in 1 & 2. If we do this we don't need to update the _processedImages instance variable in any of the remove/delete methods -- these methods can stay as they originally were (i.e., removeAll() and deleteByPosition() can be left as they were prior to any mods).

I think this should be it.

(Famous last words...)

Best,
Dalmazio




<quote author="Alexander Back">
Hi Dalmazio,

many thanks for the fixes! I've just committed them to the legacy_0_7_x
branch (Revision #14912)

cheers,
   Alex

Dalmazio Brisinda wrote:
> Aside from my previous query, looks like I might have another bug fix. This
> bug fix allows the event "loadComplete" to fire. In the member function
> imageOnComplete() the following code:
>
>     if (this._processedImages == this._listSize) {      
>         this.dispatchEvent(new qx.event.type.Event("loadComplete"), true);
>     }
>
> should be replaced with:
>
>     if (this._processedImages == this._list.length) {      
>         this.dispatchEvent(new qx.event.type.Event("loadComplete"), true);
>     }
>
> Since the this._listSize member variable is not kept up-to-date with the
> actual size of the list. In any case, it's probably better to just get the
> actual size of the list when needed from the list itself.
>
> Also, the following lines needs to be added to the end of the following
> member functions so the number of processed images are kept in sync when
> images are deleted:
>
> removeAll : function() {
>     ...
>     this._processedImages = 0;  // add this
> }
>
> and
>
> deleteByPosition : function(vPos) {
>     ...
>     this._processedImages--;  // add this
> }
>
> This works for me when adding images (even after deleting images), the
> "loadComplete" now fires. But please confirm in case I've missed some
> rationale behind the original logic.
>
> Best,
> Dalmazio

-------------------------------------------------------------------------
This SF.Net email is sponsored by the Moblin Your Move Developer's challenge
Build the coolest Linux based applications with Moblin SDK & win great prizes
Grand prize is a trip for two to an Open Source event anywhere in the world
http://moblin-contest.org/redirect.php?banner_id=100&url=/
_______________________________________________
qooxdoo-devel mailing list
qooxdoo-devel@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel


Reply | Threaded
Open this post in threaded view
|

Re: Loading images with original dimensions in qx.ui.embed.Gallery (0.7.3)

Alexander Back
Hi Dalmazio,

I've commited all your fixes. Thanks!

cheers,
   Alex

Dalmazio Brisinda wrote:

> Hi Alex,
>
> I've made improved bug fixes to the qx.ui.embed.Gallery source since the
> last go, that will allow the loadComplete to fire more reliably.
> Specifically, with the previous bug fix, it still doesn't work when
> appending a list of images to the existing list via addFromPartialList() or
> addFromUpdatedList(). So the new and improved bug fix involves undoing the
> previous bug fix (i.e., undoing modifications to the _processedImages
> instance variable in the removeAll() and deleteByPosition() member
> functions) and doing the following instead:
>
> 1. Change the following:
>
>     addFromPartialList : function(vPartialList)
>     {            
>       for (var i=0, a=vPartialList, l=a.length; i<l; i++) {
>         this._list.push(a[i]);  // added by dalmazio
>         this._frame.appendChild(this.createCell(a[i], i));
>       }
>     },
>
> to:
>
>     addFromPartialList : function(vPartialList)
>     {      
>       this._listSize = this._list.length + vPartialList.length;
>      
>       for (var i=0, a=vPartialList, l=a.length; i<l; i++) {
>         this._list.push(a[i]);  // added by dalmazio
>         this._frame.appendChild(this.createCell(a[i], i));
>       }
>     },
>
> 2. Change the following:
>
>     addFromUpdatedList : function(vNewList)
>     {
>       for (var a=vNewList, l=a.length, i=this._list.length; i<l; i++) {
>         this._frame.appendChild(this.createCell(a[i], i));
>       }
>
>       this._list = vNewList;
>     },
>
> to
>
>     addFromUpdatedList : function(vNewList)
>     {
>       this._listSize = vNewList.length;
>    
>       for (var a=vNewList, l=a.length, i=this._list.length; i<l; i++) {
>         this._frame.appendChild(this.createCell(a[i], i));
>       }
>
>       this._list = vNewList;
>     },
>
> 3. Make imageOnComplete() look like this (i.e., how it looked originally
> before any mods):
>
>     imageOnComplete : function()
>     {
>       this._processedImages++;
>      
>       if (this._processedImages == this._listSize) {      
>         this.dispatchEvent(new qx.event.type.Event("loadComplete"), true);
>       }
>     },
>
> We use the _listSize instance variable in imageOnComplete() afterall since
> it refers to the full combined image list size once all images have been
> appended to the current list -- provided it is kept up to date by the
> modifications in 1 & 2. If we do this we don't need to update the
> _processedImages instance variable in any of the remove/delete methods --
> these methods can stay as they originally were (i.e., removeAll() and
> deleteByPosition() can be left as they were prior to any mods).
>
> I think this should be it.
>
> (Famous last words...)
>
> Best,
> Dalmazio

-------------------------------------------------------------------------
This SF.Net email is sponsored by the Moblin Your Move Developer's challenge
Build the coolest Linux based applications with Moblin SDK & win great prizes
Grand prize is a trip for two to an Open Source event anywhere in the world
http://moblin-contest.org/redirect.php?banner_id=100&url=/
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel