Resize images in qx.ui.container.SlideBar

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

Resize images in qx.ui.container.SlideBar

florian_im-conepts
Hello everybody!

Actually I am developing a navigation bar (inline application) for an image gallery with Qooxdoo 0.8 (r14067). There are already thumbnails available at the server but unfortunately they are still too large. Instead of creating new, smaller thumbnails I would prefer to resize them with qooxdoo, i.e. the browser, but everything I have tried resulted in clipped, not resized images. Has anybody an idea, how to get this done?
Reply | Threaded
Open this post in threaded view
|

Re: Re size images in qx.ui.container.SlideBar

Sebastian Werner
Hi Florian,

can you please create a small demo using the slidebar and send attach it
to a mail or upload a ZIP somewhere, so we can play with it. Thanks.

Sebastian


florian_im-conepts schrieb:
> Hello everybody!
>
> Actually I am developing a navigation bar (inline application) for an image
> gallery with Qooxdoo 0.8 (r14067). There are already thumbnails available at
> the server but unfortunately they are still too large. Instead of creating
> new, smaller thumbnails I would prefer to resize them with qooxdoo, i.e. the
> browser, but everything I have tried resulted in clipped, not resized
> images. Has anybody an idea, how to get this done?


-------------------------------------------------------------------------
Sponsored by: SourceForge.net Community Choice Awards: VOTE NOW!
Studies have shown that voting for your favorite open source project,
along with a healthy diet, reduces your potential for chronic lameness
and boredom. Vote Now at http://www.sourceforge.net/community/cca08
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Re size images in qx.ui.container.SlideBar

florian_im-conepts
Ok, I have set up a demopage where you can see the gallery in action and download the sources.

Florian

Sebastian Werner wrote
Hi Florian,

can you please create a small demo using the slidebar and send attach it
to a mail or upload a ZIP somewhere, so we can play with it. Thanks.

Sebastian


florian_im-conepts schrieb:
> Hello everybody!
>
> Actually I am developing a navigation bar (inline application) for an image
> gallery with Qooxdoo 0.8 (r14067). There are already thumbnails available at
> the server but unfortunately they are still too large. Instead of creating
> new, smaller thumbnails I would prefer to resize them with qooxdoo, i.e. the
> browser, but everything I have tried resulted in clipped, not resized
> images. Has anybody an idea, how to get this done?


-------------------------------------------------------------------------
Sponsored by: SourceForge.net Community Choice Awards: VOTE NOW!
Studies have shown that voting for your favorite open source project,
along with a healthy diet, reduces your potential for chronic lameness
and boredom. Vote Now at http://www.sourceforge.net/community/cca08
_______________________________________________
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: Re size images in qx.ui.container.SlideBar

florian_im-conepts
Sorry, I fogot the URL:

demopage

florian_im-conepts wrote
Ok, I have set up a demopage where you can see the gallery in action and download the sources.

Florian

Sebastian Werner wrote
Hi Florian,

can you please create a small demo using the slidebar and send attach it
to a mail or upload a ZIP somewhere, so we can play with it. Thanks.

Sebastian


florian_im-conepts schrieb:
> Hello everybody!
>
> Actually I am developing a navigation bar (inline application) for an image
> gallery with Qooxdoo 0.8 (r14067). There are already thumbnails available at
> the server but unfortunately they are still too large. Instead of creating
> new, smaller thumbnails I would prefer to resize them with qooxdoo, i.e. the
> browser, but everything I have tried resulted in clipped, not resized
> images. Has anybody an idea, how to get this done?


-------------------------------------------------------------------------
Sponsored by: SourceForge.net Community Choice Awards: VOTE NOW!
Studies have shown that voting for your favorite open source project,
along with a healthy diet, reduces your potential for chronic lameness
and boredom. Vote Now at http://www.sourceforge.net/community/cca08
_______________________________________________
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: Re size images in qx.ui.container.SlideBar

Alexander Back
Hi Florian,

it is not possible to use the image widget for such a purpose. The image
widget itself is no "img" element itself, it is represented with a "div"
element with a CSS background-image. So there is no way to resize the
image widget to the desired width and height.
As a workaround you can use the HtmlEmbed widget and embed there a real
"img" element.

Hope this helps,
   Alex

florian_im-conepts wrote:

> Sorry, I fogot the URL:
>
> http://qooxdoo.2f-cms.com/load.php?name=Fotogalerie&file=image&id=1&pic_no=0&cat=2&alone=0
> demopage
>
>
> florian_im-conepts wrote:
>> Ok, I have set up a demopage where you can see the gallery in action and
>> download the sources.
>>
>> Florian
>>
>>
>> Sebastian Werner wrote:
>>> Hi Florian,
>>>
>>> can you please create a small demo using the slidebar and send attach it
>>> to a mail or upload a ZIP somewhere, so we can play with it. Thanks.
>>>
>>> Sebastian
>>>
>>>
>>> florian_im-conepts schrieb:
>>>> Hello everybody!
>>>>
>>>> Actually I am developing a navigation bar (inline application) for an
>>>> image
>>>> gallery with Qooxdoo 0.8 (r14067). There are already thumbnails
>>>> available at
>>>> the server but unfortunately they are still too large. Instead of
>>>> creating
>>>> new, smaller thumbnails I would prefer to resize them with qooxdoo, i.e.
>>>> the
>>>> browser, but everything I have tried resulted in clipped, not resized
>>>> images. Has anybody an idea, how to get this done?

-------------------------------------------------------------------------
Sponsored by: SourceForge.net Community Choice Awards: VOTE NOW!
Studies have shown that voting for your favorite open source project,
along with a healthy diet, reduces your potential for chronic lameness
and boredom. Vote Now at http://www.sourceforge.net/community/cca08
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Re size images in qx.ui.container.SlideBar

Fabian Jakobs
Administrator
Hi Florian,

> it is not possible to use the image widget for such a purpose. The image
> widget itself is no "img" element itself, it is represented with a "div"
> element with a CSS background-image. So there is no way to resize the
> image widget to the desired width and height.
> As a workaround you can use the HtmlEmbed widget and embed there a real
> "img" element.
>
> Hope this helps,
>    Alex
>
>  
In qooxdoo 0.8 there will be two image classes.

1. qx.ui.basic.Image:

This class uses DIV elements with background image to anable image
clipping (aka image sprites) it is used in all internal wigets like
buttons, tree folders, ... The image sizes are provided in a
preprocessing stage by the build system. This imporves the overall
performance but only works for local images. It is the default image class.


2. <img> tag wrapper (name to discuss)

This widget will allow you to insert an image using the img tag and
hence allow for scaling. Further you can use it to display images, which
are not part of the qooxdoo application. This class is what you would
need but we have not implemented it yet. For the time being you can
follow Alexander's suggestion.


Best Fabian






> florian_im-conepts wrote:
>  
>> Sorry, I fogot the URL:
>>
>> http://qooxdoo.2f-cms.com/load.php?name=Fotogalerie&file=image&id=1&pic_no=0&cat=2&alone=0
>> demopage
>>
>>
>> florian_im-conepts wrote:
>>    
>>> Ok, I have set up a demopage where you can see the gallery in action and
>>> download the sources.
>>>
>>> Florian
>>>
>>>
>>> Sebastian Werner wrote:
>>>      
>>>> Hi Florian,
>>>>
>>>> can you please create a small demo using the slidebar and send attach it
>>>> to a mail or upload a ZIP somewhere, so we can play with it. Thanks.
>>>>
>>>> Sebastian
>>>>
>>>>
>>>> florian_im-conepts schrieb:
>>>>        
>>>>> Hello everybody!
>>>>>
>>>>> Actually I am developing a navigation bar (inline application) for an
>>>>> image
>>>>> gallery with Qooxdoo 0.8 (r14067). There are already thumbnails
>>>>> available at
>>>>> the server but unfortunately they are still too large. Instead of
>>>>> creating
>>>>> new, smaller thumbnails I would prefer to resize them with qooxdoo, i.e.
>>>>> the
>>>>> browser, but everything I have tried resulted in clipped, not resized
>>>>> images. Has anybody an idea, how to get this done?
>>>>>          
>
> -------------------------------------------------------------------------
> Sponsored by: SourceForge.net Community Choice Awards: VOTE NOW!
> Studies have shown that voting for your favorite open source project,
> along with a healthy diet, reduces your potential for chronic lameness
> and boredom. Vote Now at http://www.sourceforge.net/community/cca08
> _______________________________________________
> qooxdoo-devel mailing list
> [hidden email]
> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>
>
>  


--
Fabian Jakobs
JavaScript Framework Developer

1&1 Internet AG
Brauerstraße 48
76135 Karlsruhe

Amtsgericht Montabaur HRB 6484

Vorstand: Henning Ahlert, Ralph Dommermuth, Matthias Ehrlich, Thomas Gottschlich, Matthias Greve, Robert Hoffmann, Markus Huhn, Oliver Mauss, Achim Weiss
Aufsichtsratsvorsitzender: Michael Scheeren


-------------------------------------------------------------------------
Sponsored by: SourceForge.net Community Choice Awards: VOTE NOW!
Studies have shown that voting for your favorite open source project,
along with a healthy diet, reduces your potential for chronic lameness
and boredom. Vote Now at http://www.sourceforge.net/community/cca08
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Re size images in qx.ui.container.SlideBar

florian_im-conepts
Thank you Alexander and Fabian for your answers, they led me on the right way so that I could solve my problem. I did it like Alexander suggested, i.e. I created manually an <img/> tag and inserted it with qx.ui.embed.HtmlEmbed. Everyone who is interested in this, can view the demo or download the sources on my demopage I posted above.

In order to implement the scroll functionality of my "next" and "previous picture" buttons I had to make the methods qx.ui.container.SlideBar._scrollForward/Back public and modify them a little (get the diff here).

Florian

Fabian Jakobs wrote
Hi Florian,

> it is not possible to use the image widget for such a purpose. The image
> widget itself is no "img" element itself, it is represented with a "div"
> element with a CSS background-image. So there is no way to resize the
> image widget to the desired width and height.
> As a workaround you can use the HtmlEmbed widget and embed there a real
> "img" element.
>
> Hope this helps,
>    Alex
>
>  
In qooxdoo 0.8 there will be two image classes.

1. qx.ui.basic.Image:

This class uses DIV elements with background image to anable image
clipping (aka image sprites) it is used in all internal wigets like
buttons, tree folders, ... The image sizes are provided in a
preprocessing stage by the build system. This imporves the overall
performance but only works for local images. It is the default image class.


2.  tag wrapper (name to discuss)

This widget will allow you to insert an image using the img tag and
hence allow for scaling. Further you can use it to display images, which
are not part of the qooxdoo application. This class is what you would
need but we have not implemented it yet. For the time being you can
follow Alexander's suggestion.


Best Fabian






> florian_im-conepts wrote:
>  
>> Sorry, I fogot the URL:
>>
>> http://qooxdoo.2f-cms.com/load.php?name=Fotogalerie&file=image&id=1&pic_no=0&cat=2&alone=0
>> demopage
>>
>>
>> florian_im-conepts wrote:
>>    
>>> Ok, I have set up a demopage where you can see the gallery in action and
>>> download the sources.
>>>
>>> Florian
>>>
>>>
>>> Sebastian Werner wrote:
>>>      
>>>> Hi Florian,
>>>>
>>>> can you please create a small demo using the slidebar and send attach it
>>>> to a mail or upload a ZIP somewhere, so we can play with it. Thanks.
>>>>
>>>> Sebastian
>>>>
>>>>
>>>> florian_im-conepts schrieb:
>>>>        
>>>>> Hello everybody!
>>>>>
>>>>> Actually I am developing a navigation bar (inline application) for an
>>>>> image
>>>>> gallery with Qooxdoo 0.8 (r14067). There are already thumbnails
>>>>> available at
>>>>> the server but unfortunately they are still too large. Instead of
>>>>> creating
>>>>> new, smaller thumbnails I would prefer to resize them with qooxdoo, i.e.
>>>>> the
>>>>> browser, but everything I have tried resulted in clipped, not resized
>>>>> images. Has anybody an idea, how to get this done?
>>>>>          
>
> -------------------------------------------------------------------------
> Sponsored by: SourceForge.net Community Choice Awards: VOTE NOW!
> Studies have shown that voting for your favorite open source project,
> along with a healthy diet, reduces your potential for chronic lameness
> and boredom. Vote Now at http://www.sourceforge.net/community/cca08
> _______________________________________________
> qooxdoo-devel mailing list
> qooxdoo-devel@lists.sourceforge.net
> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>
>
>  


--
Fabian Jakobs
JavaScript Framework Developer

1&1 Internet AG
Brauerstraße 48
76135 Karlsruhe

Amtsgericht Montabaur HRB 6484

Vorstand: Henning Ahlert, Ralph Dommermuth, Matthias Ehrlich, Thomas Gottschlich, Matthias Greve, Robert Hoffmann, Markus Huhn, Oliver Mauss, Achim Weiss
Aufsichtsratsvorsitzender: Michael Scheeren


-------------------------------------------------------------------------
Sponsored by: SourceForge.net Community Choice Awards: VOTE NOW!
Studies have shown that voting for your favorite open source project,
along with a healthy diet, reduces your potential for chronic lameness
and boredom. Vote Now at http://www.sourceforge.net/community/cca08
_______________________________________________
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: Re size images in qx.ui.container.SlideBar

Fabian Jakobs
Administrator
florian_im-conepts schrieb:

> Thank you Alexander and Fabian for your answers, they led me on the right way
> so that I could solve my problem. I did it like Alexander suggested, i.e. I
> created manually an &lt;img/&gt; tag and inserted it with
> qx.ui.embed.HtmlEmbed. Everyone who is interested in this, can view the demo
> or download the sources on my demopage I posted above.
>
> In order to implement the scroll functionality of my "next" and "previous
> picture" buttons I had to make the methods
> qx.ui.container.SlideBar._scrollForward/Back public and modify them a little
> ( http://n2.nabble.com/file/n362902/scrollForward_Back_public.diff get the
> diff here ).
>
>  
Hi Florian,

would you open a bug for your patch? Just create a bugzilla account and
attach the patch and the last paragraph of you mail as description.

Did you know about the method "scrollChildIntoView" on qx.core.Widget?
You can use it to scroll any child widget into the visible area of the
widget. Maybe this is even better suited for your purpose.

Best Fabian


P.S.
The 'build' version in your demo app really boosts startup performance

--
Fabian Jakobs
JavaScript Framework Developer

1&1 Internet AG
Brauerstraße 48
76135 Karlsruhe

Amtsgericht Montabaur HRB 6484

Vorstand: Henning Ahlert, Ralph Dommermuth, Matthias Ehrlich, Thomas Gottschlich, Matthias Greve, Robert Hoffmann, Markus Huhn, Oliver Mauss, Achim Weiss
Aufsichtsratsvorsitzender: Michael Scheeren


-------------------------------------------------------------------------
Sponsored by: SourceForge.net Community Choice Awards: VOTE NOW!
Studies have shown that voting for your favorite open source project,
along with a healthy diet, reduces your potential for chronic lameness
and boredom. Vote Now at http://www.sourceforge.net/community/cca08
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Re size images in qx.ui.container.SlideBar

florian_im-conepts
Hi Fabian,

I opened a new bug report (#1051) for my little patch.

You are absolutely right, "scrollChildIntoView" on qx.core.Widget would have solved my problem in a convenient way (don't know, why I oversaw it) - I have already tested it.  The only difference is, that with my solution, you have control over the amount of pixels to scroll.

Regards, Florian
 

> -----Ursprüngliche Nachricht-----
> Von: [hidden email] [mailto:qooxdoo-devel-
> [hidden email]] Im Auftrag von Fabian Jakobs
> Gesendet: Montag, 7. Juli 2008 18:56
> An: qooxdoo Development
> Betreff: Re: [qooxdoo-devel] Re size images in qx.ui.container.SlideBar
>
> florian_im-conepts schrieb:
> > Thank you Alexander and Fabian for your answers, they led me on the
> right way
> > so that I could solve my problem. I did it like Alexander suggested,
> i.e. I
> > created manually an &lt;img/&gt; tag and inserted it with
> > qx.ui.embed.HtmlEmbed. Everyone who is interested in this, can view
> the demo
> > or download the sources on my demopage I posted above.
> >
> > In order to implement the scroll functionality of my "next" and
> "previous
> > picture" buttons I had to make the methods
> > qx.ui.container.SlideBar._scrollForward/Back public and modify them a
> little
> > ( http://n2.nabble.com/file/n362902/scrollForward_Back_public.diff
> get the
> > diff here ).
> >
> >
> Hi Florian,
>
> would you open a bug for your patch? Just create a bugzilla account and
> attach the patch and the last paragraph of you mail as description.
>
> Did you know about the method "scrollChildIntoView" on qx.core.Widget?
> You can use it to scroll any child widget into the visible area of the
> widget. Maybe this is even better suited for your purpose.
>
> Best Fabian
>
>
> P.S.
> The 'build' version in your demo app really boosts startup performance
>
> --
> Fabian Jakobs
> JavaScript Framework Developer
>
> 1&1 Internet AG
> Brauerstraße 48
> 76135 Karlsruhe
>
> Amtsgericht Montabaur HRB 6484
>
> Vorstand: Henning Ahlert, Ralph Dommermuth, Matthias Ehrlich, Thomas
> Gottschlich, Matthias Greve, Robert Hoffmann, Markus Huhn, Oliver
> Mauss, Achim Weiss
> Aufsichtsratsvorsitzender: Michael Scheeren
>
>
> -----------------------------------------------------------------------
> --
> Sponsored by: SourceForge.net Community Choice Awards: VOTE NOW!
> Studies have shown that voting for your favorite open source project,
> along with a healthy diet, reduces your potential for chronic lameness
> and boredom. Vote Now at http://www.sourceforge.net/community/cca08
> _______________________________________________
> qooxdoo-devel mailing list
> [hidden email]
> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
-------------------------------------------------------------------------
Sponsored by: SourceForge.net Community Choice Awards: VOTE NOW!
Studies have shown that voting for your favorite open source project,
along with a healthy diet, reduces your potential for chronic lameness
and boredom. Vote Now at http://www.sourceforge.net/community/cca08
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel