pe:imageAreaSelect Primefaces imageareaselect highlight programmatically

Question

I would like to be able to hightlight an image and save the highlight coordinates to the database. When I reopen the image, I want to read the highlighted coordinates from the database and programatically re-highlight image.

I can get the coordinates and store them using this example:

<pe:imageAreaSelect id="areaSelect" for="imgView" handles="true" show="#{imagesBean.hasHighlight}">
  <p:ajax event="selectEnd" listener="#{imagesBean.areaSelectListener}" delay="200" />
</pe:imageAreaSelect>

My challenge is trying to apply the highlight (areaselection) programatically when I reload the image. While the show="#{imagesBean.hasHighlight}" attribute does show the highlighting (grey overlay), I cannot find a way to feed the coordinates into it.

Any suggestions will be appreciated.

Answer 1

Almost each PrimeFaces and PrimeFaces Extensions component consists of java classes, javascript and css.

If you start at the main sources e.g. for PrimeFaces Extensions in github, https://github.com/primefaces-extensions/core/tree/master/src/main, the following stucture applies:

• component classes: /java/org/primefaces/extensions/component/<component>
• javascript: resources/META-INF/resources/primefaces-extensions/<component>
• css: resources/META-INF/resources/primefaces-extensions/<component>

The latter two are the same for PrimeFaces Extensions, but for PrimeFaces they differ, but you'll get the picture. Components often use generic and sometime specific classes in the packages above, but those are kind of self-descriptive.

If you now take a look at the javascript in 1-imageareaselect.js, you see there is

setSelection : function(x1, y1, x2, y2) {
    this.instance.setSelection(x1, y1, x2, y2);
},

You can use that and call that on the widgetVar. To get this info to the client when loading the page should be a no-brainer. The comment above te function says to make the setting of the selection visible call

update()

on the widgetVar after setting the selection.