inspector 0.1.0

Property panels for Tessel apps: the two-column list of labels and values beside a drawing or a model, as in CAD and design programs. Number rows take sums and units ("3 ft" in a field in mm), rows sit in sections that open and close, a search box finds them, and a panel for a selection shows "Mixed" where the selected things differ.

There are two ways to make a panel, which look the same:

• Rows bound to your values, for a panel that's always the same, like the settings of a beam. Each row edits one value directly.
• An Inspector built from a list of properties, for a panel that changes with what's selected. Each change comes back to one function, with the property's key and its new value.

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)
    }
}

Typing 20 ft in Span and pressing Enter makes beam.span 6096.

Using it

Add it to a project (Tessel 0.10 or later):

tessel add inspector

then import inspector. tessel run examples in the library's folder opens the app in the picture.

Number fields

What's typed in a number field is applied when Enter is pressed. It can be:

• + - * / ^ and brackets work, and so do ×, ·, ÷ and −. 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, or an angle with its unit (sin(0.5 rad)).
• A unit belongs to the number just before it: pi/2 rad is pi / (2 rad), so write (pi/2) rad.
• Something wrong is shown under the field in red, like this field takes a length (mm), not a mass, and the value doesn't change.
• Until Enter is pressed, an arrow beside the field shows that what's typed isn't applied yet. Clicking it goes back to the value. (Tessel 0.10 tells a library only about Enter, not about each key or a click elsewhere, so a field can't apply itself when it's left.)
• min and max keep the value in bounds. Dragging the label sideways changes the value: a step per point, or about a hundredth of the value with no step. With a step, − and + buttons change it by one step.
• inspector.evaluate(text, unit:) gives what a field would read, for fields of your own, and inspector.formatNumber(x, decimals:) shows a number as the rows do: 2.5, 300, 0.125.

Units

Units combine with ·, *, / and powers: kN·m, kN/m², m^3/s. A field's unit can be any of these. A unit inspector doesn't know ("blows/ft") is only shown, and the field takes plain numbers. A temperature in °C or °F is converted on its own, but can't be added to or multiplied.

Rows bound to your values

Each row takes its label first, then what it edits. onChange runs after the row changes the value, and is usually the block after the call.

Every row also takes readOnly:, labelWidth: (120 unless you say), help: (shown when the mouse rests on the label) and filter:. Give the rows a SearchBox's text as their filter, and only the rows whose label has it show:

state query = ""

inspector.SearchBox(text: query)
inspector.Section("Section") {
    inspector.NumberRow("Depth", value: beam.depth, unit: "mm", filter: query)
    inspector.NumberRow("Width", value: beam.width, unit: "mm", filter: query)
}

(A Section stays when none of its rows match. The Inspector hides groups with nothing to show.)

An Inspector built from properties

Inspector(properties:, title:, search:, labelWidth:, emptyText:) { key, value in … } shows a list of properties under a heading for each group, with a search box over them that matches labels and group names. It scrolls when it's taller than its space. Make the properties from your data each time the view is built; a change calls the block with the property's key and its new Value, and once your data changes, the panel shows it.

Each also takes group:, readOnly:, mixed: and help:. With mixed: true, the row shows "Mixed" instead of the value: for a selection whose things differ there. A value typed or picked in a mixed row comes back as usual, for you to give to all of them.

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()
        _ -> {}
    }
}

The whole example, with a selection of shapes, is examples/main.tsl.

Light and dark

The panels use Tessel's adaptive colors, so they follow the system's appearance:

Tests

tessel run tests     # what number fields read, against values worked out in Python
sh tests/ui.sh       # the example app driven without a window: 34 checks

tests/ui.sh types, clicks, drags and searches in the example app with a TESSEL_SCRIPT, and checks the rows afterwards: units converted, bounds kept, mistakes shown, choices, switches, colors, search, sections, and the Inspector's mixed values.

What's where

Licence

MIT: see LICENSE.