Introducing Blueprint: Build native JUCE interfaces with React.js

41

Sounds like a great plan :+1:

42

Hi Nic,
Been reading the forums for the last year and finally may be able to get back to a bit more solid programming. Blueprint would come in handy. Should the gain example work out of the box with the latest Juce and Xcode?
Cheers

43

Hey,

Yea the gain example should work out of the box with only a few steps: https://github.com/nick-thompson/blueprint/wiki/Getting-Started and then https://github.com/nick-thompson/blueprint/wiki/Running-the-Example.

Are you hitting issues with it? Also note that starting a new project right now might run you into a known issue (https://github.com/nick-thompson/blueprint/issues/50) but I’m aiming to have this fixed shortly

1 Like
44

As someone familiar with React who’s just starting out in JUCE and revisiting C++ for the first time in well over a decade, I would be soooo relieved just to have a declarative-style bridge to the native JUCE FlexBox, FlexItem, Label, Slider, and SliderAttachment. Whether they’re in an “extras” package or not. The DSP code is a lot of fun to write, but the C++ GUI drawing feels tedious. I’m really amped that someone’s making this. Thank you!

1 Like
45

Definitely! Most of that already exists in Blueprint :slight_smile: See the last few minutes here: https://youtu.be/51pdMfGU-4g?t=1187

Flexbox, views, labels, are already builtin to the core library. We’ll be adding a Slider soon, but in the meantime you can see in the GainPlugin example one way to construct your own Slider. SliderAttachment, as mentioned above, will probably be outside the core library but still available in the “extras” module, and in the meantime you can use the method shown in GainPlugin as well of registering a native C++ callback in the js engine and calling that during the slider drag from javascript.

We have a lot more in the pipeline, but I think it already has a pretty compelling feature set. Give it a try if you haven’t already!

4 Likes
46

I’m trying to integrate EcmascriptEngine into one of my projects. With the JUCE JS engine, I create a var, add several native functions and then call:

engine.registerNativeObject ("SmartAdapter", smObj);

What would be the equivalent in EcmascriptEngine?

47

Hey @RolandMR,

Subject to what you need to accomplish you probably want EcmascriptEngine::registerNativeProperty. You can register a named object globally or you can register additional properties on a named object you have previously registered:

// Register globally available object in JS 
engine.registerNativeProperty("MyObject", myJuceVarThing));

// Alternatively add a property to and already globally registered object
engine.registerNativeProperty("MyObject", "Thing", myJuceVarThing);

The above leaves you able to refer to your object in JS as MyObject.someProperty or MyObject.Thing.someProperty.

This object lives for the duration of the JS context until you reset/destroy the EcmascriptEngine instance.

If you want to pass an object as a parameter to a JS function take a look at EcmascriptEngine::invoke and ReactApplicationRoot::dispatchEvent.

@ncthom, slap me if I messed any of that up :slight_smile:

1 Like
48

Yep, that’s exactly right. Should be mostly a drop-in replacement for what you want there @RolandMR

engine.registerNativeProperty ("SmartAdapter", smObj);

49

Thanks, that seems to work. I haven’t fully tested my App yet, but early indication is that is was very easy to swap out the JUCE JS parser for EcmascriptEngine.

This saved me a lot of time, thank you.

2 Likes
50

Curious if blueprint is still active?

51

The name has changed, but I think it’s still active. I recently checked it out and had no issues getting the examples set up and running :+1: