#javascript-processing-example-topic-gui-scrollbar.htm / htm
<!DOCTYPE html> <html><head> <script src="javascript-processing-example-processing.js"></script> <script src="javascript-processing-example-init.js"></script> <link rel="stylesheet" href="javascript-processing-example-style.css"> </head><body><h1><a href="http://ejohn.org/blog/processingjs/">Processing.js</a></h1> <h2>Scrollbar</h2> <p>Move the scrollbars left and right to change the positions of the images.</p> <p><a href="http://processing.org/learning/topics/scrollbar.html"><b>Original Processing.org Example:</b> Scrollbar</a><br> <script type="application/processing"> HScrollbar hs1, hs2; PImage top, bottom; // Two image to load int topWidth, bottomWidth; // The width of the top and bottom images void setup() { size(200, 200); noStroke(); hs1 = new HScrollbar(0, 20, width, 10, 3*5+1); hs2 = new HScrollbar(0, height-20, width, 10, 3*5+1); top = loadImage("seedTop.jpg"); topWidth = top.width; bottom = loadImage("seedBottom.jpg"); bottomWidth = bottom.width; } void draw() { background(255); // Get the position of the top scrollbar // and convert to a value to display the top image float topPos = hs1.getPos()-width/2; fill(255); image(top, width/2-topWidth/2 + topPos*2, 0); // Get the position of the bottom scrollbar // and convert to a value to display the bottom image float bottomPos = hs2.getPos()-width/2; fill(255); image(bottom, width/2-bottomWidth/2 + bottomPos*2, height/2); hs1.update(); hs2.update(); hs1.display(); hs2.display(); } class HScrollbar { int swidth, sheight; // width and height of bar int xpos, ypos; // x and y position of bar float spos, newspos; // x position of slider int sposMin, sposMax; // max and min values of slider int loose; // how loose/heavy boolean isOver; // is the mouse over the slider? boolean locked; float ratio; HScrollbar (int xp, int yp, int sw, int sh, int l) { swidth = sw; sheight = sh; int widthtoheight = sw - sh; ratio = (float)sw / (float)widthtoheight; xpos = xp; ypos = yp-sheight/2; spos = xpos + swidth/2 - sheight/2; newspos = spos; sposMin = xpos; sposMax = xpos + swidth - sheight; loose = l; } void update() { if(over()) { isOver = true; } else { isOver = false; } if(mousePressed && isOver) { locked = true; } if(!mousePressed) { locked = false; } if(locked) { newspos = constrain(mouseX-sheight/2, sposMin, sposMax); } if(abs(newspos - spos) > 1) { spos = spos + (newspos-spos)/loose; } } int constrain(int val, int minv, int maxv) { return min(max(val, minv), maxv); } boolean over() { if(mouseX > xpos && mouseX < xpos+swidth && mouseY > ypos && mouseY < ypos+sheight) { return true; } else { return false; } } void display() { fill(255); rect(xpos, ypos, swidth, sheight); if(isOver || locked) { fill(153, 102, 0); } else { fill(102, 102, 102); } rect(spos, ypos, sheight, sheight); } float getPos() { // Convert spos to be values between // 0 and the total width of the scrollbar return spos * ratio; } } </script><canvas width="200" height="200"></canvas></p> <div style="overflow: hidden; height: 0px; width: 0px;"><img src="javascript-processing-example-seedBottom.jpg" id="seedBottom.jpg"><img src="javascript-processing-example-seedTop.jpg" id="seedTop.jpg"></div> <pre><b>// All Examples Written by <a href="http://reas.com/">Casey Reas</a> and <a href="http://benfry.com/">Ben Fry</a> // unless otherwise stated.</b> HScrollbar hs1, hs2; PImage top, bottom; // Two image to load int topWidth, bottomWidth; // The width of the top and bottom images void setup() { size(200, 200); noStroke(); hs1 = new HScrollbar(0, 20, width, 10, 3*5+1); hs2 = new HScrollbar(0, height-20, width, 10, 3*5+1); top = loadImage("seedTop.jpg"); topWidth = top.width; bottom = loadImage("seedBottom.jpg"); bottomWidth = bottom.width; } void draw() { background(255); // Get the position of the top scrollbar // and convert to a value to display the top image float topPos = hs1.getPos()-width/2; fill(255); image(top, width/2-topWidth/2 + topPos*2, 0); // Get the position of the bottom scrollbar // and convert to a value to display the bottom image float bottomPos = hs2.getPos()-width/2; fill(255); image(bottom, width/2-bottomWidth/2 + bottomPos*2, height/2); hs1.update(); hs2.update(); hs1.display(); hs2.display(); } class HScrollbar { int swidth, sheight; // width and height of bar int xpos, ypos; // x and y position of bar float spos, newspos; // x position of slider int sposMin, sposMax; // max and min values of slider int loose; // how loose/heavy boolean over; // is the mouse over the slider? boolean locked; float ratio; HScrollbar (int xp, int yp, int sw, int sh, int l) { swidth = sw; sheight = sh; int widthtoheight = sw - sh; ratio = (float)sw / (float)widthtoheight; xpos = xp; ypos = yp-sheight/2; spos = xpos + swidth/2 - sheight/2; newspos = spos; sposMin = xpos; sposMax = xpos + swidth - sheight; loose = l; } void update() { if(over()) { over = true; } else { over = false; } if(mousePressed && over) { locked = true; } if(!mousePressed) { locked = false; } if(locked) { newspos = constrain(mouseX-sheight/2, sposMin, sposMax); } if(abs(newspos - spos) > 1) { spos = spos + (newspos-spos)/loose; } } int constrain(int val, int minv, int maxv) { return min(max(val, minv), maxv); } boolean over() { if(mouseX > xpos && mouseX < xpos+swidth && mouseY > ypos && mouseY < ypos+sheight) { return true; } else { return false; } } void display() { fill(255); rect(xpos, ypos, swidth, sheight); if(over || locked) { fill(153, 102, 0); } else { fill(102, 102, 102); } rect(spos, ypos, sheight, sheight); } float getPos() { // Convert spos to be values between // 0 and the total width of the scrollbar return spos * ratio; } }</pre> </body></html>
(C) Æliens 20/2/2008
You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.