Hi Guys,
After quite some time, I released V0.62 beta of Mola UI.
Mola is now native, ETO-based, cross-platform.
I kept all the modifications flexibility that allows you to make ANY design you wish. It uses HTML and CSS behind the scenes, so you can really change anything.
Would love to hear comments, bug reports, and ideas for future development. V620 is already in the package manager. Food4rhino soon.
Very nice and intuitive plug-in for Grasshopper. Thank you for your efforts.
It would be nice if Panels could support monospace characters. That way we could show ASCII tables or ASCII diagrams. See examples below.
Histogram in ASCII:
ASCII data table:
Hi, please share with me a GH file with one of those panels (table better), as a reference… It is pretty cool, actually.
Hello Bensho,
here comes a gh-file with the requested data.
Cheers.
Discourse_mcneel-ASCII_Histogram_and_Table_2026-02-05.gh (6.1 KB)
What plugin are you using to make these? This looks really useful!
They come from two Python components that I developed for my work:
See below:
Great work! If you ever decide to put it out publicly, would love to see it!
UPDATE UPDATE! V0.714 Beta is here!
This is the definitive Mola UI v0.714 Logical Reference, organized by element.
Every element’s behavior is dictated by the name of the Grasshopper Group it belongs to.
Main Panels (#):
Main Control Panel: Group name starts with # or m.
Info Panel:
Group name starts with #i. Renders data in a dashboard style.
Toolbar Panel:
Group name starts with #t. A floating, headerless strip.
Ordering: Leading numbers (e.g., #01, #10) determine tab and section order.
Tabs & Sections: Use | to separate. [Tab Name] | [Section Name].
Startup State: Use + before the section name to start it expanded.
Example: #10 Geometry | +Dimensions.
Flat Display: Use . before the section name (Info panel only) to remove borders.
Example: #i 01 .Summary.
Contextual Visibility: Use [>TabName] on a #t group to show the toolbar only when that specific tab is active.
Example: #t [>Site] Tools.
Sub-Groups (Layout Modifiers)
Row Logic (=): Items inside sit side-by-side. Use =N for N items per row.
Divider Logic (-): Name a sub-group - for a line, or - Title for a line with a label.
Alignment Logic: Items inside are sorted by their Y-axis position on the canvas.
Toggles are the most versatile elements in Mola, adapting their visuals to their group context.
Default Style (Checkbox): Renders as a square box that fills when true.
Logic: Place in a standard # group.
Pill Style (Switch): Renders as an iOS-style sliding switch.
Logic: Place in a sub-group named !.
Radio Style: Toggles become a list where only one can be active at a time.
Logic: Place multiple toggles in a sub-group named @.
Grid Style (Icon): Becomes a square icon that stays “lit” (colored) when true.
Logic: Place in a sub-group named *.
Momentary Logic (^): Turns the toggle into a “Pulse” button. It turns True for 150ms and then automatically flips back to False.
Logic: Add ^ to the Toggle Nickname or the Sub-group Name.
Example: A toggle named Reset^ inside a ! group becomes a momentary pill.
Buttons are used for momentary triggers and actions.
Action Bar Style: A full-width button spanning the container.
Logic: Place a standard GH Button in a group.
Grid Style (Icon): A momentary square icon button (toolbar style).
Logic: Place in a sub-group named *.
Momentary Logic: All buttons are inherently momentary (150ms pulse).
Dropdown Menu: A button can trigger a menu if it is grouped with other items using a specific structure.
Logic: Use a sub-group starting with & to link a button to a menu.
Sliders provide high-precision numeric control.
Standard Slider: Renders with a label, a numeric input box, and a track.
Logic: Default behavior for any slider in a # group.
Compact Slider: Hides the track and shows only the numeric entry box.
Logic: Place slider in a sub-group named or .
Precision:
Logic: Mola reads the “Accuracy” in GH. Integer sliders show no decimals. Float sliders show the exact number of decimals (e.g., 0.000) set in Grasshopper.
The NickName (header) of the panel defines the Type. The Content defines the Value.
Text Input: An editable box where users type data back to Grasshopper.
Logic: Name starts with " (Double Quote).
Example Name: "Project Name.
Static Typography:
H1 Header: Name the panel #.
H2 Header: Name the panel ##.
H3 Header: Name the panel ###.
Bold Body: Start name with [B].
Caption: Start name with _.
Live Data Sync: The UI text updates every time Grasshopper recalculates.
Logic: Add [LIVE] or [~] to the panel name.
Color Legends: Converts a list into a visual color chart.
Logic: Add LEGEND to the panel name.
Format: HexColor=Label (e.g., #ff0000=Primary).
Modifiers: [CIRCLE] for round icons, [MATCH] to match text height.
Attribute Editor: Allows viewing and editing Rhino Object UserStrings.
Logic: Name a panel [ATTR]. Use [ATTR:TOP] or [ATTR:BOTTOM] for pinning.
Value lists render as selection controls based on their internal GH “List Mode.”
Dropdown: Standard selection menu.
Logic: Right-click GH component > set to Check List mode.
Cycle Control: Navigation arrows (Prev/Next).
Logic: Right-click GH component > set to Value Cycle mode.
Multi-Select: A vertical list of checkboxes.
Logic: Right-click GH component > set to Value Sequence mode.
Colour Swatch: Renders as a clickable color bar that opens the native OS color picker.
Logic: Standard GH Colour Swatch object.
Scribble: Renders as a large, bold H1 Header to define major sections.
Logic: Standard GH Scribble object.
Icons (Asset Discovery):
Logic: If a file named Split.png exists in Mola_Assets/icons/, a button named “Split” will load it automatically.
Override: Name a component [play] Start to load play.png but display the label “Start”.
Tooltips:
Logic: Text added to Mola_Assets/Extras/tooltips.csv under a component’s name will appear as a hover-tooltip in the UI.
