Brilliant. These would work very well. Thank you for pointing out these - I never knew about them…
Your wish is my command. Below is the HTML file. Just click in the green-screen area. If you want e,g, 3 digits displayed change the <span>00</span> to <span>000</span>
<!DOCTYPE html>
<html>
<head>
<title>Click counter</title>
<style>
/*
------------------------------------------------------------------------------
You may change any of the ":root" parameters, but do not change anything else.
If you want the the counter background to be transparent set the following:
--background-color: transparent;
Then in Shotcut chroma-key the --screen-color value
------------------------------------------------------------------------------
*/
:root {
--width : 600px;
--height : 500px;
--compass-position: SE; /* NW, N, NE, W, C, E, SW, S, SE */
--screen-color : #00ff00; /* or e.g. black or white; */
--background-color: #666666; /* or e.g. transparent; */
--font-color : yellow;
--font-family : verdana, arial, sans-serif;
--font-size : 32px;
--font-weight : normal; /* or bold, bolder, lighter, 100, 200, ... 900 */
--font-style : normal; /* or italic or oblique */
--margin-vertical : 8px;
--margin-horiz : 8px;
--padding-vertical: 6px;
--padding-horiz : 6px;
--beep-on-click : yes; /* or no */
}
#screen {
display : grid;
width : var(--width);
height : var(--height);
background-color: var(--screen-color);
cursor : none;
}
span::selection { background: transparent; }
.NW {justify-content: start ; align-content: start ;}
.N {justify-content: center; align-content: start ;}
.NE {justify-content: end ; align-content: start ;}
.W {justify-content: start ; align-content: center;}
.C {justify-content: center; align-content: center;}
.E {justify-content: end ; align-content: center;}
.SW {justify-content: start ; align-content: end ;}
.S {justify-content: center; align-content: end ;}
.SE {justify-content: end ; align-content: end ;}
span {
display : none;
margin : var(--margin-vertical) var(--margin-horiz);
padding : var(--padding-vertical) var(--padding-horiz);
background-color: var(--background-color);
color : var(--font-color);
font-weight : var(--font-weight);
font-style : var(--font-style);
font-size : var(--font-size);
font-family : var(--font-family);
width : fit-content;
height : 1em;
line-height : 1em;
}
</style>
</head>
<body>
<main id="screen"><span>00</span></main>
<!--
e.g. to get 3 digits displayed with leading zeros change the line above to:
<main id="screen"><span>000</span></main>
e.g. to get no leading zeros change the line above to:
<main id="screen"><span>0</span></main>
e.g. to start with a blank until the count = 1 change the line above to:
<main id="screen"><span></span></main>
-->
<script>
document.addEventListener('DOMContentLoaded', function(event) {
const root_style = getComputedStyle(document.documentElement);
const compass_position = root_style.getPropertyValue("--compass-position").trim().toUpperCase();
const beep_on_click = root_style.getPropertyValue("--beep-on-click" ).trim().toLowerCase() === "yes";
const main = document.getElementsByTagName('MAIN')[0];
main.classList.add(compass_position);
const span = document.getElementsByTagName('SPAN')[0];
const span_style = span.style;
let count_string = span.textContent.trim();
let ndigits;
if (count_string === '') {
ndigits = 1;
} else {
ndigits = count_string.length;
span_style.display = 'inline';
}
ndigits = (count_string === '') ? 1 : count_string.length;
let count = -(-count_string);
const beep_sound = new Audio('data:audio/wav;base64,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');
main.onclick = function(e){
span.textContent = (++count).toString().padStart(ndigits, '0');
if (count === 1) { span_style.display = 'inline'; }
if (beep_on_click) { beep_sound.play();}
e.preventDefault();
};
})
</script>
</body>
</html>
4 Likes
@Elusien, this is fantastic.
The only small problem I see, is if we click too fast, the background-color area briefly turns blue, as if it was selected for a short moment. Then to stop it from turning blue on each click, we need to click outside of the screen-color area. But I don’t think this will be an issue for @spamless.
Also would it be possible to add a variable for the font weight?
2 Likes
@MusicalBox , I’ve updated the HTML listing above to:
- Fix the flash of colour;
- Fix the problem of the first click not updating the counter;
- Add a new parameter:
--font-weight : normal; /* or bold, bolder, lighter, 100, 200, ... 900 */ - Add a new parameter:
--font-style : normal; /* or italic or oblique */
4 Likes
Perfect! 
Another great and useful Elusien tool for the Shotcut community.
2 Likes
In my experiments, I found that it works best to set Elusien’s Click Counter tool to white text on a black background.
I have also set the text size to 100px and the vertical and horizontal margins to 80px.
Then after the capture, drag the video file in Shotcut, sync it with the video on track V1 and apply these filters in this order:
- Chroma Key: Simple. Key color is set to black. Distance is set to 70.
- Color Grading. Use the Highlight (Gain) parameters to change the color of the white text to any other color.
- Size, Position & Rotate to position the text on the screen.
Difference between removing the green and the black background with the Chroma Key filter.
Green background zoomed at 200%
Black background zoomed at 200%
4 Likes
C’est effectivement un outil qui pourrait être très utile.
Question pratique: Comment fait-on pour enregistrer avec OBS en même temps que l’on visualise le film lorsqu’on a qu’un seul écran?
Un autre question pour @brian : Le filtre texte simple permet de saisir des paramètres dans la zone de texte (ex: #timecode#). Existe t’il un paramètre qui donnerait le rang du clip sur sa piste?
Dans ce cas, on mettrait un clip de la longueur de la vidéo avec un filtre texte simple et il suffirait de le scinder à chaque fois que l’on veut incrémenter le compteur.
It is indeed a tool that could be very useful.
Practical question: How do I record with OBS while viewing the movie when I have only one screen?
Another question for @brian: The simple text filter allows to enter parameters in the text field (e.g. #timecode#). Is there a parameter that would give the rank of the clip on its track?
In this case, we would put a clip of the length of the video with a simple text filter and just split it each time we want to increment the counter.
Translated with DeepL Translate: The world's most accurate translator (free version)
2 Likes
Using OBS there is a source called Image Slide Show.
It can run on its own or with hotkeys to get to the next slide.
5 Likes
@elusien, you deserve a medal from our new King Charles. 
Fantastic devotion to duty.
This is utterly brilliant and I made this demo in no time.
I tweaked the HTML a little: larger canvas size, Half grey background (#808080) 200 pixel font size, black text on white background. Then applied a Crop rectangle filter, Blend Mode: Hard Light filter, and a SPR filter to bring the box into the middle a bit.
My adapted HTML file (remove the fake TXT extension) is here:
Elusien click counter LARGER with grey background.html.txt (3.4 KB)
Demo video:
3 Likes
In addition to @MusicalBox’s slick demo, let me add a recommendation. I haven’t used OBS before, but I use Techsmith’s free brilliant “Capture” app for Windows or Mac. It will also work well for all these screen-recording needs, and it’s only 14.7 MB. Check it out if you’re on a platform that runs it. On the other hand, I am a big fan of cross-platform and open-source stuff, and I will sure check out OBS Studio soon.
This thread had generated some terrific solutions and ideas, and I thank you guys. I’ll be studying the other follow-ups and acknowledging (more like crowing about excitedly) various of them that look excellent on a skim of what’s here since I last looked 24 hours ago!
/dr
There are also online tools called Tally counters, or Click counters that @spamless could use.
There are probably more, but I found these 3 that could easily be captured while watching the video and then blended into a project in Shotcut.Click counter #1
This one have red numbers on a black background. The numbers can be set to different sizes.Click counter #2
Black numbers on a green background.Click counter #3
Black numbers on a white background.
These counters you found are all great, @MusicalBox! I’ve bookmarked all three. I like the bold first font a lot. I like the discreeter operation of the second. And I like the third’s option to change the increment interval if desired!
Great idea.
/dr
Great work, sir! Much appreciated! This will help immensely.
/dr
Sorry. We do not have anything like that. And it would not be easy to add since a filter does not know how many clips on on a track.
If you set the --width, --height, --compass-position, --margin* parameters correctly to match your video’s resolution and desired position, you can get rid of the Size-Position-Rotate filter (which is expensive to execute).
2 Likes
Your HTML code is slick. Thanks again! How might I tweak it to have the counter rectangle’s background be transparent?
/dr
To make it transparent either set it to the same color ans the screen, or set it to the word “transparent”. e.g.
--background-color: var(--screen-color);
or
--background-color: transparent;
1 Like
That was easy! Thanks!
Now for a possibly trickier request:
What if I want the starting screen to be blank, but to increment to “1” with the first iteration (and then iterate normally)?
[Edited] Oh, wait, I figured it out: change
<main id="screen">0<span></span></main>
to
<main id="screen"><span></span></main>
This is just what I want now!
1 Like