Melatonin Inspector: inspect your JUCE components ala Figma/Web Inspector

Thanks! Just merged it. I added nightly CI runs. I also added you as a collaborator, to ease any future contribution. There’s a rule that CI has to pass and one other person has to review and merge. There’s a few of us (me, baconpaul, figbug) able to do that.

Locally, this is a known bad interaction with Ninja and root-level JUCE modules building in-source. Still determined to fix vs. have to restructure the project / tell everyone to build out of source. I’ll add some notes to the docs for now to instruct to avoid Ninja or build out of source (only applies when running top level).

getting the same issues on CI

This was a different issue, a side effect of recent changes on JUCE 8.0.2 apparently now requires LANGUAGES C to be specified.

I believe it enables tab navigation?

Yes! This disables mouse navigation and enables keyboard navigation for accessibility testing. I need to add some docs around this. The icon situation is getting out of hand, probably need some tooltips in there too.

2 Likes

Thanks Jimmi and Sudara.
That explains it.
And yes to tooltips. That’s one thing I felt was missing.

I like how the inspector lets you move components around and change properties such as visibility.

I wonder: would it be possible to add designing/drawing? Like, how Figma let’s you do it.
I don’t think you can override paint calls from the “outside”, though? So you would probably need new component classes to derive from? Hmmm…

I saw you mentioned Foleys gui magic.
Ideally I would like to send a plug-in to a designer and he could design it directly inside of the live plug-in. Like, instead of him designing it in Figma first, he could design it directly in some kind of “juce editor” which has similar capabilities as Figma. Eliminating the stage where I have to take the Figma design and copy it into code.

Just daydreaming a bit here. But would be nice to have!

I’ve been working on adding some visual design ability to melatonin inspector, inspired by XCode’s Interface Builder.

  • load and save the component hierarchy to/from xml
  • add and delete components to a layout
  • move components around visually (including hierarchy changes), or in the inspector tree
  • graphically set a component’s resizing behavior relative to its parent (InsetRelativeCoordinatePositioner)
  • component names and titles are now editable - so you can change label and button text content on the fly

Demo app: GitHub - genia/melatonin_editdemo
Imports my melatonin fork: GitHub - genia/melatonin_inspector: A JUCE module that gives you the ability to inspect and visually edit (non-destructively) components in your UI.


@sudara looking forward especially to your feedback

3 Likes

Hey Gene!

I think this is a pretty cool proof of concept!

Is it easy to register custom components? It looks like you are supporting position and size and a few other attributes?

@sudara Yes, custom components are supported. I’ll work on a demo of how to read/write a custom class.

  1. The component tree is created from xml using a function like this. (Good enough for a demo; packaging could be improved.)
  2. We use create new components from a template list. The component template list and the component tree are built with the project as juce binary resources; we also search on the desktop for files named ComponentTemplates.xml and MainComponent.xml, which if present override the base resources. this allows for iterative UI dev without recompilation.
  3. The code to write out the component tree is here.
2 Likes

Oh this is cool! How does this impact FlexBox editing, out of curiosity? (FlexBox are one of my pet peeves at the moment, too many recent tweak/compile/test cycles and resulting brain-fry…)

Would be great to see these enhancements get merged into the main (sudara’s) repo as quickly as feasible .. I have a few projects where I use melatonin-inspector, but can’t easily change the config for a different repo source .. but I’d be definitely a happy customer of new melatonin-inspector features..

1 Like

Came across another very cool recent build worth playing with - Foley’s Finest builder in a standalone demo app: Standalone Magic GUI app - PluginGuiMagic - Foleys Finest
It has XML save/load, wysiwyg editing, a parameter panel, undo, drag-and-drop - as well as support for flexbox.
(Forum is broken; my mirror: https://github.com/genia/foleys_gui_magic_standalone)

2 Likes