Panel Text

[d.healey]

I'm using this code to create a panel and set its text but the text isn't showing up and the textColour parameter seems to only affect the border colour.

Synth.addToFront(true);
Content.setHeight(150);
const var Panel = Content.addPanel("Panel", 163, 57);
// [JSON Panel]
Content.setPropertiesFromJSON("Panel", {
  "text": "My Text",
  "itemColour": 4294967295,
  "itemColour2": 4294967295,
  "textColour": 4278190080
});
// [/JSON Panel]

(I edited your post so you can see yourself how the syntax highlighting works...

[Christoph Hart]

Yes, the panel has no text (actually I should deactivate this property).

Solutions:

1. Use a Label with editable set to false.

2. Draw the text directly using a custom paint routine:

const var Panel = Content.addPanel("Panel", 10, 0);

// Replaces the default Panel graphics with a custom routine
Panel.setPaintRoutine(function(g)
{
	// black with 10% transparency
	g.fillAll(Colours.withAlpha(0xFF000000, 0.2)); 
	
	 // Font name, font size
	g.setFont("Oxygen", 15);
	
	// White (hex ARGB value)
	g.setColour(0xFFFFFFFF); 
	
	 // Text, Rectangle as 4 element area (x,y,width height)
	g.drawText("Text", [0, 20, 100, 15]);
});

BTW: you can write syntax highlighted code examples by surrounding the snippet with ```. (I edited your post, take a look at it in the editor).

[d.healey]

Yeah I thought about using a label, I prefer the draw text method though, it feels neater, so I'll do it that way, thanks!

[d.healey]

Is there a way to pass more parameters into the paintRoutine function? I'd like to be able to pass in colours, font, and font size.

[Christoph Hart]

No, but you can use the member object data to store additional variables per object:

const var Panel = Content.addPanel("Panel", 0, 0);

Panel.set("width", 200);

// add anything to the `data` member of the Panel
Panel.data.randomValue = Math.random();
Panel.data.thickness = 1.0;

Panel.setPaintRoutine(function(g)
{
	g.setColour(Colours.black);
	
	// Access the current panel using `this`
	g.drawRect([0, 0, this.getWidth(), this.getHeight()], this.data.thickness);
	
	g.setFont("Oxygen", 15.0);
	g.drawText("Random: " + Engine.doubleToString(this.data.randomValue, 3), [0,15,this.getWidth(), 15.0]);
});

// Periodically repaint the panel
Panel.setTimerCallback(function()
{
	// Save a new number into the member property
	this.data.randomValue = Math.random();
	
	// Tells the engine to redraw the panel
	this.repaint();
});

// Start the timer
Panel.startTimer(250);

const var thickness = Content.addKnob("thickness", 247, 0);
// [JSON thickness]
Content.setPropertiesFromJSON("thickness", {
  "max": 5
});
// [/JSON thickness]

function onControl(number, value)
{
	// Set the thickness via the slider
	Panel.data.thickness = value;
}

(In case you wonder why you can't add the stuff directly to the Panel: the Panel is not a standard Javascript object, but a custom subtype that is much faster when used as const variable. But the data member is a normal Javascript object.)

[d.healey]

Ah okay cool, I tried to add it to the extraProperties parameter but didn't think about using data.

[Christoph Hart]

Oops, I forgot about the extraProperties parameter. (I added it before I added the data member, but the latter is much more versatile).