 |
Author |
Topic: Sliders (Read 2750 times) |
|
jford
|
Sliders
« on: Aug 6th, 2002, 11:16pm » |
|
Now that we have a nice clean graphics space lets junk it up with widgets. Here's some slide bars. (Did someone say inheritance?)
Note: The removing the extra carriage returns destroyed the formatting.
// Slide Bar Widgets
// By: jford
// This example installs 3 independent vertical slide bars
// and one horizontal bar
int nBars = 3;
int slideWidth = 10;
VSlide[] vs = new VSlide[nBars];
HSlide hs;
void setup()
{
size(200, 200);
colorMode(HSB);
int hue = 125;
int sat = 200;
int brite = 50;
for(int i=0; i<nBars; i++) {
vs[i] = new VSlide(i, slideWidth, height, width);
}
vs[2].setPos(hue, 0, 255);
vs[1].setPos(sat, 0, 255);
vs[0].setPos(brite, 0, 255);
// Stuck in the middle !
hs = new HSlide(0, slideWidth, width-slideWidth*3, (height+slideWidth)/2);
hs.setPos(50, 20, width);
}
void loop()
{
fill(vs[2].getPos(), vs[1].getPos(), vs[0].getPos());
rectMode(CENTER_DIAMETER);
int s= int(hs.getPos());
rect(width/2, height/2, s, s);
for(int i=0; i<nBars; i++) {
vs[i].checkButt(mouseX, mouseY, mousePressed);
vs[i].draw();
}
hs.checkButt(mouseX, mouseY, mousePressed);
hs.draw();
}
class VSlide {
int scrollWidth, scrollLength, theEdge, index;
int pos, posMax;
float scale, offset;
color cButton;
boolean bLightButt, bHaveCapture = false;
VSlide(int iIndex, int iWidth, int iLength, int iEdge) {
index = iIndex;
scrollWidth = iWidth;
scrollLength = iLength;
theEdge = iEdge;
posMax = scrollLength-scrollWidth;
pos = posMax;
scale = 1/float(posMax);
offset = 0;
// This creates a Java dispatch error which in turn hangs the whole app!!!!
// cButton = color(30, 200, 200);
}
void draw() {
colorMode(HSB);
stroke(color(0, 0, 0));
fill(color(0, 0, 100));
int iE = theEdge-(index+1)*scrollWidth;
rectMode(CORNER);
rect(iE, 0, scrollWidth, scrollLength);
noStroke();
if (bLightButt) {
fill(color(30, 200, 255));
}
else {
fill(color(30, 200, 200));
}
rect(iE+1, pos, scrollWidth-2, scrollWidth);
}
void checkButt(int x, int y, boolean mouseDn) {
if (bHaveCapture) {
bLightButt = true;
if (mouseDn) {
pos = y;
checkPos();
}
else
bHaveCapture = false;
}
else {
int iE = theEdge-(index+1)*scrollWidth;
if (x >= iE && x <= iE+scrollWidth && y >= 0 && y <= posMax) {
if (mouseDn && bLightButt) {
pos = y;
bHaveCapture = true;
}
else {
if (!mouseDn)
bLightButt = true;
}
}
else {
bLightButt = false;
}
}
}
// [0, 1] is default
float getPos() {
float p = float(posMax-pos)*scale+offset;
return p;
}
void setPos(float newPos, float low, float high) {
scale = (high-low)/float(posMax);
offset = low;
pos = posMax-int((newPos-low)*float(posMax)/(high-low));
checkPos();
}
void checkPos() {
if (pos < 0)
pos = 0;
if (pos > posMax)
pos = posMax;
}
}
class HSlide {
int scrollWidth, scrollLength, theEdge, index;
int pos, posMax;
float scale, offset;
boolean bLightButt, bHaveCapture = false;
HSlide(int iIndex, int iWidth, int iLength, int iEdge) {
index = iIndex;
scrollWidth = iWidth;
scrollLength = iLength;
theEdge = iEdge;
posMax = scrollLength-scrollWidth;
pos = posMax;
scale = 1/float(posMax);
offset = 0;
}
void draw() {
colorMode(HSB);
stroke(color(0, 0, 0));
fill(color(0, 0, 100));
int iE = theEdge-(index+1)*scrollWidth;
rectMode(CORNER);
rect(0, iE, scrollLength, scrollWidth);
noStroke();
if (bLightButt) {
fill(color(30, 200, 255));
}
else {
fill(color(30, 200, 200));
}
rect(pos, iE+1, scrollWidth, scrollWidth-2);
}
void checkButt(int x, int y, boolean mouseDn) {
if (bHaveCapture) {
bLightButt = true;
if (mouseDn) {
pos = x;
checkPos();
}
else
bHaveCapture = false;
}
else {
int iE = theEdge-(index+1)*scrollWidth;
if (y >= iE && y <= iE+scrollWidth && x >= 0 && x <= posMax) {
if (mouseDn && bLightButt) {
pos = x;
bHaveCapture = true;
}
else {
if (!mouseDn)
bLightButt = true;
}
}
else {
bLightButt = false;
}
}
}
// [0, 1] is default
float getPos() {
float p = float(posMax-pos)*scale+offset;
return p;
}
void setPos(float newPos, float low, float high) {
scale = (high-low)/float(posMax);
offset = low;
pos = posMax-int((newPos-low)*float(posMax)/(high-low));
}
void checkPos() {
if (pos < 0)
pos = 0;
if (pos > posMax)
pos = posMax;
}
}
|
| « Last Edit: Oct 31st, 2002, 12:53am by Processing » |
|
|
|
|
REAS
|
Re: Widgets
« Reply #1 on: Aug 8th, 2002, 3:14am » |
|
I implemented another slider class. It has the property where it interpolates between its current position and the position of the mouse to make a smooth transition.
// Loose/Heavy Slidebar
// by REAS
int NUMS = 9; // Number of sliders
HSlide[] hs = new HSlide[NUMS];
void setup()
{
size(200, 200);
noStroke();
for (int i=0; i<NUMS; i++) {
hs[i] = new HSlide(20, i*20+20, 160, 10, i*5+1);
}
}
void loop()
{
for (int i=0; i<NUMS; i++) {
hs[i].update();
hs[i].draw();
}
}
class HSlide
{
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;
HSlide (int xp, int yp, int sw, int sh, int l) {
swidth = sw;
sheight = sh;
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 draw() {
fill(255);
rect(xpos, ypos, swidth, sheight);
if(over || locked) {
fill(0, 153, 204);
} else {
fill(0, 102, 153);
}
rect(spos, ypos, sheight, sheight);
}
}
|
|
|
|
|
Brian
|
Re: Sliders
« Reply #2 on: Apr 12th, 2003, 6:14pm » |
|
I have updated the slider created by REAS, now includes more features.
- Left and right arrows, useful if you want to scroll at a specific speed. Removable aswell if not wanted.
- Get returned values from least to greatest given, good if you want to get only a certain range for instance, color (0 - 255).
- Customizable with colors for bar and arrows.
take a look, enjoy.
Code:// Horizontal Scroll
// by Brian Benzinger
// based on Loose/Heavy Slidebar by REAS
HScrollbar hs;
HArrows ha;
void setup() {
size(200, 200);
// ( x, y, width, hieght, bar width, v1, v2);
// v1 = min value returned, v2 = max value returned
hs = new HScrollbar(9, 15, 181, 10, 30, 0, 640);
// show arrows (remove for no arrows)
ha = new HArrows();
background(100);
stroke(255);
}
void loop() {
// (red, green, blue);
hs.bg = color(255, 255, 255); // scrollbar bg color
hs.sc = color(120, 120, 120); // scrollbar bar color
hs.ro = color(153, 102, 0); // scrollbar bar roll color
ha.ac = color(70, 70, 70); // arrows color
ha.ro = color(153, 102, 0); // arrows roll color
hs.update(true); // update bar, true if draggable bar
hs.draw(); // show bar
// ( x, y, width, height, speed);
ha.left(-1, 15, 10, 10, 0.5); // make left arrow
ha.right(190, 15, 10, 10, 0.5); // make right arrow
myAnimate();
}
class HScrollbar {
int swidth, sheight, xpos, ypos;
int sposMin, sposMax, bar;
float spos, newspos, ratio, tMin;
boolean locked, over;
color bg, sc, ro;
HScrollbar (int x, int y, int w, int h, int b, int m, int t) {
swidth = w;
sheight = h;
bar = b;
xpos = x;
ypos = y;
spos = 0;
newspos = spos;
sposMin = 0;
tMin = m;
sposMax = (swidth+1) - (bar+1);
ratio = (float)(w - bar) / (float)(t-sposMax-m);
}
void update(boolean drag) {
if(over() && drag) {
over = true;
}
else {
over = false;
}
if(mousePressed && over) {
locked = true;
}
if(!mousePressed) {
locked = false;
}
if(locked) {
newspos = constrain((spos+mouseX)-pmouseX, sposMin, sposMax);
}
if(abs(newspos - spos) > 0) {
spos = spos + (newspos-spos);
}
}
float constrain(float val, float minv, float maxv) {
return min(max(val, minv), maxv);
}
boolean over() {
if(mouseX > spos+xpos && mouseX < spos+bar+xpos && mouseY > ypos && mouseY < ypos+sheight) {
return true;
}
else {
return false;
}
}
void draw() {
fill(bg);
rect(xpos, ypos, swidth, sheight);
if(over) {
fill(ro);
}
else {
fill(sc);
}
rect(spos+xpos, ypos, bar, sheight);
}
float getPos() {
float sum = (spos * (1/ratio) + spos) + tMin;
// println("Bar X Position: " + spos + " . Returned: " + sum + " . Ratio: " + ratio);
return sum;
}
void chaPos(float nx) {
newspos = constrain(nx, sposMin, sposMax);
}
}
class HArrows {
float lx, ly, rx, ry, lw, lh, rw, rh, newx;
color ro, ac;
void left(float lxpos, float lypos, float lwidth, float lheight, float speed) {
lx = lxpos;
ly = lypos;
lw = lwidth;
lh = lheight;
if (mouseX > lx && mouseX < lx+lw && mouseY > ly && mouseY < ly+lh) {
if (mousePressed) {
newx = hs.newspos - speed;
hs.chaPos(newx);
}
fill(ro);
}
else {
fill(ac);
}
rect(lxpos, lypos, lwidth, lheight);
}
void right(float rxpos, float rypos, float rwidth, float rheight, float speed) {
rx = rxpos;
ry = rypos;
rw = rwidth;
rh = rheight;
if (mouseX > rx && mouseX < rx+rw && mouseY > ry && mouseY < ry+rh) {
if (mousePressed) {
newx = hs.newspos + speed;
hs.chaPos(newx);
}
fill(ro);
}
else {
fill(ac);
}
rect(rxpos, rypos, rwidth, rheight);
}
}
void myAnimate() {
float numb = hs.getPos();
for(int i = 0; i < 6; i++) {
fill(20*i+100);
rect(((i*160)-numb)-60, 25, 160, 160);
}
} |
|
|
Brian Benzinger
|
|
|
pix
|
Re: Sliders
« Reply #3 on: Dec 17th, 2003, 4:14pm » |
|
i threw together a very simple slider class, and a silly example applet that connects a bunch of sliders with dodgey spring dynamics.
http://pix.test.at/java/proce55ing/slider.html
|
|
|
|
|
|
