Widget appearance

Every widget carries its own appearance settings — the layer it sits on, the surface behind it, how its contents are aligned, how large and how solid — and these are what make overlays possible.

Save as PDF This did not answer it

Where the panel is

The Appearance block. Everything in it applies to one widget on one scene.

Open the scene in the editor
Screens, then the screen, then the scene from the picker in the toolbar.
Select a widget
Press it on the canvas, or click its row in the Layers list in the right-hand sidebar. The Layers list is the reliable route when a widget is completely covered by another one — which is exactly the situation these settings tend to create.
Look below the canvas
A panel headed with the widget's name and the word settings appears. Appearance is the first block inside it; Fill screen and Remove sit in its header.

Every setting in the panel

Layer: Which of three stacking bands the widget sits in. Background draws first, Normal above it, and Front (overlay) above everything. A photo frame stretched across the screen goes in Background; the clock you want legible over it goes in Front.Default: Normal
Surface: What is drawn behind the widget. None (transparent) puts nothing there, which is what you want over a photograph. Card is a faint panel with a soft border. Frosted glass is the same panel with the picture blurred behind it, which keeps text readable over a busy image without hiding the image. All three work on every widget, including the light and control tiles that draw their own buttons.Default: None for anything that brings its own look — the clock, date, weather, photos, art, the greeting, the calendar tiles, what is playing, and every light, Home Assistant and WLED control. Card for the rest.
Align: Horizontal placement of the widget's contents within the cells it occupies, and the text alignment inside it. Left, Centre or Right.Default: Left
Vertical: Vertical placement of the contents within the same cells: Top, Middle or Bottom. A clock on a tall widget looks deliberate at the top and accidental in the middle.Default: Middle
Size: Multiplies the widget's type size, from ×0.40 to ×2.50 in steps of 0.05. The current value is shown in the label. It scales what is drawn inside the widget; it does not change how many grid cells the widget occupies — drag the widget's corner for that.Default: ×1.00
Opacity: How solid the whole widget is, from 10% to 100% in steps of 5. Useful for letting a photograph read through a panel of text. It cannot reach zero, because a widget you cannot see and cannot click is a widget you cannot get back.Default: 100%
Text shadow (helps over photos): Puts a soft dark shadow behind every piece of text in the widget. Over a photo album whose next picture might be a snowfield, it is the difference between text that always reads and text that reads until Tuesday.Default: Off

Layers, and why there are three

Widgets are allowed to overlap on the canvas, so something has to decide what covers what. Three bands do it — background, normal, front — and that is the whole of the stacking model.

Within a band there is no ordering control. Two widgets on the same band that overlap each other will be drawn in the order they happen to sit in the scene, and the editor does not expose that order or let you change it. If you need one widget reliably above another, put them on different bands. That is what the bands are for.

The Layers list in the sidebar shows everything on the scene topmost first, with the band named beside each row. The arrows on a row move it up or down a band — the same change as the Layer dropdown, reached without having to select the widget first.

Fill screen

The button at the top of a widget's settings panel, next to Remove. It does three things in one press: moves the widget to the top-left corner, stretches it to all twelve columns and every row of the grid, and puts it on the background layer.

It is a button because doing it by hand means dragging to one corner, dragging to the other, and then remembering the layer — and forgetting the layer is how a backdrop ends up covering the clock it was supposed to sit behind.

It changes nothing else. A photo widget filled to the screen with Card still behind it will still draw its border and its inset, so set Surface to None as well. That is the second half of the move, every time.

Fill screen fills the grid the scene is drawn in — twelve by eight in landscape, twelve by eighteen in portrait. On a scene borrowed from a screen mounted the other way round, that is the shape it was drawn in, not the shape of the screen you happen to be looking at.

Making an overlay

The five-step overlay: a photograph behind, a clock in front of it.

Add the backdrop
Photos or Art, usually. Both are made for it and both default to no surface.
Press Fill screen
It goes full-bleed and drops to the background layer in one move.
Check its Surface is None
A card border around a full-screen photograph is the tell that the backdrop is really a widget.
Add whatever goes on top
A clock, a greeting, the agenda. Place and size it over the picture.
Set it to Front (overlay), Surface None, Text shadow on
The shadow is the part people skip and then miss. It is what keeps white text legible when the photograph underneath turns out to be a beach.

What these settings do not do

No colour. A widget cannot be given a colour of its own. The accent is a property of the scene — the five swatches under Theme accent (this scene) in the sidebar — and every widget on the scene uses it.
No typeface. There is no font choice anywhere in the editor.
No borders, corners, padding or rotation. Surface is the only control over what is drawn behind a widget, and it has three values.
No light mode per widget. Scenes are drawn dark, and the editor offers no switch.
Size scales the type, not the box. Turning it up does not make room for the result — a clock at ×2.50 in a small widget outgrows its cells, so make the widget bigger as well.
Opacity stops at 10%. To take a widget off a scene entirely, remove it.

When to show is a different thing

Below Appearance is a panel headed When to show. It decides whether a widget appears at all: a From and Until window that may run past midnight, the days of the week it applies on, and whether it depends on somebody being in front of the screen. Leave the times blank for all day, and press Always show to clear the rule entirely.

That is scheduling at a finer grain than scenes — one layout, with individual widgets coming and going — rather than appearance, and a widget with a rule on it carries a small summary tag on the canvas so you can see at a glance that it only shows sometimes. The presence options need the screen's camera; without one, a widget set to “Somebody is in front of the screen” always shows rather than never showing, and the panel says so.

The scene editorThe scene editor is where you arrange a screen's widgets on a twelve-column grid, watch the real widgets render behind them, and push the result to the wall.
Every widget there isThe complete list of widgets Mirra ships with, grouped the way the scene editor groups them, with what each one shows and what it needs before it will show anything.
The photo frameHow to build an album, point a screen's photo frame at it, control how photos are cropped and dimmed, and turn one into a full-bleed background for the rest of a scene.
The art frameHow the art widget turns a screen into a picture frame — collections of your own, our curated catalogue, framing and mats, and what a household actually chooses to hang on the wall.
People and presenceHow to add a household member, enrol their face on a screen, and understand what Mirra stores about them and where recognition actually happens.
Screen types, and what a screen can doWhat hardware can act as a Mirra screen, what each display reports about itself, and exactly what the capability record does and does not cover.