Transition between windows in GUI builder

scheongly

Transition between windows in GUI builder

in Contributed Library Questions • 4 months ago

Hi,

I'm currently working on a project involving serial communication between the G4P GUI builder and an Arduino Uno set. I'm new to both languages and would like some help.

Objective:

I am trying to make a GUI that resembles a typical Powerpoint slideshow- the user presses a physical pushbutton on the Arduino which causes the GUI to transition from one window to the next, much like how a clicker functions in a slideshow presentation.

What I've managed so far

So far, I've been able to establish serial communication between my Arduino and the G4P. I've tried using the "window1.setVisible(false)" method in response to input from the Arduino push button. Sharing my codes below:

Main Sketch Tab

// Need G4P library

import g4p_controls.*;

import processing.serial.*;

Serial port;

String portname = "/dev/tty.usbmodemfd121";

int baudrate = 9600;

int value = 0;

public void setup(){

size(480, 320, JAVA2D);

createGUI();

customGUI();

port = new Serial(this, portname, baudrate);

println(port);

}

// Place your setup code here

public void draw(){

background(230);

while(port.available() > 0){

value = port.read();

serialEvent(value);

}

// Use this method to add additional statements

// to customise the GUI controls

public void customGUI(){

window1.setVisible(false);

}

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!

* =========================================================

void serialEvent(int serial){

// if serial event is 'H' actVal is increased

if(serial=='H') {

window1.setVisible(true);

}else {

window1.setVisible(false);

}

synchronized public void win_draw1(GWinApplet appc, GWinData data) { //_CODE_:window1:990793:

appc.background(230);

} //_CODE_:window1:990793:

// Create all the GUI controls.

// autogenerated do not edit

public void createGUI(){

G4P.messagesEnabled(false);

G4P.setGlobalColorScheme(GCScheme.BLUE_SCHEME);

G4P.setCursor(ARROW);

if(frame != null)

frame.setTitle("Sketch Window");

label1 = new GLabel(this, 166, 120, 150, 68);

label1.setText("Press Button to Start");

label1.setOpaque(false);

window1 = new GWindow(this, "Window title", 0, 0, 511, 316, false, JAVA2D);

window1.addDrawHandler(this, "win_draw1");

label2 = new GLabel(window1.papplet, 182, 114, 140, 85);

label2.setText("Press and Hold Button for 10 secs (TBC)");

label2.setOpaque(false);

}

// Variable declarations

// autogenerated do not edit

GLabel label1;

GWindow window1;

GLabel label2;

The result: Window 1 appears when I press the button, but it stays as long as the button is held. Not the effect I was aiming for.

Questions

How do I achieve the 'slide-transition' effect?
Is there a way to improve on my serial communication with the Arduino?
I would like to code for more complicated responses with reference to the Arduino button. How can I go about coding these? For instance,

Cause the window transition only if user presses and holds the button for 10 secs
Cause the window transition only if user presses the button 5 times consecutively

Appreciate any advice! Thank you!

Replies(7)

quarks

Re: Transition between windows in GUI builder

4 months ago

Before anything else this code

void serialEvent(int serial){
// if serial event is 'H' actVal is increased
if(serial=='H') {
window1.setVisible(true);
} else {
window1.setVisible(false);
}
}

should not be in the gui tab as it will be deleted when using the GUI builder - place it in the main sketch tab. Read the comments create by GUI Builder carefully!

I am trying to make a GUI that resembles a typical Powerpoint slideshow- the user presses a physical pushbutton on the Arduino which causes the GUI to transition from one window to the next, much like how a clicker functions in a slideshow presentation.

A typical PowerPoint presentation does not
transition from one window to the next
rather it
transition from one display (slide) to the next - but in the same window.

Which do you want?

scheongly

Re: Transition between windows in GUI builder

4 months ago

Dear quarks,

Thank you for your reply!

Thanks for pointing out my mistakes too!

A typical PowerPoint presentation does not

transition from one window to the next
rather it
transition from one display (slide) to the next - but in the same window.

Which do you want?

Is it possible if you showed be how to code for both? I am interested in exploring various possibilities to develop the project I am working on.

Thank you!

quarks

Re: Transition between windows in GUI builder

4 months ago

The code below demonstrates how to use a second window to display a set of slides by clicking on buttons in the main window i.e. transition from one display (slide) to the next - but in the same window. I have used GUI Builder and have renamed the buttons, windows and event handlers so they are more descriptive of what they do.

Main Sketch Tab

import g4p_controls.*;
int slideNo = 0;
int nbrSlides = 3;
public void setup() {
size(200, 200);
createGUI();
customGUI();
// Place your setup code here
}
// Use this method to add additional statements
// to customise the GUI controls
public void customGUI(){
}
public void draw() {
background(255,255,200);
}

gui.tab (comments omitted to save space)

public void btnPrev_click(GButton source, GEvent event) { //_CODE_:btnPrev:753827:
slideNo = (slideNo + nbrSlides - 1) % nbrSlides;
println("btnPrev - GButton event occured " + System.currentTimeMillis()%10000000 );
} //_CODE_:btnPrev:753827:
public void btnNext_click(GButton source, GEvent event) { //_CODE_:btnNext:464522:
slideNo = (slideNo + nbrSlides +1) % nbrSlides;
} //_CODE_:btnNext:464522:
synchronized public void win_slideShow(GWinApplet appc, GWinData data) { //_CODE_:winSlide:695378:
appc.background(230);
switch(slideNo) {
case 0:
appc.background(0);
appc.fill(255);
appc.text("Slide 1", 30, 30);
break;
case 1:
appc.background(200, 200, 255);
appc.fill(0, 0, 64);
appc.text("Slide 2", 30, 30);
break;
case 2:
appc.background(200, 255, 200);
appc.fill(0, 64, 0);
appc.text("Slide 3", 30, 30);
break;
default:
appc.background(255);
appc.fill(255, 0, 0);
appc.text("Unknown Slide", 30, 30);
break;
}
} //_CODE_:winSlide:695378:
// Create all the GUI controls.
// autogenerated do not edit
public void createGUI() {
G4P.messagesEnabled(false);
G4P.setGlobalColorScheme(GCScheme.BLUE_SCHEME);
G4P.setCursor(ARROW);
if (frame != null)
frame.setTitle("Sketch Window");
btnPrev = new GButton(this, 10, 10, 80, 30);
btnPrev.setText("Prevous Slide");
btnPrev.addEventHandler(this, "btnPrev_click");
btnNext = new GButton(this, 100, 10, 80, 30);
btnNext.setText("Next Slide");
btnNext.addEventHandler(this, "btnNext_click");
winSlide = new GWindow(this, "My Slides", 0, 0, 240, 120, false, JAVA2D);
winSlide.addDrawHandler(this, "win_slideShow");
}
// Variable declarations
// autogenerated do not edit
GButton btnPrev;
GButton btnNext;
GWindow winSlide;

I have not created a sketch for 'transition from one window to the next' because I would ONLY use this approach if I wanted each slide in a separate window which is not a PowerPoint presentation!

scheongly

Re: Transition between windows in GUI builder

4 months ago

Dear quarks,

Thank you for your reply.

Thank you for the code- it is very useful!

I have 2 issues:

Q:How may I edit the GUI using the GUI builder, along with the code you provided?
I attempted to add serial comm. with my Arduino UNO:

// Need G4P library

import g4p_controls.*;

import processing.serial.*;

int slideNo = 0;

int nbrSlides = 3;

Serial port;

String portname = "/dev/tty.usbmodemfd121";

int baudrate = 9600;

int value = 0;

public void setup(){

size(200, 200, JAVA2D);

createGUI();

customGUI();

port = new Serial(this, portname, baudrate);

println(port);

}

// Place your setup code here

public void draw(){

background(255,255,200);

while(port.available() > 0){

value = port.read();

serialEvent(value);

}

public void customGUI(){

}

void serialEvent(int serial){

if(serial=='H') {

slideNo = (slideNo + nbrSlides +1) % nbrSlides;

}

synchronized public void win_slideShow(GWinApplet appc, GWinData data) { //_CODE_:winSlide:695378:

appc.background(230);

switch(slideNo) {

case 0:

appc.background(0);

appc.fill(255);

appc.text("Slide 1", 30, 30);

break;

case 1:

appc.background(200, 200, 255);

appc.fill(0, 0, 64);

appc.text("Slide 2", 30, 30);

break;

case 2:

appc.background(200, 255, 200);

appc.fill(0, 64, 0);

appc.text("Slide 3", 30, 30);

break;

default:

appc.background(255);

appc.fill(255, 0, 0);

appc.text("Unknown Slide", 30, 30);

break;

}

I tried to modify the code you gave me by adding serial input. Instead of having 'Next' and 'Previous' GUI buttons, I tried replacing them by increasing the slideNo with every push of my Arduino push button. I am having difficulty with the line highlighted in yellow above, namely, "synchronized public void win_slideShow(GWinApplet appc, GWinData data) { //_CODE_:winSlide:695378:"

The error raised is that it is expecting "class" instead of "void".

How may I modify the code such that it runs correctly?

Appreciate the help thus far. Thank you!

quarks

Re: Transition between windows in GUI builder

4 months ago

The error raised is that it is expecting "class" instead of "void".

The problem is with this method - you are missing this }

void serialEvent(int serial){
if(serial=='H') {
slideNo = (slideNo + nbrSlides +1) % nbrSlides;
}
}

Q:How may I edit the GUI using the GUI builder, along with the code you provided?

Not sure what you mean but you can download a zipped verision of the full sketch above (including GUI Builder data from here

scheongly

Re: Transition between windows in GUI builder

3 months ago

Dear quarks,

Thank you for the guidance! I gotta watch out for those tricky brackets!

Sorry, I can't access the link you gave.

To explain myself:

I am now able to run the code above. However, it doesn't turn out right as I want it, and so I want to edit it. I thought I could perhaps use the GUI builder tool to make further edits on the GUI. However, it just overrides the code I have in my sketch. Then, I find I can't run the code anymore, even though the code remains intact.

My questions:

Why does this happen?
I want to be able to edit how my slides look using the GUI builder, and then code for its functions in the sketch window. Do you use the GUI builder tool or solely the sketch window?I've tried looking for tutorials but I can't find any.

Appreciate the help!

Many Thanks

quarks

Re: Transition between windows in GUI builder

3 months ago

I have fixed the link in my previous post so you can download the sketch.

I thought I could perhaps use the GUI builder tool to make further edits on the GUI. However, it just overrides the code I have in my sketch.

Have a look at the comments in the gui tab and at my first reply in this forum.

IMPORTANT -
The code in the gui tab is re-created by GUI Builder everytime you move from the design window to the sketch code window. It only remembers user code inside the event handlers created by GUI Builder, it will not remember methods added by the programmer these should be in the main tab.

Does a'slides' need its own GUI controls?
How many slides are we talking about?

Top Reply