Transitions and Effects

From Xibo

Contents 1 Blueprint 2 Implementation 2.1 Server 2.2 XLF

Blueprint

Extend the server and python client to support transitions and effects/animations of media nodes while they are being displayed.

Implementation

Server

The idea would be to make transitions and effects in to modules in the same way as media is handled.

That way implementing new transitions or effects does not require adjusting the media classes for each new effect.

A new option would be added to the region timeline (where Edit/Delete) is currently displayed for Transitions and one for Effects.

Initial effects could include:

• Chroma key (green/blue screen)
• Black and white
• Hue/Saturation/Contrast control
• Drop shadow
• Blur
• Rotate
• Flip
• Spin
• Pulse (grow a little then shrink a little then grow again etc)

Initial transitions could include:

• Fade
• Cross fade
• Fly

XLF

The Cross-Platform Client Blueprint describes an initial XLF schema for transitions as follows:

<?xml version="1.0"?>
<layout schemaVersion="2" width="1366" height="768" bgcolor="#000000" background="126.jpg">
	<region id="47ff29524ce1b" width="650" height="475" top="95" left="65">
		<media id="1" type="image" duration="60" lkid="1" schemaVersion="1">
			<options>
				<uri>1.jpg</uri>
				<transIn>fadeIn</transIn>
				<transOut>fadeOut</transOut>
				<transInDuration>2000</transInDuration>
				<transOutDuration>1000</transOutDuration>
			</options>
			<raw/>
		</media>
		<options>
			<transOut>fly</transOut>
			<transOutDuration>2500</transOutDuration>
			<transOutDirection>NW</transOutDirection>
		</options>
	</region>
	<region id="47ff29524ce1f" width="1800" height="255" top="0" left="0">
		<media id="130" type="image" duration="60" lkid="1" schemaVersion="1">
			<options>
				<uri>130.png</uri>
				<transIn>None</transIn>
				<transOut>None</transOut>
			</options>
			<raw/>
		</media>
		<options>
			<transOut>fadeOut</transOut>
			<transOutDuration>500</transOutDuration>
		</options>
	</region>
</layout>

That schema is actually implemented already client side, however no server is currently able to generate that XLF for the client to use. The only example in the wild is the current splash screen that ships with the Python client.

I would propose adjusting that slightly as follows:

<?xml version="1.0"?>
<layout schemaVersion="2" width="1366" height="768" bgcolor="#000000" background="126.jpg">
	<region id="47ff29524ce1b" width="650" height="475" top="95" left="65">
		<media id="1" type="image" duration="60" lkid="1" schemaVersion="1">
			<options>
				<uri>1.jpg</uri>
			</options>
                       <transitions>
                               <in type="fadeIn" duration="2000" />
				<out type="fadeOut" duration="1000" />
                       </transitions>
                       <effects>
                               <effect type="blur" amount="10" radius="2"/>
                               <effect type="dropshadow" />
                       </effects>
			<raw/>
		</media>
		<transitions>
			<out type="fly" duration="2500" direction="NW" />
		</transitions>
               <options />
	</region>
	<region id="47ff29524ce1f" width="1800" height="255" top="0" left="0">
		<media id="130" type="image" duration="60" lkid="1" schemaVersion="1">
			<options>
				<uri>130.png</uri>
			</options>
			<transitions>
				<in />
				<out />
			</transitions>
                       <effects>
                               <effect type="spin" direction="clockwise" />
                       </effects>
			<raw />
		</media>
		<transitions>
			<out type="fadeOut" duration="500" />
		</transitions>
               <options />
	</region>
</layout>