WebVfx HTML Overlay Filters Update - Slideshows, Exploding Text

I have updated my WebVfx framework to version 1.1, which has some new features, namely Slideshow and Exploding Text. The webpage:

www.elusien.co.uk/shotcut

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:

2 Likes

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:

www.elusien.co.uk/shotcut

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!!) :sunglasses::sunglasses: 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)

(www.elusien.co.uk/shotcut).

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!

3 Likes

Absolutely brilliant.

Elusien, that looks VERY good. Excellent in fact !! :+1::+1:

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:

  • "h" - for centering horizontally;
  • "v" - for centering vertically;
  • "vh" or "hv" - for centering both horizontally and vertically
  • See the webpage for more information.

    1 Like

    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.

    1 Like

    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:

    • Tidy up the source code and put it on my website with instructions on how to use it (I’ll get back to you when I’ve done this).
    • Try out OBS’s virtualcam and stream the animation directly into Shotcut. I haven’t tried this yet, but I’m hoping it will pass alpha-channel (transparency) across, since videos recorded with OBS don’t have transparency, so to get that you have to use the green-screen and chroma-key technique.
    • Try to get it working with WebVfx in older versions of Shotcut that have the Text:HTML filter. There are a few difficulties with this at the moment, but I am reasonably hopeful I can do this, but it may take a day or two.
    • Record the gauges as a VP9 video (with transparency?) directly with Chrome, so cutting out OBS. The main problem with this is that each gauge is a separate canvas and I can only record 1 canvas in 1 VP9 video. Nevertheless it is an interesting prospect.
    1 Like