Showing the timecode in the document

Using JavaScript with Hype
1

is there anyway to show the current timecode / timeline information in the hype document (i.e. whats visible in the browser?)

i.e. this information:

Screen Shot 2015-06-01 at 14.13.31.png870×190 19.2 KB

would be great to have it in the browser so one could see a bit better whats going on - for testing purposes!

2

Here’s a script to do this, which writes values into elements with these IDs timecode & timecodeWithFrames

	// Run this every 100 milliseconds 
window.setInterval(function(){

// Gets the raw timecode in seconds and fractions of a second
var timecodevalue = hypeDocument.currentTimeInTimelineNamed('Main Timeline'); 

// Hype shows 30 frames per second
var fps = 30;

var seconds = Math.floor(timecodevalue);
var minutes = Math.floor(seconds / 60);

// This subtracts the value in seconds from the raw timecode value and converts it to a two number with no decimal points.
var frames = ((timecodevalue - seconds) * 30).toFixed(0);	

// Raw number of seconds:
document.getElementById("timecode").innerHTML = timecodevalue;

// Seconds + Frames
// document.getElementById("timecodeWithFrames").innerHTML = seconds.toString() + ' ' + frames.toString();

document.getElementById("timecodeWithFrames").innerHTML = minutes + ' ' + seconds + ' ' + frames;



}, 100);

timecoder.zip (14.2 KB)

1 Like
3

perfect! does the job :slight_smile: thanks @Daniel

4

Hi Daniel,
I try to work with your script. The Timeline in hype is at 01: 08.00. Output in the browser is 1 68 0. I can not find a solution for the correct hour.

I’ve also tried this, but it doesn’t work! ( = hours + ’ ’ )

// Seconds + Frames
// document.getElementById("timecodeWithFrames").innerHTML = seconds.toString() + ' ' + frames.toString();

document.getElementById("timecodeWithFrames").innerHTML =  hours + ' ' + minutes + ' ' + seconds + ' ' + frames;

Do you have an idea for me? Thanks for your help
Ralftimecoder-rk.hype.zip (10,6 KB)

5

Timers are always a pain…

I google’d a bit of this code ( to lazy to re work it out again… and incorporated it here to get you what you want. Which is to have the seconds only count to 59

    	// Run this every 100 milliseconds 
	window.setInterval(function(){
	
	// Gets the raw timecode in seconds and fractions of a second
  	var timecodevalue = hypeDocument.currentTimeInTimelineNamed('Main Timeline'); 
	
    // Hype has 30 frames a second
    var fps = 30;
	var totalSeconds = Math.floor(timecodevalue);
 
	var hours = Math.floor(totalSeconds /3600);
   	var minutes = Math.floor((totalSeconds - hours*3600)/60);
   	var seconds = totalSeconds - (hours*3600 + minutes*60);
	 
	// This subtracts the value in seconds from the raw timecode value and converts it to a two number with no decimal points.
	var frames = ((timecodevalue - totalSeconds) * 30).toFixed(0);	
	
	// Raw number of seconds:
	document.getElementById("timecode").innerHTML = timecodevalue;
	
	// Seconds + Frames
	// document.getElementById("timecodeWithFrames").innerHTML = seconds.toString() + ' ' + frames.toString();

 
	document.getElementById("timecodeWithFrames").innerHTML = hours + ' : ' + minutes + ' : ' + seconds + ' : ' + frames;

	
  
}, 100);
2 Likes
6

Hi Mark,
aaah …totalSeconds … this is real cool!

var fps = 30;
var totalSeconds = Math.floor(timecodevalue);

var hours = Math.floor(totalSeconds /3600);
var minutes = Math.floor((totalSeconds - hours*3600)/60);
var seconds = totalSeconds - (hours*3600 + minutes*60);

Thanks for your help

Timecode_byMarkHunte.hype.zip (11,6 KB)

3 Likes
7

@Ralf,

I accidentally left some erroneous code in the code above which actually breaks the count.
Updated above and

Here is a copy of your projects without it.

Timecode_MHv2.hype.zip (18.5 KB)

1 Like
8

@Mark,

You mean this one?
“minutes = Math.floor(minutes % 60 )”

9

Yes that was it

10

Very useful in debugging animations… Thanks!