Need help with a timecode script - Page 2

MaDmiX · 02-14-2012, 07:36 PM

Quote:

Originally Posted by blaze4218

careful that you don't revert to your old naming convention ($) halfway through the script...

The perils of pasting

It's fixed. And thanks for the help with formatting.

Ken

MaDmiX · 02-15-2012, 03:38 PM

I wasn't sure if this shoud be a new thread so if so, I apologize...

blaze4218, I was able to get some ideas from the function you pointed me to, and I went with the idea of using an array with a for loop to add a trailing zero for any value in the array that is < 10. I think I have the basic idea down but being a JS noob I still need help with the syntax. Even if this can work, the "frames+dropframes" in my else statement won't be formatted correctly, but one thing at a time I guess......

Can anybody see if this can be made to work?

Code:

<html>
<body>

<script type="text/javascript">
function CnvToTime(FrameCount) {

var FRate = 29.97;
var TotalSecs = parseInt((FrameCount / FRate), 10);
var hours = parseInt((TotalSecs / 3600), 10);
var mins = parseInt(((TotalSecs - hours * 3600) / 60), 10);
var secs = TotalSecs - hours * 3600 - mins * 60;
var frames = (FrameCount - TotalSecs * 30);
var dropframes = (hours * 108) + (mins * 2) - (parseInt((mins / 10) * 2), 10);
var timecode = [hours, mins, secs, frames];


for(i=0; i<timecode.length; i++) {
	
if timecode < 10 {
timecode = "0" + timecode
}

if ((frames + dropframes) > 30) {
timecode = timecode[0] + ":" + timecode[1] + ":" + timecode[2] + 1 + ":" + "01";
}
else if ((frames + dropframes) == 30) {
timecode = timecode[0] + ":" + timecode[1] + ":" + timecode[2] + 1 + ":" + "00";
}
else {
timecode = timecode[0] + ":" + timecode[1] + ":" + timecode[2] + (frames + dropframes);
}

document.write(timecode);
return timecode;
}

alert (CnvToTime(107599));


</script>

</body>
</html>

Thanks in advance.

Ken

blaze4218 · 02-15-2012, 07:32 PM

There is more to exporting the conversion than just simplifying the code.

I would assume that your project will be more than this one function, and that you will more
often need to make time conversions... if that is the case I would like to think you wouldn't
want to add time conversion to every function...

Code:

window.Project = function () {
    
    /*I like to keep all my privates together*/

    var HHMMSS = function(secs){		// Now we can just plug this in anywhere we need it
        var time = [0 , 0 , secs];
        for (var i = 2 ; i>0 ; i--) {
            time[i-1] = Math.floor(time[i] / 60);
            time[i] = time[i] % 60;
            if (time[i] < 10)
                time[i] = '0' + time[i];
        }
        return time;		// We can return this as an array to allow for greater flexibility, we can always .join(':') in the calling function... 
    };
    
    /*I like to keep all my publics together*/

    var CnvToTime = function(FrameCount) {
    
        var FRate = 29.97 , 		// This just keeps things looking clean by assigning all of the following as local via the same var declaration (up until the ";")
            TotalSecs = parseInt((FrameCount / FRate) , 10)  , 
            ElapsedTime = HHMMSS(TotalSecs) ,
            frames = (FrameCount - TotalSecs * 30) ,	// frames and dropframes are only ever used in the expression (frames + dropframes). If you have not intention of changing that you could remove a 2 lines of code with FramesDropped = (FrameCount - TotalSecs * 30) + ((ElapsedTime[0] * 108) + (ElapsedTime[1] * 2) - (parseInt((ElapsedTime[1] / 10) * 2), 10))
            dropframes = (ElapsedTime[0] * 108) + (ElapsedTime[1] * 2) - (parseInt((ElapsedTime[1] / 10) * 2), 10) ,
            timecode = '' , 				// I don't see the wisdom of making this an array when you convert it into a string later...
            FramesDropped = frames + dropframes;	/* A little "micro-optimization" technique to keep in mind (totally optional) - when you find 
							yourself re-evaluating the same expression many times you could shrink your code and execute 
							faster (if this is run like 10000+ times per second...) if you save your evaluated expression 
							to a var and reference that. Admitedly it is trival in this case, just a little food for thought ;)*/
        
        if (FramesDropped > 30) {
            ElapsedTime[2] += 1;
            timecode = ElapsedTime.join(':') + ":" + "01";
        }
        else if (FramesDropped == 30) {
            ElapsedTime[2] += 1;
            timecode = ElapsedTime.join(':') + ":" + "00";
        }
        else {
            timecode = ElapsedTime.join(':') + ":" + FramesDropped;
        }
        return timecode;
    };
    
    return {
        'getDroppedFrames' : CnvToTime // you can use a different alias for calling CnvToTime if you want
    };

}();

document.write( Project.getDroppedFrames(3000) );

taking into account some of my suggestions above (plus one more thing I just thought of) you might get the following...

Code:

window.Project = function () {

    var HHMMSS = function(secs) {
        var time = [0 , 0 , secs];
        for (var i = 2 ; i>0 ; --i) {
            time[i-1] = Math.floor(time[i] / 60);
            time[i] = time[i] % 60;
            if (time[i] < 10)
                time[i] = '0' + time[i];
        }
        return time;
    };

    var CnvToTime = function(FrameCount) {
    
        var FRate = 29.97 ,
            TotalSecs = parseInt((FrameCount / FRate) , 10)  , 
            ElapsedTime = HHMMSS(TotalSecs) ,
            FramesDropped = (FrameCount - TotalSecs * 30) + ((ElapsedTime[0] * 108) + (ElapsedTime[1] * 2) - (parseInt((ElapsedTime[1] / 10) * 2), 10));
        
        if (FramesDropped > 30) {
            ElapsedTime[2] += 1;
            FramesDropped = ':01';
        }
        else if (FramesDropped == 30) {
            ElapsedTime[2] += 1;
            FramesDropped = ':00';  //  <--oops I goofed that string again, there, all better now
        }
        
        return ElapsedTime.join(':')  + FramesDropped;
    };
    
    return {
        'getDroppedFrames' : CnvToTime
    };

}();

document.write( Project.getDroppedFrames(3000) );

each function acts independant of eachother, and to me that's just cleaner, I know that HHMMSS will always
give me the right return, and if I have to make changes to CnvToTime later I know I won't accidentally screw up
my seconds conversion

I just hope I followed your algorithm properly (i noticed that my last post skipped over the fact that
you needed the isolated values for hour and min

), you should double check that it gives you the right output...

MaDmiX · 02-16-2012, 07:41 PM

Thanks blaze4218,

That's certainly alot to take in. I am looking at the code now and I appreciate all the tips.

Best regards,

Ken

UPDATE:

OK I have a script that calculates and formats the Df Timecode properly... YAY. One small hitch that I can't figure out. When the script runs I initially get an alert with the correct calculation in the proper format. This, however is followed by another alert stating "undefined". When I comment out line #55

alert (CnvToTime(207599));

there is no output from the browser (makes sense because there is no FrameCount argument being passed to the function). But when I comment out line #46

alert (timecode.join(':'));

I get the "undefined" alert. BTW, this may be moot because ultimately this function will be called externally from another web page but I can't be sure. Here is the code:

Code:

<html>
<body>

<script type="text/javascript">
function CnvToTime(FrameCount) {

var FRate = 29.97;
var TotalSecs = parseInt((FrameCount / FRate), 10);
var hours = parseInt((TotalSecs / 3600), 10);
var mins = parseInt(((TotalSecs - hours * 3600) / 60), 10);
var secs = TotalSecs - hours * 3600 - mins * 60;
var frames = (FrameCount - TotalSecs * 30);
var dropframes = (hours * 108) + (mins * 2) - (parseInt((mins / 10) * 2), 10);

if ((frames + dropframes) > 30) {
secs =  secs + 1;
frames = "01";
}
else if ((frames + dropframes) == 30) {
secs = secs + 1;
frames = "00";
}
else {
frames = frames + dropframes;
}

//INSERT FOR EACH LOOP HERE TO FORMAT TIMECODE ARRAY

var i;
var timecode = new Array();
timecode[0] = hours;
timecode[1] = mins;
timecode[2] = secs;
timecode[3] = frames

for (i=0;i<timecode.length;i++)
{
if(timecode[i]<10)
timecode[i]="0"+timecode[i];
}

/*THIS LINE WILL BE REPLACED WITH THE LINE 
BELOW IT AND THE FUNCTION WILL BE CALLED 
EXTERNALLY.
*/
alert (timecode.join(':')); 
//timecode.join(':');

}
/*
THIS IS JUST FOR TESTING.  
EVENTUALLY THE FOLLOWING LINE WILL BE REMOVED 
AND THE FUNCTION WILL BE CALLED EXTERNALLY.
*/
alert (CnvToTime(207599));


</script>

</body>
</html>

Guys, thank you sooo much for helping me get this far!

Ken

MaDmiX · 02-16-2012, 11:50 PM

The solution was actually quite simple. I needed to modify line #46 from:

alert (timecode.join(':'));

to:

return (timecode.join(':'));

Here is the final function:

Code:

<html>
<body>

<script type="text/javascript">
function CnvToTime(FrameCount) {

var FRate = 29.97;
var TotalSecs = parseInt((FrameCount / FRate), 10);
var hours = parseInt((TotalSecs / 3600), 10);
var mins = parseInt(((TotalSecs - hours * 3600) / 60), 10);
var secs = TotalSecs - hours * 3600 - mins * 60;
var frames = (FrameCount - TotalSecs * 30);
var dropframes = (hours * 108) + (mins * 2) - (parseInt((mins / 10) * 2), 10);

if ((frames + dropframes) > 30) {
secs =  secs + 1;
frames = "01";
}
else if ((frames + dropframes) == 30) {
secs = secs + 1;
frames = "00";
}
else {
frames = frames + dropframes;
}

//INSERT FOR EACH LOOP HERE TO FORMAT TIMECODE ARRAY

var i;
var timecode = new Array();
timecode[0] = hours;
timecode[1] = mins;
timecode[2] = secs;
timecode[3] = frames

for (i=0;i<timecode.length;i++)
{
if(timecode[i]<10)
timecode[i]="0"+timecode[i];
}

return timecode.join(':');

}
/*
THIS IS JUST FOR TESTING.  
EVENTUALLY THE FOLLOWING LINE WILL BE REMOVED 
AND THE FUNCTION WILL BE CALLED EXTERNALLY.
*/
alert (CnvToTime(207599));

</script>

</body>
</html>

Coding Forums Rocks