Skip to content

Configuring grids

Grids allow multiple dynamic signs to be displayed on the same screen simultaneously in a configurable layout of rows and columns.

Example configuration

Grids can be configured in the grids section of awesign.yaml.

An example configuration looks like this:

grids:
  - name: grid1
    direction: row
    content:
      - type: dynamic_sign
        dynamic_sign: ds1
        size: 48
      - type: gap
        size: 4
      - type: grid
        grid: grid2
        size: 48
  - name: grid2
    direction: column
    content:
      - type: dynamic_sign
        dynamic_sign: ds2
        size: 30
      - type: dynamic_sign
        dynamic_sign: ds3
        size: 35.5
      - type: gap
        size: 5
      - type: dynamic_sign
        dynamic_sign: ds4
        size: 29.5

grid1 produces a row with two equal-width elements and a small gap in the middle. The left side of the row displays a dynamic sign. The right side of the row contains another grid (grid2), which is a column of three dynamic signs with a gap between the second and third dynamic signs.

Configuration options

  • name is a unique identifier for the grid. It should be URL-safe.
  • direction (optional; default: row) specifies the direction the content will be laid out. Can be either row or column.
  • content specifies the elements to display in the container. Each element includes:
    • type specifies the type of the element. Valid options are grid, gap and dynamic_sign
    • size (int/float) specifies the height or width of the element in a column or row respectively. This is a percentage relative to the container's size. All size values within a grid should sum to 100.
    • dynamic_sign (required only if type is dynamic_sign) specifies the name of the dynamic sign (as configured in dynamic signs) to display
    • grid (required only if type is grid) specifies the name of the child grid to display. Nesting grids allows for very flexible layouts, but be mindful to avoid infinite recursion.

Gaps

Gaps can be configured between elements in a grid. To insert a gap, create an element in content with type set to gap. The size of the gap can be configured like other elements with size.