Skip to content

Files

Latest commit

9403c5f · Feb 10, 2024

History

History

Frame

Frame is a container and can contain other components.

The frame component will clip its children to the given frame size, and draw them, optionally with an outline, rounding, background, and opacity into the dashboard.

Some examples might make this clearer.

The outline and bg parameters can also accept a "colour-with-alpha" (r,g,b,a) to allow a bit more more control over the transparency of the various bits.

Use fo to have a nice fade-out effect at the edge of the frame.

<component type="text" size="64">Background</component>
<frame width="100" height="100">
  <component type="text">Hello</component>
</frame>

09-frame-0.png

<component type="text" size="64">Background</component>
<frame width="100" height="100" cr="50">
  <component type="text">Hello</component>
</frame>

09-frame-1.png

<component type="text" size="64">Background</component>
<frame width="100" height="100" cr="50" bg="255,255,0" opacity="0.6">
  <component type="text">Hello</component>
</frame>

09-frame-2.png

<component type="text" size="64">Background</component>
<frame width="100" height="100" cr="50" outline="255,0,0">
  <component type="text">Hello</component>
</frame>

09-frame-3.png

<component type="text" size="64">Background</component>
<frame width="100" height="100" cr="50" outline="255,0,0">
  <component type="journey_map" size="100"/>
</frame>

09-frame-4.png

<frame width="600" height="100" bg="255,255,255">
    <component type="text" size="64">Background</component>
    <frame width="100" height="100" cr="50" fo="20">
      <component type="journey_map" size="100"/>
    </frame>
</frame>

09-frame-5.png

<frame width="200" height="200" bg="255,255,255">
    <component type="text" size="64">Background</component>
    <frame width="200" height="200" cr="10" fo="40" opacity="0.6">
      <component type="journey_map" size="200"/>
    </frame>
</frame>

09-frame-6.png