/*
=====================================================================
Elusien's WebVfx framework for Shotcut (http://elusien.co.uk/shotcut)
=====================================================================
For a full description, including documentation and examples see the above website.
This framework enables Shotcut HTML Overlay filters to be developed quickly using a modern browser,
with all its development tools (e.g. using function key F12) at your disposal. Shotcut does not have any
such tools, other than a basic console.log, and in many cases of error you just end up with a blank screen.
You can style the HTML elements as normal using CSS then modify the properties you want to animate
using this framework.
When you apply this filter to a clip in Shotcut, you need to tick the box that says
'Use WebVfx javascript extension' and confirm that you know how to use it.
There are 3 parts to this framework two of which are exposed to the user via HTML tag parameters:
1) Animation effects:
This enables you to animate CSS properties for any of the HTML elements in the HTML Overlay filter.
It also enables the use of "keyframes" for fine control of the animation. e.g.
a) Fadeout an element:
FADING TEXT
b) Fadeout an element, then fade it back in:
TEXT FADING OUT THEN BACK IN
c) Change an element's colour, move it around, change it from a square shape to a circle.
HI
2) Stopwatch effects:
This enables you to have 1 or more stopwatches in the HTML Overlay filter. It also enables the
use of "keyframes" for fine control of the stopwatches.
A stopwatch consists of 4 elements specified using HTML '' tags.
number 1 is the frame number;
number 2 is the hour number;
number 3 is the minute number;
number 4 is the millisecond number
Normally you would initialise each of the elements by placing a zero (0) in it. Placing any
other number will initialise it to that value. Leaving the empty will hide it (see examples). e.g.
a) Stopwatch showing frame-number, minutes and seconds:
Frame 0 => 00m 00s
b) Stopwatch showing minutes and seconds, running for 120 seconds with various pauses and resumes:
00m 00s
3) User-supplied effects:
This enables you to provide your own javascript function to do something to the HTML. This function
will be called for each frame with the parameters:
time: the "normalised time" of this frame (0.0 to 1.0);
frame_number: the number of this frame
frame_rate : the frame-rate in frames per second
To do this you need to create the javascript function, then add it to a GLOBAL-scope array called
"webvfx_add_to_frame" e.g.