image issues in QxListView

[Hugh Gibson]

> Attached is a simple test.  I have two QxListViews, one using
> a column of type "iconHtml", and the other is using "image".
>
> Each is created with no data rows.
>
> Each has a "Populate" button that will load three rows of data
> into them.  I have attached "before and after" screenshots of
> the list views.
>
> In the iconHtml listview, I get broken images in the empty rows.
>
> In the image listview, I get no broken images, but I get 1x1 images
> (the tiny dots in the screenshot) in the populated rows.

I've started looking at this issue. I hacked the example so it would work against the source code when put in the demo/examples folder.

I'm looking at the "image" column problem first, under FF.

I added code to QxImagePreloader to change the getWidth and getHeight functions to include a debug log of the width and height, along with the image name.

On initial loading I saw a load of this in the debug log:

019058: ../../images/blank.gif: width = 1
019068: ../../images/blank.gif: height = 1

On pressing the Populate button there are no further entries, even though the images are loaded at that point.

The HTML created for the image specified as:

                    images:  { source: "icons/16/thumbnail.png" },

was:
                   
<img width="1" height="1" style="border: 0pt none ; vertical-align: top;" src="../../themes/icons/crystalsvg/16/thumbnail.png"/>

I put in the full path to a picture, just in case the image manager was causing a problem:

                    images:  { source: "d:/abling/packages/ajax/qooxdoo/qooxdoo-play/source/themes/icons/crystalsvg/16/thumbnail.png" },

This gave the HTML:

<img width="1" height="1" style="border: 0pt none ; vertical-align: top;" src="d:/abling/packages/ajax/qooxdoo/qooxdoo-play/source/themes/icons/crystalsvg/16/thumbnail.png"/>

The image preloader is not being called again, so something else is being used to get the image sizes.

Any ideas, Sebastian?

I'll take another look tomorrow.

Hugh

> > Good question. In my test-cases this seems to work always.
> > Can you send us an (small) example which shows this problem?
>
> Attached is a simple test.  I have two QxListViews, one using
> a column of type "iconHtml", and the other is using "image".
>
> Each is created with no data rows.
>
> Each has a "Populate" button that will load three rows of data
> into them.  I have attached "before and after" screenshots of
> the list views.
>
> In the iconHtml listview, I get broken images in the empty rows.
>
> In the image listview, I get no broken images, but I get 1x1 images
> (the tiny dots in the screenshot) in the populated rows.
>
> I don't have any path initialization code in my example JavaScript,
> but I don't think I need it, since I recompiled qooxdoo with custom
> path settings in QxSettings.js.
>
> I hope I'm not doing something wrong and wasting your time.  Maybe
> this time, it will be a legitimate issue!  :-)
>
> Thanks for any insight.

Hugh


-------------------------------------------------------
This SF.Net email is sponsored by xPML, a groundbreaking scripting language
that extends applications into web and mobile media. Attend the live webcast
and join the prime developer group breaking into this new coding territory!
http://sel.as-us.falkag.net/sel?cmd=lnk&kid=110944&bid=241720&dat=121642
_______________________________________________
Qooxdoo-devel mailing list
Qooxdoo-devel@...
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

[Sebastian Werner]

Thank you Jason,

I've added a fix to QxListViewContentCellImage.

Seems that both views are now correctly rendered.

Sebastian



Priebe, Jason schrieb:

> Sebastian Werner wrote:
>
>> Good question. In my test-cases this seems to work always.
>> Can you send us an (small) example which shows this problem?
>
> Attached is a simple test.  I have two QxListViews, one using
> a column of type "iconHtml", and the other is using "image".
>
> Each is created with no data rows.
>
> Each has a "Populate" button that will load three rows of data
> into them.  I have attached "before and after" screenshots of
> the list views.
>
> In the iconHtml listview, I get broken images in the empty rows.
>
> In the image listview, I get no broken images, but I get 1x1 images
> (the tiny dots in the screenshot) in the populated rows.
>
> I don't have any path initialization code in my example JavaScript,
> but I don't think I need it, since I recompiled qooxdoo with custom
> path settings in QxSettings.js.
>
> I hope I'm not doing something wrong and wasting your time.  Maybe
> this time, it will be a legitimate issue!  :-)
>
> Thanks for any insight.
>
> Jason Priebe
> CBC New Media
>
>
> ------------------------------------------------------------------------
>
>
> ------------------------------------------------------------------------
>
>
> ------------------------------------------------------------------------
>

-------------------------------------------------------
This SF.Net email is sponsored by xPML, a groundbreaking scripting language
that extends applications into web and mobile media. Attend the live webcast
and join the prime developer group breaking into this new coding territory!
http://sel.as-us.falkag.net/sel?cmd=lnk&kid=110944&bid=241720&dat=121642
_______________________________________________
Qooxdoo-devel mailing list
Qooxdoo-devel@...
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

[Sebastian Werner]

Priebe, Jason schrieb:

> Hugh Gibson wrote:
>
>> That sounds similar to the problem we were seeing, but that
>> was when we were using "image" columns. It seemed to be some
>> sort of timing issue - sometimes it would work, sometimes it wouldn't.
>>
>> The image HTML was:
>>
>> <img width="1" height="1" style="border: 0pt none ;
>> vertical-align: top;"
>> src="images/han/?img=True&type=110&status=New"/>
>>
>> So perhaps there is a common problem. I stopped investigating
>> the problem because we moved to iconhtml and there were
>> better things to do...
>
> I guess I can pick my poison:
>
>   - iconHtml: broken images on the empty rows (I just verified
>     that this still happens with the latest CVS code, even
>     when I set my paths in QxSettings.js before compiling)

This seems not to be reproduceable here. Could you send an example if
this is any longer true. Thanks.

>
>   - image: 1x1 images for any rows that were empty when the
>     QxListView was created

This should be fixed in CVS.

Sebastian

>
> Just out of curiosity, how did you get that HTML dump for the image?
>
> Jason Priebe
> CBC New Media
>
>
>
> -------------------------------------------------------
> This SF.Net email is sponsored by xPML, a groundbreaking scripting language
> that extends applications into web and mobile media. Attend the live webcast
> and join the prime developer group breaking into this new coding territory!
> http://sel.as-us.falkag.net/sel?cmd=k&kid0944&bid$1720&dat1642
> _______________________________________________
> Qooxdoo-devel mailing list
> Qooxdoo-devel@...
> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

-------------------------------------------------------
This SF.Net email is sponsored by xPML, a groundbreaking scripting language
that extends applications into web and mobile media. Attend the live webcast
and join the prime developer group breaking into this new coding territory!
http://sel.as-us.falkag.net/sel?cmd=lnk&kid=110944&bid=241720&dat=121642
_______________________________________________
Qooxdoo-devel mailing list
Qooxdoo-devel@...
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

[Sebastian Werner]

I've applied something like this to CVS just a few minutes ago.

Sebastian



Priebe, Jason schrieb:

> I've done a pretty deep dive into the source, and I can tell there's
> a lot I have to learn about the internals of QX before I can really
> track this one down.
>
> In the case of iconHtml columns, I'm pretty sure that the problem
> stems from the fact that the QxIconHtml used in the blank rows
> has no icon source, and the QxImageManager expands the URL of "" to "".
> This causes broken images.
>
> I submitted a patch earlier to QxImageManager that would expand ""
> to a blank.gif.  Sebastian wasn't sure that was the right thing to
> do, and I completely understand that.
>
> I just had another thought, and that was to change QxIconHtml to
> only add the image HTML if the icon URI is not "".  This seems
> to fix QxIconHtml under Mozilla, but it still results in a little
> "invisible" 1x1 icon under MSIE.  I did a little digging into this,
> but I'm getting nowhere.  When the QxIconHtml is constructed, it
> has no icon, and no height or width.  I'm not sure how the image
> and height/width are supposed to be reset when you add data rows
> to the QxListView.
>
> But I've attached my patch that fixes the iconHtml columns under
> Mozilla, in case it's of any use.
>
>> -----Original Message-----
>> From: qooxdoo-devel-admin@...
>> [mailto:qooxdoo-devel-admin@...] On Behalf
>> Of Hugh Gibson
>> Sent: Thursday, March 02, 2006 10:23 AM
>> To: qooxdoo-devel@...
>> Subject: Re: [qooxdoo-devel] image issues in QxListView
>>
>>>> Sebastian, any progress on tracking down the sources of these
>>>> problems? It's making icons in list views unusable.
>>> No, this is currently not on my list. Someone other has an
>> interest to
>>> fix it?
>> Well, it's a fundamental problem in qooxdoo so it should go
>> on a list somewhere (now, where is that bug-tracking package? ;-) ).
>>
>> Could you at least take a look at the example code and give a
>> first-guess gut feel on what the problems might be? That
>> would only take you five minutes. Then one of us lesser
>> mortals can take a look.
>>
>> Jason, I work a short week so won't be able to take a look at
>> this until Monday, so if you want to delve into the qooxdoo
>> code over the weekend, be my guest!
>>
>> Hugh
>>
>>
>> -------------------------------------------------------
>> This SF.Net email is sponsored by xPML, a groundbreaking
>> scripting language that extends applications into web and
>> mobile media. Attend the live webcast and join the prime
>> developer group breaking into this new coding territory!
>> http://sel.as-us.falkag.net/sel?cmd=lnk&kid=110944&bid=241720&
>> dat=121642
>> _______________________________________________
>> Qooxdoo-devel mailing list
>> Qooxdoo-devel@...
>> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>>

-------------------------------------------------------
This SF.Net email is sponsored by xPML, a groundbreaking scripting language
that extends applications into web and mobile media. Attend the live webcast
and join the prime developer group breaking into this new coding territory!
http://sel.as-us.falkag.net/sel?cmd=lnk&kid=110944&bid=241720&dat=121642
_______________________________________________
Qooxdoo-devel mailing list
Qooxdoo-devel@...
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

[Hugh Gibson]

> I've added a fix to QxListViewContentCellImage.
>
> Seems that both views are now correctly rendered.

They're correct in FF/Gecko with latest CVS code.

However, in IE6 I get no images in the iconHTML (left hand side) and just dots in the image (right hand side).

Looking at the actual XML in IE I see this for an image on the left:

<IMG style="FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../themes/icons/crystalsvg/16/thumbnail.png',sizingMethod='scale'); VERTICAL-ALIGN: middle; MARGIN-RIGHT: 4px" src="file:///D:/abling/Packages/AJAX/qooxdoo_cvs/qooxdoo/source/images/blank.gif">

I'm not familiar with the FILTER style - is it something that IE adds? However, it's interesting that it has the correct path to the image, whereas the src= entry has the old path.

This appears to be a bug in QxIconHTML._syncHTML - the code explicitly puts the blank image in if the browser is IE:

   vHtml.push(QxImageManager.buildUri(this._mshtml ?
                           QxConst.IMAGE_BLANK : this.getIcon()));

I don't know why that was explicitly done, so I'm not confident of fixing it. However, a patch is attached that might do the job - simply always using this.getIcon().

For the images on the right I get:

<IMG style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; FILTER: ; VERTICAL-ALIGN: top; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px" height=1 src="../../themes/icons/crystalsvg/16/thumbnail.png" width=1>

Hence the source of the dots. The correct path is here but the size is wrong.

I'm looking at this but if you can see the obvious, Sebastian...

Hugh

[Sebastian Werner]

Hugh Gibson schrieb:

>> I've added a fix to QxListViewContentCellImage.
>>
>> Seems that both views are now correctly rendered.
>
> They're correct in FF/Gecko with latest CVS code.
>
> However, in IE6 I get no images in the iconHTML (left hand side) and just dots in the image (right hand side).
>
> Looking at the actual XML in IE I see this for an image on the left:
>
> <IMG style="FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../themes/icons/crystalsvg/16/thumbnail.png',sizingMethod='scale'); VERTICAL-ALIGN: middle; MARGIN-RIGHT: 4px" src="file:///D:/abling/Packages/AJAX/qooxdoo_cvs/qooxdoo/source/images/blank.gif">
>
> I'm not familiar with the FILTER style - is it something that IE adds? However, it's interesting that it has the correct path to the image, whereas the src= entry has the old path.
>
> This appears to be a bug in QxIconHTML._syncHTML - the code explicitly puts the blank image in if the browser is IE:
>
>    vHtml.push(QxImageManager.buildUri(this._mshtml ?
>                            QxConst.IMAGE_BLANK : this.getIcon()));
>
> I don't know why that was explicitly done, so I'm not confident of fixing it. However, a patch is attached that might do the job - simply always using this.getIcon().
>
> For the images on the right I get:
>
> <IMG style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; FILTER: ; VERTICAL-ALIGN: top; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px" height=1 src="../../themes/icons/crystalsvg/16/thumbnail.png" width=1>
>
> Hence the source of the dots. The correct path is here but the size is wrong.
>
> I'm looking at this but if you can see the obvious, Sebastian...

This filter needs the blank source as a rendering canvas for its
alphaimageloader. This loader is needed to make it possible to render
alpha channels in PNGs.

I think the problem of the rendering is, that there is no width and no
height defined for the image. I've currently no idea how we can fix
this, because of we don't have easy access to the separate cells of a
listview.

Sebastian

>
> Hugh



-------------------------------------------------------
This SF.Net email is sponsored by xPML, a groundbreaking scripting language
that extends applications into web and mobile media. Attend the live webcast
and join the prime developer group breaking into this new coding territory!
http://sel.as-us.falkag.net/sel?cmd=lnk&kid=110944&bid=241720&dat=121642
_______________________________________________
Qooxdoo-devel mailing list
Qooxdoo-devel@...
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

[Hugh Gibson]

> This filter needs the blank source as a rendering canvas for its
> alphaimageloader. This loader is needed to make it possible to render
> alpha channels in PNGs.

OK, I see that.
 
> I think the problem of the rendering is, that there is no width and
> no height defined for the image. I've currently no idea how we can
> fix this, because of we don't have easy access to the separate cells
> of a listview.

Changing the example so that explicit width and height are specified solves the problem with the iconHTML images - it works in both IE and FF/Gecko now:

        lv1.getData().push ({
                    pubtime: { text: "2006-02-26" },
                    images:  { icon: "icons/16/thumbnail.png",
                               iconWidth:16,
                               iconHeight:16 },
                    headline: { text: "Headline 1" }

In IE I get:

<IMG style="FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../themes/icons/crystalsvg/16/thumbnail.png',sizingMethod='scale'); VERTICAL-ALIGN: middle; WIDTH: 16px; MARGIN-RIGHT: 4px; HEIGHT: 16px" src="file:///D:/abling/Packages/AJAX/qooxdoo_cvs/qooxdoo/source/images/blank.gif">

That's because the code that follows is calling getIconWidth.

So there is a way of getting an image column into a ListView now - and it's the more powerful version. Yay!

I'll write a snippet.

Hugh


-------------------------------------------------------
This SF.Net email is sponsored by xPML, a groundbreaking scripting language
that extends applications into web and mobile media. Attend the live webcast
and join the prime developer group breaking into this new coding territory!
http://sel.as-us.falkag.net/sel?cmd=lnk&kid=110944&bid=241720&dat=121642
_______________________________________________
Qooxdoo-devel mailing list
Qooxdoo-devel@...
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

[Hugh Gibson]

> I'll write a snippet.

See http://qooxdoo.oss.schlund.de/snippets/images-in-listview

Hugh


-------------------------------------------------------
This SF.Net email is sponsored by xPML, a groundbreaking scripting language
that extends applications into web and mobile media. Attend the live webcast
and join the prime developer group breaking into this new coding territory!
http://sel.as-us.falkag.net/sel?cmd=lnk&kid=110944&bid=241720&dat=121642
_______________________________________________
Qooxdoo-devel mailing list
Qooxdoo-devel@...
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

[Jason Priebe]

Sebastian Werner wrote:
> I've applied something like this to CVS just a few minutes ago.

Something strange is going on with CVS.  I checked it all out and
noticed no real change.  So I went to Sourceforge's CVS browser, and
I don't see any changes to QxListViewContentCellImage (version 1.4)
or to QxImageManager.js (version 1.8).

Are you certain you checked in your changes?  As soon as I can
get them, I'll verify the fixes.

Thanks!

Jason Priebe
CBC New Media


-------------------------------------------------------
This SF.Net email is sponsored by xPML, a groundbreaking scripting language
that extends applications into web and mobile media. Attend the live webcast
and join the prime developer group breaking into this new coding territory!
http://sel.as-us.falkag.net/sel?cmd=lnk&kid0944&bid$1720&dat1642
_______________________________________________
Qooxdoo-devel mailing list
Qooxdoo-devel@...
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

[Hugh Gibson]

> > I've applied something like this to CVS just a few minutes ago.
>
> Something strange is going on with CVS.  I checked it all out and
> noticed no real change.  So I went to Sourceforge's CVS browser, and
> I don't see any changes to QxListViewContentCellImage (version 1.4)
> or to QxImageManager.js (version 1.8).
>
> Are you certain you checked in your changes?  As soon as I can
> get them, I'll verify the fixes

There is a delay before changes are echoed to the public anonymous CVS. As I've got access to the real CVS I checked out from there and the code is fixed.

Hugh


-------------------------------------------------------
This SF.Net email is sponsored by xPML, a groundbreaking scripting language
that extends applications into web and mobile media. Attend the live webcast
and join the prime developer group breaking into this new coding territory!
http://sel.as-us.falkag.net/sel?cmd=lnk&kid=110944&bid=241720&dat=121642
_______________________________________________
Qooxdoo-devel mailing list
Qooxdoo-devel@...
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

[Jason Priebe]

> There is a delay before changes are echoed to the public
> anonymous CVS. As I've got access to the real CVS I checked
> out from there and the code is fixed.

Good news.  Thanks, Hugh!

Jason Priebe
CBC New Media



-------------------------------------------------------
This SF.Net email is sponsored by xPML, a groundbreaking scripting language
that extends applications into web and mobile media. Attend the live webcast
and join the prime developer group breaking into this new coding territory!
http://sel.as-us.falkag.net/sel?cmd=lnk&kid0944&bid$1720&dat1642
_______________________________________________
Qooxdoo-devel mailing list
Qooxdoo-devel@...
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

[Sebastian Werner]

Priebe, Jason schrieb:

> Sebastian Werner wrote:
>> I've applied something like this to CVS just a few minutes ago.
>
> Something strange is going on with CVS.  I checked it all out and
> noticed no real change.  So I went to Sourceforge's CVS browser, and
> I don't see any changes to QxListViewContentCellImage (version 1.4)
> or to QxImageManager.js (version 1.8).
>
> Are you certain you checked in your changes?  As soon as I can
> get them, I'll verify the fixes.

The anonymous CVS is not in sync with the developer CVS. There is a
delay of ~8 hours.

Sebastian

>
> Thanks!
>
> Jason Priebe
> CBC New Media
>
>
> -------------------------------------------------------
> This SF.Net email is sponsored by xPML, a groundbreaking scripting language
> that extends applications into web and mobile media. Attend the live webcast
> and join the prime developer group breaking into this new coding territory!
> http://sel.as-us.falkag.net/sel?cmd=k&kid0944&bid$1720&dat1642
> _______________________________________________
> Qooxdoo-devel mailing list
> Qooxdoo-devel@...
> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

-------------------------------------------------------
This SF.Net email is sponsored by xPML, a groundbreaking scripting language
that extends applications into web and mobile media. Attend the live webcast
and join the prime developer group breaking into this new coding territory!
http://sel.as-us.falkag.net/sel?cmd=lnk&kid=110944&bid=241720&dat=121642
_______________________________________________
Qooxdoo-devel mailing list
Qooxdoo-devel@...
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

[Derrell Lipman]

Hugh had asked about the configurability of the bug tracking and wiki
software, to which I replied:

>>   http://bugs.qooxdoo.org
>>   http://wiki.qooxdoo.org
>>     Bug-tracking and wiki (located on my server)

> This is a very compact, secure bug tracking and wiki program written entirely
> in C (http://cvstrac.org).  Although there is some configurability that an
> administrator can do, the general appearance can not be modified without some
> C code changes.

I take this back.  The appearance can be configured with CSS without any C
code changes, as well as customization of the headers and footers.  There is
much more capability for customizing than I had at first realized.  All of
this can be done by the remote administrator.

Cheers,

Derrell


-------------------------------------------------------
This SF.Net email is sponsored by xPML, a groundbreaking scripting language
that extends applications into web and mobile media. Attend the live webcast
and join the prime developer group breaking into this new coding territory!
http://sel.as-us.falkag.net/sel?cmd=lnk&kid=110944&bid=241720&dat=121642
_______________________________________________
Qooxdoo-devel mailing list
Qooxdoo-devel@...
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel