Property panels for Tessel apps.

What it does

Every picture here is the example app that comes with the library, run by Tessel without a window and saved.

Sums and units in number fields

Type 20 ft in a field in mm, or 6 m + 250, and Enter gives 6096 or 6250. A unit that doesn't fit is a message, not a wrong number. The arrow shows what's typed but not applied yet.

inspector.NumberRow("Span", value: beam.span, unit: "mm", decimals: 0, min: 0.0)

Mixed values for a selection

Build the rows from what's selected; where the things differ, the row says Mixed. A value typed or picked there comes back once, for you to give to all of them.

inspector.number("r", "Radius", first.radius, unit: "m",
                 group: "Geometry", mixed: !sameRadius)

Choices, switches and colors

A list that opens under the row, a switch, Tessel's color palette, a text field, a value to read and a button: each in the same two columns.

inspector.ChoiceRow("Grade", selection: beam.grade,
                    options: ["Grade 40", "Grade 60", "Grade 75"])

Sections and search

Groups open and close; a search box shows only the rows whose label (or group) has what's typed, and hides the groups with nothing left.

inspector.Inspector(properties: props, title: "Selection") { key, value in
    apply(key, value)
}

Two ways to make a panel

They look the same and can sit side by side, as in the picture at the top.

import inspector

struct Beam {
    span: Float = 6000.0
    depth: Float = 450.0
    grade: String = "Grade 60"
    braced: Bool = true
}

app BeamPanel(width: 380, height: 220) {
    state beam = Beam()

    inspector.Section("Beam") {
        inspector.NumberRow("Span", value: beam.span, unit: "mm", decimals: 0, min: 0.0)
        inspector.NumberRow("Depth", value: beam.depth, unit: "mm", decimals: 0, step: 25.0)
        inspector.ChoiceRow("Grade", selection: beam.grade, options: ["Grade 40", "Grade 60", "Grade 75"])
        inspector.ToggleRow("Braced", isOn: beam.braced)
    }
}

inspector.Inspector(properties: [
    inspector.info("count", "Selected", "{picked.count} shapes", group: "General"),
    inspector.choice("layer", "Layer", first.layer, layers, group: "General", mixed: !sameLayer),
    inspector.number("r", "Radius", first.radius, unit: "m", min: 0.0, group: "Geometry", mixed: !sameRadius),
    inspector.action("delete", "Selection", "Delete", group: "General"),
]) { key, value in
    match value {
        .number(x) -> { for k in selected { if key == "r" { shapes[k].radius = x } } }
        .text(s) -> { for k in selected { if key == "layer" { shapes[k].layer = s } } }
        .pressed -> deleteSelected()
        _ -> {}
    }
}

Number fields

What's typed is applied when Enter is pressed. A plain number is in the field's own unit, also next to one with a unit.

min and max keep the value in bounds. Dragging a row's label sideways changes its value, and with a step, − and + buttons do too. Functions: sqrt abs round sin cos tan asin acos atan ln log exp and pi; sin, cos and tan take degrees, as in CAD programs.

Units

Units combine with ·, *, / and powers: kN·m, kN/m², m^3/s. A field's unit that inspector doesn't know (blows/ft) is only shown, and the field takes plain numbers.

Tested without a window

Tessel runs any app headless, driven by a script of clicks and keys. The library's UI tests type, click, drag and search in the example app that way, and check every row afterwards.

Reference

Rows bound to your values

Every row also takes readOnly:, labelWidth:, help: (shown when the mouse rests on the label), filter: and an onChange block.

Properties for an Inspector

Each also takes group:, readOnly:, mixed: and help:. Inspector(properties:, title:, search:, labelWidth:, emptyText:) { key, value in … } shows them. inspector.evaluate(text, unit:) reads a number as a field does, and inspector.formatNumber(x, decimals:) shows one as the rows do.