Panel Text

  • 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.

    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...

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


    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
    	// black with 10% transparency
    	g.fillAll(Colours.withAlpha(0xFF000000, 0.2)); 
    	 // Font name, font size
    	g.setFont("Oxygen", 15);
    	// White (hex ARGB value)
    	 // 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).

  • 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!

  • 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.

  • 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 = Math.random(); = 1.0;
    	// Access the current panel using `this`
    	g.drawRect([0, 0, this.getWidth(), this.getHeight()],;
    	g.setFont("Oxygen", 15.0);
    	g.drawText("Random: " + Engine.doubleToString(, 3), [0,15,this.getWidth(), 15.0]);
    // Periodically repaint the panel
    	// Save a new number into the member property = Math.random();
    	// Tells the engine to redraw the panel
    // Start the timer
    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 = 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.)

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

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