Television Simulator comes with a simple and flexible layout system that allows you to display multiple pieces of content on the screen together. This is generally seen in Program Guides since traditionally these have had videos playing in the top half of the screen and the guide data below. You can use a layout in place of any other channel content and can be nested inside of other layouts or loops.

Anatomy of a layout

Layouts have two required properties: a and b, both containing nested content.

In the example above, we have a horizontal split and a vertical split as well as a horizontal split which contains a vertical split in its a slot. There’s also a picture in picture split which superimposes content b over content a.

Examples with code

Creating a channel with a layout is straightforward:

channels:
- number: 130
	name: Split example
  h-split:
	  a:
		  image: /placeholders/example-ad.gif
		b:
			generator: color-bars

Nesting a layout can also be done with ease:

channels:
- number: 132
  name: Multiple splits
  v-split:
	  a:
		  generator: color-bars
		b:
			h-split:
				a:
					image: /placeholders/example-program.gif
				b:
					generator: test-pattern

Here’s a crazy example of nesting loops and splits:

- number: 134
  name: This makes no sense but is possible
  loop:
  - v-split:
      a:
        loop:
        - image: /placeholders/example-ad.gif
          duration: 5
        - h-split:
            a:
              generator:
                type: color-bars
                volume: false
            b:
              generator:
                type: test-pattern
                volume: false
          duration: 10
      b:
        h-split:
          a:
            loop:
            - image: /placeholders/example-program.gif
              duration: 5
            - video:
                provider: youtube
                src: m6iV1CkCnWk
              duration: 10
          b:
            generator:
              type: color-bars
              volume: false
    duration: 30
  - video:
      provider: youtube
      src: m6iV1CkCnWk
    duration: 10