Multiple instances on external site

[cristianvogel]

Hi!

I am embedding dials designed in Cables for a native WebView based plugin. Still trying to decide if that is a good idea or not. I like the design flow in Cables, the export to GitHub ( and easy sync via git submodule ) - but wondering if it is practical to have as many instnces of CABLES running, as there are GUI widgets.

One advantage is that I can use my own layout and other stuff handling and scaling multiple canvas elements running Cables sketches. I have done that and stored each Cables patch instance in a Svelte store. Proof of Concept works.

Wondering if that is viable in terms of scaling though.

Should I try to build the whole GUI, including Widget instances and layout in one Cable sketch and export that? Or can I instantiate one CABLES global object target multiple Canvasses running the same Patch code?

I am guessing this is something Cables dev crew have thought about, considering the move to native dev...

[steam0r]

hey,

not really sure how this relates to "native dev" and what you mean by that :)

having one patch for each element seems like a very weird idea, if you go that way you can use cables-cli (https://github.com/cables-gl/cables-cli) to at least export and use the cables core code only once (via the -C switch and some trickery). but even that would mean you have multiple canvases instanciated, right?

wouldnt it be somehow better to have the whole experience in one "widget" and then handle state in cables. not really sure about "svelte" and what exactly "gui widgets" are though.

[cristianvogel]

Like, with GridTransform.op you mean ? I tried that just now, looks nice, I get loads of 'widgets' neatly arranged. But the mouse interaction then is tricky. How do I know which one is which, and that they send seperate data values to the program? Is there an example?

[cristianvogel]

And also, just to know in general and for others to know best practice. Is it not a good pattern to create and manage lots of small canvas elements in front end dev? In Cables editor, there's all those little editor Viz graphs and stuff. Aren't they small canvas elements, independent of each other?

[steam0r]

i think firefox will limit you to something like 10-ish webgl canvases, for starters. we hide vizops rendering when they are not visible, even with that sometimes firefox just shows black boxes, if you have a lot of them.

about "gridtransform" that really depends on what kind of things your elements are made of...maybe take a look at intersect ops if you are using 3d https://dev.cables.gl/ops/Ops.Graphics.Intersection

[cristianvogel]

This is a cool solution that works, because my 'widgets' are indeed 3D meshes.
Only thing is that GridTransform.op doesn't seem to replicate the IntersectBody.op .

[cristianvogel]

If I do a whole seperate branch manually, this works. I still can't trigger the instances from outside though, only because the IntersectBody.op doesn't seem to replicate off a Repeat2D or GridTransform - would be neat if it did.

[cristianvogel]

I'm still finding it testing to render an arbitrary number of interactive widgets, like Faders or Dials, and get values from them each independently, using the Grid or Repeat2D . Not sure if I am getting confused about the simple way to do this.

[cristianvogel]

@steam0r I invited you and @pandrr to the patch, because there's weirdness that I can't fathom, over in the Data section. Why doesn't the array store the values from the hits? It seems to be creating a new array everytime, so I can't do much in terms of state on each interactive widget.

[steam0r]

maybe you find a way to set the positions of the elements xyz and then use meshinstance or something similar, see this part from the "intersections example", intersect body takes positions:

[cristianvogel]

I figured something out.

Thanks for you help!