ImageLayer

ImageLayer is a super useful utility template for displaying a full screen image over a video using the SPX Graphics Controller.

When template is played a full screen image animates in and when stopped it will quickly fade out.

Template will accept images of any sizes but the optimal size is 1920x1080 pixels.

Image can also have transparency for overlay effects, such as logos or call-to-action graphics etc.

There are two image sources available:

• local file - a drop down file selector which will show all .png images present in ASSETS/media/images/hd -folder.
• web URL - a textfield for entering a url (such as https://source.unsplash.com/random/1920x1080?bokeh). To use a local file, leave this field empty.

The in-animation type can be changed with the template controls.

• Cut the image is shown using a hard cut.
• Fade the image fades in.
• Slide in from top, right, bottom or left - in which the image layer will move to the default position.
• Wipe in from top, right, bottom or left - in which the image will not move, but it will be masked / wiped in from the given direction
• Blur uses a gaussing blur filter to introduce the image.
  
  

See section customizations for more info about the animation parameters.

• Smooth - speed of movement ramps down for a smooth ending effect. The easing function used by this option is (by default) easeOutQuint.
• Linear - speed of the movement keeps linear until the end. Robotic, mechanic kind of movement.
• Ease Back - the movement overshoots and eases back for a rubbery, relaxed effect. The easing function used by this option is (by default) easeOutBack.
• Bounce - the movement bounces at the end for a bouncy, funny effect. The easing function used by this option is (by default) easeOutBounce.

The template comes in two copies, one for layer 2 and another for layer 19, but nothing stops you from using the template on even more layers. You can add the same template to your project several times and change those layers within the project settings to different layers.

For inspiration see https://en.wikipedia.org/wiki/Multiplane_camera :-)

If you need to chroma key graphics you can use chroma.png as a backdrop. The image layer also works nicely with other text templates. Use a transparent image as background for your graphics and use another template for texts, such as Texter.

⚠ REMEMBER to make backup copies of original files before making any changes.

Image Layer's main purpose is to show an image and therefor does not provide a lot of additional customizations. You should save your own images or backgrounds in a PNG format to [spxgc-root]/ASSETS/media/images/hd -directory. The optimal image size is 1920 x 1080 pixels.

The speed of the fade in is defined with a FadeInDurationMs -variable in the HTML-source code. The default fade-in value is 200ms (0.2 seconds).

The amount of movement is set with a MovementAmountPr -variable value, which is in range 0 (no movement) to 100 (size of screen). Default value is 50 (percent).

The speed of the Slide / Wipe is set with a InMoveDurationMs -variable, which is 800ms (0.8 seconds) by default. Both movements also use fade in time with movement.

Fade out is the out animation in all cases. The speed of fade out is set with a FadeOutDuratinMs -variable, which is 50ms (0.05 seconds = approx 2 frames) by default.

Easing options can be modified or added within the SPXGCTemplateDefinition -object in the template. The template will need to added in to the project after changes in the definition object. For more easing functions see https://easings.net/