Skip to main content
prakashravi
Participating Frequently
Nov 3, 2015 6:04 AM UTC
Answered

Display slide duration inside the slide

Hi guys,

I want to show the slide durion time inside the slide like any text captions or shapes. It was shown bottom of the menu part. How to display inside the slide. Is it possible to show the slide duration in captivate 8.

This topic is closed to new replies. Start a new post to keep the conversation going.
TLCMediaDesign
TLCMediaDesignCorrect answer
Inspiring
Nov 3, 2015 8:41 PM UTC

They are fairly easy to get in HTML5 and SWF with a widget.

The following code inserted in the Head section of the HTML5 index.html will count down the Slide Length and reset with each slide. It populates a user variable myTime in a text caption.

var interfaceObj;
var eventEmitterObj;

window.addEventListener("moduleReadyEvent", function(evt)
{
interfaceObj = evt.Data;
eventEmitterObj = interfaceObj.getEventEmitter();
    initializeEventListeners();
});

function initializeEventListeners()
{
if ( interfaceObj )
{
     if ( eventEmitterObj )
  {
         eventEmitterObj.addEventListener("CPAPI_SLIDEENTER",function(e){  
   setPage();
            });
  }
}
}

function setPage()
{ 
gSlide = cp.model.data.project_main.slides;
res = gSlide.split(",");
cSlide = res[window.cpInfoCurrentSlide - 1];
csTo = eval('cp.model.data.'+cSlide+'.to');
csFrom = eval('cp.model.data.'+cSlide+'.from');
csTotal =  csTo - csFrom;
sf = window.cpInfoCurrentFrame;

window.cpAPIEventEmitter.addEventListener("CPAPI_VARIABLEVALUECHANGED",function(){
   runTimer(csTotal, sf, csTo);},"cpInfoCurrentFrame");
}

function runTimer(st, sf, ef)
{ 
thisTime = Math.round((st - (window.cpInfoCurrentFrame - sf) - 1) / 30);
mm = Math.floor(thisTime % 3600 / 60);
ss = Math.floor(thisTime % 3600 % 60);
newTime = ((mm > 0 ? (mm < 10 ? "0" : "") + mm + ":" : "00:") + (ss < 10 ? "0" : "") + ss);

window.myTime = String(newTime);

if ( mm == 0 && ss < 1 )
{
  window.cpAPIEventEmitter.removeEventListener("CPAPI_VARIABLEVALUECHANGED",function(){
   runTimer(csTotal, sf, csTo);},"cpInfoCurrentFrame");
}
}

View reply

10 replies

buneznunez
Known Participant
Dec 23, 2015 12:33 AM UTC

Thanks! This was VERY helpful! I had figured out a way to hack the info out of the CPM.js script and throw it to some custom scripts I was adding to index.html, but I didn't want to have to edit the CPM file every time.

Here's a modification I have made: instead of displaying the time as numbers, I've created a progress bar graphic for the current slide and modified your script to scale the graphic as the time elapses. Note how I'm referencing the graphic: When published, a graphic inserted in Captivate with an ID of "slProg" becomes a canvas element which I'm referencing with jquery like this: $('canvas[id^=slProg]')[0];

(Tested in IE11 and Chrome)

gSlide = cp.model.data.project_main.slides;

res = gSlide.split(",");

cSlide = res[window.cpInfoCurrentSlide - 1];

csTo = eval('cp.model.data.'+cSlide+'.to');

csFrom = eval('cp.model.data.'+cSlide+'.from');

csTotal =  csTo - csFrom;

sf = window.cpInfoCurrentFrame;

slideDur = csTotal*30;

window.cpAPIEventEmitter.addEventListener("CPAPI_VARIABLEVALUECHANGED",function() {

  runTimer(csTotal, sf, csTo);},"cpInfoCurrentFrame");

}

function runTimer(st, sf, ef) { 

thisTime = Math.round((st - (window.cpInfoCurrentFrame - sf) - 1)*30);

currentTime=slideDur-thisTime;

var slideProg = currentTime/slideDur;

var slProg = $('canvas[id^=slProg]')[0];

slProg.style.transformOrigin = '0% 0%';

slProg.style.webkitTransformOrigin = '0% 0%';

slProg.style.transform = 'scale('+slideProg+', 1)';

slProg.style.webkitTransform = 'scale('+slideProg+', 1)';

if ( thisTime < 1 ) {

  window.cpAPIEventEmitter.removeEventListener("CPAPI_VARIABLEVALUECHANGED",function(){

  runTimer(csTotal, sf, csTo);},"cpInfoCurrentFrame");

}

Translate
    iDoNotBelieveIt
    Known Participant
    Jul 17, 2020 11:04 AM UTC

    This is a great modification. However, for some reason when I replace the relevant part of the code provided by @TLCMediaDesign the project will not preview. I noticed a missing } at the end so added that. The first slide shows but won't play. I am not sure why so I hope someone can enlighten me!

    I would like to build a scrub bar for individual slides, and I think this thread may well have the answer!

    Translate
    TLCMediaDesign
    TLCMediaDesignCorrect answer
    Inspiring
    Nov 3, 2015 8:41 PM UTC

    They are fairly easy to get in HTML5 and SWF with a widget.

    The following code inserted in the Head section of the HTML5 index.html will count down the Slide Length and reset with each slide. It populates a user variable myTime in a text caption.

    var interfaceObj;
    var eventEmitterObj;

    window.addEventListener("moduleReadyEvent", function(evt)
    {
    interfaceObj = evt.Data;
    eventEmitterObj = interfaceObj.getEventEmitter();
        initializeEventListeners();
    });

    function initializeEventListeners()
    {
    if ( interfaceObj )
    {
         if ( eventEmitterObj )
      {
             eventEmitterObj.addEventListener("CPAPI_SLIDEENTER",function(e){  
       setPage();
                });
      }
    }
    }

    function setPage()
    { 
    gSlide = cp.model.data.project_main.slides;
    res = gSlide.split(",");
    cSlide = res[window.cpInfoCurrentSlide - 1];
    csTo = eval('cp.model.data.'+cSlide+'.to');
    csFrom = eval('cp.model.data.'+cSlide+'.from');
    csTotal =  csTo - csFrom;
    sf = window.cpInfoCurrentFrame;

    window.cpAPIEventEmitter.addEventListener("CPAPI_VARIABLEVALUECHANGED",function(){
       runTimer(csTotal, sf, csTo);},"cpInfoCurrentFrame");
    }

    function runTimer(st, sf, ef)
    { 
    thisTime = Math.round((st - (window.cpInfoCurrentFrame - sf) - 1) / 30);
    mm = Math.floor(thisTime % 3600 / 60);
    ss = Math.floor(thisTime % 3600 % 60);
    newTime = ((mm > 0 ? (mm < 10 ? "0" : "") + mm + ":" : "00:") + (ss < 10 ? "0" : "") + ss);

    window.myTime = String(newTime);

    if ( mm == 0 && ss < 1 )
    {
      window.cpAPIEventEmitter.removeEventListener("CPAPI_VARIABLEVALUECHANGED",function(){
       runTimer(csTotal, sf, csTo);},"cpInfoCurrentFrame");
    }
    }

    Translate
      prakashraviAuthor
      Participating Frequently
      Nov 4, 2015 6:57 AM UTC

      It's working fine thank you !!!!!!!!!!!!!!!!!!!!!!!!!!!!

      Translate
      Lilybiri
      Lilybiri
      Legend
      Nov 3, 2015 8:36 AM UTC

      There are no system variables that have values about total project duration, nor individual slide duration, which makes this not as easy as it seems. It is a pity that those variables are not accessible by the developer, since they clearly exist, showing up in the Table of Contents.

      Project duration can be calculated from the system variables cpInfoFrameCount and cpInfoFPS. But have not such an easy workflow for the slide duration.  The time spent on a slide will normally be very different from the slide duration, I don't think it is that important for the learner, but that is my opinion of course.

       

      I can offer you only work flows like described in this (old) blog post:

      Display Time information - Captivate blog

      Meanwhile I have upgraded the post:

      http://blog.lilybiri.com/display-time-cp2019

      Translate
        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices