WG SXL Standardization 2025-01-30

[emiltin]

Participants

Toni Saviahde
Emil Tin

VMS SXL

Draft published at https://rsmp-nordic.github.io/rsmp_sxl_vms/. More will be added, e.g. illustrations.

Layouts

We need a way to read/write how visual elements are arranged.

Units

The panel a physical dimension in centimeters, e.g. 100x70cm.
Pixels: Could be used for precise position on use pixels, although this mean things jump if you ever change the pixel resolution.
Centimers: Absolute, but things would move if you change display.
Percentages: Good since you can use the same layout on different signs and it still looks right, but you need to be careful of stretching if the x-y ratio changes, e.g. from landscape to portrait mode.

Axises and directions:
x: left-right
y: up-down
0,0 is the bottom-left corner

Absolute positioning

Inspiration:
CSS absolute positioning: https://www.w3schools.com/css/css_positioning.asp

You would position elements using top, left, bottom and right coordinates. If some are left out, their are computed. If all are set you control stretching.

Only setting top,left or bottom,right is not allowed, as if does not define the size.

left, bottom, right, top => streching
left, top, right => bottom is computed
right, top, bottom => left is computed

Another way would be that to set either one corner and a size, or two corners.

Overlap? Ordering could determine what is shown at top

Outside the frame? No
Example:

{
 "lamp_1": { "type": "lamp", "top": "10%", "bottom": "20%", "left": "10%" },
 "lamp_2": { "type": "lamp", "top": "10%", "bottom": "20%", "right": "90%" },
  "icon_1": { "type": "icon", "left": "10%", "right": "90%", "top": "30%", "bottom": "110%" },
  "text_1": { "type": "text", "left": "10%", "right": "90%", "top": "120%", "bottom": "140%" }
}

How to handle y/z percentage so we avoid stretching if the display size changes?

Stacks

Inspiration:
CSS flexbox: https://www.w3schools.com/css/css3_flexbox.asp
Apple Auto-layout: https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/AutolayoutPG/index.html#//apple_ref/doc/uid/TP40010853-CH7-SW1

You define horizontal and vertical stacks with elements inside. Your can nest stacks, and use sizing and margins.

If you don't define sizing, elements will be scaled to fill out the stack.

Example:

{
  "panel_1" : {
     "type": "vstack",
     "elements": {
        "lamps": { "type": "hstack", "size": "20%", "elements": {
            "lamp_1": { "type": "lamp", "size": "20%" },
            "lamp_2": { "type": "lamp", "size": "20%" }
        "icon_1": { "type": "icon", "size": "0%" },
        "text_1": { "type": "text", "size": "20%" },
        },
    }
  }
}