G4P Custom Scrollbar and Text Anti-Aliasing

cygig

Hello everyone, I am a newbie programmer trying out Processing to make my own program to calculate some values for a game. I am using G4P library and G4P GUI Buiilder for the user interface.

Firstly, why do text on labels appear to have aliasing when the background is set to not opaque in the GUI builder (Look at 1 in the image)? I need to make the background of all labels opaque with the same colour as my sketch background to get smooth, anti-aliased text (the rest of the labels in the image). Is there a way to have transparent background and smooth text at the same time?

Secondly, is there any way to change the look of the scrollbar in a text area (Look at 2 in the image)? I am looking at plain square thumb and arrows buttons with no or light colour border instead of the default rounded ones with black outline. The user defined palette doesn't seem to change the colour of the outline out the scrollbar, it seems to be always black. Unchecking rounded corners in the GUI builder does not seem to change the shape of the scrollbar.

Thanks!

@quark

quark

G4P uses double buffering for all visual controls to reduce CPU usage. It means that each control has an internal graphic buffer which is updated only when there is a change of state in the control eg mouse moves over a button, key typed in a text field etc. The graphic buffer is copied to the screen on each frame. When a buffer is updated the background is either transparent (setOpaque false) or cleared to a colour from the colour scheme (setOpaque true) so ignores the display colour under the control.

It does mean that text is not as sharp when the background is transparent. You found one solution by changing the background colour of each label. Another solution would to create a new colour scheme for the global scheme before calling create GUI. See the guides in on my website.

http://lagers.org.uk/g4p/guides/g04-colorschemes.html

The buffer type is java.awt.Graphics2D no matter which Processing renderer is being used ie JAVA2D (default), P2D or P3D. Note that in PS3 P2D and P3D are in fact OpenGL. This change also let me give the user much greater control over the front attributes, a feature not available in the Processing core. For instance font colour, italics, bold, underline can be changed for the whole or part of some piece of text.

I investigate the border colour for scrollbars.

cygig

Thanks for the prompt reply!

I am not very sure on how to create a new colour scheme

Another solution would to create a new colour scheme for the global scheme before calling create GUI.

Does it mean I call GCScheme.makeColorSchemes(this); before createGUI(); like this:

import g4p_controls.*;

void setup(){
  //Ususal stuff
  size(530, 800, JAVA2D);
  background(250);

  GCScheme.makeColorSchemes(this); // This statement is rarely needed
  GCScheme.copyPalette(G4P.GREEN_SCHEME, 10);
  GCScheme.changePaletteColor(10, 2, color(0, 0, 255));
  GCScheme.savePalettes(this, "my-palettes.png");

  createGUI();
  customGUI();
.
.
.

or are you referring to creating user_gui_palette.png?

The above code does not seem to work, it runs as per normal but the text still has aliasing as before.

quark

The website needs a bit more information / explanation so here we go.

By default G4P uses an image called default_gui_palette.png if you want to a particular sketch to use your own palette then you need to create a new image called user_gui_palette.png this image needs to be placed inside a folder called data inside the sketch folder like this

**MySketch**
  MySketch.pde
  **data**
    user_gui_palette.png

Before G4P V4.0.3 creating the new image file had to be done using a graphics editor program but now it can be done inside Processing.

The sketch below demonstrates how to create the image.

import g4p_controls.*;

// Use this sketch
public void setup() {
  GCScheme.makeColorSchemes(this); // This statement is rarely needed
  // Make a copy of the GREEN_SCHEME into scheme number 10
  GCScheme.copyPalette(G4P.GREEN_SCHEME, 10);
  // Change the background colour used by labels (palette number 6)
  // to the sketch background colour (change the last parameter to suit)
  GCScheme.changePaletteColor(10, 6, color(0, 200, 200));
  // Add other changes here
  // ...
  GCScheme.savePalettes(this);
}

copy the user_gui_palette.png image file created into the data folder of any sketch that intends to use it. When you run your sketch G4P will find this image and use it instead of the default one.

You need to set the labels background to opaque either manually like

label1.setOpaque(true);

or click the option in GUI Builder. Also if you are using GUI Builder then you have to modify the statement

G4P.setGlobalColorScheme(GCScheme.BLUE_SCHEME);

to use the new palette like this

G4P.setGlobalColorScheme(10);

You will have to do this each time you modify the GUI with GUI Builder because it only allows to choose one of the default palettes.

I will modify GUI Builder in its next release to accept user palettes but for the moment you have to do it manually.

quark

I have tried reproducing the two labels "Defending Pokemon" and "Attacking Pokemon" and have not been able to reproduce the difference you show in the picture above.

Can you create a simple sketch with just 2 labels that demonstrates the problem and post the code here?

cygig

I wanted to give you an example, but I was shocked that my problem could not be replicated when I wrote a new simple sketch. After investigation, I found my mistake: I put background(250) in setup() rather than draw().

You can recreate the problem with these codes:

// Need G4P library
import g4p_controls.*;


public void setup(){
  size(480, 320, JAVA2D);
  background(230);
  createGUI();
  customGUI();
  // Place your setup code here

}

public void draw(){


}

// Use this method to add additional statements
// to customise the GUI controls
public void customGUI(){

}

and

/* =========================================================
 * ====                   WARNING                        ===
 * =========================================================
 * The code in this tab has been generated from the GUI form
 * designer and care should be taken when editing this file.
 * Only add/edit code inside the event handlers i.e. only
 * use lines between the matching comment tags. e.g.

 void myBtnEvents(GButton button) { //_CODE_:button1:12356:
     // It is safe to enter your event code here  
 } //_CODE_:button1:12356:

 * Do not rename this tab!
 * =========================================================
 */

public void textfield1_change1(GTextField source, GEvent event) { //_CODE_:textfield1:488024:
  println("textfield1 - GTextField >> GEvent." + event + " @ " + millis());
} //_CODE_:textfield1:488024:



// Create all the GUI controls. 
// autogenerated do not edit
public void createGUI(){
  G4P.messagesEnabled(false);
  G4P.setGlobalColorScheme(GCScheme.GREEN_SCHEME);
  G4P.setCursor(ARROW);
  GButton.useRoundCorners(false);
  surface.setTitle("Sketch Window");
  lbl_transparent = new GLabel(this, 70, 110, 80, 20);
  lbl_transparent.setTextAlign(GAlign.CENTER, GAlign.MIDDLE);
  lbl_transparent.setText("Transparent");
  lbl_transparent.setOpaque(false);
  lbl_opaque = new GLabel(this, 160, 110, 80, 20);
  lbl_opaque.setTextAlign(GAlign.CENTER, GAlign.MIDDLE);
  lbl_opaque.setText("Opaque");
  lbl_opaque.setOpaque(true);
  textfield1 = new GTextField(this, 70, 150, 160, 30, G4P.SCROLLBARS_NONE);
  textfield1.setOpaque(true);
  textfield1.addEventHandler(this, "textfield1_change1");
}

// Variable declarations 
// autogenerated do not edit
GLabel lbl_transparent; 
GLabel lbl_opaque; 
GTextField textfield1; 

quark

If you are going to use G4P then you MUST use background(...) in the draw() method. I don't need to recreate the problem because you have solved it.

And I don't have to create a new release of G4P :D

cygig

Thank you for your support. Perhaps that could be included in the website for newbies like me to reference.

Any new info on the possibility of customizing the scrollbar not to have round edges or changing the colour of the border?

quark

I will investigate the scrollbar issue but it would involve changing the library source code and that might be some time off since I am busy at the moment. If you are desperate then you could install V4.0.2 which had square corners for buttons and scrollbars but then you would miss out on later bug fixes and enhancements etc.