I have updated my WebVfx framework to version 1.1, which has some new features, namely Slideshow and Exploding Text. The webpage:
has been revamped and updated. The new Javascript file can be downloaded from there. The original posting has more information:
another post that shows what can be achieved is:
Fantastic, brilliant! Thank you so much for your amazing work, Neil. The exploding text in your TERMINATOR video credit is amazing. I will be playing with this, and the slideshow aspect a lot. Also, your Frames to Time utility is genius - that will really make timing subtitles so much easier. Jon
@jonray, @Alex_Wright, @john_solo
The latest update (version 1.2) is now available on the website:
It adds a ātype: splittingā option to slideshows, in which each image is split in half (horizontally if using "from: left/rightā, vertically if using āfrom: top/bottomā). Each half then slides in from opposite sides to create the whole image at the end of the transition.
This new option can be CPU-intensive, but it is worth it.
Thank you, Elusien, great news. Looking forward to experimenting. Could be in a little while though - busy with a few other things, including enjoying the UK weather (at last!!) 
Also trying to find time to play with the keyframes feature in 18.05, and also doing some music stuff. Iāll report back when Iāve had a go with your new webvfx framework. Jon
@jonray, @Alex_Wright, @john_solo, @sauron
Iāve added yet another feature (Fragmentation) to the framework (v1.3)
This is similar to Explosions, but whereas Explosions explodes text into individual characters, Fragmentation slices an HTML element, which can contain anything: text, images, tables, you-name-it, and then animates these individual fragments. The only requirement is that the HTML must have the attribute āposition: absolute;ā.
An example can be seen here:
Enjoy!
Absolutely brilliant.
Elusien, that looks VERY good. Excellent in fact !! 
Gosh, I have so many things to experiment with now - your slideshow, exploding text, fragment effects, SC keyframesā¦
I did have a quick go with your slideshow and it worked as a html but I didnāt get a chance to import into SC. Will post the result when I get a chanceā¦
Iāve just completed my final update (v1.4) before I go on a golfing holiday for a few weeks.
Frequently it is important that HTML elements are centered on the screen, either horizontally, vertically or in both dimensions. This can now be done relatively easily by using the ādata-centerā attribute on the element that needs to be centered. (NOTE the American spelling āerā, not the British spelling āreā). This attribute can take the value of:
See the webpage for more information.
Fragmentation, is really cool. I mean REALLY !!!
Thanks.
I downloaded the WebVfx.js file, what do I do next? How to install it?
Just reference the WebVfx.js file in your HTML, preferably just before the terminating ā<html>ā tag. e.g.
</body>
<script src="WebVfx.js"></script>
</html>
if the Javascript file is in a different folder from the HTML file you will have to include that. See the examples on: http://www.elusien.co.uk/shotcut/
Put html modified and the JS in the same folder
add filter āhtmlā
Tick the WebVfx.js
Link the html (NB it will import it) and it should load
Hi Elusien!
Iād like to add a speedometer gauge (one of those from Canvas Gauges) to my bike ride videos, but itās not very clear to me how can I feed this with speed data from a GPS log.
I know WebVfx is deprecated, but thereās apparently no alternative, since there is no up-to-date software like DashWare that works under Linux.
I would really appreciate your assistance.
It would be easier for me to explain if you could give me a sample GPS file with speed/time data in it (or even a few lines of text).
If you are not comfortable with javascript programming then I might be able to come up with something for you to use.
Sure, Elusien, thank you!
GPX sample:
<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with BasicAirData GPS Logger for Android - ver. 2.3.2 -->
<gpx version="1.0"
creator="BasicAirData GPS Logger 2.3.2"
xmlns="http://www.topografix.com/GPX/1/0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.topografix.com/GPX/1/0 http://www.topografix.com/GPX/1/0/gpx.xsd">
<name>GPS Logger 20210430-150349</name>
<time>2021-04-30T14:48:53Z</time>
<trk>
<name>Track 20210430-150349</name>
<trkseg>
<trkpt lat="48.06308141" lon="11.69585083"><ele>600.000</ele><time>2021-04-30T13:05:58Z</time><speed>0.000</speed><sat>18</sat></trkpt>
<trkpt lat="48.06307260" lon="11.69585227"><ele>600.000</ele><time>2021-04-30T13:05:59Z</time><speed>0.580</speed><sat>18</sat></trkpt>
<trkpt lat="48.06307031" lon="11.69585026"><ele>600.000</ele><time>2021-04-30T13:06:00Z</time><speed>0.420</speed><sat>18</sat></trkpt>
<trkpt lat="48.06306693" lon="11.69585201"><ele>601.000</ele><time>2021-04-30T13:06:01Z</time><speed>0.330</speed><sat>18</sat></trkpt>
<trkpt lat="48.06304965" lon="11.69585303"><ele>601.000</ele><time>2021-04-30T13:06:02Z</time><speed>1.270</speed><sat>18</sat></trkpt>
<trkpt lat="48.06301394" lon="11.69587705"><ele>602.000</ele><time>2021-04-30T13:06:03Z</time><speed>2.910</speed><sat>18</sat></trkpt>
<trkpt lat="48.06298345" lon="11.69589970"><ele>603.000</ele><time>2021-04-30T13:06:04Z</time><speed>3.860</speed><sat>18</sat></trkpt>
<trkpt lat="48.06294861" lon="11.69592725"><ele>603.000</ele><time>2021-04-30T13:06:05Z</time><speed>4.400</speed><sat>18</sat></trkpt>
<trkpt lat="48.06289336" lon="11.69597034"><ele>603.000</ele><time>2021-04-30T13:06:06Z</time><speed>5.860</speed><sat>18</sat></trkpt>
<trkpt lat="48.06284071" lon="11.69600828"><ele>602.000</ele><time>2021-04-30T13:06:07Z</time><speed>6.020</speed><sat>17</sat></trkpt>
<trkpt lat="48.06279572" lon="11.69604358"><ele>601.000</ele><time>2021-04-30T13:06:08Z</time><speed>5.870</speed><sat>18</sat></trkpt>
<trkpt lat="48.06274944" lon="11.69607545"><ele>600.000</ele><time>2021-04-30T13:06:09Z</time><speed>5.830</speed><sat>18</sat></trkpt>
<trkpt lat="48.06269604" lon="11.69613187"><ele>599.000</ele><time>2021-04-30T13:06:10Z</time><speed>6.600</speed><sat>18</sat></trkpt>
<trkpt lat="48.04695211" lon="11.69866260"><ele>620.000</ele><time>2021-04-30T13:12:04Z</time><speed>5.610</speed><sat>17</sat></trkpt>
<trkpt lat="48.04690709" lon="11.69871417"><ele>618.000</ele><time>2021-04-30T13:12:05Z</time><speed>4.100</speed><sat>17</sat></trkpt>
<trkpt lat="48.04687247" lon="11.69874310"><ele>617.000</ele><time>2021-04-30T13:12:06Z</time><speed>4.340</speed><sat>17</sat></trkpt>
<trkpt lat="48.04684524" lon="11.69876757"><ele>617.000</ele><time>2021-04-30T13:12:07Z</time><speed>3.810</speed><sat>18</sat></trkpt>
<trkpt lat="48.04680933" lon="11.69879347"><ele>616.000</ele><time>2021-04-30T13:12:08Z</time><speed>3.600</speed><sat>18</sat></trkpt>
<trkpt lat="48.04678806" lon="11.69881662"><ele>617.000</ele><time>2021-04-30T13:12:09Z</time><speed>3.460</speed><sat>18</sat></trkpt>
<trkpt lat="48.04676845" lon="11.69882828"><ele>617.000</ele><time>2021-04-30T13:12:10Z</time><speed>2.120</speed><sat>18</sat></trkpt>
<trkpt lat="48.04676240" lon="11.69882778"><ele>617.000</ele><time>2021-04-30T13:12:11Z</time><speed>0.720</speed><sat>18</sat></trkpt>
<trkpt lat="48.04675951" lon="11.69882316"><ele>617.000</ele><time>2021-04-30T13:12:12Z</time><speed>0.000</speed><sat>18</sat></trkpt>
</trkseg>
</trk>
</gpx>
Speedometer:
<!doctype html>
<html>
<head>
<title>Speedometer</title>
<script src="../Templates/gauge.min.js"></script>
</head>
<body>
<!-- Injecting radial gauge -->
<canvas data-type="radial-gauge"
data-width="300"
data-height="300"
data-units="Km/h"
data-title="false"
data-value="0"
data-min-value="0"
data-max-value="60"
data-major-ticks="0,10,20,30,40,50,60"
data-minor-ticks="2"
data-stroke-ticks="false"
data-highlights='[
{ "from": 0, "to": 15, "color": "rgba(0,255,0,.15)" },
{ "from": 15, "to": 30, "color": "rgba(255,255,0,.15)" },
{ "from": 30, "to": 40, "color": "rgba(255,30,0,.25)" },
{ "from": 40, "to": 50, "color": "rgba(255,0,225,.25)" },
{ "from": 50, "to": 60, "color": "rgba(0,0,255,.25)" }
]'
data-color-plate="#222"
data-color-major-ticks="#f5f5f5"
data-color-minor-ticks="#ddd"
data-color-title="#fff"
data-color-units="#ccc"
data-color-numbers="#eee"
data-color-needle-start="rgba(240, 128, 128, 1)"
data-color-needle-end="rgba(255, 160, 122, .9)"
data-value-box="true"
data-animation-rule="bounce"
data-animation-duration="500"
data-font-value="Led"
data-animated-value="true"
></canvas>
</body>
</html>
JS coding would take a long time to be refreshed, over 14 years ago I coded for the last time, during webmaster classes. Too bad I couldnāt find any job after that, but itās a different story.
Thank you for the data. I wonāt be able to look at this till tomorrow (Saturday) afternoon, but it doesnāt look too difficult as the data is in XML format, which is doddle to parse with jQuery - I already have a working speedometer code, so itās just a bit of tinkering really. I would expect to have something for you to try by later on tomorrow evening.
hi @Elusien,
I lost track of this topic. So is your WebVfx and other wonderful tool now available again?
Could you provide tutorial link or a sample file so I can quick start using them again ? especially interested is the ācreditā and some of this web animation. Not clear about OBS animation though ā¦
No, Iām afraid WebVfx is not available in recent versions of Shotcut. My plan is to help EuroCity82 to create a working speedometer in HTML/CSS/Javascript that will get its input from a file created by a GPS device, easily modified to any other type of input.
This can then either be used with an old version of Shotcut that does support the WebVfx interface, or it can be run as a browser-source in OBS or can be run in a normal browser and a the screen-recording taken. I may even tie it in to another project Iām working on that creates a VP9 video directly from the browser, with no other software needed.
I plan on doing a tutorial on how to use this.
ok thanks @Elusien for the clarification.
Looks like will wait for your tutorial then.
Iāve managed to put the HTML+Javascript together to decode the GPS data and feed it into two gauges: one a speedometer, the other an altimeter. The result is shown below. I didnāt record the whole of the trip since there is a a 7-minute gap in the data and watching the speedo go from 6.6 km/h down to 5.6 over 7 minutes is like watching paint dry. I recorded the animation as a ābrowser-sourceā using OBS Studio and trimmed the resulting file in Shotcut.
Iām looking at several improvements: