Here is a class for vertical scrolling text & buttons for the processing community

Share your Work

jphoton

Here is a class for vertical scrolling text & buttons for the processing community

in Share your Work • 11 months ago

Well that's if you need it.

After some years of programming (lego nxt to arduino & now processing), I've realised (personally speaking) it's really just a waste of unless it's your job or you intend to make money from it somehow, because it's too stressful for a hobby!

Hence I'm hanging up my programming boots. However After receiving plenty of help from online forums, I realised I've never really given anything back, so I thought I'd post some processing code which i just finished recently.

There is a class for buttons called 'rectButtons' and a class for vertical scrolling text called 'rectText'.

The program also shows an example usage; when you run it, clicking on 'Button 1' sends you to the processing website, clicking on any of the small buttons at the lower and upper right of text box will scroll the text vertically.

You can see it in action here: http://youtu.be/_yYm3-Sm1kk

I'll admit the code is not very pretty and it might be a bit difficult to follow but ah well, it works, considering I've only been using processing for just over a month or so.

It works fine in java mode but it's quite laggy in android mode. If someone wants to fix that or improve/tidy up the code in anyway, feel free, but please do post your improved code here so that others may benefit.

Any questions, just ask, n' I'll try to answer/help IF it's not too stressful.

Unfortunately some lines of code spilled over to the next line when i posted it on here so you may want to sort those out if you get errors.

Enjoy!

//---------------------------------------------------------------------------------------------------------------------------------------
//==GLOBAL VARIABLES & CONSTANTS=====================================
//---------------------------------------------------------------------------------------------------------------------------------------
final int W=480, H=750; // standard screen width & height
int dW, dH; // display width & height
int scalex=1, scaley=1; // scale values for testing the class methods; (tip; calculate your scale values // depending on the screen size)
//---------------------------------------------------------------------------------------------------------------------------------------
PImage homeI; // declare a variable to store the home image
PFont arial; // declare a variable to store the fonts
//---------------------------------------------------------------------------------------------------------------------------------------
final float ofontS=72; // original font size for creating font
//---------------------------------------------------------------------------------------------------------------------------------------
boolean press=false, click=false; // flags indicating whether the mouse has been pressed or clicked
int cButton; // current button
//---------------------------------------------------------------------------------------------------------------------------------------
final int homeButton=0; // the back & home buttons
int bTot; // total no. of buttons
rectButton[] buttons; // array of buttons
//---------------------------------------------------------------------------------------------------------------------------------------
int tTot; // total no. of text boxes
rectText[] texts; // array of text boxes
String test; // string to store scrollable text
//---------------------------------------------------------------------------------------------------------------------------------------
//==FUNCTIONS========================================================
//---------------------------------------------------------------------------------------------------------------------------------------
void setup()
{
//scaling//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
size(W,H); // set screen size for development
orientation(PORTRAIT); // lock screen orientation
dW=width; dH=height;
//general//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
smooth(); // draw text & shapes to screen with smooothing
textAlign(CENTER,CENTER);
//images///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
homeI=loadImage("home.jpg"); // load & resize images
homeI.resize(dW,dH);
//fonts////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
arial=createFont("arial",ofontS,true); // create fonts with smoothing
//buttons//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
bTot=2; // total no. of buttons
buttons=new rectButton[bTot]; // initialise program buttons array
int gnC=#E81010; float gnO=255; PFont gnF=arial; float gnS=18; int gbC=#35F20C, gbS=#FAFF00;
float gbt=1, gbO=200, gbW=150, gbH=40, gbR=10; boolean ghL=true;
//variable -b (or -ve of button number) indicates noFill() or noStroke()
// no name nColor nOpacity nFont nSize bColor bStroke bThick bOpacity bX bY bW bH bR hLight
int b=0;
buttons[b] = new rectButton(b, "Home", #43FA08, gnO, gnF, gnS, -b, -b, gbt, 0, (W/2)-(gbW/2), 10, gbW, gbH, gbR, ghL);
b=1;
buttons[b] = new rectButton(b, "Button 1", gnC, gnO, gnF, gnS, gbC, gbS, gbt, gbO, 20, 150, gbW, gbH, gbR, ghL);
//text boxes///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
tTot=1; // total no. of text boxes
texts=new rectText[tTot]; // initialise program text boxes array
int gtC=#E81010; float gtO=255; PFont gtF=arial; float gtS=18; int gtbC=#35F20C, gtbS=#FAFF00;
float gtbt=1, gtbO=200, gtbW=300, gtbH=150, gtbR=10; boolean gtbhL=true;
test="This is some text that I am trying to use to test the scrollable text box class. This is gonna be completely anal and give me so much fooking stress I don't know why I am bothering!!! \n...update...\n it works!, it works!, it facking works biatches!!!";
//variable -b (or -ve of button number) indicates noFill() or noStroke()
// no name snColor nOpacity nFont nSize bColor bStroke bThick bOpacity bX bY bW bH bR hLight
int t=0;
texts[t] = new rectText(t, test, gtC, gtO, gtF, gtS, gtbC, gtbS, gtbt, gtbO, (W/2)-(gtbW/2), 210, gtbW, gtbH, gtbR, gtbhL);
//start Screen
cButton=homeButton; // set current button to home button
println("...starting...");
}
//---------------------------------------------------------------------------------------------------------------------------------------
void draw()
{
//buttons start
switch(cButton)
{
//homebutton/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//home button => home screen
case homeButton:
background(homeI); // set home page background
onButtonEvent(0,1);
onTextEvent(0,0);
click=false;
break;
//button1////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// button 1 => processing website => home screen
case 1:
link("http://www.processing.org");
cButton=0;
break;
}
//buttons end
}
//---------------------------------------------------------------------------------------------------------------------------------------
void mouseClicked()
{
click=true;
}
//---------------------------------------------------------------------------------------------------------------------------------------
void mousePressed()
{
press=true;
}
//---------------------------------------------------------------------------------------------------------------------------------------
void mouseReleased()
{
press=false;
}
//---------------------------------------------------------------------------------------------------------------------------------------
void onButtonEvent(int first, int last) // handles clicks & movements
{
for(int i=first; i<=last; i++)
{
buttons[i].display(scalex,scaley); // i have used scale values of 1 but this line is just to show that //class methods can be used
if(click) // with a scale value in case you are testing on different screen sizes
{
if(buttons[i].mouseOver()){ cButton=buttons[i].number; }
}
}
}
//---------------------------------------------------------------------------------------------------------------------------------------
void onTextEvent(int first, int last)
{
for(int i=first; i<=last; i++)
{
if(press)
{
texts[i].update();
}
texts[i].display(); // class methods here have been used without scaling
}
}
//---------------------------------------------------------------------------------------------------------------------------------------
//==CLASSES==========================================================
//---------------------------------------------------------------------------------------------------------------------------------------
class rectButton
{
int number;
String name;
int nColor;
float nOpacity;
PFont nFont;
float nSize;
int bColor;
int bStroke;
float bThick;
float bOpacity;
float bX, bY;
float bW, bH, bR;
boolean bHlight;
int lButton;
rectButton(int iNU, String iNA, int inC, float inO, PFont inF, float inS, int ibC, int ibS, float ibT, float ibO, float ibX, float ibY, float ibW, float ibH, float ibR, boolean ihL)
{
number=iNU; name=iNA; nColor=inC; nOpacity=inO; nFont=inF; nSize=inS; bColor=ibC; bStroke=ibS; bThick=ibT; bOpacity=ibO; bX=ibX; bY=ibY; bW=ibW; bH=ibH; bR=ibR; bHlight=ihL;
lButton=-1;
}
void display(float wS, float hS)
{
//pushStyle(); // store current drawing style (stroke, fill, etc)
rectMode(CORNER);
textAlign(CENTER,CENTER);
pushMatrix(); // store coordinate system
translate(bX*wS,bY*hS); // shift coordinate system to location of button
scale(wS,hS); // scale button & text
if(bColor==-number){ noFill(); }
else{ fill(bColor,bOpacity); }
if(bStroke==-number){ noStroke(); }
else{ stroke(bStroke,bOpacity); strokeWeight(bThick); }
rect(0,0,bW,bH,bR); // display button
if(bHlight==true)
{
if(mouseOver(wS,hS))
{
fill(#FFFFFF,70);
rect((-0.02*bW),(-0.075*bH),(1.04*bW),(1.15*bH),bR); // display highlight
}
}
if(nColor==-number){ noFill(); }
else{ fill(nColor,nOpacity); } // specify text color & opacity
textFont(nFont,nSize);
//text(name,bW/2,bH/2); // display name *****this doesnt wrap the text automatically*****
text(name,0,0,bW,bH); // display name
popMatrix(); // restore coordinate system
//popStyle(); // restore previous drawing style
}
void display()
{
display(1,1);
}
boolean mouseOver(float wS, float hS)
{
if(mouseX>=bX*wS && mouseX<=(bX+bW)*wS && mouseY>=bY*hS && mouseY<=(bY+bH)*hS){ return true; }
else{ return false; }
}
boolean mouseOver()
{
return mouseOver(1,1);
}
}
//---------------------------------------------------------------------------------------------------------------------------------------
class rectText
{
int number;
String ntext;
int nColor;
float nOpacity;
PFont nFont;
float nSize;
float dY; // amount by which to move the text vertically (up or down) while scroll button is pressed
int bColor;
int bStroke;
float bThick;
float bOpacity;
float bX, bY;
float bW, bH, bR;
PImage screen; // variable to capture the current screen
boolean bHlight; // for the scroll button, not the main scroll box!!!
float ubX, ubY, ubW, ubH;
float lbX, lbY, lbW, lbH;
rectText(int iNU, String iNA, int inC, float inO, PFont inF, float inS, int ibC, int ibS, float ibT, float ibO, float ibX, float ibY, float ibW, float ibH, float ibR, boolean ihL)
{
number=iNU; ntext=iNA; nColor=inC; nOpacity=inO; nFont=inF; nSize=inS; bColor=ibC; bStroke=ibS; bThick=ibT; bOpacity=ibO; bX=ibX; bY=ibY; bW=ibW; bH=ibH; bR=ibR; bHlight=ihL;
ubX=bX+bW; ubY=bY; ubW=0.1*bW; ubH=0.1*bH;
lbX=bX+bW; lbY=bY+bH-ubH; lbW=ubW; lbH=ubH;
dY=0; // initially; this will be changed by scrolling
screen=createImage(width,height,RGB);
}
void display(float wS, float hS)
{
//pushStyle(); // store current drawing style (stroke, fill, etc)
rectMode(CORNER);
textAlign(CENTER,CENTER);
//take a snapshot of the screen
loadPixels();
screen.loadPixels();
for(int sX=0; sX<width; sX++)
{
for(int sY=0; sY<height; sY++)
{
int loc = sX + sY*width;
screen.pixels[loc]=pixels[loc];
}
}
updatePixels();
screen.updatePixels();
//OR
//screen=get(); // this is slower
pushMatrix(); // store coordinate system
translate(bX*wS,bY*hS); // shift coordinate system to location of button
scale(wS,hS); // scale button & text
if(bColor==-number){ noFill(); }
else{ fill(bColor,bOpacity); }
if(bStroke==-number){ noStroke(); }
else{ stroke(bStroke,bOpacity); strokeWeight(bThick); }
rect(0,0,bW,bH,bR); // display text box
if(nColor==-number){ noFill(); }
else{ fill(nColor,nOpacity); } // specify text color & opacity
textFont(nFont,nSize);
float nX=0.015*bW, nY=0.033*bH, nW=bW-(2*nX), nH=bH-(2*nY);
nY=nY+dY; nH=nH-dY;
text(ntext,nX,nY,nW,nH); // display text
popMatrix(); // restore coordinate system
if(bColor==-number){ noFill(); }
else{ fill(bColor,bOpacity); }
if(bStroke==-number){ noStroke(); }
else{ stroke(bStroke,bOpacity); strokeWeight(bThick); }
strokeJoin(ROUND);
pushMatrix(); // store coordinate system
translate(ubX*wS,ubY*hS); // shift coordinate system to location of button
scale(wS,hS); // scale button & text
rect(0,0,ubW,ubH); // display the scroll buttons
if(bHlight==true)
{
if(mouseOverU(wS,hS))
{
fill(#FFFFFF,70);
rect(0,0,ubW,ubH); // display highlight
println("HIGHLIGHT");
}
}
popMatrix();
if(bColor==-number){ noFill(); }
else{ fill(bColor,bOpacity); }
if(bStroke==-number){ noStroke(); }
else{ stroke(bStroke,bOpacity); strokeWeight(bThick); }
pushMatrix();
translate(lbX*wS,lbY*hS); // shift coordinate system to location of button
scale(wS,hS); // scale button & text
rect(0,0,lbW,lbH);
if(bHlight==true)
{
if(mouseOverL(wS,hS))
{
fill(#FFFFFF,70);
rect(0,0,lbW,lbH); // display highlight
println("HIGHLIGHT");
}
}
strokeJoin(MITER);
popMatrix(); // restore coordinate system
//overlay the area above the textbox in the snapshot over the screen
loadPixels();
screen.loadPixels();
for(int sX=0; sX<width; sX++)
{
for(int sY=0; sY<=(bY*hS); sY++)
{
int loc = sX + sY*width;
pixels[loc]=screen.pixels[loc];
}
}
updatePixels();
screen.updatePixels();
//popStyle(); // restore previous drawing style
}
void display()
{
display(1,1);
}
boolean mouseOverU(float wS, float hS)
{
if(mouseX>=ubX*wS && mouseX<=(ubX+ubW)*wS && mouseY>=ubY*hS && mouseY<=(ubY+ubH)*hS){ return true; }
else{ return false; }
}
boolean mouseOverL(float wS, float hS)
{
if(mouseX>=lbX*wS && mouseX<=(lbX+lbW)*wS && mouseY>=lbY*hS && mouseY<=(lbY+lbH)*hS){ return true; }
else{ return false; }
}
boolean mouseOverU()
{
return mouseOverU(1,1);
}
boolean mouseOverL()
{
return mouseOverL(1,1);
}
void update(float wS, float hS)
{
if(mouseOverL(wS,hS))
{
dY=dY-2;
println("HIGHLIGHT");
}
if(mouseOverU(wS,hS))
{
dY=dY+2;
if(dY>=0){ dY=0; }
println("HIGHLIGHT");
}
}
void update()
{
update(1,1);
}
}
//---------------------------------------------------------------------------------------------------------------------------------------
//==END==============================================================

Statistics

0 Replies
821 Views
0 Followers

Actions

Permalink