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
Hi @spamless - @elusien will doubtless come up with a html solution, but another way would be for you to do some frame-by-frame editing on the screen capture clip and simply trim away the initial "00"s so the clip starts with the initial “1”.
1 Like
Ah, OK, glad you sorted it out with the code. Excellent. (We posted at exactly the same time…)
1 Like
I have updated the HTML/CSS/Javascript in my post above to allow this by changing the HTML code to:
<main id="screen"><span></span></main>
i.e. have an empty <span> element to start with.
Just replace your .html file with the code above.
1 Like
Cool, here it is with my first attempt using it. I love it!
I had to figure out what to do when my mouse pointer was recorded. But I realized I would just crop it out. I got nervous right at the end and clicked twice on the very last number, so I had to do a second take of the last number and splice it on the end. But that was trivial.
I had never used Chroma Key:Simple before, but I figured it out after a couple of minutes. I have the background color as white and the counter background as transparent. And as you can see, I changed the font family.
Very nice!
/dr
Add the CSS property “cursor: none;” to the “#screen” element, as below (I have updated the HTML/CSS code above accordingly).
#screen {
display : grid;
width : var(--width);
height : var(--height);
background-color: var(--screen-color);
cursor : none;
}
2 Likes
Very nice! Thanks once more.
I don’t know if I’m overstaying my welcome, but an idea now is that there could be an optional beep sound when the number increments. Well, it’s just a brainstorming idea for now. I do grasp enough about your code to see what’s going on and make small changes myself, but adding new features is beyond my current skill level with HTML/CSS.
1 Like
OK there is a new parameter:
--beep-on-click : yes; /* or no */
If you set it to “yes” you get a beep whenever you click, otherwise you don’t.
The HTML/CSS/Javascript code above now has this feature added.
2 Likes
Amazing! Once again, fantastic service from @elusien! What a guy!!
@spamless - about the cursor. In addition to @elusien’s solution, you can tweak settings in OBS and ShareX so the screen capture doesn’t capture the cursor / pointer.
One more point @spamless, in your video I can’t help noticing the orange numbers are a little blocky - probably due to
- using chromakey, and
- did you capture the WHOLE screen, not just a small section? Best to capture the whole screen and crop out the edges…
About chromakey, I would use Blend Mode instead. My post here explains that if you make the background half-grey (#808080) then you can make the numbers one of the 100% colours, apply a Blend Mode: Hard Light filter and the result will be much clearer… Of course if you want orange that isn’t a 100% colour. It will still work, but the orange colour won’t be solid, but transparent to some degree. Hope this helps.
More experimenting with the "Blend Mode:Hard Light" Filter - using coloured text
2 Likes
Oh wow, you can add a beep sound represented by a long string of letters and numbers in Javascript?
Does that work in HTML/CSS?
That’s amazing.
1 Like
By the way, yesterday I looked for apps on my phone using the search string, “voice-activated counter.” I got quite a few hits! Some looked interesting. But none had a record feature that I could see.
Yes it does. Using the <audio> element e.g.
<audio controls src="data:audio/wav;base64,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">
</audio>
For now I’m still using Techsmith’s fine, light-footprint “Capture” app. I did install OBS the other day on reading remarks here, but I haven’t tried it yet. It looks quite capable, but also large. I haven’t looked at ShareX at all yet. I also have successfully used Windows’s native XBox Game Bar to record screens in the past.
I had my background color as white, which was apparently not optimal. I’ll try black next time. Then the edges of the numbers will be black instead of a droopy white. I see your post above comparing the results from green and black.
Thanks for the tips! I will look at your link and will try Blend Mode, which I don’t yet know about. I did capture the whole screen and then used crop and move filters. But I was just flying by the seat of my pants. There’s a lot about Shotcut I don’t yet know well enough, but I’m getting better with it every week. I do like the orange numbers for the counter. Pale yellow is also decent.
That’s why I prefer using the Chroma key filter instead of Blend Mode.
Like I show in Post #13, I capture white text on a black background.
Then, when I import the capture in the project, I add the Chroma Key filter to remove the black background, I adjust the Distance parameter if needed.
If I want to change the white text to any other color, I add a Color Grading filter below the Chroma Key filter. Then I choose a color in the Highlight (Gain) color wheel. Or, to turn the text black, I pull the Value slider all the way down.
All the colors will be solid (no transparency)
4 Likes
Dear Wizard, oops, I mean Neil, 
I’ve been using this counter and marveling at it. Thanks again. I have a new enhancement idea. My mouse finger gets tired of clicking, like, 100 times, and I missed some clicks and had to re-record a session about four times. Or maybe the mouse click just doesn’t take sometimes. Could be the fault of my mouse, I don’t know. But anyway, it occurred to me it could be helpful if as an alternative the spacebar would also work to increment the counter. I use my thumb for that, and it doesn’t get as tired as my index finger.
I looked online for code and I found it! I managed to get it to work along with your code. But perhaps you’d prefer to add the option with your own style of code rather than my hack. Mine is probably not up to your standard of excellence and consistency, notwithstanding that I got it to work.
Okay, here’s mine. After your main.onclick function, I added this additional function:
document.body.onkeydown = function(e){
if (e.keyCode == 32) {
// add your code here.
span.textContent = (++count).toString().padStart(ndigits, '0');
if (count === 1) { span_style.display = 'inline'; }
if (beep_on_click) { beep_sound.play();}
e.preventDefault();
};
}
I got the idea from this stackoverflow page.
The increment code in my function is of course copied from your onclick function. I am curious about what e.preventDefault(); does. It seemed to work without or with it, but I stuck it in anyway.
Much obliged for any further input!
/spamless
2 Likes