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.

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


  • administrators

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



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


  • administrators

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



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


  • administrators

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


Log in to reply
 

2
Online

343
Users

1.1k
Topics

7.1k
Posts

Looks like your connection to Forum was lost, please wait while we try to reconnect.