Questions about editing layouts with Live Build

I’ve never tried Projucer’s live build feature, and curious how best to incorporate it into my workflow. For GUI layouts, I generally use a combination of the GUI editor and adding to the auto-generated code inside the commented areas. It’s always frustrating to not be able to see background graphics, or test with our custom components, etc. Say I’m trying to properly position a custom knob widget over a graphic background. It would be great if I could see the knob in the context of the background and just move it into the right position.

In Jules’ early videos on the Projucer live build (e.g. https://youtu.be/Uj94TYQ6LN0 and https://youtu.be/imkVkRg-geI), he showed modifying the placement/size of widgets in the live window, and the source code would automatically change. He also was able to add widgets directly from that window, and it would refactor the code to include the new widget, etc. These features would be very helpful and allow migrating entirely away from the GUI editor. But I’m not seeing this in the current 5.3 Projucer. Am I missing something obvious?

When using the GUI editor with live build, it appears that you cannot live-modify literals in auto-generated GUI code (e.g. with a slider for a font size literal, or color picker, etc). I suppose this is because it’s not prepared to also update the JUCE_METADATA, so any changes to literals would be lost in the GUI editor. Any plans to get this working with synchronous changes to the metadata?

Thanks,
-John

Sadly although I spent a lot of time trying to make that feature production-ready, it’s just way too difficult to implement for general code!

In the demos I had, it worked by expecting the components to be positioned using simple calls to setBounds (x, y, w, h), and if the arguments to setBounds were very simple expressions, it could replace their text with the new value… However, in real world code, a setBounds call which is trivial enough to be suitable for this is rare, especially since we now recommend that you use other layout techniques, e.g. flexbox or at least use Rectangle methods to chop/subdivide and set bounds on your child components, and for the projucer to reverse-engineer code which does that would very much be in complex AI territory!

2 Likes

Understood. Thanks Jules.
-John