How to Create a Tile Structure using API 5.0

Owned by Ramya Raman (Unlicensed)
Last updated: Jun 26, 2022 by Golan simani
43 min read

To create a customized tile of your own, please follow the steps below.

** Before creating the tile structure please add the relevant sources and configure Outputs as described here Add sources to the TAG and Configure Output Encoder respectively.

In this example, the tiles and tally 5.0 APIs are used to create the tile. Each section of the tile is explained below.

  1. Create the tile and tally using the below API’s.

API for creating Tile:

POST : http://{{ip_address}}:{{port}}/api/5.0/tiles/config/.json

Body Structure

{ "data": { "label": " Tile Presentation", "version": 0, "created": "2022-01-30T19:26:35.855Z", "modified": "2022-01-30T19:26:35.855Z", "content_type": "Channel", "min_width": 32, "min_height": 32, "default_width": 300, "default_height": 200, "description": "Channel Monitor Objects", "objects": [ { "type": "Border", "left": { "pixels": 0, "percentage": null }, "right": { "pixels": 0, "percentage": null }, "top": { "pixels":0, "percentage": null }, "bottom": { "pixels": 0, "percentage": null }, "max_width": { "pixels": null, "percentage": 100 }, "max_height": { "pixels": null, "percentage": 100 }, "alignment": "Top Left", "index": 1, "variant": "Dynamic" }, { "type": "Border", "z-index": 2, "content_type": "Channel", "left": { "pixels": 10, "percentage": null }, "right": { "pixels": 10, "percentage": null }, "top": { "pixels": 10, "percentage": null }, "bottom": { "pixels": 0, "percentage": null }, "max_width": { "pixels": null, "percentage": 100 }, "max_height": { "pixels": null, "percentage": 98 }, "alignment": "Top Left", "index": 1, "variant": "Static" }, { "type": "Audio", "left": { "pixels": 11, "percentage": null }, "right": { "pixels": 0, "percentage": null }, "top": { "pixels": 40, "percentage": null }, "bottom": { "pixels": 205, "percentage": null }, "max_width": { "pixels": 40, "percentage": null }, "max_height": { "pixels": 700, "percentage": null }, "alignment": "Bottom Left", "index": 1, "variant": "#9" }, { "type": "Audio", "left": { "pixels": 52, "percentage": null }, "right": { "pixels": 0, "percentage": null }, "top": { "pixels": 40, "percentage": null }, "bottom": { "pixels": 205, "percentage": null }, "max_width": { "pixels": 40, "percentage": null }, "max_height": { "pixels": 700, "percentage": null }, "alignment": "Bottom Left", "index": 2, "variant": "#9" }, { "type": "Audio", "left": { "pixels": 96, "percentage": null }, "right": { "pixels": 0, "percentage": null }, "top": { "pixels": 40, "percentage": null }, "bottom": { "pixels": 205, "percentage": null }, "max_width": { "pixels": 24, "percentage": null }, "max_height": { "pixels": 700, "percentage": null }, "alignment": "Bottom Left", "index": 3, "variant": "#9" }, { "type": "Audio", "left": { "pixels": 140, "percentage": null }, "right": { "pixels": 0, "percentage": null }, "top": { "pixels": 40, "percentage": null }, "bottom": { "pixels": 205, "percentage": null }, "max_width": { "pixels": 24, "percentage": null }, "max_height": { "pixels": 700, "percentage": null }, "alignment": "Bottom Left", "index": 4, "variant": "#9" }, { "type": "Audio", "left": { "pixels": 184, "percentage": null }, "right": { "pixels": 0, "percentage": null }, "top": { "pixels": 40, "percentage": null }, "bottom": { "pixels": 205, "percentage": null }, "max_width": { "pixels": 40, "percentage": null }, "max_height": { "pixels": 700, "percentage": null }, "alignment": "Bottom Left", "index": 5, "variant": "#9" }, { "type": "Audio", "left": { "pixels": 228, "percentage": null }, "right": { "pixels": 0, "percentage": null }, "top": { "pixels": 40, "percentage": null }, "bottom": { "pixels": 205, "percentage": null }, "max_width": { "pixels": 40, "percentage": null }, "max_height": { "pixels": 700, "percentage": null }, "alignment": "Bottom Left", "index": 6, "variant": "#9" }, { "type": "Audio", "left": { "pixels": 272, "percentage": null }, "right": { "pixels": 0, "percentage": null }, "top": { "pixels": 40, "percentage": null }, "bottom": { "pixels": 205, "percentage": null }, "max_width": { "pixels": 24, "percentage": null }, "max_height": { "pixels": 700, "percentage": null }, "alignment": "Bottom Left", "index": 7, "variant": "#9" }, { "type": "Audio", "left": { "pixels": 316, "percentage": null }, "right": { "pixels": 0, "percentage": null }, "top": { "pixels": 40, "percentage": null }, "bottom": { "pixels": 205, "percentage": null }, "max_width": { "pixels": 24, "percentage": null }, "max_height": { "pixels": 700, "percentage": null }, "alignment": "Bottom Left", "index": 8, "variant": "#9" }, { "type": "Alarm", "left": { "pixels": 62, "percentage": null }, "right": { "pixels": 62, "percentage": null }, "top": { "pixels": 28, "percentage": null }, "bottom": { "pixels": 8, "percentage": null }, "max_width": { "pixels": 400, "percentage": null }, "max_height": { "pixels": 400, "percentage": null }, "alignment": "Top Center", "index": 1, "variant": "Rounded corners" }, { "type": "Video", "left": { "pixels": 340, "percentage": null }, "right": { "pixels": 10, "percentage": null }, "top": { "pixels": 10, "percentage": null }, "bottom": { "pixels": 160, "percentage": null }, "max_width": { "pixels": null, "percentage": 100 }, "max_height": { "pixels": 0, "percentage": 78 }, "alignment": "Top Left", "index": 1, "variant": null }, { "type": "UMD", "left": { "pixels": 50, "percentage": null }, "right": { "pixels": 220, "percentage": null }, "top": { "pixels": 0, "percentage": null }, "bottom": { "pixels": 130, "percentage": null }, "max_width": { "pixels": 240, "percentage": null }, "max_height": { "pixels": 50, "percentage": null }, "alignment": "Bottom Left", "index": 1, "variant": "Opaque", "default_value": "#B# #UF1#" }, { "type": "UMD", "left": { "pixels": 50, "percentage": null }, "right": { "pixels": 220, "percentage": null }, "top": { "pixels": 0, "percentage": null }, "bottom": { "pixels": 50, "percentage": null }, "max_width": { "pixels": 175, "percentage": null }, "max_height": { "pixels": 50, "percentage": null }, "alignment": "Bottom Left", "index": 2, "variant": "Opaque", "default_value": "#B# #UF2#" }, { "type": "UMD", "left": { "pixels": 340, "percentage": null }, "right": { "pixels": 100, "percentage": null }, "top": { "pixels": 0, "percentage": null }, "bottom": { "pixels": 140, "percentage": null }, "max_width": { "pixels": 0, "percentage": 80 }, "max_height": { "pixels": 50, "percentage": null }, "alignment": "Bottom Left", "index": 3, "variant": "Opaque", "default_value": "#brgbcccc55##rgb050505##UF3# " }, { "type": "UMD", "left": { "pixels": 340, "percentage": null }, "right": { "pixels": 100, "percentage": null }, "top": { "pixels": 0, "percentage": null }, "bottom": { "pixels": 60, "percentage": null }, "max_width": { "pixels": 0, "percentage": 80 }, "max_height": { "pixels": 50, "percentage": null }, "alignment": "Bottom Left", "index": 4, "variant": "Opaque", "default_value": "#brgbcccc55##rgb050505##UF4# #TT1# " }, { "type": "Other", "left": { "pixels": 0, "percentage": null }, "right": { "pixels": 30, "percentage": null }, "top": { "pixels": 0, "percentage": null }, "bottom": { "pixels": 137, "percentage": null }, "max_width": { "pixels": 55, "percentage": null }, "max_height": { "pixels": 55, "percentage": null }, "alignment": "Bottom Right", "index": 1, "variant": "VCHIP Icon" }, { "type": "Other", "left": { "pixels": 0, "percentage": null }, "right": { "pixels": 30, "percentage": null }, "top": { "pixels": 0, "percentage": null }, "bottom": { "pixels": 57, "percentage": null }, "max_width": { "pixels": 55, "percentage": null }, "max_height": { "pixels": 55, "percentage": null }, "alignment": "Bottom Right", "index": 1, "variant": "STC Icon" } ] }, "metadata": { "config_version": 0 } }

API for creating Tally:

POST : http://192.162.0.10/api/5.0/tally/command/.json

Body Structure

{ "data": { "label": "timer", "duration": 0, "items": [ { "type": "timer", "index": 1, "timestamp": "1643648100", "color": "#050505" }, { "type": "umd", "index": 1, "text": "MTL", "color": "#80f080" }, { "type": "umd", "index": 2, "text": "MAIN", "color": "#80f080" }, { "type": "umd", "index": 3, "text": "RF00015960 DEPUIS 17:30:00", "color": "#80f080" }, { "type": "umd", "index": 4, "text": "FT0239016 A 17:46:00 DANS ", "color": "#80f080" } ] } }

 

2. The different sections of the tiles and UMD’s in the tally are explained below.

The 2x Borders and X8 Audio are created through the tile API and the 1-4 UMDs through the tally API specified in step 1.

 

3. The API Body data structure for each section are shown below.