Does shotcut have a stopwatch feature?


#1

I need to add a real time stopwatch count to a video.However as far as I can see shotcut doesn’t currently have this feature as a filter, If it’s already present can some point me to how to set it up, thanks. if not could it be added in a future update?

Currently I’m just going to inserting a timer video over the top of my footage I need it for, but this doesn’t look that nice. I did look at the timecode feature in text, but that counts to the frames and not in milliseconds and would require I do the timecode in another file export that file, then import it into my main video for editing for the code to count up from 00:00.


Help with use of "Timecode" as a stopwatch on video
#2

You need the timer to count in milliseconds? What do you need it to look like exactly? Something like this?

HH:MM:SS.mmm

Or, do you only need seconds and milliseconds?


#3

MM:SS.mmm would be perfect I’ll be looking at a clip about just over 1 minute long


#4

Hmm. OK. Since the time on the screen can only change once with each video frame, the milliseconds would only increment in units of the frame rate. For example, if the frame rate of your project is 30fps, each frame would increment by 0.033 seconds. So the “mmm” part of your stopwatch would look like this:

00:00:000
00:00:033
00:00:066
00:00:099
00:00:133
00:00:166
00:00:199
00:00:233
00:00:266

There is not a way to do this today, but I don’t think it would be hard for me to add. But before I do the work, I would want to make sure this would meet your needs.


#5

Thanks Brian, that’s understandable it would be linked to frames, mainly I work in 30fps or 60fps video. What you describe sounds perfect for what I want.

I was planning to mainly use it to show timing changes between PAL and NTSC video games. So I just wanted a stopwatch running at the bottom of the video, as the comparison footage runs.

Would it be possible to have an option to pause the timer as well on the frame you need it to?

So an example of a time when I could have used it in a previous video I did, was this one, jump to 41:14, I was planning to do something similar in another video this time on a different game:

There have a few few videos in the past I should have used a feature like this.I plan to do more videos using stopwatch timing at later dates, I certainly won’t need hours, but I suspect there might be one or two shotcut users who might want it included in different format if possible:

HH:MM:SS.mmm
or
MM:SS.mm (Chrono format for a lot of watches)
or just
MM:SS

I want it counting up, but again some users may want it to count done from a starting limit. I know a few editors also already include a feature like this.

I imagine this will take some time to add, but it would greatly help me in the future and other shotcut users.

Cheers


#6

It can be done using a WebVfx-enabled HTML overlay. The beauty of that is that you can style it exactly how you want it using CSS and you can also tailor it to do exactly what you want. I knocked a bare-bones stopwatch overlay up in a couple of hours. If you know how to program in Javascript it isn’t difficult.
If you want to give it a try, just copy the source below, modify the HTML to choose what format you want (e.g. if you don’t want HH: just leave that cell empty), then plug in your Frames Per Second (fps) value et voila. You don’t need to mofify the javascript code. Make sure you tick the “Use WebVfx Javascript extension” when you set the filter.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Iceland" rel="stylesheet">
<!-- WebVfx does not recognise web fonts in "<link>", so make sure you also have the font loaded on your computer or use a different one. -->

<title>Stopwatch</title>

<script>
	function pad(number, length) {  
		var str = '' + number;
		while (str.length < length) {
			str = '0' + str;
		}   
		return str;
	}

    function Producer(params) {
		this.params = params;  // Add params objects as a property of the Producer class
	}		// #################### END OF Producer CONSTRUCTOR ####################
	
    Producer.prototype.render = function(time) {
		var parameters;
		var watch;
		var frame_len;
		var hh  = 0;
		var mm  = 0;
		var ss  = 0;
		var mmm = 0;
		var tds = {};
		
		for (var param in this.params) {
			
			parameters         = this.params[param];
			if (parameters.last_time == time) {return -1;}
			parameters.last_time = time;
			tds                = parameters.watch.children;
			current_time       = Math.floor(parameters.current_time);
			frame_len          = 1000.0 / parameters.frame_rate;
			watch              = parameters.watch;
			tds				   = watch.children;
			mmm                = (current_time % 1000);
			current_time       = (current_time - mmm) / 1000;
			ss                 = (current_time %   60);
			current_time       = (current_time -  ss) /   60;
			mm                 = (current_time %   60);
			current_time       = (current_time -  mm) /   60;
			hh                 = (current_time);
			parameters.current_time += frame_len;  /* Increase current time from 1st frame */
			msecs              = pad(mmm, 3);
			secs               = pad(ss, 2);
			mins               = pad(mm, 2);
			hrs                = pad(hh, 2);

			tds[0].textContent = hrs   + ':';
			tds[1].textContent = mins  + ':';
			tds[2].textContent = secs;
			tds[3].textContent = '.' + msecs;
		}
document.getElementById('framecount').textContent = 'Frames=' + (nframes++) +  'rtime=' + parameters.current_time + ', time=' + time;
	};		// #################### END OF render ####################
	
    function start_process() {
		var params     = {};
		var watches    = document.getElementsByClassName('stopwatch');
		var table      = watches[0].parentElement.parentElement;  /* 1st parentElement is <tbody></tbody> */
		var frame_rate = table.getAttribute("data-fps");
		var tds		   = {};
		nframes        = 0;
		for (var i = 0; i < watches.length; i++) {
			 tds = watches[i].children;
			 for (var j = 0; j < tds.length; j++) {
				if (tds[j].textContent === "") {
					tds[j].style.display = "none";
				}
				
			 }
			 params[i] = {frame_rate: frame_rate, current_time: 0, last_time: -1, watch: watches[i],};
		}
		
        var producer = new Producer(params);
		
        webvfx.renderRequested.connect(producer, Producer.prototype.render);
        webvfx.readyRender(true);  // This starts the rendering process.
    }		// #################### END OF start_process ####################

//  ################################################################################################
	window.addEventListener("load", function(){start_process();}, false); // DO NOT CHANGE THIS LINE
//  ################################################################################################	
</script>

<style>
    html, body	{margin:0; padding:0; width: 100%; height: 100%; overflow: hidden;}
	table		{border-collapse: collapse; border-spacing: 0;}
	td			{text-align: center; vertical-align: middle; padding: 0 0.1em; /*border: solid 1px #888888;*/}
	.stopwatch, #framecount {
				font-family: 'Iceland', monospace;
				color: #888888;
				text-shadow: 0 0 0.25em rgba(255, 175, 0, 1),  0 0 0.25em rgba(255, 175, 0, 0);
			    font-size: 25px;
			    padding: 5px 0;
    }
</style>
</head>
<body>
	
<!--
	================================================
	        A SHOTCUT Overlay HTML Filter
			-----------------------------
	               3 "stopwatches"
	================================================
-->

	<table  data-fps="29.97">
		<tr class="stopwatch">
			<td>HH</td><td>MM</td><td>SS</td><td>mmm</td>
		</tr>
	</table>
	<table  data-fps="29.97">
		<tr class="stopwatch">
			   <td></td><td>MM</td><td>SS</td><td>mmm</td>
		</tr>
	</table>
	<table  data-fps="29.97">
		<tr class="stopwatch">						
			   <td></td><td>MM</td><td>SS</td><td></td>
		</tr>
	</table>
<!--DEBUG	<p id="framecount">0</p>  -->
</body>
</html>

#7

Thanks Elusien, I was able to get that stopwatch overlay to work in shotcut and it is what I was looking for, but that version is a bit problematic for me to use in a video.

My Java knowledge is very limited and my html somewhat rusty, and I wasn’t able to move or position the clock, as I needed to place it between two videos, running in a split screen comparisons. The text and font size are also too small for my needs.

There’s no way to pause it currently and there is a bug so it keeps counting while in the edit mode, moving around the timeline cause it to keep counting. It’s on the right track, but not that users friendly for people like me. For now I’ll do the video overlay trick, until shotcut is able to add in a fully working filter.


#8

At the end, there is the Font 25 to change.
To move where you want, just apply it to a transparent png, on a top layer. Then you can move it where you want !

And Thanks @Elusien !!


#9

Yes, that’s right, the line to change says font-size: 25px I’d also get rid of the text-shadow line and set the color to something closer to black (#000) or white (#FFF) depending on the overall background it is applied to.

I’ve almost finished a redesign of my WebVfx framework, to be able to include things like this stopwatch in a much easier fashion. I’ve been using the stopwatch as a test vehicle for this, enabling a pause-like ability and starting the stopwatch at an arbitrary time. And yes, you are right again, since the stopwatch runs throughout the whole of the clip it is best to put it on a transparent track and cut up that clip accordingly.

I’m putting together a webpage on which I’ll show various uses of the framework, which will require no knowledge of javascript, just HTML and CSS. I’ll also put some “training videos” on there to show better how to use it.


#10

So I’ve finished my video, used an open license stopwatch video in the end to get a nice colour and look, not perfect but did the job nicely for now. This will serve as a guide to the type of stopwatch I was looking for.

You can see the video here: (jump to 20:00 to see the first use of the clock)

On the downside however I found out how buggy Shotcut is at present this time round, all the existing bugs I’ve previous flagged our still in the current version. So I’ll do a bug bump, in the next day or two, also hugely disappointed as 4K didn’t export on this video correctly and introduced large amounts of stuttering. Suspect it was too complex for it at present. Lot of minor bugs of timeline jumping and moving things around when I didn’t want it too and crashes, but the auto save means I don’t have to worry to much about crashes.


#11

Are you sure you machine is powerfull enought for handling 4K ( 4 cores + at least 16 Go RAM)?
Is your footage constant bitrate?


#12

If you take a look at my channel you’ll see we have already done a number of 4K video in Shotcut.

Normally I use quality bitrate without any issues, but I’ll try constant to see how it compares.

If there is an issue with quality bitrate, shotcut should make that clear. I knew something might not be right when it said it would take 8 hours, partly that might be due to the fact it was upscaling to 4K with large amounts of timelines. Normally it’s about an hour or two at best.

As I noticed the upscaling features don’t seem to work as well as they should, fine for a straight video, but struggles with these more complex video files with lots of elements. For now might be easier for me just to stick with upscaling a 1080p final file.


#13

Hey,

So I am quite new to shotcut and used the above html code. THANK YOU! However, for some reason, the seconds counting up doesn’t actually match up with the amount of time. It is much slower than real time. I did a straight copy and paste of the above. Any ideas?

Cheers
Chris


#14

I don’t think you have to use that html anymore, if you just use the text filter with #timecode# in it it displays HHMMSSmm by default now


#15

No. #timecode# displays HH:MM:SS:FF where FF is the frame count. There will be a new filter coming out in the next release (18.09) that adds a new timer filter feature. This new filter will display seconds and fractions of seconds in a few selectable formats. Stay tuned.


#16

Here is a preview:


#17

Out of curiosity - wouldn’t it be appropriate to add a new #keyword# to the existing text filter? Either fixed one(s) like #milliseconds#, or an interpreted one that takes in common time value formats? I know that wouldn’t address the count up/down from a given value.
( was trying to see if a millisecond option was already available - didn’t find one, but it is a largely undocumented rabbit hole to explore )


#18

I think the keywords are kind of hidden and therefore unintuitive. People won’t think to look for a timer/stopwatch keyword in the “text” filter. Also, I don’t want to pollute the text filter UI with settings that only apply to a specific keyword. Up/Down, start and duration would all be settings that only apply when the “timer” keyword is present.


#19

@brian,
So with this new filter will we be able to do countdown effects with the timer and start a countdown from whatever time we want?


#20

Yes. You would choose “down” for the direction and then set the duration to whatever time you want to start counting down from. It will count from that number to zero in whatever format you choose.