ImageStrip widget for 6.2-nightly

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

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

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…

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.

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.?

Nothing to do with Vaadin, but see e.g.
this page
, or google for “web image formats”.

Quoting from the linked page:

ok,the added images(GIF,jpeg,png) on grid layout are not displaying on Mozillah browser but woriking well on IE,Chrome(is it compatibility problem?)then how to solve this issue?

Some basics:
0) What OS & what version of Mozilla

  1. Check your server logs for Exceptions
  2. Use a tool like Firebug to examine the DOM and to look at the network traffic
  3. Create an Imagestrip in the main window
  4. Embed the same images in you subwindo

steve

IS it possible if you could post sample implementation as Iam getting NullPointerException as well at readImageResource(ImageStrip.java:592)…

here is my code:

imageStrip = new ImageStrip();
File img= new File(“/projects/rasp/uploads/pdf1.jpg”);
FileResource fr = new FileResource(img, getApplication());

    imageStrip.setAnimated(true);

    // Make imageStrip to behave like select
    imageStrip.setSelectable(true);

    // Set size of the box surrounding the images
    imageStrip.setImageBoxWidth(140);
    imageStrip.setImageBoxHeight(140);

    // Set maximum size of the images
    imageStrip.setImageMaxWidth(125);
    imageStrip.setImageMaxHeight(125);
    imageStrip.addListener(this);
    imageStrip.addImage(fr);
	verticalSplitPanel.setSecondComponent(imageStrip);

Great work Peter!

Is it possible to add captions?

Hi Peter!

Very nice Add-on! :wink: But I still miss the possibility to add a label to the images! This feature would be great!

Thanks!

Florian

I can’t get it to animate. Everyone got it to animate?

Hi Peter,

I use ImageStrip in a Vaadin Portlet Application in Liferay and it works as expected. The only issue i see is after the page has finished loading (all pictures are shown) first click into the ImageStrip (select Picture or push next/previous button) initiates a server request lasting about 60seconds (and i connot figure out what is going on there). After the first request ended all subsequent navigation with the ImageStrip works immediately.

When i set a breakpoint in my Portlet (extending VaadinPortlet) the breakpoint gets called after the 60seconds, so i think the delay is occuring on the client side (between clicking into ImageStrip and request arriving at the server).

With firebug i can see that the first request is:
…: /UIDL/
p_p_cacheability: cacheLevelPage
p_p_col_count: 1
p_p_col_id: column-1
p_p_id:

p_p_lifecycle: 2
p_p_mode: view
p_p_resource_id: APP
p_p_state: normal
v-uiId: 0

The request post data is:
03759ef1-6762-4c85-a1a9-4dd95feca711[[“0”,“com.vaadin.shared.ui.ui.UIServerRpc”,“resize”,[“1286”,“1160”,“1633”,“494”]
],[“994”,“com.vaadin.shared.ui.gridlayout.GridLayoutServerRpc”,“layoutClick”,[{“altKey”:false, “relativeX”:“349”, “relativeY”:“1”, “type”:“8”, “shiftKey”:false, “button”:“LEFT”, “clientY”:“460”, “metaKey”:false, “clientX”:“349”, “ctrlKey”:false},“995”]
]]

And the request response data is:
for(;;);[{“changes” :
, “state”:{}, “types”:{“996”:“11”}, “hierarchy”:{“996”:}, “rpc” :
, “meta” : {}, “resources” : {}, “timings”:[4401, 0]
}]

Can anybody tell me where to search for the issue?

Regards
Michael

Hi ,

I’m getting the following warning while running the below code
Widgetset ‘com.vaadin.DefaultWidgetSet’ does not contain implementation for org.vaadin.peter.imagestrip.ImageStrip. Check its component connector’s @Connect mapping, widgetsets GWT module description file and re-compile your widgetset. In case you have downloaded a vaadin add-on package, you might want to refer to add-on instructions.
Previously I use to get NullPointerException

protected void init(VaadinRequest request) {
final VerticalLayout layout = new VerticalLayout();
layout.setMargin(true);
setContent(layout);
ImageStrip strip=new ImageStrip();
strip.setAnimated(true);
strip.setSelectable(true);
strip.setImageBoxWidth(140);
strip.setImageBoxHeight(140);
strip.setImageMaxWidth(125);
strip.setImageMaxHeight(125);
layout.addComponent(strip);
File img= new File(“/home/guts/Pictures/bugs.jpg”);
FileResource fr = new FileResource(img);
strip.addImage(fr);

Could anybody tell me where I’m going wrong ?

Hi Sivaram,

you have to build your own widget set.

https://vaadin.com/book/vaadin6/-/page/gwt.widgetset.html


https://vaadin.com/book/vaadin7/-/page/clientside.compiling.html

Thanks for the help . I have compiled the widget set and now I have TestuiWidgetset.gwt.xml in my project . But it is still giving the same warning .
Widgetset.gwt.xml looks as follows .


Has it fixed I am having the same problem :frowning:

Hi,

I think you don’t use your WidgetSet. If your widgetset only inherits org.vaadin.peter.imagestrip.ImageStripApplicationWidgetset, all vaadin’s UI components should not be loaded.

First your widgetset should look like this:

[font=courier new]
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.5.1//EN" "http://google-web-toolkit.googlecode.com/svn/tags/2.5.1/distro-source/core/src/gwt-module.dtd">
<module>
    <inherits name="com.vaadin.DefaultWidgetSet" />
    <inherits name="org.vaadin.peter.imagestrip.ImageStripApplicationWidgetset" />
</module>
[/font]

Second check your loaded resources in your web browser (F12 => Network) and look at the widgetset being loaded. There should be a JavaScript file named like …/VAADIN/widgetsets/my.company.widgetset.MyWidgetSet/my.company.widgetset.MyWidgetSet.nocache.js?1411630764288. Of course names and nocache-Parameter varies. If the standard vaadin widgetset is not loaded, check your web container configurations.

Hi Frans,
I’m trying to use you StripImage modification without success. Could you please send me the complete modification codebase as you purpose ?
Many thanks

Hi All ,
still i am getting NP , when add images , can you please give me piece of code. that would help me.

// Add few images to the strip using different methods
    strip.addImage("navigation/NavigationBarImages/ConfigureToolbar.png");