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

Here’s a JUCE module I’m working on, based off of Figma’s UI and @jimc’s Component Debugger from his juce-toys:

Pop the module into your project to visually inspect the UI you are building “in place” as well as visualize the component hierarchy. You can resize components in place, which lets you nudge things around while designing to get accurate numbers without needing to add JUCE_LIVE_CONSTANT everywhere. I plan to expose property display/editing for things like font size, colors…

21 Likes

Great work!

1 Like

Really nice helper when doing UI work… I was just wishing for something like this the other day! And so easy (one line) to add to a project. Looking forward to seeing it develop.

1 Like

I have budget for this project and a list of features I’d like to add. So if working on open source JUCEy things and getting paid sounds fun, please DM me!

Example things I’d like to add:

I currently show “padding” when my custom PaddedComponent is in use. I want to show that in the UI overlay, make it editable, perhaps include the component or some generalized mechanism in the module.

Other things:

  • A search bar for the component tree
  • A “properties” view for things like showing assigned lookandfeels, font sizes (requires some conventions), and some core component things like opaque/cached images, alpha, focus, etc
  • Mayyyyyybe component paint timing and paint log to gain better debugging clarity. Ideally we’d have hooks in JUCE proper for tooling like this, but there’s enough to get started with…
1 Like

V1.2 of Melatonin Inspector is out.

It has a new design, better CMake support and a ton of new features (check out the gifs in the README) like component previews, searching through components, inspecting the distance between components, a property inspector to view look and feels and common component properties, support for component padding, a rudimentary color picker, etc.

Thanks to @dikadk13 for doing a lot of the heavy lifting on the new features.

If others use it and want to participate in development you are always welcome to chip in over on GitHub.

5 Likes

Just released another big batch of features for the inspector, including a few juicy ones contributed by @RolandMR.

Some highlights:

Display and edit component properties

Whatever you stick in a component’s getProperties() will now show up at the top of properties. Really useful for theming and styling. Component flags are now editable too where it makes sense (visible/alpha,etc).

Display and editing of JUCE’s widget colors

Inspect and modify JUCE’s stock widget ColourIds and see their friendly enum name, in hex or rgba.

Improved color picker

Zooooomm and click to pick colors in rgba/hex format.

Paint timings!

Really excited about this one. Pop in the RAII helper at the top of the paint method and see live component exclusive/with children paint times + their current max. See the README for details how to automatically time all custom components (like I do).

There’s a bunch of other small improvements, see the full list.

10 Likes

Looks amazing! Can’t wait to try it out!

1 Like

A single amazing guy had fish slapped a complete team taking care of the transition of juce to the web of the future.

What i have in my hand is a hat.

2 Likes

And another single guy added D2D support. The JUCE team needs to realize that other people can also write and merge good, working code.

@RolandMR is currently working on a better ColourSelector that mimics Photoshops’ one. Once finished, it’s a prime candidate for merging to mainline JUCE. It’s a drop-in replacement with more flags added to enable the new features.

7 Likes

oooh…can’t wait for that. nice!

2 Likes

They have never accepted that. My fingers are not enough to count the times community efforts have been deflected with excuses of “only few can reach the quality and consistency to even presume they could write a line of juce code” over the years (then looking at recent additions in commits by team members, things have been added without consistency or even peer review whatsoever).

Some kind of shaking in the foundation is needed for them to change, but things haven’t changed with the ROLI acquisition “mirage” and most likely will not change with PACE or anybody else. Working actively with the community is a state of mind that cannot be replaced with a yearly survey.

3 Likes

You’re right, all this decentralisation will only lead to chaos.

When will the JUCE team realise capitalism is the future and that 1% of people owning 99% of resources is the only way to achieve peace and harmony.

3 Likes

Howdy, some more updates for the inspector:

Improved Performance

Performance in Debug is now in some cases 100x faster. It should no longer contribute to any painting jank / sluggishness. It’s happily tested in apps with > 8000 components (don’t ask).

Preview components/images with alpha/transparency

Thanks to @reFX for the idea, it’s very helpful

FPS meter

Good for getting an intuitive handle on painting sluggishness. Takes advantage of VBlank when available (>= JUCE 7.0.3). There’s some caveats on macOS (which now “repaints all the things” by default on the tiniest repaint()). See this note.

Re-enabling “hover to inspect”

Now that performance is decent, the classic “hover over elements to open tree and inspect all properties” is enabled again. Quite fun.

UX and misc

There’s a whole handful of other UX improvements. Some basic CI assurences to make sure platforms aren’t broken, warnings as errors in CI so it doesn’t clutter your projects, etc.

Sponsor if you like

I spent all of August full time on the inspector and other JUCE related open source and writing. If you feel like encouraging this reckless behavior, you can.

8 Likes

Just a quick note to say that melatonin inspector now includes some Accessibility basics, thanks to a PR by @baconpaul.

There’s some chatter about adding a few more features for accessibility, including a keyboard focus debugger which is pretty exciting.

Earlier this year, @FigBug added the ability to change the window being inspected with a click.

On a personal note, it makes me happy and humbled to see Tracktion and Surge not only using but contributing back to this tool. It’s been a great example of community contribution in the JUCE ecosystem.

If you are motivated to get involved as a contributor, there’s always things to chew on, for example, it would be great to be able to inspect the inspector — I’ve even got the icon prepped and ready to go for u:

266083674-e0ac49cb-ff21-42fe-84d8-e200463f7e31

4 Likes

We’re also using the inspector for Focusrite Control 2 - it’s particularly useful for onboarding people with less JUCE experience as they can really see and understand how things are composed.

2 Likes

@ImJimmi Awesome! Thanks for mentioning, these sorts of things make my day :smiling_face_with_three_hearts:

1 Like