ImageStrip widget for 6.2-nightly

Peter · October 30, 2009, 11:54am

Hello fellow Vaadin users! I’m releasing my first Vaadin 6.2-nightly widget called ImageStrip.

ImageStrip is a general purpose image browser widget that makes it easy for developer to append collection of images or thumbnails to Vaadin application. ImageStrip is lightweight and flexible widget that can be scaled to any size and it can also be positioned horizontally or vertically. Images are lazyloaded to client-side as server-side implementation only sends the amount of images that will fit to widget’s area.

ImageStrip comes with built in support for sliding animation but it can also be turned off. Other features are server-side stored image-index that will maintain it’s state as other Vaadin widgets do too. This means that if the same instance of widget is reloaded, visible images will still be at the same positions where they were left. Server-side API allows developer to set width and height parameters for images in the widget. This way horizontal strip can easily contain vertical images and vice-versa. ImageStrip widget can also be themed with just a couple of css classes.

Please try out two demo applications of ImageStrip demonstrating
horizontal
and
vertical
vertical alignments of widget. Sources to this widget can be found from the
incubator
.

Dmitri · October 30, 2009, 4:49pm

Look very nice, great widget, Peter !

P.S. Does it scale image to a thumbnail at the server side and can the thumbnail size be adjusted ?

Peter · November 2, 2009, 7:46am

Images are currently scaled on the client side. This is because widget’s size and number of visible images can be adjusted so that instead of showing thumbnails, widget could show larger images too. For example, it’s possible to display just one large image instead of 10 thumbnails.

The original idea of this widget is to be a thumbnail browser but during development, I realized that there are other usage scenarios too.

Thumbnail size can be adjusted from the server-side API. Two demo applications demonstrate this adjustment where in horizontal demo one of the horizontal widgets has wider thumbnails and one of the vertical widgets has taller thumbnails than the others. Widget automatically scales and positions the images to thumbnail container’s center position.

Dmitri · November 2, 2009, 7:53am

Cool !
I think this is fine, as one can prepare a scaled version of the images at the server side before inserting them into the widget in case this will be necessary. Again, great widget, already found it a place in my further project !

Deleted9 · April 12, 2010, 3:05pm

Hello and thank you for a nice component.

However, I’m wondering if you could add an option to choose to which way the images will move when you click the arrow? For me (and my co-coders on the project) the current direction feels counter intuitive, so an ability to change it would be welcomed :).

Eugene · June 23, 2010, 6:58am

Great widget, but curently support only File and URL. What about images fetched from database in byte arrays?
Very need this feature.
Best regards.

Eugene · June 23, 2010, 8:58am

When I try add ImageStrip component to modal window - throw NullPointer exeption in

private Image readImageResource(Resource resource)

method - getApplication() return null.

Raman · August 25, 2010, 5:29am

Very nice but pretty rough. Some feedback:

There is a System.out.println everytime changeVariables is called.
scrollToRight corrupts the display (on Chrome at least) until the user presses one of the arrows.
There is no ability to remove an image once it is added – you have to create a whole new image strip and copy the replace the current one with the new one – which in itself is not easy since you have to keep an external data structure with the image information, since the ImageStrip object doesn’t provide too many useful accessors.
Can’t add images by position – only at the end.
Can’t provide captions for each image.
It only supports FileResource and ExternalResource.
The ValueChangeEvent provides an Image object from event.getProperty() but it isn’t too useful. It only provides the image index (which you can’t do much with, since ImageStrip has no accessors that use the index), and the image Resource (which doesn’t match the value originally passed in since this is the scaled Resource).

Cheers,
Raman

Mike5 · January 14, 2011, 10:22pm

Probably need to wait until your window is added to the main window before calling getApplication(). You know when this happens by overriding the attach() method.

Anton · May 8, 2011, 7:21pm

Hi Peter,

I always get a NullPointerException. My code:

ImageStrip slideShow;
slideShow = new ImageStrip();
slideShow.setImageBoxWidth(140);
slideShow.setImageBoxHeight(140);
slideShow.setImageMaxWidth(125);
slideShow.setImageMaxHeight(125);
slideShow.setAnimated (true);
slideShow.setMaxAllowed(3);
addComponent(slideShow);
try {
slideShow.addImage (new ExternalResource (new URL (“http://files.spar-radar.com/images/offerimages/empty.jpg”)));
} catch (MalformedURLException e) { }

I get following error:

Caused by: java.lang.NullPointerException
at com.vaadin.terminal.FileResource.(FileResource.java:68)
at org.vaadin.peter.imagestrip.ImageStrip.readImageResource(ImageStrip.java:611)
at org.vaadin.peter.imagestrip.ImageStrip.addImageInternal(ImageStrip.java:628)
at org.vaadin.peter.imagestrip.ImageStrip.addImage(ImageStrip.java:381)
at com.sparradar.client.ui.views.windows.ScreenShotWindow.(ScreenShotWindow.java:34)

line 34 is where I add the image.

the image is available, I have no idea, what I’m doing wrong.

Thanks,

Anton

Frans · May 16, 2011, 1:32pm

Hi Peter,

We’re using your ImageStrip component in one of our projects and it works like a charm and looks great.

I’ve added two features to it that we needed and that I’d like to make available to the community:

labels underneath the images
an order number superimposed on the images

The attachment shows what it looks like with these options enabled.

I’ve attached the svn diff output, but I can also send the entire codebase, or check it in somewhere; let me know!

Greetings,
Frans
11694.txt (13.1 KB)

Jai2 · May 31, 2011, 8:34am

Hi Peter,

We’re using your ImageStrip component in one of our projects and it works great.

I’ve added some new features to it that we needed and that I’d like to make available to the community:
The features are:

Image Labels On top of image
Image description as a tooltip for image object
a image toolbar which contains
Add New Image
Remove Selected Image
Remove All Images
Display Enlarged View
Add Image Caption/Title
Add Image Description
Options as a toolbar menu items

The attachment shows what it looks like with these options enabled.

let me know! how can i contribute these features

Greetings,
Jai Soni

Mallikarjuna · June 28, 2011, 10:06am

Hi could you email sample project code for ImageStrip to mallik.vala@gmail.com

My code is throwing the same exception too

Darth · August 7, 2011, 11:43pm

Anton, I get the same exception. It appears that getApplication() is returning null. I think the culprit here is we are trying to add the images to the image strip before the image strip has been added to a live component. The trick is to call addImages or any function that calls getApplication() after the widget is attached. For example:


final ExternalResource rsrc = ...
ImageStrip strip = new ImageStrip() {
            @Override
            public void attach() {
                super.attach();
               this.addImage(rsrc);
            }
        };

Hope this helps.

Peter · August 19, 2011, 6:36am

Hey and thank you for the nice patch. This looks really nice and will certainly be added to next version of ImageStrip with proper API to turn these features on or off.

ImageStrip’s source is by the way available from the BitBucket at https://bitbucket.org/peterl1084/vaadin-imagestrip They also host issue tracker for bugs and suggestions. Please post all bug reports and further patches there. I’m looking forward for updated version of ImageStrip dealing with issues reported here during september.

Tullio · October 31, 2011, 11:23am

I believe a nice feature could be the possibility, in a vertical strip to put more than one image on the same row, or better a flowing strip which puts on the horizontal dimension as much images as it can and then goes to the next row (like HTML does).
Tks
Tullio

mukthyar · November 23, 2011, 8:50am

Hi peter lehto,
Thank you for your dedicated work on Vaadin, I am using Image scaler add on to get original size of the image when user click on the Embedded image .see the below code


                   public void click(com.vaadin.event.MouseEvents.ClickEvent event) {
                                ImageScaler imageScaler = new ImageScaler();
                                try {
                                     ImageSize is=new ImageSize(getApplication().getContext().getBaseDirectory()+"/VAADIN/themes/agridoc/media/images/phone.jpg");
                                     iheight=is.height;
                                     iwidth=is.width;                               
                                     }                               
                                catch (InterruptedException e1) {
                                    e1.printStackTrace();
                                    }
                               
                                MediaImagesView m=new MediaImagesView(agridocApplication);                                    
                                imageScaler.setImage(new ThemeResource("media\\images\\phone.jpg"),iwidth,iheight);
                               
                                Window w=m.imageSubWindow(imageScaler,iwidth,iheight,path);   
                                w.setResizable(true);
                                agridocApplication.getMainWindow().addWindow(w);
                                        }                                       
                                    });

    public Window imageSubWindow(Component c,int iwidth,int iheight,String path) {         
        Window subWindow=new Window("Selected Image");
        c.setWidth(iwidth);
        c.setHeight(iheight);
        subWindow.addComponent(button);       
        subWindow.addComponent(c);
        subWindow.setModal(true);
        subWindow.setWidth(iwidth+50);
        subWindow.setHeight(iheight+100);
        subWindow.setVisible(true);
        return subWindow;
    }

issues in image scaler
1)This code is working fine on chrome browser,IE but not Mozilla(unable to display the image on Mozillah firefox,Internet Explorer ,i know that the problem is coming by adding images on Grid layout please tell me the solution if any body know.

2)unable to display the scaled .bmp images using any Browser please fix this issue on Image scalar add on.
3)
please fix this issue…

Thanks
azam

mukthyar · November 23, 2011, 2:04pm

hi,
On grid layout i added images,these image are displayed one IE and chorme browser ,but not able to display on Mozilla browser please fix this issue…

Henri2 · November 24, 2011, 7:25am

Please
do not post the same message multiple times in different threads
, and do not just tell people to fix an issue when the issue is most likely not in Vaadin but in your code and images.

As others have written in reply to your previous messages, the problem is probably not in Vaadin nor in the ImageScaler add-on, but in that the types of images you are trying to use are not suitable for use on the web. Many people are successfully using Vaadin and ImageScaler to display images, and I am quite certain nobody would if it would not work for them in all the standard browsers.

Are you able to load them at all (directly, not via a web application) in those browsers? Even if the answer is yes, that does not necessarily mean they would be suitable for use on the web, but it is a good first test. Vaadin or ImageScaler do not magically convert the images from BMP to something that might work better on the web, they just let the browser display them. GIF, JPEG and PNG images should work on all browsers, for other formats there are no guarantees - and this has nothing to do with Vaadin.

Others have also already told you to convert them to a suitable image type, with pointers to conversion tools.

mukthyar · November 24, 2011, 8:02am

Hello,
thank you for a nice advice to convert the Bmp image to supported format(PNG,jpeg,GIF),please tell why the added images on grid layout are not displaying on Mozillah browser but woriking well on IE,Chrome(is it compatibility problem).then how to solve it.?