CODEWITHSUNDEEP
javascriptjavahtmlimagegwt
nicstu
nicstu

Reputation: 33

SetVisibleRect messes with the image (gwt)

So I have a program in gwt which lists several images on the right and upon hovering over one of them, some additional info is shown in a custom widget to the left, including a part of the image and a special background, which is a part of a greater background-image itself, for the widget depending on the image.

So far everything works fine and both images are basically shown correctly. However, the background-image has the "broken image"-icon in the top left corner even though it is displayed perfectly and also updating whenever I hover over another image on the right. What really matters, though, is that the part of the image I hovered over is only shown a split second before the background-image is loaded because the background image will cover the other image. Leaving out the background causes the part of the image to be shown normally, but with the "broken image"-icon as well. Not using setVisibleRect() on both images lets everything work perfectly, but the images shown are then wrong of course. So far this is my code from the custom widget to show the desired part of the image that was hovered over:

public void setBild(Image bild) {
    this.bild.setUrl(bild.getUrl());
    this.bild.setVisibleRect(38,61,134,94);
    this.bild.getElement().getStyle().setZIndex(2);
}

where this.bild is an image in my custom widget.

Also in the method that gets the background based on some info i have that:

        if(!hintergrund.isAttached()){
        this.add(hintergrund);
        this.setWidgetLeftWidth(hintergrund, 0, Unit.PX, 230, Unit.PX);
        this.setWidgetTopHeight(hintergrund, 0, Unit.PX, 650, Unit.PX);
    }



    if(k.getFarbe().equals("rot")) hintergrund.setVisibleRect(460, 0, 230, 650);
    if(k.getFarbe().equals("hell")) hintergrund.setVisibleRect(230, 0, 230, 650);
    if(k.getFarbe().equals("braun")) hintergrund.setVisibleRect(0, 0, 230, 650);
    if(k.getFarbe().equals("grun")) hintergrund.setVisibleRect(0, 650, 230, 650);
    if(k.getFarbe().equals("grau")) hintergrund.setVisibleRect(230, 650, 230, 650);
    if(k.getFarbe().equals("lila;braun")) hintergrund.setVisibleRect(460, 650, 230, 650);

    hintergrund.getElement().getStyle().setZIndex(1);

where hintergrund is the background-image.

When I hover over an image, my comiler gives me the message

[WARN] 404 - GET /labyrinthweb/clear.cache.gif (127.0.0.1) 1393 bytes


Request headers
      Host: 127.0.0.1:8888
      User-Agent: Mozilla/5.0 (Windows NT 6.1; rv:46.0) Gecko/20100101 Firefox/46.0
      Accept: image/png,image/*;q=0.8,*/*;q=0.5
      Accept-Language: en-US,en;q=0.5
      Accept-Encoding: gzip, deflate
      Referer: http://127.0.0.1:8888/LabyrinthWeb.html
      Cookie: optionen=310; JSESSIONID=vyr356eyxfph1lzazwqw8rkn8
      Connection: keep-alive
   Response headers
      Content-Type: text/html;charset=ISO-8859-1
      Cache-Control: must-revalidate,no-cache,no-store
      Content-Length: 1393

I also declared

<script type="text/javascript" language="javascript" 
src="labyrinthweb/labyrinthweb.nocache.js"></script>

in my html-file and renamed my module to labyrinthweb in my *.gwt.xml-file.

Can anybody help me out there?

Upvotes: 0

Views: 80

Answers (2)

nicstu
nicstu

Reputation: 33

Another gwt recompile actually fixed everything :)

Upvotes: 0

Adam
Adam

Reputation: 5599

This is how Image widget works: it's url attribute points to a default 1x1 pixel transparent gif. To be able to do image cropping (and other things) the real image is shown as a background of the widget. It is easy to do setVisibleRect this way, the widget just sets background-position attribute and alters the size.

Your problem is that you miss that default transparent gif clear.cache.gif:

[WARN] 404 - GET /labyrinthweb/clear.cache.gif (127.0.0.1) 1393 bytes

That's why you see a broken-image icon on top of your image.

clear.cache.gif should be located in the war\module_name folder and copied there every time you compile your project. So you should try the following:

  • recompile the project
  • check if the clear.cache.gif is in the war\module_name folder
  • clear your browser cache

I hope this will help.

Upvotes: 2

Related Questions