Screen Layout

The SMIL Layout is defined via a section in the head area.

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<smil>
	<head>
		<!--  Controls, information or instructions -->
		<meta name="title" content="A SMIL Index file" />
		<layout>
			<!-- place here the layout instructions-->
		</layout>
	</head>
	<body>
	</body>
</smil>

Typical SMIL index structure

Global Resolution

The tag root-layout defines the width and height of the display area. It makes sense to use the resolution of the entire screen area for digital signage.

<layout>
  <root-layout width="1920" height="1080" />
</layout>

Root layout for HD resolution

The root layout is defined in pixel only by default. It is not necessary to add px. like in regions

Regions

The region-tag defines properties like position, z-index, width, height and some more of an area. With this technique, you create multiple zones. Some calls them split screens, too, but this is not correct. We call this multi zone because zones can overlap each other. That is more than only a simple “split”.

<layout>
  <root-layout width="1920" height="1080" backgroundColor="#000" />
  <region regionName="screen1" top="0" left="0" width="50%" height="100%" z-index="0" backgroundColor="red" />
  <region xml:id="screen2" top="0" left="50%" width="50%" height="100%" z-index="0" backgroundColor="green" />
  <region regionName="ticker_overlay" top="980px" left="0" width="1920px" height="100px" z-index="1"  backgroundColor="transparent" />
</layout>

Layout for two zones with a 100px height news ticker overlay in the bottom

Properties

regionName: An unique identification for this region. You can also use SMIL.20 ID or the correct SMIL 3.0 xml:id for that. If you specified both, regionName is used.
top: Top position of the region (px or %)
left: Left position of the region (px or %)
width: Region width (px or %)
height: Region height
backgroundColor: The background color of the region. You can use RGB values #000 or CSS names. backgroundColor property is not supported by the IAdea player.

By default, px is assumed for the top, left, width, and height properties.

Assign Content to Regions

You assign content to regions with the content attribute. In this example, we use a parallel playlist to display the content simultaneously.

Let's enhance our regions example from above with a body area

<smil>
	<head>
		<layout>
		  <root-layout width="1920" height="1080" backgroundColor="#000" />
		  <region regionName="screen1" top="0" left="0" width="50%" height="100%" z-index="0" backgroundColor="red" />
		  <region xml:id="screen2" top="0" left="50%" width="50%" height="100%" z-index="0" backgroundColor="green" />
		  <region regionName="ticker_overlay" top="980px" left="0" width="1920px" height="100px" z-index="1"  backgroundColor="transparent" />
		</layout>
	</head>
	<body>
      <video src="video.mp4" region="screen1" dur="20s" />
      <img src="image.jpg" region="screen2" dur="20s" />
      <ref src="rss_ticker.wgt" type="application/widget" region="ticker_overlay" dur="20s" />
	</body>
</smil>

On the left side, a video is played. In the overlay, an RSS-ticker widget show news.

Study some examples for multi zone.