Lesson 15: Front Panel

Advanced

The front panel is a UI control surface for a class. It lets you interact with a running program through sliders, text fields, buttons, and other controls — without modifying the graph.

Controls and attributes

Each control on the front panel is bound to a class attribute. When you move a slider, the bound attribute updates. When code changes the attribute, the control reflects the new value.

  class Synth
    attribute frequency: 440.0
    attribute volume: 0.8
  front panel:
    slider "Frequency" --> bound to frequency (range 20..20000)
    slider "Volume"    --> bound to volume    (range 0..1)

Observable attributes

Attributes can be observed so that other parts of the program react when they change:

• observe(attr, callback) — call a method when the attribute changes.
• bind(attr, target, target_attr) — keep two attributes in sync.
• unobserve(attr, callback) — remove an observer.

  observe(frequency, on-freq-changed)
  method on-freq-changed(new_value):
    new_value --> update-oscillator

Pattern matching with case guards

When an observed attribute can hold different types or distinct values, you can use case guards to dispatch to different logic branches based on the value’s type or content.

  observe(input, handler)

  method handler(value):
    case value is String  --> log "got a string"
    case value is Number  --> log "got a number"
    case value == "reset" --> reset-state
    case _                --> log "unknown"

Cases are checked top to bottom. The first matching guard wins. The wildcard _ matches anything and serves as a default.

Building a front panel

Define a class with attributes, open the front panel editor, add controls (sliders, text fields, toggles, buttons), and bind each to an attribute.

  class Counter
    attribute count: 0
  front panel:
    label "Count" --> displays count
    button "Increment" --> calls increment method
  method increment:
    self.count --> + 1 --> set self.count

What you learned

• The front panel provides a UI control view bound to class attributes.
• Changes to controls update attributes, and attribute changes update controls.
• Observable attributes let you register callbacks with observe, synchronize values with bind, and clean up with unobserve.
• Case guards dispatch based on type or value for flexible pattern matching.