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
That’s great. @spamless. Triggering it wit the spacebar is a cool idea. Well done for finding the code, and even more so for making it work! 
BTW, @elusien is on vacation now (on a nice cruise 
) so if he doesn’t reply, that’s why.
PS would it be possible for you to post the complete code of the counter, including the JavaScript? I’m unsure where to add your extra code into the original… You could post it as a .txt file maybe. Thanks!
1 Like
Sure, I can make it available temporarily. This link shares it through the end of October 2022. Password is “4shotcut”.
I do some hobby coding myself and I know that, while this works, it’s embarrassing to present an inefficient algorithm that adds a near-duplicate function just to change the event input method. But I don’t know enough yet about HTML/CSS coding to fix what I see as deficiencies in the direction of elegance. So I see this as a patchwork solution until the “master” returns.
Btw, I’m on vacation for a week as of tomorrow myself.
2 Likes
Thank you, @spamless, I downloaded the code. It works fine. No problem with the code for me - I’m not good at understanding JavaScript. Yet. I’m trying to learn all the time … The main thing is - it works! Have a good vacation.
Indeed, @elusien is awesome!
1 Like
This is great!
I’m a little surprised though @spamless. You make it look almost effortless to do 67 push-ups, but you get tired pressing a mouse button 100 times? 
By the way, I think your new codes may need one other small improvement: Limiting the counter to one increment for each pressing of the space bar.
If you leave your finger on the space bar a fraction of a second too long, the counter will go up 2 steps instead of just one.
There is probably a fix for that. Let’s activate the Elusien Signal so he can check this when he’s back from his vacations. 
2 Likes
1 Like
Aw, shucks. Well, but on push-up day this week, which was Tuesday, I did three sets of 72! Sixty-seven is so … last week! Actually, I’ve been working on the new video for hours instead of packing for my flight tomorrow. I’ll upload it to my YouTube channel in a bit. I’m trying out a new effect, too.
I’ll look forward to his master hand on that. This also happened to me with the mouse clicks, by the way. Sometimes I’d get a double-click and ruin the take. A solution would be good.
Loved that Batsignal!
2 Likes
No need to activate the signal - I’ve located his ship. It’s the blue one
Seriously. It’s this actual ship:
…and this is the route. Nice!
2 Likes
Awesome!