I am building a touch tablet interface for a robotic arm. It seems that the G4P library is the only one to respond to touch as a mouse click. That is nice, thank you author.
However the buttons have very small writing , even when bold.
Is there a way to make bigger fonts? I would rather not load pics for each button.
Tried that and it was a pain, no documentations or examples of how to do it?
Thanks
Glad you like G4P 
The sketch below shows how you can change the font, font style and size for a GButton. Just be careful that you make the button big enough in the constructor to display the text.
import g4p_controls.*;
import java.awt.Font;
GButton btn;
void setup() {
size(300, 200);
btn = new GButton(this, 80, 40, 120, 40);
btn.setText("STOP");
btn.setFont(new Font("Arial", Font.BOLD, 30));
}
void draw() {
background(200, 200, 255);
}
Peter
Thanks for the reply, here is what I did in the public void createGUI() function
HOME = new GButton(this, 1520, 816, 250, 100);
HOME.setFont(new Font(“Arial”, Font.BOLD, 70));
HOME.setText(“HOME”);
HOME.setTextBold();
I ran it and the fonts are big and nice.
However the moment I move or resize the HOME button, all the text formating gets erased.
I am planning to have about 15 buttons that I will arrange for a while on the screen.
It will be very difficult to re-enter the text line every time.
Any ideas?
What methods are you using to move resize the button?
I open the GP4 Gui builder from tools.
Then I drag and drop the buttons. Etc
Should I try something else?
Also is there a way to have a delay in the action of the button?
I tried
public void button2_click2(GButton source, GEvent event) { //CODE:Send:350849:
streamer.send(BeforeSending.toString()); ///Sent step button
BeforeSending = “”;
fill(o);
textFont(font, 130);
text( “SENT”, 1250, 150);
delay (1000);
} //CODE:Send:350849:
Hoping to have the word SENT linger about a sec on the screen as a confirmation…
It flashes for a mS only
I didn’t realize you were using GUI Builder. Note that the comments in the gui tab, you must not alter the contents of the createGUI() method any additional code needed to modify the controls should be in the custonGUI() method. The following sketch was created with GUI Builder and shows how to do it.
Main Tab
// Need G4P library
import g4p_controls.*;
import java.awt.Font;
public void setup() {
size(300, 200, JAVA2D);
createGUI();
customGUI();
// Place your setup code here
}
public void draw() {
background(230);
}
// Use this method to add additional statements
// to customise the GUI controls
public void customGUI() {
btn.setFont(new Font("Arial", Font.BOLD | Font.ITALIC, 40));
}
gui Tab
/* =========================================================
* ==== 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 btn_click(GButton source, GEvent event) { //_CODE_:btn:877482:
println("btn - GButton >> GEvent." + event + " @ " + millis());
} //_CODE_:btn:877482:
// Create all the GUI controls.
// autogenerated do not edit
public void createGUI(){
G4P.messagesEnabled(false);
G4P.setGlobalColorScheme(GCScheme.BLUE_SCHEME);
G4P.setCursor(ARROW);
surface.setTitle("Sketch Window");
btn = new GButton(this, 10, 10, 250, 60);
btn.setText("Click Me!");
btn.addEventHandler(this, "btn_click");
}
// Variable declarations
// autogenerated do not edit
GButton btn;
OK you are not trying to delay the action of the button you are trying to get the text to stay on the screen for a short time. These are 2 very different things!
Having said that G4P can help because it has a means for grouping controls and then fading them in an out. This sketch is a modified version of the one above when the button is clicked a message will appear for 2 seconds and fade out over the next half second. It uses the GGroup class which can hold 1 or more controls that can be faded in and out as a group.
Main Tab
// Need G4P library
import g4p_controls.*;
import java.awt.Font;
GGroup grp;
public void setup() {
size(300, 200, JAVA2D);
createGUI();
customGUI();
// Place your setup code here
}
public void draw() {
background(230);
}
// Use this method to add additional statements
// to customise the GUI controls
public void customGUI() {
// Set button font
btn.setFont(new Font("Arial", Font.BOLD | Font.ITALIC, 40));
// Create group
grp = new GGroup(this);
// Set label font
lbl.setFont(new Font("Times New Roman", Font.PLAIN, 30));
// Add label to group
grp.addControl(lbl);
// Hide the group - fade to invisible (alpha = 0)
grp.fadeOut(0, 0);
}
guiTab
/* =========================================================
* ==== 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 btn_click(GButton source, GEvent event) { //_CODE_:btn:877482:
println("Show message");
grp.fadeIn(0, 10); // Fade in fast
grp.fadeOut(2000, 500); // After 2 seconds fade out over a 0.5second period
} //_CODE_:btn:877482:
// Create all the GUI controls.
// autogenerated do not edit
public void createGUI() {
G4P.messagesEnabled(false);
G4P.setGlobalColorScheme(GCScheme.BLUE_SCHEME);
G4P.setCursor(ARROW);
surface.setTitle("Sketch Window");
btn = new GButton(this, 10, 10, 250, 60);
btn.setText("Click Me!");
btn.addEventHandler(this, "btn_click");
lbl = new GLabel(this, 10, 90, 250, 60);
lbl.setTextAlign(GAlign.CENTER, GAlign.MIDDLE);
lbl.setText("STARTING");
lbl.setOpaque(false);
}
// Variable declarations
// autogenerated do not edit
GButton btn;
GLabel lbl;
I am happy to just use
public void customGUI() {
btn.setFont(new Font("Arial", Font.BOLD | Font.ITALIC, 40));
}
I made many entries, one for each button, and they work fine. I rather keep it simple.
However: I wish I could change the font.
I tried even no font
HOME.setFont(new Font(“AgencyFB-Bold-200”, Font.BOLD, 70));
Send.setFont(new Font("", Font.BOLD, 70));
But your standard font still shows. Size is right.
Thanks
Did not work on the delay yet… Thanks for that advice
new Font("Arial", Font.BOLD | Font.ITALIC, 40)
The first parameter is the font name. This only works correctly if the font is installed on your computer. If the sketch can’t find the font it will use the system default and then apply the style (second parameter) and font size (third parameter).
This is why I selected Arial because it is installed on virtually all computers. You can also try “Times New Roman” and “Courier” or “Courier New” as these should be installed on your computer.
I created this using a font called “Blood Of Dracula” bet you don’t have that on your computer.
Thanks a lot for your reply and clarifications.
Since I like the library so much , I am trying to use it further.
I am not being able to obtain any buttons in a sketch that involves video.
I am trying to find dice (blobs of color) on the table.
I tried to ad a slider for a treshold for instance but no buttons appear,
Code was generated in your gui tab.
Here is the main tab,
import processing.video.;
import java.awt.Font;
import g4p_controls.;
import java.awt.Font;
PFont f;
PFont font;
int w= #FFFFFF; // white
int y= #FCF442; //yellow
int g= #A0FFA3; //green
int b= #64E1FF; // blue
int m= #CC15D3; // Magenta
int o= #FF6C67; // orange
int i= #B767FF; // indigo
int r= #FC0B03; // red
int bk = (#212121);
Capture video;
color trackColor;
float threshold = 25;
int Wheel; // value from the mouse wheel
int WheelAcc=0; // mouse wheel accoumulated
void setup() {
size(1800, 1100, JAVA2D);
String[] cameras = Capture.list();
printArray(cameras);
video = new Capture(this, “name=iSight,size=640x480,fps=15”);
video.start();
trackColor = color(255, 0, 0);
font = loadFont(“AgencyFB-Bold-200.vlw”);
frameRate (15);
}
void captureEvent(Capture video) {
video.read();
}
void draw() {
background(bk);
video.loadPixels();
image(video, 0, 0);
//threshold = map(mouseX, 0, width, 0, 100);
threshold = 30+ WheelAcc;
threshold = constrain (threshold, 0, 100);
// /*
float avgX = 0;
float avgY = 0;
int count = 0; // nr of pixels found in
// Begin loop to walk through every pixel
for (int x = 0; x < video.width; x++ ) {
for (int y = 0; y < video.height; y++ ) {
int loc = x + y * video.width;
// What is current color
color currentColor = video.pixels[loc];
float r1 = red(currentColor);
float g1 = green(currentColor);
float b1 = blue(currentColor);
float r2 = red(trackColor);
float g2 = green(trackColor);
float b2 = blue(trackColor);
float d = distSq(r1, g1, b1, r2, g2, b2);
if (d < threshold*threshold) {
stroke(255);
strokeWeight(1);
point(x, y); // this is replacing the "Found " pixels
avgX += x;
avgY += y;
count++;
}
}
}
// We only consider the color found if its color distance is less than 10.
// This threshold of 10 is arbitrary and you can adjust this number depending on how accurate you require the tracking to be.
if (count > 20) {
avgX = avgX / count;
avgY = avgY / count;
// Draw a circle at the tracked pixel
//println(avgX + " is avgX") ;
//println(avgY + " is avgY") ;
fill(255);
strokeWeight(4.0);
stroke(0);
ellipse(avgX, avgY, 24, 24);
}
else
{ //delay (100);
}
//fill (bk);
//rect(0, 700, 1760, 1060, 7);
fill (trackColor);
rect(10, 1040, 50, 1060, 7);
textFont(font, 35);
fill(w);
text(“trackColor= “, 70, 1090 );
text( trackColor, 240, 1090);
text(“RGB= “, 380, 1090 );
text(str(int(red(trackColor)))+”,”+str(int(green(trackColor)))+”,”+str(int(blue(trackColor))),460, 1090);
fill ®;
text(“avgX, AvgY:”, 10, 930 );
text( nf(avgX, 0, 1), 240, 930);
text( nf(avgY, 0, 1), 380, 930);
} // end of draw
float distSq(float x1, float y1, float z1, float x2, float y2, float z2)
{
float d = (x2-x1)(x2-x1) + (y2-y1)(y2-y1) +(z2-z1)*(z2-z1);
return d;
// */
}
void mousePressed() {
if (mouseButton == LEFT) { // Save color where the mouse is clicked in trackColor variable
int loc = mouseX + mouseY*video.width; // definition of location by pixel number.
trackColor = video.pixels[loc];
println(loc + " is loc") ;
println(trackColor + " is trackColor") ;
}
else if (mouseButton == RIGHT)
{video.read();
}
}
void mouseWheel(MouseEvent event) {
Wheel = event.getCount();
WheelAcc = WheelAcc + Wheel;
//println(WheelAcc + “Acc”) ;
//println(Wheel + “Wheel”) ;
println(threshold + " is Treshold") ;
Wheel = 0;
}
I assume that you have used GUI Builder and you have a GUI tab. If so you are missing createGUI() in setup
Thanks a lot , That was basic. Sorry
I am implementing for the first time a slider. I build it with the G4P tool. Looks and feels great.
How do I grab the value of the slider to use it in the sketch?
I spent a lot of time with your examples, Cool sliders, Etc…
They were not created with the G4P tool. More than that, you pile a lot of items in an example, it makes it hard to distinguish what function controls what…
I am not the sharpest programmer, an amateur at best…
Is there a place to find examples based on the G4P creation process?
Thanks
By the way , here is my GUI Tab
/* =========================================================
void myBtnEvents(GButton button) { //CODE:button1:12356:
// It is safe to enter your event code here
} //CODE:button1:12356:
public void button2_click1(GButton source, GEvent event) { //CODE:button2:586325:
println(“button2 - GButton >> GEvent.” + event + " @ " + millis());
} //CODE:button2:586325:
public void custom_slider1_change1(GCustomSlider source, GEvent event) { //CODE:custom_slider1:885703:
println(“custom_slider1 - GCustomSlider >> GEvent.” + event + " @ " + millis());
} //CODE:custom_slider1:885703:
// Create all the GUI controls.
// autogenerated do not edit
public void createGUI(){
G4P.messagesEnabled(false);
G4P.setGlobalColorScheme(GCScheme.BLUE_SCHEME);
G4P.setCursor(ARROW);
surface.setTitle(“Sketch Window”);
button2 = new GButton(this, 4, 591, 80, 30);
button2.setText(“GO GET IT”);
button2.addEventHandler(this, “button2_click1”);
custom_slider1 = new GCustomSlider(this, 7, 549, 782, 30, “grey_blue”);
custom_slider1.setShowValue(true);
custom_slider1.setShowLimits(true);
custom_slider1.setLimits(30.0, 0.0, 100.0);
custom_slider1.setNumberFormat(G4P.DECIMAL, 2);
custom_slider1.setOpaque(false);
custom_slider1.addEventHandler(this, “custom_slider1_change1”);
}
// Variable declarations
// autogenerated do not edit
GButton button2;
GCustomSlider custom_slider1;
There are three functions to get the current slider position depending on the data type
slider.getValueF(); // returns the slider position as a float
slider.getValueI(); // returns the slider position as an int
slider.getValueS(); // returns the slider position as a String
You use the one to suit your slider. In your example you use G4P.DECIMAL so will probably want to use the first one like this
public void custom_slider1_change1(GCustomSlider source, GEvent event) { // *CODE* :custom_slider1:885703:
x = source.getValueF(); // x is a float declared in main sketch window
} // *CODE* :custom_slider1:885703:
Thanks so much, that worked.
However now I realize that the Sider1Output = source.getValueF(); is always defaulting to 0 when I start the sketch.
Even if I set it to 22 in the G4P tool, custom_slider1.setLimits(22.0, 4.0, 50.0);
So in order to get it to 22 I have to move it a bit every time.
Is there a way to get the 22 out by default?
Thanks
That’s not true. After the slider is created it will have the initial value you set in the GUI Builder. The method custom_slider1_change1 is an event handler and is only executed when the slider changes value. If you have variables tracking the slider value then it should be initiallised at startup. In this sketch the variable x is used to track the slider value and initialised in customGUI()
// Need G4P library
import g4p_controls.*;
float x;
public void setup(){
size(480, 320, JAVA2D);
createGUI();
customGUI();
// Place your setup code here
}
public void draw(){
background(230);
}
// Use this method to add additional statements
// to customise the GUI controls
public void customGUI(){
println(x, custom_slider1.getValueF()); // Displays 0.0 22.0
x = custom_slider1.getValueF(); // Update x which is used to track the slider value
println(x, custom_slider1.getValueF()); // Displays 22.0 22.0
}
public void custom_slider1_change1(GCustomSlider source, GEvent event) { //_CODE_:custom_slider1:340588:
x = custom_slider1.getValueF();
} //_CODE_:custom_slider1:340588:
// Create all the GUI controls.
// autogenerated do not edit
public void createGUI(){
G4P.messagesEnabled(false);
G4P.setGlobalColorScheme(GCScheme.BLUE_SCHEME);
G4P.setCursor(ARROW);
surface.setTitle("Sketch Window");
custom_slider1 = new GCustomSlider(this, 70, 50, 280, 70, "grey_blue");
custom_slider1.setShowValue(true);
custom_slider1.setShowLimits(true);
custom_slider1.setLimits(22.0, 4.0, 50.0);
custom_slider1.setNumberFormat(G4P.DECIMAL, 2);
custom_slider1.setOpaque(false);
custom_slider1.addEventHandler(this, "custom_slider1_change1");
}
// ====================================================================
// GUI tab code
// Variable declarations
// autogenerated do not edit
GCustomSlider custom_slider1;
Got it, thanks. I defined it with a value in the definitions.
Like this:
float Slider1Output=22;
before was just:
float Slider1Output;
Other folks might find this useful.
The way I showed you in the last post is best because the variable is always correct even if the slider value is changed in GUI Builder