Layout

Layout contains zones and using inside the Channel to defined the area of assignable content. There are two type of layout, the common layout which shared to all organizations and not allow to edit by user. And custom layout which each space in the organization can create their own layout.

Common layouts reference : https://signage-next-layout-zngholloba.now.sh/

Custom Layout config JSON contains

• name: String
• css: String, Provide a size and position for each zone. The position is relative to the top left corner of the screen. Values may be pixel or percentage based. If you add or remove zones, please edit the config as well.
• width: Integer
• height: Integer
• is_flexible: Boolean, If set to true, this layout will stretch to fit any screen size or aspect ratio
• is_scalable: Boolean, If is_flexible is false, is_scallable will keep the layout's aspect ratio regardless of screen size. If set to false, the layout will not adapt to different screen sizes.
• zones: Array Object {id, name}, Provide the configuration values for each zone here. Make sure the number of zones here match the same amount in the CSS. NOTE zone's id pattern is zone{number} the zone number should be in rage 1-5

Layout Detail

• contain at least 1 zone
• html is generated by ScreenCloud
• basic css is generated but can be overwrite by user

Generated HTML of 2 zones by system Example

<div class="layout">
   <div class="zone" id="zone1"></div>
   <div class="zone" id="zone2"></div>
   <div class="zone" id="zone-hidden"></div>
</div>

CSS Example

<style>
   #zone1 {
     position: absolute;
     width: 70vw;
     height: 100vh;
     top: 0;
     left: 0;
     z-index: 10;
   }
   #zone2 {
     position: absolute;
     width: 30vw;
     height: 100vh;
     top: 0;
     left: 70vw;
     z-index: 10;
   }
   #zone-hidden {
     z-index: 1;
     width: 0px;
     height: 0px;
   }
</style>

Custom Layout’s config JSON Example

{
    "name": "Layout name",
    "width": 1920,
    "height": 1080,
    "is_flexible": true,
    "is_scalable": true,
    "zones": [
      {"id": "zone1", "name": "Main Zone" },
      {"id": "zone2", "name": "Sidebar Zone" }
    ],
    "css": "<style>\n   #zone1 {\n     position: absolute;\n     width: 70vw;\n     height: 100vh;\n     top: 0;\n     left: 0;\n     z-index: 10;\n   }\n\n   #zone2 {\n     position: absolute;\n     width: 30vw;\n     height: 100vh;\n     top: 0;\n     left: 70vw;\n     z-index: 10;\n   }\n\n</style>"
}

JSON Schema

{
  "$schema":"http://json-schema.org/draft-07/schema",
  "type":"object",
  "title":"Layout config json schema",
  "description":"",
  "default":{
  },
  "definitions":{
    "zone": {
      "type": "object",
      "properties": {
        "id": {
          "type": "string",
          "pattern": "^zone[1-5]$"
        },
        "name": {
          "type": "string"
        }
      }
    }
  },
  "properties":{
    "name": {
      "type": "string"
    },
    "css": {
      "type": "string"
    },
    "height": {
      "type": "integer"
    },
    "width": {
      "type": "integer"
    },
    "is_flexible": {
      "type": "boolean"
    },
    "is_scalable": {
      "type": "boolean"
    },
    "zones": {
      "type": "array",
      "items": {
        "$ref": "#/definitions/zone"
      }
    }
  },
  "required":[
    "zones",
    "css",
    "height",
    "width",
    "is_flexible",
    "is_scalable"
  ]
}