We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.
IndexProgramming Questions & HelpOther Libraries › gui interface but with proccessing
Page Index Toggle Pages: 1
gui interface but with proccessing (Read 2943 times)
gui interface but with proccessing
Mar 12th, 2008, 8:31pm
 
hello,

i'd like to use only processing to make some buttons textarea and so on to be able to modify them for my own purposes (mainly to be able to change their graphics).

i've casey and fry book as a starting point but I'd appreciate some help ! ( i'm begginning with processing).

I suppose I'm not the first to try to use my own classes for this so I'd like to see others work.

i'm working on a little class to enter text for now

thank you very much

p.S. I know about controlIP5 and so on but the problem is that I don't know how to modify these classes (to modify the graphics)

P.S. ( sorry for the bad english !!!  Wink    )
Re: gui interface but with proccessing
Reply #1 - Mar 12th, 2008, 10:41pm
 
I spent most of last summer working on this very problem. In the end, it requires a delicate balance.

You see, Java provides their own UI components in the javax.swing packages, but they're kind of annoying to use and *very* hard to make look very good.

But if you want to make a proper UI library, you'll inevitably find yourself rewriting much of what already exists in the Swing package. I know, because it happened to me in what I was working on. Nevertheless, I persevered and ended up with something slightly unique -- it's not what I would call full-featured, but it suited my needs for the summer project. Here's the end result, applied for use in a scientific visualization program:

http://www.phylowidget.org/lite/

It's all open source, and the SVN can be found on Google Code:

http://phylowidget.googlecode.com/

What I think is unique about what I wrote for PhyloWidget is that you can quickly build a good-looking, functional UI with a minimal amount of effort. For example, the entire UI for PhyloWidget is defined in a single readable XML file, seen here:

http://code.google.com/p/phylowidget/source/browse/trunk/PhyloWidget/data/menus/full-menus.xml

Ok, I have to admit -- the file may not be SO simple, but believe me, writing a file like that is MUCH less painful than trying to work with Swing components!! (I've learned that the hard way)

At some point I'd like to release these generic UI componenets as a Processing library, but I'm not sure how much more development they'll need to become generally useful for people. Maybe someone would be willing to help with that, by defining a list of "use cases" that best describes what people would want out of a lightweight, Processing-oriented user interface library?

I'd be more than willing to put some time into helping someone get started in this direction: towards having a clean, simple, and flexible UI library for Processing.

Cheers,
 greg
Re: gui interface but with proccessing
Reply #2 - Mar 13th, 2008, 7:50pm
 
hello,

Well thanks, but I don't know how to start with what you suggest !

(I'm quite a beginner with processing already !!! and with objects programming !)

Could you write a simple example with just some basic elements ?

please  (   Smiley   )
Re: gui interface but with proccessing
Reply #3 - Mar 18th, 2008, 1:12pm
 
here's some stuff GUI code i've written for my current project

Makes a panel to hold other GUI elements, panels can be laid inside each other using the second constructor to specify the panel's parent.
Quote:
class Panel{
 int x,y,w,h;
 int sX,sY;
 Panel parent;
 Panel(int ix, int iy, int iw, int ih){
   x=ix;y=iy;w=iw;h=ih;
   sX=ix;sY=iy;
 }
 
 Panel(Panel p,int ix, int iy, int iw, int ih){
   parent=p;
   x=ix;y=iy;w=iw;h=ih;
   sX=parent.sX+x;sY=parent.sY+y;
 }
 
 void update(){
   stroke(panelEdge);
   fill(panelBG);
   try{
     rect(x+parent.x,y+parent.y,w,h);
   } catch (Exception e){
     rect(x,y,w,h);
   }
 }
     
 
 boolean overRect(int x, int y, int width, int height)
 {
   if (mouseX >= x && mouseX <= x+width &&
     mouseY >= y && mouseY <= y+height) {
     return true;
   }
   else {
     return false;
   }
 }
}


Base Button class
Quote:
class Button {
 int x,y,w,h;
 boolean over, pressed, locked = false;
 color backC = bFill;
 color edgeC = panelEdge;
 color overC = bOver;
 int wait;
 Panel parent;
 
 Button(int ix, int iy, int ih, int iw, Panel p){
   x=ix; y=iy; h=ih; w=iw;
   parent = p;
 }
 
 
 void update(){
   
 }

 boolean overRect(int x, int y, int width, int height)
 {
   if (mouseX >= parent.sX+x && mouseX <= parent.sX+x+width &&
     mouseY >= parent.sY+y && mouseY <= parent.sY+y+height) {
     return true;
   }
   else {
     return false;
   }
 }
}


A Text button extension
Quote:
class TextButton extends Button{
 String label;
 
 TextButton(Panel p, String txt, int ix, int iy, int iw, int ih){
   super(ix, iy, 14+ih, iw, p);
   label=txt;
 }
 
 TextButton copy(){
   return this;
 }
 
 void update(){
   fill(backC);
   edgeC=panelEdge;
   if (overRect(x,y,w,h)){
     edgeC=bOver;
     if(mLeft){
       pressed=true;
       
       edgeC=select;
     }
   }
   if(pressed==true){
     edgeC=select;
   }
   stroke(edgeC);
   rect(parent.sX+x,parent.sY+y,w,h);
   textAlign(CENTER);
   fill(edgeC);
   //text(label, parent.sX+x+(w*0.5),parent.sY+y+(h*0.5));
   text(label, parent.sX+x+(w*0.5),parent.sY+y+(h*0.75)-((h-14)*0.25));
   
 }
 
}


I would then build GUI elements by creating a class, and adding all the bits i need and then updating them every call.


I should however point out that this is WRONG.

If i were to rewrite this again, i'd do it differently, i'd have everything extend a formElement class that would contain loads of common variables and functions.

I hope that helps a bit.

Martin
Re: gui interface but with proccessing
Reply #4 - Mar 18th, 2008, 2:44pm
 
thank you,
I'm going to see what I can do with this.
Smiley
Page Index Toggle Pages: 1