Widgets

Widgets are the parts your finished instrument is made of: the knobs, sliders, buttons, labels, shapes and drop zones that you and your users actually click and turn. They are what sits on the front panel, the polished face of your creation, and they carry values into and out of your patch (the network of connected nodes) through their pins (the little dots where you plug cables in). Most widgets have an Appearance input that takes a small block of style settings written as JSON (a simple text format for describing settings), so you can change how a widget looks from inside the patch itself, usually by feeding it from an Appearance Changer node, without opening the inspector panel. This page describes every node in the Widgets category.

Appearance Changer

This node lets you restyle a connected widget on the fly from inside your patch. You pick one look-and-feel property (for example a colour or a size), feed in a new value, and it builds the small block of style settings that the widget understands. The Property list fills in by itself when everything it is connected to is the same kind of widget. If you have connected different widget types at once, it shows "Mixed targets" and stays empty.

Appearance Changer

Parameter	Range	Default	Description
Property	(auto from targets)	Connect	Selected appearance property. Auto-populates from connected widget Appearance targets when they are all the same type, otherwise shows "Mixed targets". Also accepts a zero-based property index or a property id/label text.
Value	any	0	Incoming property value. Text, bool, and numeric values are converted to the selected property's JSON type.

Inputs: Property (selects the target property by index or by id/label text), Value (the value assigned to the selected property). Outputs: Out (a JSON text patch holding one property, ready to connect to a widget's Appearance input).

An up-and-down slider for your front panel. As you drag it, it sends out a smoothly changing number somewhere between your chosen lowest and highest values (Min and Max). You can fully style its look: the track, the coloured fill, the border, how rounded the corners are, the value text and where the label sits.

Widget Slider Vertical

Parameter	Range	Default	Description
Value	0 to 1	0	Current slider value.
Min	unbounded	0	Lower bound for the slider value range.
Max	unbounded	1	Upper bound for the slider value range.
Default	unbounded	0	Default value used for reset behaviour.
Increment	unbounded	0	Optional snap step. 0 means continuous. The mouse wheel always moves at least 1% of the range per notch, so a very fine increment still snaps the value without making the wheel feel dead. Anything below 0.000001 is treated as 0.
Drag Sensitivity	0.1 to 20	1	Scales how quickly the slider responds to dragging.
Track Colour, Fill Colour, Border Colour, Text Colour	colour	theme	Colours of the track, active fill, border and value text.
Corner Radius	0 to 100	3	Corner radius of the slider body.
Border Width	0 to 100	1	Width of the slider border.
Show Value	on / off	on	Shows or hides the formatted value text.
Text Size	8 to 48	11	Font size of the value text.
Text Position	(choice)	Inside Top	Places the value text inside or outside the slider.
Display Mode	Float / Integer / Note	Float	Formats the displayed value.
Suffix	text	(empty)	Text appended after the displayed value.

Inputs: In (sets the value), Appearance (JSON object to restyle the widget). Outputs: Out (the current value as a float).

A left-to-right slider for your front panel. It works just like the up-and-down slider, sending out a smoothly changing number between your lowest and highest values (Min and Max) with the same full styling options, but it is laid out sideways.

Widget Slider Horizontal

Parameter	Range	Default	Description
Value	0 to 1	0	Current slider value.
Min	unbounded	0	Lower bound for the slider value range.
Max	unbounded	1	Upper bound for the slider value range.
Default	unbounded	0	Default value used for reset behaviour.
Increment	unbounded	0	Optional snap step. 0 means continuous. The mouse wheel always moves at least 1% of the range per notch, so a very fine increment still snaps the value without making the wheel feel dead. Anything below 0.000001 is treated as 0.
Drag Sensitivity	0.1 to 20	1	Scales how quickly the slider responds to dragging.
Track Colour, Fill Colour, Border Colour, Text Colour	colour	theme	Colours of the track, active fill, border and value text.
Corner Radius	0 to 100	3	Corner radius of the slider body.
Border Width	0 to 100	1	Width of the slider border.
Show Value	on / off	on	Shows or hides the formatted value text.
Text Size	8 to 48	11	Font size of the value text.
Text Position	(choice)	Inside Left	Places the value text inside or outside the slider.
Display Mode	Float / Integer / Note	Float	Formats the displayed value.
Suffix	text	(empty)	Text appended after the displayed value.

Inputs: In (sets the value), Appearance (JSON object to restyle the widget). Outputs: Out (the current value as a float).

A slider with two handles that picks a range instead of a single value. Drag either handle to choose the low and high ends: the fill is drawn between them, and each end is sent out of its own output, Min and Max. A handle stops when it reaches the other one, always keeping at least the Min Gap between them, and both snap to the Increment. Reach for it whenever one control should give you a low and high pair: the bottom and top of a filter sweep, the bounds for a random value, any setting that needs a "from here to there".

Widget Range Slider

Parameter	Range	Default	Description
Min	within the range	4	The selected low value (the left handle).
Max	within the range	12	The selected high value (the right handle).
Range Min / Range Max	unbounded	0 / 16	The bounds the two handles move within.
Increment	unbounded	1	Optional snap step. 0 means continuous. The mouse wheel always moves at least 1% of the range per notch, so a very fine increment still snaps the value without making the wheel feel dead. Anything below 0.000001 is treated as 0.
Min Gap	0 to 16	1	The smallest distance the two handles keep between them, so they never overlap.
Rail Thickness	0.05 to 1	0.45	Rail thickness as a fraction of the slider's height.
Track Colour / Fill Colour	colour	(preset)	Colours of the rail and of the fill between the handles.
Rail Border Colour / Width	colour / 0 to 40	none	Optional outline around the rail.
Handle Shape	Circle / Square / Rounded Rect / Triangle / Hexagon / Line	Circle	Shape of the two handles.
Handle Colour / Size / Border	colour / 0.05 to 4 / 0 to 40	white / 1.2 / none	Colour, size and outline of the two handles.

Inputs: Range Min (sets the lower bound), Range Max (sets the upper bound), Set Min (sets the selected low value), Set Max (sets the selected high value), Appearance (JSON object to restyle the widget). Outputs: Min (the selected low value), Max (the selected high value).

An up-and-down slider built around its handle: a slim rail with a fully stylable thumb riding on it, and the thumb always stays completely visible, never sliding off the ends. You choose the handle's shape (circle, square, rounded rectangle, triangle, hexagon or a plain line), its size, colour and border, or swap the drawn shape for your own picture (PNG, JPG or SVG). The rail and fill can be restyled too, or made invisible, which makes this the building block for custom fader looks on the front panel where the track is your own artwork, such as a UI kit background or an image.

Widget Slider Vertical Thumb

Parameter	Range	Default	Description
Value	0 to 1	0	Current slider value.
Min / Max	unbounded	0 / 1	Bounds of the slider value range.
Default	unbounded	0	Default value used for reset behaviour.
Increment	unbounded	0	Optional snap step. 0 means continuous. The mouse wheel always moves at least 1% of the range per notch, so a very fine increment still snaps the value without making the wheel feel dead. Anything below 0.000001 is treated as 0.
Drag Sensitivity	0.1 to 20	1	Scales how quickly the slider responds to dragging.
Rail Thickness	0.05 to 1	0.45	Rail thickness as a fraction of the slider's width.
Track Colour / Fill Colour	colour	(preset)	Colours of the rail and the active fill.
Rail Border Colour / Width	colour / 0 to 40	none	Optional outline around the rail.
Handle Shape	Circle / Square / Rounded Rect / Triangle / Hexagon / Line	Circle	Shape of the draggable handle.
Handle Colour	colour	white	Fill colour of the handle.
Handle Size	0.05 to 4	1.2	Handle size as a fraction of the slider's width. It can be bigger than the rail.
Handle Border Colour / Width	colour / 0 to 40	none	Optional outline around the handle.
Handle Image	png / jpg / svg	(empty)	A picture that replaces the drawn handle shape.
Handle Image Size	10 to 400	100	Image size as a percentage of the handle area.
Reduce Width / Reduce Height	0 to 200	6	Insets the slider inside the widget, leaving a margin around it.

Inputs: In (sets the value), Set (sets the value without sending it out again, handy for keeping controls in sync), Appearance (JSON object to restyle the widget). Outputs: Out (the current value as a float).

The same handle-first slider laid out sideways. It offers everything the vertical version does, the same handle shapes, sizes, colours, borders and image option, the same stylable rail and fill, and the same In, Set and Out connections, but it drags left to right. Use the pair to build matched vertical and horizontal faders over your own front panel artwork.

Widget Slider Horizontal Thumb

Inputs: In (sets the value), Set (sets the value without sending it out again), Appearance (JSON object to restyle the widget). Outputs: Out (the current value as a float).

A drop-down menu for your front panel: click it and a list of choices opens. You write the list of items yourself, and you can set how the text lines up and style the border and the little arrow. It sends out both the position of the chosen item in the list and its text. Ready-made item lists are included for common musical choices.

Widget ComboBox

Parameter	Range	Default	Description
Items Preset	Custom / Notes / MIDI Scales / Chord Types / Cycle / Waveforms / Filter Types / EQ Band Types	Custom	Loads a predefined item list, or Custom to use your own. Filter Types and EQ Band Types match the Filter node's Mode and the Parametric EQ's band Type exactly, labels and order, so the ComboBox can drive them directly.
Items	text	Item 1, Item 2, Item 3	The list of items. Separate entries with commas or line breaks.
Selected Index	0 to item count	0	Index of the currently selected item.
Text Size (%)	10 to 90	40	Text size as a percentage of the combo height.
Text Align	Left / Centre / Right	Left	Horizontal text alignment.
Text Font	Regular / Medium / SemiBold / Bold / Light	Regular	Font weight of the combo text.
Popup Text Size (%)	10 to 90	40	Popup text size as a percentage of the combo height.
Popup Item Height	0 to 80	35	Height of each popup item. Use 0 for auto sizing.
Background / Text / Border / Arrow Colour	colour	theme	Colours of the body, text, border and drop-down arrow.
Border Width	0 to 12	1	Width of the combo border.
Corner Radius	0 to 40	8	Corner radius of the combo body.
Arrow Scale	20 to 300	100	Scale of the drop-down arrow.
Tooltip	text	(empty)	Tooltip shown when hovering the widget.

Inputs: Select (selects an item by index or by item text), Items (replaces the item list), Appearance (JSON object to change appearance and items). Outputs: Index (the selected item index), Text (the selected item text).

A row or column of clickable buttons that act as one group. The Selection Mode decides how clicking behaves: Single (only one can be on at a time, like old car-radio buttons), Multi (turn on any combination, or none at all) or Multi (min 1) (any combination, but at least one always stays on). It sends out the position of the button you clicked most recently and its label.

Widget Radio Group

Parameter	Range	Default	Description
Selection Mode	Single / Multi / Multi (min 1)	Single	How clicks behave: radio, free multi-select, or multi-select with at least one on.
Items	text	Option 1, Option 2, Option 3	The list of segment labels. Separate entries with commas or line breaks.
Selected Index	0 to item count	0	Index of the active (or most-recently-clicked) segment.
Orientation	Horizontal / Vertical	Horizontal	Layout direction of the segments.
Gap	0 to 30	6	Gap between segments.
Text Size	8 to 42	14	Segment text size.
Corner Radius	0 to 100	12	Corner radius of each segment.
Face / Active / Hover Colour	colour	(preset)	Background of unselected segments, the selected segment, and the hover tint.
Text / Active Text / Border Colour	colour	(preset)	Text colour of unselected and selected segments, and the segment outline.
Tooltip	text	(empty)	Tooltip shown on hover.

Inputs: Select (selects an item by index or by text), Items (replaces the item list), Appearance (JSON object to change appearance and items). Outputs: Index (the selected segment index; the most-recently-clicked one in Multi modes), Text (the selected segment text).

A round knob for your front panel that you turn to send out a smoothly changing number between your chosen lowest and highest values (Min and Max). You can style almost everything about it: the shape of the arc it sweeps, the pointer style, a centre dot, the background, the outline, the tick marks and the value readout. It can grow from one end (unipolar) or from the middle outwards (bipolar), which is handy for things that go both ways, like pan or pitch.

Widget Knob

Parameter	Range	Default	Description
Value	0 to 1	0	Current knob value.
Min	unbounded	0	Lower bound for the knob value range.
Max	unbounded	1	Upper bound for the knob value range.
Default	unbounded	0	Default value used for reset and double-click.
Increment	unbounded	0	Optional snap step. 0 means continuous. The mouse wheel always moves at least 1% of the range per notch, so a very fine increment still snaps the value without making the wheel feel dead. Anything below 0.000001 is treated as 0.
Drag Direction	Vertical / Horizontal / Rotary	Vertical	Drag gesture used to turn the knob.
Start Angle	0 to 360 deg	225	Start angle of the rotary arc.
Sweep Angle	10 to 360 deg	270	Total arc span of the knob.
Bipolar	on / off	off	Draws the fill from the centre instead of from the start.
Thumb Style	None / Dot / Line	Dot	Selects no thumb, a dot, or a radial line indicator.
Show Centre Dot	on / off	off	Draws a dot in the middle of the knob.
Show Background	on / off	on	Draws a circular background behind the knob.
Show Outline	on / off	off	Draws an outline around the background.
Show Ticks	on / off	off	Draws tick marks along the arc.
Tick Count	2 to 200	11	Number of tick marks.
Show Value	on / off	on	Shows or hides the value text.
Text Size	8 to 48	11	Font size of the value text.
Display Mode	Float / Integer / Note	Float	Formats the displayed value.

Inputs: In (sets the knob value, clamped to range and snapped to the increment), Appearance (JSON object to restyle the widget). Outputs: Out (the current knob value as a float).

A text label for your front panel. Use it to show fixed words, or to display a live value coming from anywhere in your patch. You can choose the font, the weight, how the text lines up, the colour, the spacing around it, a border, and the direction it reads (including sideways and stacked top-to-bottom).

Widget Text

Parameter	Range	Default	Description
Text Size	8 to 120	18	Base font size in pixels.
Font Style	Regular / Medium / SemiBold / Bold / Light (+ italics)	SemiBold	Font weight and italic style for the label.
Underline	on / off	off	Draws the text underlined.
Justification	9-way (Top Left to Bottom Right)	Centre	Text alignment inside the widget.
Orientation	Horizontal / Vertical (up) / Vertical (down) / Stacked	Horizontal	Text orientation. Stacked draws one letter per row, unrotated.
Scrollable	on / off	off	Keeps the text at its set size and adds a scrollbar for whatever does not fit. Horizontal orientation only.
Scrollbar Width	2 to 24	8	Thickness of the scrollbar.
Scrollbar Colour	colour	theme	Colour of the scrollbar. The track is the same colour, faded.
Padding	0 to 80	10	Inner padding around the text area.
Text Colour	colour	theme	Colour of the text.
Background Colour	colour	transparent	Background fill colour.
Border Colour	colour	theme	Border colour.
Border Width	0 to 12	0	Stroke width of the optional border.
Tooltip	text	(empty)	Tooltip shown when hovering the widget.

Inputs: Text (updates the displayed text; non-text values are converted to a readable string), Appearance (JSON object to restyle the widget). Outputs: Text Out (fires when the user edits the text, and re-sends the current text when a Bang arrives on the Text input).

Long text: turn on Scrollable

Normally the label shrinks its text until the whole thing fits the widget. That is what you want for a heading and useless for a paragraph: a page of text ends up unreadably small.

Turn on Scrollable and the widget becomes a reading box instead. The text keeps the size you set, wraps to the width, and anything past the bottom is reached with the scrollbar on the right or the mouse wheel. Drag the bar, or click above and below it to jump a page at a time.

This is what makes the Widget Text usable as the help page of something you built: write your instructions once, size the box to your panel, and let the reader scroll. Pair it with a Widget Button and an Appearance Changer set to Visible, and the help opens and closes like a window.

Scrolling is live whenever the panel is not in edit mode, so it works in Perform and on a locked widget. While you are moving or resizing the widget the panel keeps the mouse, the same as every other widget.

A flat pad you drag around in two directions at once. Moving the handle sets an X value (left to right) and a Y value (up and down) at the same time, each with its own range, so you can control two things with one gesture. The node also tells the patch when the pointer is hovering over the pad and when the mouse is pressed or released.

Widget XY Pad

Parameter	Range	Default	Description
X	(Min X to Max X)	0.5	Current X value.
Y	(Min Y to Max Y)	0.5	Current Y value.
Min X / Max X	-1000 to 1000	0 / 1	Bounds of the X range.
Min Y / Max Y	-1000 to 1000	0 / 1	Bounds of the Y range.
Default X / Default Y	(within range)	0.5	Default X and Y values.
Increment X / Increment Y	0 to 1000	0	Optional snap step per axis. 0 is continuous.
Pad / Accent / Handle Colour	colour	(preset)	Pad surface, accent guides, and draggable handle.
Border / Crosshair / Text Colour	colour	(preset)	Border, X/Y guide lines, and readout text.
Show Text	on / off	on	Shows the current X/Y values.
Handle Size	4 to 60	18	Size of the draggable handle.
Corner Radius	0 to 100	18	Corner radius of the pad body.
Border Width	0 to 100	1	Border width of the pad body.
Tooltip	text	(empty)	Tooltip shown when the pad is hovered.

Inputs: X In (sets X), Y In (sets Y), Appearance (JSON object to restyle the widget).

Outputs:

Pin	Type	Description
X Out	Float	The current X value.
Y Out	Float	The current Y value.
Hover	Bool	High while the pointer is over the pad.
Mouse Down	Event	Fires when the pointer goes down on the pad.
Mouse Up	Event	Fires when the pointer is released.

Shows a picture (PNG, JPG or SVG) both in your patch and on the front panel. You can drop a file straight onto it, choose how the picture fits the space or have it tile to fill, rotate it, make it more or less see-through, and frame it with a background and a border.

Widget Image

Parameter	Range	Default	Description
File	png / jpg / jpeg / svg	(empty)	Path of the image to display. Drop a file or connect a text source.
Intercepts Clicks	on / off	on	When the panel is locked, the image either captures clicks or lets them pass through.
Fit Mode	Contain / Cover / Stretch / Original	Contain	How the image is fitted inside the widget.
Repeat	None / Repeat X / Repeat Y / Repeat Both	None	Tiles the image across the widget.
Scale %	1 to 300	100	Scales the image inside its area.
Alpha	0 to 1	1	Image opacity.
Rotation	0 to 360	0	Rotates the image in degrees.
Render Quality	Low / Medium / High	Medium	Image resampling quality.
Background Colour	colour	transparent	Background fill behind the image.
Border Colour	colour	(preset)	Border colour.
Border Width	0 to 12	0	Width of the border.
Corner Radius	0 to 100	0	Corner radius of the widget.

Inputs: File (sets the image path), Appearance (JSON object to restyle the widget). Outputs: none.

Shows a single frame picked from one long picture made of many small frames stacked together (a sprite sheet). This is the classic way to build your own custom knob look from a set of ready-made frames: as the incoming value changes, the displayed frame changes, so the knob appears to turn. The frames can be stacked vertically or laid out horizontally, and the widget can behave as a slider, an on/off toggle, or a press-and-hold button.

Widget Film Strip

Parameter	Range	Default	Description
Value	0 to 1	0	Value that selects which frame is shown.
Min	unbounded	0	Lower bound of the value range.
Max	unbounded	1	Upper bound of the value range.
File	png / jpg / jpeg	(empty)	Path of the sprite-sheet image.
Orientation	Vertical / Horizontal	Vertical	How the frames are laid out in the strip.
Frame Count	1 to 1024	128	Number of frames in the strip.
Render Quality	Low / Medium / High	Medium	Image resampling quality.
Mode	Slider / Toggle / Button	Slider	Interaction style of the widget.
Drag Direction	Vertical / Horizontal	Vertical	Drag gesture used in Slider mode.

Dropping a picture onto the graph offers Load As Widget Filmstrip, which creates the node with the image already loaded. MNodes reads the strip's layout off the picture: frames are square in almost every strip, so the long side divided by the short one gives the frame count and the long side says whether the strip runs down or across. When the division does not come out to a whole number the frames are not square, so nothing is guessed and Frame Count keeps its default for you to type in (the node arrives selected, with that field in the Inspector).

Inputs: In (sets the value, clamped to range). Outputs: Out (the current value as a float).

Polygon Shadow

A soft drop shadow in the shape of a many-sided figure. It stores its blurred shape so it can redraw cheaply without slowing things down. Place it behind other widgets to give them a sense of depth. It has no fill or border of its own, just the shadow.

Polygon Shadow