How to mask text box with image in Processing w/ cp5

Question

Within my code, I wanted to overlay the warning_img over the alert_box I have created, however using the mask function produces an error as the alert_box is not an image and needs to stay as a text box as it will be edited later to produce changing output.

void create_alert_box(){
  alert = menu.addGroup("alert")
    .setPosition(100,120)
    .setSize(1400,120)
    .setBackgroundColor(color(230,50,51))
    .hideBar();
  alert_label = menu.addTextlabel("alert_label")
    .setText("ALERT!")
    .setFont(createFont("Arial",40))
    .setPosition(650, 40)
    .setSize(200,100)
    .moveTo(alert);  
  warning_img.resize(0,100);
  alert.mask(warning_img);
}

This is where I define everything:

import controlP5.*; //imports GUI library
import processing.serial.*;

//Serial port;

ControlP5 menu; //creates Controlp5 object for the menu
ControlGroup altitude;
Textlabel altitude_label;
ControlGroup date_and_time;
Textlabel date_and_time_label;
ControlGroup CO2emissions;
ControlGroup plane;
Textlabel CO2emissions_label;
ControlGroup alert;
Textlabel alert_label;
PImage plane_img;
PImage warning_img;
PFont font;

void setup(){ // has to be the same as transmitter's setup module in order to respond to physical changes
  size(1600,960);
  //port = new Serial(this, "COM3", 9600); // com3 port is used for the computer's port
  background(255,255,255);
  menu = new ControlP5(this);
  create_altitude_box();
  PFont font = createFont("Arial", 100, true);
  plane_img = loadImage("plane.jpg");
  warning_img = loadImage("warning.png");
  create_CO2emissions_box();
  create_date_and_time_box();
  create_alert_box();
}

Image is behind the box despite trying the mask method, and there are no methods online to mask images on top of textboxes in cp5.

apodidae · Answer 1 · 2023-02-28T15:43:10.887

If you add a small alpha value to the background color of the Group (fourth parameter for transparency) you should be able to see the warning image behind the TextLabel, eg color(230,50,51,10). Note that draw() was also added to draw the image.

import controlP5.*; 

ControlP5 menu; //creates Controlp5 object for the menu
ControlGroup alert;
Textlabel alert_label;
PImage warning_img;

void create_alert_box(){
  alert = menu.addGroup("alert")
    .setPosition(100,120)
    .setSize(1400,120)
    .setBackgroundColor(color(230,50,51,10))
    .hideBar();
  alert_label = menu.addTextlabel("alert_label")
    .setText("ALERT!")
    .setFont(createFont("Arial",40))
    .setPosition(650, 40)
    .setSize(200,100)
    .moveTo(alert);   
}

void setup() { 
  size(1600,960);
  background(255);
  menu = new ControlP5(this);
  warning_img = loadImage("warning.png");
  warning_img.resize(0,100);
  create_alert_box();
}

void draw() {
  image(warning_img, 180, 130);
}

Alternate Approach:

I'm not certain that you need a mask as much as the ability to set an image on a TextLabel. There is a .setImage() method for TextLabel but it is not implemented. An alternate approach would be to use a cp5 canvas class and use multiple instances to change the message string. This class readily accepts an image and might meet your requirements. The following is a short demo of this approach:

import controlP5.*;

PImage warning_img;
ControlP5 cp5;
MyCanvas canvas1;
MyCanvas canvas2;

class MyCanvas extends Canvas {
  String myStr;

  MyCanvas(String inStr) {
    myStr = inStr;
  }

  void draw(PGraphics pg) {
    pg.fill(109);
    pg.rect(0, 0, width, 130);
    pg.fill(255);
    pg.textSize(32);
    pg.image(warning_img, 20, 20);
    pg.text(myStr, 240, 80);
  }
}

void setup() {
  size(1400, 400);
  background(0);
  warning_img = loadImage("warning.png");
  warning_img.resize(0, 100);
  cp5 = new ControlP5(this);
  canvas1 = new MyCanvas("This text is drawn by MyCanvas and can be changed (click me).");
  canvas2 = new MyCanvas("Alert Message");
  cp5.addCanvas(canvas1);
}

void draw() {
}

void mousePressed() {
  cp5.addCanvas(canvas2);
}

How to mask text box with image in Processing w/ cp5

1 Answers1