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 & HelpPrograms › Scrollbar help
Page Index Toggle Pages: 1
Scrollbar help (Read 483 times)
Scrollbar help
Jun 6th, 2009, 3:13pm
 
Hi I'm making a scrollbar program for an eyelash website. There's a problem with my code to make it scroll however. It works for <80 entries in the text array but when there are more then 80 the text goes off the screen... kinda hard to explain so just run the program to see what I'm on about!

Code:

PFont font;
int maxim;
String[] textArray;
boolean locked;
float pos,sPos,x;

void setup(){
 size(300,400);
 background(0);
 font = loadFont("ArialMT-11.vlw");
 textFont(font,11);
 x = 1;
 sPos = 3;
 textArray = new String[]  {
   "Eyelash extensions are an entirely new method of",
   "enhancing the length and thickness of eyelashes.",
   "Extensions are applied on a lash-by-lash basis for",
   "a totally natural look. When properly applied,",
   "Lashes Couture® eyelash extensions can last from up" ,
   "to six to eight weeks. Lashextensions.ie® attracts",
   "everyone in Ireland who is looking for eyelash",
   "extensions.",
   "",
   "Lashes Couture® is one of the highest ranked eyelash",
   "extension systems in the world! A significant portion",
   "of this traffic is from potential clients seeking a",
   "professional, in their area, who can apply extensions",
   "to them. When your name is listed, you will understand",
   "the value of an exceptional referral program. If you",
   "are a Lashes Couture Professional and want to attract",
   "new and potential clients in your area please contact",
   "us and we will be happy to list you on the first",
   "website in ireland dedicated to Lashes Couture Eyelash",
   "Extensions.",
   "",
   "We recieve hundreds of calls every month from people",
   "looking for the nearest Lashes Couture Professional",
   "in there area. Premium quality speaks for itself!",
   "When you carry the highest quality products, when you",
   "have received exceptional hands-on eyelash extension",
   "training and certification options from Lashes Couture®,",
   "your clients will be thrilled and grateful.",
   "",
   "You owe it to yourself and to your clients to align",
   "yourself with the only company that is committed to",
   "upholding critical standards, committed to continual",
   "improvement and committed to the long term success of",
   "the eyelash extension industry. We welcome you as a",
   "member of our dedicated team of professionals.",
   "Lashes Couture® wants to be an integral part of your",
   "success in this revolutionary new and exciting industry."  };
 //doesnt work after 80 lines
 noStroke();
 smooth();
}

void draw(){
 background(0);
 for(int i = 0; i <= textArray.length - 1; i++){
   fill(200);
   text(textArray[i], 5, (i + 1) * 14 + x);
 }
 maxim = height/2+(textArray.length*14)-(height-2);
 pos = sPos/(height-52);
 x = 5-pos*maxim;
 if(mousePressed && over() || locked) {
   locked = true;
   if (mouseY-50 <= 2){
     sPos = 3;
   }
   else if (mouseY+50 >= height - 2){
     sPos = height - 103;
   }
   else {
     sPos = mouseY - 50;
   }
 }
 if(!mousePressed) {
   locked = false;
 }
 fill(250);
 rect(width - 8, sPos, 6,100);
 ellipse(width - 5, sPos,6,6);
 ellipse(width - 5, sPos+100,6,6);

}
boolean over(){
 return mouseX > width - 8 && mouseX < width - 2 && mouseY > sPos && mouseY < sPos + 100;
}


Re: Scrollbar help
Reply #1 - Jun 7th, 2009, 1:02am
 
I saw no major problem. It was scrolling a bit too much on the bottom for my taste (but some old softwares used to do that, and some people liked that), but otherwise I could see all the text, even after duplicating a couple of paragraphs.

Meanwhile, I played a bit with your code. Something I avoid when making graphics software is to use "magic" numbers. I prefer to define some constants, so their role in the formulae is clearer. And it makes easier to change one parameter without changing lot of lines with the risk of forgetting one. For example you can adjust the scrollbar height depending on length of text and height of scroll area, like it is done in most systems (not necessary here as the length of text won't change, but useful noneless).
My version:
Code:
PFont font;
int maxim;
String[] textArray;
boolean locked;
float pos, sPos, y;
int SCROLLBAR_HEIGHT = 100;
int SCROLLBAR_WIDTH = 6;
int LINE_HEIGHT = 14;
int MARGIN = 5;

void setup() {
 size(300, 400);
 background(0);
 // I use createFont to avoid creating an additional file, just use your loadFont of course
 font = createFont("Arial", 11);
 textFont(font);
 y = 1;
 sPos = SCROLLBAR_WIDTH/2;
 textArray = new String[]  {
   "00 Eyelash extensions are an entirely new method of",
   "enhancing the length and thickness of eyelashes.",
   "Extensions are applied on a lash-by-lash basis for",
   "a totally natural look. When properly applied,",
   "Lashes Couture® eyelash extensions can last from up" ,
   "to six to eight weeks. Lashextensions.ie® attracts",
   "everyone in Ireland who is looking for eyelash",
   "extensions. 00",
// [...]
   "",
   "22 Lashes Couture® is one of the highest ranked eyelash",
   "extension systems in the world! A significant portion",
   "of this traffic is from potential clients seeking a",
   "professional, in their area, who can apply extensions",
   "to them. When your name is listed, you will understand",
   "the value of an exceptional referral program. If you",
   "are a Lashes Couture Professional and want to attract",
   "new and potential clients in your area please contact",
   "us and we will be happy to list you on the first",
   "website in ireland dedicated to Lashes Couture Eyelash",
   "Extensions. 22"
 };
 //doesnt work after 80 lines
 noStroke();
 smooth();
}

void draw() {
 background(0);
 fill(200);
 for (int i = 0; i < textArray.length; i++){
   text(textArray[i], MARGIN, (i + 1) * LINE_HEIGHT + y);
 }
 maxim = textArray.length*LINE_HEIGHT - height + SCROLLBAR_HEIGHT;
 pos = sPos/(height - SCROLLBAR_HEIGHT/2 - 2);
 y = MARGIN - pos*maxim;
 if (mousePressed && over() || locked) {
   locked = true;
   if (mouseY - SCROLLBAR_HEIGHT/2 <= 2) {
sPos = SCROLLBAR_WIDTH/2;
   }
   else if (mouseY + SCROLLBAR_HEIGHT/2 >= height - 2) {
sPos = height - SCROLLBAR_HEIGHT - SCROLLBAR_WIDTH/2;
   }
   else {
sPos = mouseY - SCROLLBAR_HEIGHT/2;
   }
 }
 if (!mousePressed) {
   locked = false;
 }
 fill(250);
 rect(width - SCROLLBAR_WIDTH/2 - MARGIN, sPos, SCROLLBAR_WIDTH, SCROLLBAR_HEIGHT);
 ellipse(width - MARGIN, sPos, SCROLLBAR_WIDTH, SCROLLBAR_WIDTH);
 ellipse(width - MARGIN, sPos + SCROLLBAR_HEIGHT, SCROLLBAR_WIDTH, SCROLLBAR_WIDTH);

}
boolean over(){
 return mouseX > width - SCROLLBAR_WIDTH/2 - MARGIN && mouseX < width - 2 &&
mouseY > sPos && mouseY < sPos + SCROLLBAR_HEIGHT;
}
Page Index Toggle Pages: 1