How to create Windows like messagebox in Processing using ControlP5?

Hello,

I am new to processing. I am creating GUI using controlP5 library.

I am having difficulty in finding a way to create a pop up message box. (similar to a new dialog box in windows., like error message dialog box etc)

I searched but couldn’t find a way to directly make a pop-up message box in ControlP5.
So I wrote some code by referring to the examples. So I am try to make using “group” of controlP5.

I have following two questions.

  1. Is there a direct way of creating a pop-up message box in ControlP5 ?
  2. How do I disable the mainwindow when messageBox is displayed in the following code.
    Main window should be disabled or inaccessable when messageBox is being displayed.
    After “OK” button on messageBox is pressed, the main window should become accessible again.
import controlP5.*;

ControlP5 cp5;
ControlGroup messageBox;
Textlabel messageBoxLabel;

void setup(){
  cp5 = new ControlP5(this);
  size(800,800);
  
  createMessageBox();
  messageBox.hide();
  
  cp5.addButton("ButtonA").setPosition(300,100).setSize(80,40).setLabel("A");
  cp5.addButton("ButtonB").setPosition(300,200).setSize(80,40).setLabel("B");
}

void draw(){
  background(200);
}

//*********************** Functions **************************
void ButtonA(){
  println("Button A pressed");
  displayMessageBox("Good");
}

void ButtonB(){
  println("Button B pressed");
  displayMessageBox("Error: Press B Button");
}

// ******************************* MessageBox ****************************
void createMessageBox(){
  messageBox = cp5.addGroup("messageBox").setPosition(250,335).setSize(300,120).setBackgroundColor(color(100,220)).hideBar();
  messageBoxLabel =cp5.addTextlabel("messageBoxLabel").setText("Some messageBox text goes here.").setPosition(120,40).moveTo(messageBox);
  cp5.addButton("messageBoxButtonYes").setLabel("OK").setPosition(110,80).setSize(80,24).moveTo(messageBox);
}
void displayMessageBox(String abc){
  messageBoxLabel.setText(abc);
  messageBox.show();
}
void messageBoxButtonYes() {
  println("messageBox: messageBoxButtonYes.");
  messageBox.hide();
}

Hi @Ghostsss,

I had also found nothing by digging into ControlP5 to make a Dialog (ie MessageBox) modal (that’s how it is called). Only solution for me would be s.th. like this (using java swing) in the code below.
You can check if it would be sufficient for your needs…

Cheers
— mnse

PS: There are some other dialog interfaces which you can see here (JOptionPane)

import controlP5.*;
import javax.swing.*;

ControlP5 cp5;

void setup(){
  cp5 = new ControlP5(this);
  size(800,800);  
  cp5.addButton("ButtonA").setPosition(300,100).setSize(80,40).setLabel("A");
  cp5.addButton("ButtonB").setPosition(300,200).setSize(80,40).setLabel("B");
}

void draw(){
  background(200);
  fill(0);
  text(frameCount,20,20);
}

//*********************** Functions **************************
void ButtonA(){
  println("Button A pressed");
  loop();
  displayMessageBoxYesNo("Good");    
}

void ButtonB(){
  println("Button B pressed");
  loop();  
  displayMessageBoxOKCancel("Error: Press B Button");
}

// ******************************* MessageBox ****************************
void displayMessageBoxYesNo(String abc){
    switch(JOptionPane.showConfirmDialog(null,abc,"Some title text goes here.",JOptionPane.YES_NO_OPTION,JOptionPane.QUESTION_MESSAGE)) {
      case JOptionPane.YES_OPTION:
        println("yes!");
        break;
      default:
        println("no!");
    };
}

void displayMessageBoxOKCancel(String abc){
    switch(JOptionPane.showConfirmDialog(null,abc,"Some title text goes here.",JOptionPane.OK_CANCEL_OPTION,JOptionPane.QUESTION_MESSAGE)) {
      case JOptionPane.OK_OPTION:
        println("yes!");
        break;
      default:
        println("no!");
    };
}
1 Like

Btw, if you want to change the style as default is not what you want, you can have a look on … UIManager
And possible attributes which you can modify on … Customizing JOptionPane

Cheers
— mnse

1 Like

G4P has popup modal message boxes - see the example that comes with the library

2 Likes

Thank you very much. JOptionPane looks great.

I didn’t know about javax.swing. (first time java user)
It looks like it has a lot of features for building GUI.

is javax.swing better than ControlP5 for building GUI in processing? (I want to make GUI for controlling arduino)
if yes, why ControlP5 is being used?

Hi @Ghostsss ,

I think, what is better depends on personal preferences. So, there is no clear answer to this.
ControlP5 is a contributed library which would/should makes it easier for one to build a GUI. There is also one named G4P which has the same intension. Both have pros and cons like everything in life… :slight_smile:

Swing is a java GUI-Toolkit which provides a common toolset for building graphical user interfaces in native java, and for sure has also pros and cons. :grin:

Cheers
— mnse

1 Like

It may not be intuitively obvious how to ‘roll your own’ and use JOptionPane in a Processing window. The following is a short example:

import java.awt.*;
import java.awt.event.*;
import javax.swing.*;

javax.swing.JFrame frame;
java.awt.Canvas canvas;

final int _wndW = 400;
final int _wndH = 400;

void buildWnd(){
  JOptionPane.showMessageDialog(frame, "File has been sent.");
}

void setup() {
  frame = (javax.swing.JFrame) ((processing.awt.PSurfaceAWT.SmoothCanvas) surface.getNative()).getFrame();
  canvas = (processing.awt.PSurfaceAWT.SmoothCanvas) ((processing.awt.PSurfaceAWT)surface).getNative();
  frame.setBounds(500, 300, _wndW, _wndH);
  frame.remove(canvas);
  
  javax.swing.SwingUtilities.invokeLater(new Runnable() {
    public void run() {
      buildWnd(); // Builds components on EventDispatchThread
    }
  }
  );
}
1 Like

Hello mnse,

Thank you very much for all the information. It is very helpful.
I tried searching but was unable to change the color of dialog box to match with ControlP5 elements.

Can you please help me with this.

Don’t know which color do you want ?
But here is an wired color selection example, which shows you how to set. :slight_smile:
(Example is not following any coding styles and is only for demonstration purpose.)

first import add to imports at the top

import java.awt.Color;
void displayMessageBoxOKCancel(String abc) {
  UIDefaults previousLF = null;
  try {   
    // change LaF to Metal as it has more possibilities to set things
    // should be done in setup if you want to use it in general...
    UIManager.setLookAndFeel("javax.swing.plaf.metal.MetalLookAndFeel");
    // necassary if you want the title color to be changed
    JDialog.setDefaultLookAndFeelDecorated(true);    

    // keep current state
    previousLF = UIManager.getLookAndFeelDefaults();  

    // set stuff
    UIManager.put("Panel.background", new Color(255,128,0));
    
    UIManager.put("Button.background", Color.YELLOW);
    UIManager.put("Button.foreground", Color.MAGENTA);  
    UIManager.put("Button.border", BorderFactory.createMatteBorder(4, 4, 4, 4, Color.PINK));

    UIManager.put("OptionPane.border", BorderFactory.createMatteBorder(4, 4, 4, 4, new Color(255,0,255)));   
    UIManager.put("OptionPane.questionDialog.titlePane.foreground", Color.BLACK);
    UIManager.put("OptionPane.questionDialog.titlePane.background", Color.CYAN);
    UIManager.put("OptionPane.questionDialog.border.background", Color.GREEN);  
  }
  catch(Exception e) {
    println("Can't load LaF");
  }
  
  switch(JOptionPane.showConfirmDialog(null, abc, "Some title text goes here.", JOptionPane.OK_CANCEL_OPTION, JOptionPane.QUESTION_MESSAGE)) {
  case JOptionPane.OK_OPTION:
    println("yes!");
    break;
  default:
    println("no!");
  };

  // reset things
  if (previousLF != null) {    
    //reset Default settings for LaF Metal when changed  
    UIManager.getDefaults().putAll(previousLF);
    JDialog.setDefaultLookAndFeelDecorated(false);    
    // set default LaF back again.
    try {
        UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
    } 
    catch (Exception e) {
       println("Can't reset LaF");
    }    
  }
}

if Button B is pressed
dummy9

if Button A is pressed
dummy10

Cheers
— mnse

1 Like

Thank you very much manse,

You have been really helpful. Learn’t a lot from you.

To whomsoever it may concern.
Extra Information for someone looking for yet another way to enable dialog box.
UiBooster library for processing is also good for easily implementing simple dialog boxes. It also comes with many examples.
It also seems to be using JOptionPane described above by mnse.
However it appears that directly using JOptionPane allows more customization.

Best regards,
Ghostsss.

Hello mnse,

Can you teach me how to find the parameters which can be modified to change the property of jOptionPane.
For example last time you told me that for changing the button background color following can be used. We used the property : “Button.background”

UIManager.put("Button.background", Color.YELLOW);

Now I need to change the font size of the selection dropdown menu of JOptionPane.
I am talking about selection dropdown menu in this: http://www.java2s.com/Tutorial/Java/0240__Swing/Todisplaysadialogwithalistofchoicesinadropdownlistbox.htm
Can you please teach me how to find the propery that needs to be modified for doing this.

https://stackoverflow.com/questions/17059575/how-to-change-the-font-in-joptionpane-showinputdialog-jtextfield

import java.awt.*;
import java.awt.event.*;
import javax.swing.*;

javax.swing.JFrame frame;
java.awt.Canvas canvas;

final int _wndW = 400;
final int _wndH = 400;

void buildWnd() {

  JDialog.setDefaultLookAndFeelDecorated(true);

  Font normalFont = new Font(Font.MONOSPACED, Font.PLAIN, 24);
  Font boldFont = normalFont.deriveFont(Font.BOLD);

  UIManager.put("OptionPane.font", normalFont);
  UIManager.put("OptionPane.messageFont", normalFont);
  UIManager.put("OptionPane.buttonFont", normalFont);
  UIManager.put("InternalFrame.titleFont", boldFont);
  UIManager.put("OptionPane.background", Color.YELLOW);

  String[] choices = { "A", "B", "C", "D", "E", "F" };
  // Use default icon with array of choices
  String input = (String) JOptionPane.showInputDialog(null, "Options...",
    "Choice of a Lifetime", JOptionPane.QUESTION_MESSAGE, null, choices, choices[1]); // Initial choice
    println(input);
}

void setup() {
  frame = (javax.swing.JFrame) ((processing.awt.PSurfaceAWT.SmoothCanvas) surface.getNative()).getFrame();
  canvas = (processing.awt.PSurfaceAWT.SmoothCanvas) ((processing.awt.PSurfaceAWT)surface).getNative();
  frame.setBounds(500, 300, _wndW, _wndH);
  frame.remove(canvas);

  javax.swing.SwingUtilities.invokeLater(new Runnable() {
    public void run() {
      buildWnd(); // Builds components on EventDispatchThread
    }
  }
  );
}

1 Like

If you want to change the system font (which is what I think you would need to do to change the drop down list font) you would need to do something like this:
https://stackoverflow.com/questions/7434845/setting-the-default-font-of-swing-program

import java.awt.*;
import javax.swing.*;

javax.swing.JFrame frame;
java.awt.Canvas canvas;

final int _wndW = 400;
final int _wndH = 400;

void setUIFont (javax.swing.plaf.FontUIResource f) {
  java.util.Enumeration keys = UIManager.getDefaults().keys();
  while (keys.hasMoreElements()) {
    Object key = keys.nextElement();
    Object value = UIManager.get (key);
    if (value instanceof javax.swing.plaf.FontUIResource)
      UIManager.put (key, f);
  }
}

void buildWnd() {
  Font plainFont = new Font(Font.MONOSPACED, Font.PLAIN, 24);
  Font boldFont = plainFont.deriveFont(Font.BOLD);
  Font italicFont = new Font("Serif", Font.ITALIC, 12);
  
  setUIFont (new javax.swing.plaf.FontUIResource(italicFont));
  JDialog.setDefaultLookAndFeelDecorated(true);
  UIManager.put("OptionPane.messageFont", boldFont);
  UIManager.put("OptionPane.buttonFont", plainFont);
  UIManager.put("OptionPane.background", Color.YELLOW);

  String[] choices = { "A", "B", "C", "D", "E", "F" };
  // Use default icon with array of choices
  String input = (String) JOptionPane.showInputDialog(null, "Options...",
    "Choice of a Lifetime", JOptionPane.QUESTION_MESSAGE, null, choices, choices[1]); // Initial choice
  println(input);
}

void setup() {
  frame = (javax.swing.JFrame) ((processing.awt.PSurfaceAWT.SmoothCanvas) surface.getNative()).getFrame();
  canvas = (processing.awt.PSurfaceAWT.SmoothCanvas) ((processing.awt.PSurfaceAWT)surface).getNative();
  frame.setBounds(500, 300, _wndW, _wndH);
  frame.remove(canvas);

  javax.swing.SwingUtilities.invokeLater(new Runnable() {
    public void run() {
      buildWnd(); // Builds components on EventDispatchThread
    }
  }
  );
}