@ulrik Okay sounds clear, but what is the right way to connect it in this scripting?
// Initialize the Ellipses Panel
const var PnlEllipses = Content.getComponent("PnlEllipses");
PnlEllipses.set("allowCallbacks", "None");
const var KnbSpread = Content.getComponent("KnbSpread");
const var numEllipses = 5; // Variable for the number of ellipses
const var strokeWidth = 2; // Variable for the line thickness
// Function to draw ellipses based on spread
inline function drawEllipses(g) {
local width = PnlEllipses.getWidth();
local height = PnlEllipses.getHeight();
local centerX = width / 2;
local centerY = height / 2;
// Get spread factor from knob's value
local spreadFactor = KnbSpread.getValue();
// Calculate the maximum size and distance between ellipses
local maxRadius = Math.min(width, height) / 2;
local step = maxRadius / numEllipses * spreadFactor;
// Draw the ellipses
for (i = 0; i < numEllipses; i++) {
local radius = step * (i + 1);
// Calculate opacity based on index
// This will cause it to fade when it reaches the edges of the panel
local opacity = Math.range(1.0 - (radius / maxRadius), 0.0, 1.0);
// Draw ellipse
g.setColour(Colours.withAlpha(Colours.white, opacity));
g.drawEllipse([centerX - radius, centerY - radius,
radius * 2, radius * 2], strokeWidth);
}
}
// Set the panel's paint routine
PnlEllipses.setPaintRoutine(drawEllipses);
// Knob Callback
inline function onKnbSpreadControl(component, value)
{
PnlEllipses.repaint();
};
Content.getComponent("KnbSpread").setControlCallback(onKnbSpreadControl);
