Speedometer Effect?

Any ideas on how to accomplish a speedometer effect with the numbers flipping up and down rapidly?

If you give me a better specification of what you want to achieve I may be able to do this in a Text:HTML filter for you. Would you like something simple like this: https://codemyui.com/jquery-number-counter/ or something with a bit of style added to it. Do you want certain values displayed at certain points in time or just something that increases then decreases.

I once did a stopwatch (which is similar) and frame-counter for use in Shotcut - a demo of which is included here: http://elusien.co.uk/shotcut/webvfx/Stopwatch.html and also a gauge which is here: http://elusien.co.uk/shotcut/webvfx/Gauge.html though I would probably code them differently now.

Here is the result of my first attempt at a filter. Is this what you are looking for:

1 Like

Amazing! Yes close! Can it be any color, no box around and have keyframable location? I want to move it left to right as it rises like in a animated bar graph…

This one though looks great. I can think of other use cases for it

Yes to all of these queries, however moving it about the screen is best done using Shotcut’s Size & Position filter with keyframes. It is much easier to do than tailoring CSS animation.

The styling is done with CSS so the color and border (box) can be changed very easily, as can the size.

There are a couple of changes I want to do to the Text:Html filter and also add some comments on the parameters. I’ll post it in a little while for you to plauy around with.

Thank you!

@bentacular the ZIP file below contains 2 files: WebVfx.js and speedo-digital.html. Unzip them into a directory/folder and in Shotcut use the HTML file (which itself loads the javascript file) as a Text:HTML filter (don’t forget to tick the box that says “Use WebVfx JavaScript Extension”).

Read the notes in the HTML file for ways in which to tailor the speedometer. It will not handle negative values, but it will handle decimal (or integer) numbers of any size.

You can quickly check any changes you make by running it in a browser (on Windows just double-click on the file) and only use Shotcut once you are happy with the result.

If you have any problems let me know. Speedo-Digital.zip (31.6 KB)

1 Like

Thanks again! This will be epic!

I figure, this would be good for presentations. Here’s a quick and dirty mock-up. I sttill need to tweak


This topic was automatically closed after 90 days. New replies are no longer allowed.