Re: wicket clickable image with tooltips map

[Maxim Solodovnik]

Unfortunately I have no experience with "wicket-bootstrap 2*"
5.* and 6.* seems to work for us as expected

Maybe you can provide a quickstart application demonstrating the problem?
https://wicket.apache.org/start/quickstart.html


On Sat, 6 Nov 2021 at 13:55, C.S.  wrote:

> Wicket version is 8.12.0
> wicket-bootstrap version is 2.0.15
>
> Until now i am reluctant of trying a higher bootstrap version, since this
> means a migration from Bootstrap 3.x to 4.x (flex model) and editing all my
> html as well.
> So i first have to develop a small test prototype with higher versions only
> for TooltipBehavior.
>
> Thank you for your help
>
> Christos Stieglitz
>


-- 
Best regards,
Maxim

Re: wicket clickable image with tooltips map

[C.S.]

Wicket version is 8.12.0
wicket-bootstrap version is 2.0.15

Until now i am reluctant of trying a higher bootstrap version, since this
means a migration from Bootstrap 3.x to 4.x (flex model) and editing all my
html as well.
So i first have to develop a small test prototype with higher versions only
for TooltipBehavior.

Thank you for your help

Christos Stieglitz

Re: wicket clickable image with tooltips map

[Maxim Solodovnik]

What version of wicket-bootstrap are you using?
Are there any errors in JS console?

from mobile (sorry for typos ;)


On Thu, Nov 4, 2021, 21:52 C.S.  wrote:

> Many thanks Sven and Martin,
>
> Svens suggestion (adding an AjaxEventBehavior("load")) works like a charm.
> Exactly what i was asking.
>
> Now the next problem is with
>
> #de.agilecoders.wicket.core.markup.html.bootstrap.components.TooltipBehavior
>
>
> Allthough the resulting html is now perfect (img tag pointing to a usemap
> which is filled with areas, each containing a tooltip), no tooltip pops up.
> I  have no idea what the cause may be, still debugging the Tooltip class
> and the corresponding JS.
>
> I will check Martins suggestion and give ClientSideImageMap a try.
>
> BTW: Once my code runs, i will be more than happy to contribute a code
> snippet to the wiki or to whatever document you regard more usefull.
>
> Regards
>
> Christos Stieglitz
>

Re: wicket clickable image with tooltips map

[C.S.]

Many thanks Sven and Martin,

Svens suggestion (adding an AjaxEventBehavior("load")) works like a charm.
Exactly what i was asking.

Now the next problem is with
#de.agilecoders.wicket.core.markup.html.bootstrap.components.TooltipBehavior


Allthough the resulting html is now perfect (img tag pointing to a usemap
which is filled with areas, each containing a tooltip), no tooltip pops up.
I  have no idea what the cause may be, still debugging the Tooltip class
and the corresponding JS.

I will check Martins suggestion and give ClientSideImageMap a try.

BTW: Once my code runs, i will be more than happy to contribute a code
snippet to the wiki or to whatever document you regard more usefull.

Regards

Christos Stieglitz

Re: wicket clickable image with tooltips map

[Martin Grigorov]

Hi,

I am not sure how useful it could be for your use case but Wicket also
provides org/apache/wicket/markup/html/link/ClientSideImageMap.java

Demo: https://examples9x.wicket.apache.org/linkomatic/home (the image with
rectangle, circle and triangle).
Source of the demo:
https://github.com/apache/wicket/blob/2e4ddf5621ce60e0d039afa76049040dcaa6b38d/wicket-examples/src/main/java/org/apache/wicket/examples/linkomatic/Home.java#L119-L127

On Wed, Nov 3, 2021 at 8:31 PM Sven Meier  wrote:

> Hi,
>
> the solution from the wiki keeps the buffered image in the component
> tree, that's not a good idea (probably this is why it's transient).
>
> The actual problem is, that all markup (including your refreshingView)
> is rendered first. Then the browser pulls the image data in a second
> request.
>
> Simplest solution is to render twice, once just to get the
> ChartRenderingInfo, and a second time for the actual request for the
> image data.
>
> Another possibility is to:
>
> - leave the area list empty at first
> - render the chart image in the dynamic resource *and* keep the
> ChartRenderingInfo in an instance variable (non-transient)
> - have an AjaxEventBehavior("load") on the image, which re-renders the
> refreshingView and updates the area with the kept ChartRenderingInfo
>
> Have fun
> Sven
>
>
> On 03.11.21 18:38, C.S. wrote:
> > Dear wicket developers,
> >
> > i try to integrate wicket with jfreechart. Wicket wiki contains an
> example
> > under
> >
> https://cwiki.apache.org/confluence/display/WICKET/JFreeChart+with+clickable+imagemap
> > but this code is 11 yrs old and does not work with current versions.
> >
> > Speaking of versions: i must stick with jdk 1.8, which means i cannot
> > upgrade to wicket 9+
> > Using wicket version 8.12.0
> >
> > Goal is to create a usemap list to an image, so image is clickable
> > (contains tooltips).
> > For image i use a NonCachingImage and for the usemap i use a
> RefreshingView.
> >
> > Trouble is, when the RefreshingView renders, the image has no rendering
> > info yet. So the RefreshingView model is empty. Image creates its
> rendering
> > info very late - during onRequest(). RefreshingView is rendered long ago
> at
> > this time.
> >
> > I tried to create the image rendering info before rendering the
> > RefreshingView.
> > This is how it works in the old wiki example. Unfortunately, the new
> > versions throw a StackOverflowException. During Serialization, some
> > JFreeChart methods interact with some Wicket serialization methods. They
> > call each other (via reflexion) some 100s of times until StackOverflow
> > occurs.
> >
> > What would you suggest? Is there a way to refresh the RefreshingView
> > without ajax?
> > Or somehow render the RefreshingView after the image produced its
> rendering
> > info?
> > Or should i use different wicket components? Or wrap/enclose these
> > components under another component (which one? ).
> >
> > Thank you for your help
> >
> > Christos Stieglitz
> >
> > My code:
> >
> > HTML:
> > 
> > 
> >
> > 
> >
> > Java:
> > RefreshingView mapAreas = new RefreshingView<>("area") {
> >@Override
> >protected Iterator> getItemModels() {
> >  ...
> >  // This is called during onRender(). List model is empty
> >  return models.iterator();
> >}
> >
> >@Override
> >protected void populateItem(Item item) {
> >  ChartEntity entity = item.getModelObject();
> >  item.add(new AttributeAppender("shape", entity.getShapeType()));
> >  item.add(new AttributeAppender("coords",
> entity.getShapeCoords()));
> >  item.add(new AttributeAppender("href", "#"));
> >  item.add(new TooltipBehavior(entity.getToolTipText()));
> >}
> >  };
> > mapAreas.setOutputMarkupId(Boolean.TRUE);
> > add(mapAreas);
> >
> > NonCachingImage ch = new NonCachingImage("livedata", Model.of(chart)) {
> >@Override
> >protected DynamicImageResource getImageResource() {
> >  return new DynamicImageResource() {
> >@Override
> >protected byte[] getImageData(IResource.Attributes
> attributes) {
> >  ChartRenderingInfo renderingInfo = new ChartRenderingInfo();
> >  // chart is a JFreeChart
> >  BufferedImage imgbytes = chart.createBufferedImage(imgwidth,
> > imgheight, renderingInfo);
> >
> >  EntityCollection entities =
> renderingInfo.getEntityCollection();
> >  // This is called very late, during onRequest().
> >  // EntityCollection contains now everything is needed,
> >  // but how to call
> >  // RefreshingView.onRender() from here?
> >  // If i put this code anywhere else i get
> > StackOverflowException.
> >  return 

Re: wicket clickable image with tooltips map

[Sven Meier]

Hi,

the solution from the wiki keeps the buffered image in the component 
tree, that's not a good idea (probably this is why it's transient).


The actual problem is, that all markup (including your refreshingView) 
is rendered first. Then the browser pulls the image data in a second 
request.


Simplest solution is to render twice, once just to get the 
ChartRenderingInfo, and a second time for the actual request for the 
image data.


Another possibility is to:

- leave the area list empty at first
- render the chart image in the dynamic resource *and* keep the 
ChartRenderingInfo in an instance variable (non-transient)
- have an AjaxEventBehavior("load") on the image, which re-renders the 
refreshingView and updates the area with the kept ChartRenderingInfo


Have fun
Sven


On 03.11.21 18:38, C.S. wrote:

Dear wicket developers,

i try to integrate wicket with jfreechart. Wicket wiki contains an example
under
https://cwiki.apache.org/confluence/display/WICKET/JFreeChart+with+clickable+imagemap
but this code is 11 yrs old and does not work with current versions.

Speaking of versions: i must stick with jdk 1.8, which means i cannot
upgrade to wicket 9+
Using wicket version 8.12.0

Goal is to create a usemap list to an image, so image is clickable
(contains tooltips).
For image i use a NonCachingImage and for the usemap i use a RefreshingView.

Trouble is, when the RefreshingView renders, the image has no rendering
info yet. So the RefreshingView model is empty. Image creates its rendering
info very late - during onRequest(). RefreshingView is rendered long ago at
this time.

I tried to create the image rendering info before rendering the
RefreshingView.
This is how it works in the old wiki example. Unfortunately, the new
versions throw a StackOverflowException. During Serialization, some
JFreeChart methods interact with some Wicket serialization methods. They
call each other (via reflexion) some 100s of times until StackOverflow
occurs.

What would you suggest? Is there a way to refresh the RefreshingView
without ajax?
Or somehow render the RefreshingView after the image produced its rendering
info?
Or should i use different wicket components? Or wrap/enclose these
components under another component (which one? ).

Thank you for your help

Christos Stieglitz

My code:

HTML:


   


Java:
RefreshingView mapAreas = new RefreshingView<>("area") {
   @Override
   protected Iterator> getItemModels() {
 ...
 // This is called during onRender(). List model is empty
 return models.iterator();
   }

   @Override
   protected void populateItem(Item item) {
 ChartEntity entity = item.getModelObject();
 item.add(new AttributeAppender("shape", entity.getShapeType()));
 item.add(new AttributeAppender("coords", entity.getShapeCoords()));
 item.add(new AttributeAppender("href", "#"));
 item.add(new TooltipBehavior(entity.getToolTipText()));
   }
 };
mapAreas.setOutputMarkupId(Boolean.TRUE);
add(mapAreas);

NonCachingImage ch = new NonCachingImage("livedata", Model.of(chart)) {
   @Override
   protected DynamicImageResource getImageResource() {
 return new DynamicImageResource() {
   @Override
   protected byte[] getImageData(IResource.Attributes attributes) {
 ChartRenderingInfo renderingInfo = new ChartRenderingInfo();
 // chart is a JFreeChart
 BufferedImage imgbytes = chart.createBufferedImage(imgwidth,
imgheight, renderingInfo);

 EntityCollection entities = renderingInfo.getEntityCollection();
 // This is called very late, during onRequest().
 // EntityCollection contains now everything is needed,
 // but how to call
 // RefreshingView.onRender() from here?
 // If i put this code anywhere else i get
StackOverflowException.
 return toImageData(imgbytes);
   }
 };
   }
 };
 add(ch);



-
To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org
For additional commands, e-mail: users-h...@wicket.apache.org

wicket clickable image with tooltips map

[C.S.]

Dear wicket developers,

i try to integrate wicket with jfreechart. Wicket wiki contains an example
under
https://cwiki.apache.org/confluence/display/WICKET/JFreeChart+with+clickable+imagemap
but this code is 11 yrs old and does not work with current versions.

Speaking of versions: i must stick with jdk 1.8, which means i cannot
upgrade to wicket 9+
Using wicket version 8.12.0

Goal is to create a usemap list to an image, so image is clickable
(contains tooltips).
For image i use a NonCachingImage and for the usemap i use a RefreshingView.

Trouble is, when the RefreshingView renders, the image has no rendering
info yet. So the RefreshingView model is empty. Image creates its rendering
info very late - during onRequest(). RefreshingView is rendered long ago at
this time.

I tried to create the image rendering info before rendering the
RefreshingView.
This is how it works in the old wiki example. Unfortunately, the new
versions throw a StackOverflowException. During Serialization, some
JFreeChart methods interact with some Wicket serialization methods. They
call each other (via reflexion) some 100s of times until StackOverflow
occurs.

What would you suggest? Is there a way to refresh the RefreshingView
without ajax?
Or somehow render the RefreshingView after the image produced its rendering
info?
Or should i use different wicket components? Or wrap/enclose these
components under another component (which one? ).

Thank you for your help

Christos Stieglitz

My code:

HTML:


  


Java:
RefreshingView mapAreas = new RefreshingView<>("area") {
  @Override
  protected Iterator> getItemModels() {
...
// This is called during onRender(). List model is empty
return models.iterator();
  }

  @Override
  protected void populateItem(Item item) {
ChartEntity entity = item.getModelObject();
item.add(new AttributeAppender("shape", entity.getShapeType()));
item.add(new AttributeAppender("coords", entity.getShapeCoords()));
item.add(new AttributeAppender("href", "#"));
item.add(new TooltipBehavior(entity.getToolTipText()));
  }
};
mapAreas.setOutputMarkupId(Boolean.TRUE);
add(mapAreas);

NonCachingImage ch = new NonCachingImage("livedata", Model.of(chart)) {
  @Override
  protected DynamicImageResource getImageResource() {
return new DynamicImageResource() {
  @Override
  protected byte[] getImageData(IResource.Attributes attributes) {
ChartRenderingInfo renderingInfo = new ChartRenderingInfo();
// chart is a JFreeChart
BufferedImage imgbytes = chart.createBufferedImage(imgwidth,
imgheight, renderingInfo);

EntityCollection entities = renderingInfo.getEntityCollection();
// This is called very late, during onRequest().
// EntityCollection contains now everything is needed,
// but how to call
// RefreshingView.onRender() from here?
// If i put this code anywhere else i get
StackOverflowException.
return toImageData(imgbytes);
  }
};
  }
};
add(ch);