TweakPane

ic.TweakPane creates compact parameter panels powered by Tweakpane v4. Add blades to build a live inspector with sliders, checkboxes, color pickers, text inputs, dropdown lists, monitors, bezier curve editors, and more. Blades are organized with collapsible folders and tabbed groups. All blade types live in the ic.tp.* namespace.

Basic controls

The most common blade types: addSlider for numeric values with a range, addCheckbox for boolean toggles, addText for single-line string input, addTextarea for multi-line text, addColor for hex color picking (with optional alpha channel), and addList for dropdown selection. Every blade takes a Label that appears next to the control.

Range and spatial

addIntervalSlider provides a dual-handle range slider for selecting a min/max interval. addPoint gives coordinate inputs whose dimensionality is auto-detected from the struct fields: struct("x",0,"y",0) for 2D, add a z field for 3D, or w for 4D.

Dials and rotation

addRing renders a radial dial, ideal for angles and headings. addWheel provides a jog wheel for precise numeric scrubbing. addRotation gives a 3D rotation gizmo that outputs a quaternion struct.

Monitors, graphs, and curves

addMonitor displays read-only values in two modes: "text" shows the current value, "graph" shows a scrolling time-series plot. Push updates to the monitor’s Value property (e.g. from a timer callback) and the display refreshes automatically. addFpsGraph renders a live frame rate meter. addCubicBezier provides an interactive bezier curve editor for easing functions.

Grids and actions

addButton creates a clickable action that fires a Clicked event. addButtonGrid arranges buttons in a grid layout with configurable rows and columns. addRadioGrid does the same but as mutually exclusive radio buttons with a selected value. addSeparator inserts a visual divider between blades.

Folders and separators

addFolder creates a collapsible group that can hold any blade type, including nested folders. Use folders to organize controls into logical sections when the pane grows large.

Tab groups

addTabGroup creates a tabbed container. Call addTabPage on the group to create pages, then add blades to each page. Tabs are useful when you have many controls that belong to distinct categories but should share the same pane.

Events

Continuous controls like Slider, Color, and Ring fire both ValueChanging (during drag) and ValueChanged (on commit). Discrete controls like Checkbox, List, and Text fire only ValueChanged. Button fires Clicked. All blade types share the base properties Label, Disabled, and Hidden.

tp = ic.TweakPane();

s = tp.addSlider("Label", "Gain", ...
    "Min", 0, "Max", 1, "Value", 0.5);

% ValueChanging fires continuously during drag
addlistener(s, "ValueChanging", @(~, evt) ...
    fprintf("Dragging: %.2f\n", evt.Data.value));

% ValueChanged fires when drag ends
addlistener(s, "ValueChanged", @(~, evt) ...
    fprintf("Committed: %.2f\n", evt.Data.value));

c = tp.addColor("Label", "Tint");
addlistener(c, "ValueChanged", @(~, evt) ...
    disp(evt.Data.value));

btn = tp.addButton("Label", "Reset");
addlistener(btn, "Clicked", @(~,~) disp("Clicked!"));

Custom styling

TweakPane uses its own CSS custom property system for theming (--tp-base-*, --tp-container-*, --tp-input-*, --tp-label-*, etc.). Override them on the .tp-dfwv element inside .ic-tp via css.style(). The IC framework automatically maps IC theme colors to Tweakpane’s variables by default, but you can override them to create a fully custom look.

tp = ic.TweakPane("Title", "Light Theme");
tp.addSlider("Label", "Gain", "Min", 0, "Max", 1);
tp.addColor("Label", "Tint");
tp.addSlider("Label", "Saturation", "Min", 0, "Max", 100);
tp.addCheckbox("Label", "Active", "Value", true);

% Light theme via Tweakpane CSS custom properties
tp.css.style(".ic-tp .tp-rotv", ...
    "--tp-base-background-color", "#f8fafc", ...
    "--tp-base-shadow-color", "rgba(0, 0, 0, 0.06)", ...
    "--tp-container-background-color", "#f1f5f9", ...
    "--tp-container-background-color-hover", "#e2e8f0", ...
    "--tp-container-foreground-color", "#334155", ...
    "--tp-input-background-color", "#e2e8f0", ...
    "--tp-input-background-color-hover", "#cbd5e1", ...
    "--tp-input-foreground-color", "#0f172a", ...
    "--tp-label-foreground-color", "#64748b", ...
    "--tp-button-background-color", "#e2e8f0", ...
    "--tp-button-foreground-color", "#334155", ...
    "--tp-groove-foreground-color", "#94a3b8");