How to slide and refresh Primefaces charts

Question

I'm really in trouble!

I need some brilliant idea to get a jsf page in which 7 charts slide one after another every 20 seconds and I need these charts are refreshed every 30 seconds.

I tried some solutions with bad results:

1.Slideshow + Poll

<h:form>
    <div align="center">
        <p:panel id="chartcontainer" style="border: none;">
            <p:imageSwitch style="width: 100%" 
                               id="slider" 
                               widgetVar="chartSlideShow" 
                               effect="turnDown" 
                               slideshowSpeed="5000">
                <ui:include src="/charts/chart1.xhtml"/>
                <ui:include src="/charts/chart2.xhtml"/>
                <ui:include src="/charts/chart3.xhtml"/>
                <ui:include src="/charts/chart4.xhtml"/>
                <ui:include src="/charts/chart5.xhtml"/>
                <ui:include src="/charts/chart6.xhtml"/>
                <ui:include src="/charts/chart7.xhtml"/>
            </p:imageSwitch>
        </p:panel>
        <p:poll widgetVar="pollWidget" 
                           update="@form"
                           interval="30"
                           oncomplete="PF('btnPlayWidget').disable();"/>
    </div>   
</h:form>

This solution's problem is that the slideshow and poll are not synchronized so when I'm watching the chart3, for example, and poll is executed I don't expect the change and the slideshow restart from the first chart. This is really annoying!

2.Poll by itself

<h:form>
    <div align='center'>
        <p:panel id="chartcontainer" style="border: none;">
            <ui:include src="#{slideView.slide}"/>  
        </p:panel>
        <p:poll widgetVar="pollWidget"
            update="@form"
            interval="20" 
            listener="#{slideView.next()}"
            oncomplete="PF('btnPlayWidget').disable();"/>
    </div>
</h:form>

Here's my slideView's bean:

package com.tvop.beans;

import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;

@ManagedBean
@ViewScoped
public class SlideView implements Serializable {
    private int index = 0;
    String slide = "/charts/chart1.xhtml";

    private final String[] slides = new String[] {
        "/charts/chart1.xhtml",
        "/charts/chart2.xhtml",
        "/charts/chart3.xhtml",
        "/charts/chart4.xhtml",
        "/charts/chart5.xhtml",
        "/charts/chart6.xhtml",
        "/charts/chart7.xhtml"
    };

    public String getSlide() {
        return slide;
    }

    public void setSlide(String slide) {
        this.slide = slide;
    }

    public String next() {
        index %= slides.length;
        this.slide = slides[index];
        index++;
        return slide;
    }
}

This solution runs more or less but the poll's interval is not exact, especially at the beginning, as soon as the page is loaded. The first change between the first and the second chart happens after 30/35 seconds and not 20, as setted in the poll's interval.

I really need some good idea, I don't want to be fired.

Thank you all my friends!

Answer 1

Solved!

The solution is to use the poll component by its own; updating the poll every 20 seconds it emulates the imageSwitch behavior! It's important to modify the java bean too to make it work.

Following the solution:

xhtml poll:

<div align='center'>
  <p:panel id="chartcontainer" style="border: none;">
    <p:panel style="border: 0px">
      <ui:include src="#{slideView.slide}" />
    </p:panel>
  </p:panel>
  <p:poll widgetVar="pollWidget"
          update="chartcontainer"
          interval="20" 
          listener="#{slideView.next()}"
          oncomplete="PF('btnPlayWidget').disable();"/>
</div>

slideview bean:

package com.tvop.beans;

import com.tvop.exceptions.DMLException;
import com.tvop.persistence.TkResourceJPA;
import com.tvop.persistence.dbentities.TkResource;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.faces.context.ExternalContext;
import javax.faces.context.FacesContext;

@ManagedBean
@ViewScoped
public class SlideView implements Serializable {
private SessionManager sessionManager = null;
private List<TkResource> resources;

private int index;
private String slide;
private final List<String> slides = new ArrayList<>();

public SlideView() {
    // Ottengo i privilegi sui chart tramite il bean sessionManager
    FacesContext ctx = FacesContext.getCurrentInstance();
    ExternalContext extCtx = ctx.getExternalContext();
    Map<String, Object> sessionMap = extCtx.getSessionMap();
    sessionManager = (SessionManager) sessionMap.get("sessionManager");

    try {
        resources = TkResourceJPA.getCharts();
    } catch (DMLException ex) {
        ex.printStackTrace();
    }

    SessionPrivileges privileges = sessionManager.getSessionPrivileges();

    for(TkResource resource : resources) {
        // Se è definito un privilegio controllo che privilegio è
        if (privileges.contains(resource.getResourceid())) {
            boolean currentResRendered = privileges.getRendered(resource.getResourceid());

            if(currentResRendered){
                slides.add(resource.getUrl());
            }
        }
    }

    index = 0;
    slide = slides.get(index);
}

public String getSlide() {
    return slide;
}

public void setSlide(String slide) {
    this.slide = slide;
}

public String next() {
    index %= slides.size();
    if (index == slides.size() - 1) {
        index = -1;
    }
    index++;
    this.slide = slides.get(index);

    return slide;
}

public String previous() {
    if (index == 0) {
        index = slides.size();
    }
    --index;
    this.slide = slides.get(index);
    return slide;
}
}

Enjoy :)