Show timer on page


#1

Is it possible to show a timer or progressbar to show how long the item will be left on the screen in seconds?


#2

Hello Harm,

Did you ever get the timer/progress bar running ?

Thanks,
Stefaan


#3

Nope, and not using Xibo anymore… Best regards, Harm


#4

I am also interested in this.
Maybe we can do a feature request for this?

Regards, Peter


#5

Hi
i develop a Progressbar to display how long a Region is shown till it change.

First i place a new region. For me i want to display how long a Video is running, so i placed the “Prograssbar-Region” as a small, long Region under my "MainRegion where the Video is displayed.

MainRegion = 1396 x 759, ProgressbarRegion = 1396 x 30

In the ProgressbarRegion i placed a “Embedded” Widget.

The originalcode of the progressbar is from here: https://codepen.io/jankiatyantik03/pen/GdmOgb

I modified it, to fit my own needs.

HTML:

<div class="progress-bar">
   <div id="bar" class="progress-value" style="width: 1%;">
     <!-- <span id="value">1%</span> --><!-- Hide the Percentage-->
  </div>
</div>

CSS:

<style type="text/css">
.progress-bar {
    background-color: lightgray;
    //border-radius: 1.25em;
    width: 100%;
    height: 16px;
    display: inline-block;
}
.progress-value {
    color: #fff;
    text-align: center;
    background-color: #673ab7;
    transition: .3s all linear;
    //border-radius: 1.25em;
    height: 16px;
    display: inline-block;
}
</style>

JS:

script type="text/javascript">
    function EmbedInit()
    {
        // Init will be called when this page is loaded in the client.
  var elem = document.getElementById("bar");   
  var width = 1;
  var id = setInterval(frame, 910);  //910 = 91 Seconds that the Progressbar is running
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = width + '%'; 
      document.getElementById("value").innerHTML = width  + '%';
    }
  }
        return;
    }
</script>

It is importend that the durationtime of the Widget is set to the same Value like the progressbar runs.
Otherwise there is no synchronicity between the Progressbar an the Video in my “MainRegion”.
For me i set it 1 second longer an it works better with the region-change

For me, it runs very good and the People can see how long the Videos shown on the Display.

Sunny Greetings
Torsten


How To display a Progressbar