Yahir
5/3/2018 - 2:14 AM
lock Slider Class by Yahir
A class for making GUI Sliders in Processing.
When opening the .pde file press OK when prompted to create the necessary Sketch folder.
Full guide and attribute list at: https://yahir360.com/processing-sliders/
/**********************************************************************
Slider Class by Yahir
For Processing
Full guide and Attribute list at:
https://yahir360.com/processing-sliders/
Version: 1
May 2018
**********************************************************************/
class Slider {
float x; //(CENTER)
float y;
float fixedX;
float fixedY;
color activeColor;
color alternateColor;
color backgroundColor;
boolean flood;
color floodColor;
color foregroundColor;
String orientation;
float roundedCorner;
boolean tabEllipse;
float sliderLength;
boolean tabRect;
float sliderWidth;
float tabWidth;
float tabLength;
String themeColor;
boolean wrapEllipse;
boolean wrapRect;
String name;
float nameClearance;
color nameColor;
String nameLocation;
float nameSize;
float slantAmount;
float rangeMin;
float rangeMax;
float variable;
float variableClearance;
color variableColor;
String variableLocation;
boolean variableRoundWhole;
int variableRounded;
float variableSize;
//DO NOT UPDATE
float endCap; //Ajustment to slider background to accommodate wrapEllipse
float sliderRangeMapped; //Maps range of travel distance to min/max range
float sliderTravelDistance; //Sets slider travel distance
float wrapEnd;//Adjustment to slider background to accommodate wrapRect
/***** Slider with default rangeMin = 0, rangeMax = 100 *****/
Slider(float tX, float tY, float tVariable, String tSliderName) {
x = tX;
y = tY;
fixedX = tX;
fixedY = tY;
name = tSliderName;
variable = tVariable;
rangeMin = 0;
rangeMax = 100;
defaultSettings();
}
/***** Slider with modified rangeMax *****/
Slider(float tX, float tY, float tVariable, String tSliderName, float tRangeMax) {
x = tX;
y = tY;
fixedX = tX;
fixedY = tY;
name = tSliderName;
variable = tVariable;
rangeMin = 0;
rangeMax = tRangeMax;
defaultSettings();
}
/***** Slider with modified rangeMin, rangeMax *****/
Slider(float tX, float tY, float tVariable, String tSliderName, float tRangeMin, float tRangeMax) {
x = tX;
y = tY;
fixedX = tX;
fixedY = tY;
name = tSliderName;
variable = tVariable;
rangeMin = tRangeMin;
rangeMax = tRangeMax;
defaultSettings();
}
/***** Default slider initialize settings *****/
void defaultSettings() {
flood = true;
orientation = "DEFAULT";
roundedCorner = 2;
sliderLength = 200;
sliderWidth = 20;
slantAmount = 300;
tabLength = 40;
tabWidth = 20;
themeColor = "DEFAULT";
nameClearance = 5;
nameColor = color(0);
nameLocation = "DEFAULT";
nameSize = 12;
variableClearance = 5;
variableLocation = "DEFAULT";
variableRounded = 1;
variableSize = 10;
}
/***** Display and update slider *****/
void display() {
preDisplay();
sliderStartPosition();
sliderBound();
mapped();
displayBackground();
displayName();
displaySlider();
displayVariable();
theme();
endDisplay();
}
/***** Check initial state of slider *****/
void preDisplay() {
rectMode(CENTER);
noStroke();
if(tabEllipse) { //For ellipse slider. Make ellipse circular. set by tabWidth
tabLength = tabWidth;
}
if (wrapRect) { //If wrapRect engaged
wrapEnd = tabWidth; //Set wrapEnd = tabWidth to lengthen background slider display
sliderWidth = tabLength;
} else {
wrapEnd = 0; //else set to 0 for no adustment
}
if(wrapEllipse) { //If wrapEllipse true
endCap = tabWidth; //Set endCap = tabWidth
sliderWidth = tabWidth;
} else {
endCap = 0; //Else set to 0 for no adjustment
}
}
/***** Reset sketch parameters *****/
void endDisplay() {
rectMode(CORNER);
strokeWeight(1);
stroke(0);
noFill();
textAlign(LEFT, BASELINE);
textSize(12.0);
}
void theme() {
switch(themeColor) { //Preprogrammed theme colors
case "GREEN":
floodColor = color(150, 230, 140);
backgroundColor = color(100,200,90);
alternateColor = color(255);
activeColor = color(10, 100, 0);
foregroundColor = color(30,135,20);
variableColor = color(0);
break;
case "BLUE":
floodColor = color(90, 105, 230);
backgroundColor = color(55,75,190);
alternateColor = color(255);
activeColor = color(10, 25, 200);
foregroundColor = color(15,30,160);
variableColor = color(0);
break;
case "RED":
floodColor = color(255, 170,170);
backgroundColor = color(212,106,106);
alternateColor = color(255);
activeColor = color(200,0,0);
foregroundColor = color(128,21,21);
variableColor = color(0);
break;
case "PURPLE":
floodColor = color(170, 130, 205); //Lighter
backgroundColor = color(115,80,145); //Light
alternateColor = color(255); //white
activeColor = color(35, 5, 60); //Darkest
foregroundColor = color(60,20,85); //Darker
variableColor = color(0); //Dark
break;
case "BRIGHT":
floodColor = color(120,254,0); //Lighter
backgroundColor = color(242,255,0); //Light
alternateColor = color(113,0,157); //Light
activeColor = color(254,0,81); //Darkest
foregroundColor = color(181,0,253); //Darker
variableColor = color(113,0,157); //Dark
break;
default:
floodColor = color(220); //Light Gray
backgroundColor = color(170); //White
alternateColor = color(255); //White
activeColor = color(0); //Black
foregroundColor = color(63); //Dark Gray
variableColor = color(121); //Gray
break;
}
}
/***** Position slider at variable start value *****/
void sliderStartPosition() {
if(variable < rangeMin) { //Variable start value to low
println("MIN_RANGE ERROR: " + name + " variable start value (" +variable+ ") is less than minimum slider range parameter (" +rangeMin+ ").\nSOLUTION: Change min range value on initialize.\n");
variable = rangeMin;
} else if(variable > rangeMax) { //Variable start value to high
println("MAX_RANGE ERROR: " + name + " variable start value (" +variable+ ") is greater than maximum slider range parameter (" +rangeMax+ ").\nSOLUTION: Change max range value on initialize.\n");
variable = rangeMax;
}
if (orientation == "VERTICAL") { //Vertical placement
y = (fixedY + sliderLength) - (variable - rangeMin) * (sliderLength/(rangeMax-rangeMin));
} else { //Default horizontal placement
x = fixedX + (variable - rangeMin) * (sliderLength/(rangeMax - rangeMin));
}
}
/***** Map slider to specified range *****/
void mapped() {
if (orientation == "VERTICAL") { //Vertical mapping
sliderTravelDistance = dist(fixedX, fixedY, fixedX, y);
sliderRangeMapped = map(sliderTravelDistance, sliderLength, 0, rangeMin, rangeMax);
} else { //Default horizontal mapping
sliderTravelDistance = dist(fixedX, fixedY, x, fixedY);
sliderRangeMapped = map(sliderTravelDistance, 0, sliderLength, rangeMin, rangeMax);
}
variable = sliderRangeMapped;
}
/***** Display background slider elements *****/
void displayBackground() {
fill(backgroundColor);
if (orientation == "VERTICAL") {
rect(fixedX + sliderWidth/2, fixedY + sliderLength/2, sliderWidth, sliderLength + wrapEnd, roundedCorner ); //VERTICAL BACKGROUND
if(wrapEllipse) {
arc(fixedX + sliderWidth/2, fixedY - wrapEnd/2 , sliderWidth, sliderWidth, radians(180), radians(360)); //Top cap
fill(floodColor);
arc(fixedX + sliderWidth/2, fixedY + sliderLength + wrapEnd/2 , sliderWidth, sliderWidth, radians(0), radians(180)); //Bottom cap
}
} else { //Default Horizontal
rect(fixedX + sliderLength/2, fixedY + sliderWidth/2, sliderLength + wrapEnd, sliderWidth, roundedCorner); //HORIZONTAL BACKGROUND
if(wrapEllipse) {
fill(backgroundColor);
arc(fixedX + sliderLength + wrapEnd/2 , fixedY + sliderWidth/2, sliderWidth, sliderWidth, radians(270), radians(450)); //Left cap
fill(floodColor);
arc(fixedX - wrapEnd/2, fixedY + sliderWidth/2, sliderWidth, sliderWidth, radians(90), radians(270)); //Right cap
}
}
}
/***** Display slider name *****/
void displayName() {
fill(nameColor);
textSize(nameSize);
if(orientation == "VERTICAL") { //Vertical orientation
switch(nameLocation) {
case "BOTTOM_VERT": case "DEFAULT":
pushMatrix();
translate(fixedX + sliderWidth/2, fixedY + sliderLength + nameClearance + wrapEnd/2 + endCap/2);
rotate(radians(270));
textAlign(RIGHT, CENTER);
text(name, 0,0);
popMatrix();
break;
case "BOTTOM_VERT_SLANT":
pushMatrix();
translate(fixedX + sliderWidth/2, fixedY + sliderLength + nameClearance + wrapEnd/2 + endCap/2);
rotate(radians(slantAmount));
textAlign(RIGHT, CENTER);
text(name, 0,0);
popMatrix();
break;
case "TOP_VERT":
pushMatrix();
translate(fixedX + sliderWidth/2, fixedY - nameClearance - wrapEnd/2 - endCap/2);
rotate(radians(90));
textAlign(RIGHT, CENTER);
text(name, 0,0);
popMatrix();
break;
case "TOP_VERT_SLANT":
pushMatrix(); //TOP_VERT
translate(fixedX + sliderWidth/2, fixedY - nameClearance - wrapEnd/2 - endCap/2);
rotate(radians(slantAmount));
textAlign(LEFT, CENTER);
text(name, 0,0);
popMatrix();
break;
case "BOTTOM":
textAlign(CENTER, TOP);
text(name, fixedX + sliderWidth/2, fixedY + sliderLength + nameClearance + wrapEnd/2 + endCap/2);
break;
case "BOTTOM_RIGHT":
textAlign(LEFT, BOTTOM);
text(name, fixedX + sliderWidth + nameClearance, fixedY + sliderLength + wrapEnd/2 + endCap/2);
break;
case "BOTTOM_LEFT":
textAlign(RIGHT, BOTTOM);
text(name, fixedX - nameClearance, fixedY + sliderLength + wrapEnd/2 + endCap/2);
break;
case "TOP":
textAlign(CENTER, BOTTOM);
text(name, fixedX + sliderWidth/2, fixedY - nameClearance - wrapEnd/2 - endCap/2);
break;
case "TOP_RIGHT":
textAlign(LEFT, TOP);
text(name, fixedX + sliderWidth + nameClearance, fixedY - wrapEnd/2 - endCap/2);
break;
case "TOP_LEFT":
textAlign(RIGHT, TOP);
text(name, fixedX - nameClearance, fixedY - wrapEnd/2 - endCap/2);
break;
case "RIGHT":
textAlign(LEFT, CENTER);
text(name, fixedX + sliderWidth + nameClearance, fixedY + sliderLength/2);
break;
case "LEFT":
textAlign(RIGHT, CENTER);
text(name, fixedX - nameClearance, fixedY + sliderLength/2);
break;
default: //No name display
break;
}
} else { //Horizontal orientation
switch(nameLocation) {
case "TOP":
textAlign(CENTER, BOTTOM);
text(name, fixedX + sliderLength/2, fixedY - nameClearance);
break;
case "TOP_RIGHT":
textAlign(RIGHT, BOTTOM);
text(name, fixedX +sliderLength + endCap/2, fixedY - nameClearance);
break;
case "TOP_LEFT":
textAlign(LEFT, BOTTOM);
text(name, fixedX - endCap/2, fixedY - nameClearance);
break;
case "BOTTOM":
textAlign(CENTER, TOP);
text(name, fixedX + sliderLength/2, fixedY + sliderWidth + nameClearance);
break;
case "BOTTOM_RIGHT":
textAlign(RIGHT, TOP);
text(name, fixedX + sliderLength + endCap/2, fixedY + sliderWidth + nameClearance);
break;
case "BOTTOM_LEFT":
textAlign(LEFT, TOP);
text(name, fixedX - endCap/2, fixedY + sliderWidth + nameClearance);
break;
case "RIGHT":
textAlign(LEFT, CENTER);
text(name, fixedX + sliderLength + nameClearance + wrapEnd/2 + endCap/2, fixedY + sliderWidth/2);
break;
case "DEFAULT": case "LEFT":
textAlign(RIGHT, CENTER);
text(name, fixedX - nameClearance - wrapEnd/2 - endCap/2, fixedY + sliderWidth/2);
break;
default:
break;
}
}
}
/***** Display slider elements *****/
void displaySlider() {
if (orientation == "VERTICAL") { //Vertical orientation
if (flood) { //If flood mode true
if(active() && tabRect == false && tabEllipse == false) {
fill(activeColor);
} else {
fill(floodColor);
}
rectMode(CORNER);
rect(fixedX, fixedY + sliderLength + wrapEnd/2 , sliderWidth , y - (fixedY + sliderLength + wrapEnd/2) , roundedCorner); //HORIZONTAL TAB
rectMode(CENTER);
}
if (active()) { //Highlight on active
fill(activeColor);
} else { //Return to default when not active
fill(foregroundColor);
}
if (tabEllipse) { //Ellipse slider tab
ellipse(fixedX + sliderWidth/2, y, tabLength, tabWidth); //Vertical ellipse tab
} else if(tabRect) {// Rect slider tab
rect(fixedX + sliderWidth/2, y, tabLength, tabWidth, roundedCorner); //Vertical rect tab
} else { //No Tab
}
} else { //Default Horizontal
if (flood) { //If flood mode true
if(active() && tabRect == false && tabEllipse == false) {
fill(activeColor);
} else {
fill(floodColor);
}
rectMode(CORNER);
rect(fixedX - wrapEnd/2, fixedY, x - fixedX + wrapEnd/2, sliderWidth , roundedCorner); //HORIZONTAL TAB
rectMode(CENTER);
}
if (active()) { //Hightlight on active
fill(activeColor);
} else { //Return to default when not active
fill(foregroundColor);
}
if (tabEllipse) { //Ellipse slider tab
ellipse(x, fixedY + sliderWidth/2, tabWidth, tabLength); //Horizontal ellipse tab
} else if(tabRect) { //Rect slider tab
rect(x, fixedY + sliderWidth/2, tabWidth, tabLength, roundedCorner); //Horizontal rect tab
} else { //No Tab
}
}
}
/***** Display variable value *****/
void displayVariable() {
textSize(variableSize);
if(active()) {
fill(alternateColor);
} else {
fill(variableColor);
}
if(variableRoundWhole) {
variableRounded = -1;
}
if(orientation == "VERTICAL") { //Vertical orientation
switch(variableLocation) {
case "IN_BOTTOM_VERT": case "DEFAULT":
pushMatrix();
translate(fixedX + sliderWidth/2, fixedY + sliderLength - variableClearance + wrapEnd/2 + endCap/2);
rotate(radians(270));
textAlign(LEFT, CENTER);
text(nf(variable, 1, variableRounded), 0,0);
popMatrix();
break;
case "BOTTOM_VERT_SLANT":
pushMatrix();
translate(fixedX + sliderWidth/2, fixedY + sliderLength + nameClearance + wrapEnd/2 + endCap/2);
rotate(radians(slantAmount));
textAlign(RIGHT, CENTER);
text(nf(variable, 1, variableRounded), 0,0);
popMatrix();
break;
case "IN_TOP_VERT":
pushMatrix();
translate(fixedX + sliderWidth/2, fixedY + variableClearance - wrapEnd/2 - endCap/2);
rotate(radians(270));
textAlign(RIGHT, CENTER);
text(nf(variable, 1, variableRounded), 0,0);
popMatrix();
break;
case "TOP_VERT_SLANT":
pushMatrix();
translate(fixedX + sliderWidth/2, fixedY - nameClearance - wrapEnd/2 - endCap/2);
rotate(radians(slantAmount));
textAlign(LEFT, CENTER);
text(nf(variable, 1, variableRounded), 0,0);
popMatrix();
break;
case "IN_TAB":
pushMatrix();
translate(fixedX + sliderWidth/2, fixedY + sliderLength);
rotate(radians(270));
textAlign(CENTER, CENTER);
text(nf(variable, 1, variableRounded), -y + (fixedX +sliderLength),0);
popMatrix();
break;
case "IN_BOTTOM":
textAlign(CENTER, BOTTOM);
text(nf(variable, 1, variableRounded), fixedX + sliderWidth/2, fixedY + sliderLength - variableClearance + wrapEnd/2 + endCap/2);
break;
case "IN_TOP":
textAlign(CENTER, TOP);
text(nf(variable, 1, variableRounded), fixedX + sliderWidth/2, fixedY + variableClearance - wrapEnd/2 - endCap/2);
break;
case "BOTTOM":
textAlign(CENTER, TOP);
text(nf(variable, 1, variableRounded), fixedX + sliderWidth/2, fixedY + sliderLength + variableClearance + wrapEnd/2 + endCap/2);
break;
case "BOTTOM_RIGHT":
textAlign(LEFT, BOTTOM);
text(nf(variable, 1, variableRounded), fixedX + sliderWidth + variableClearance, fixedY + sliderLength + wrapEnd/2 + endCap/2);
break;
case "BOTTOM_LEFT":
textAlign(RIGHT, BOTTOM);
text(nf(variable, 1, variableRounded), fixedX - variableClearance, fixedY + sliderLength + wrapEnd/2 + endCap/2);
break;
case "TOP":
textAlign(CENTER, BOTTOM);
text(nf(variable, 1, variableRounded), fixedX + sliderWidth/2, fixedY - variableClearance - wrapEnd/2 - endCap/2);
break;
case "TOP_RIGHT":
textAlign(LEFT, TOP);
text(nf(variable, 1, variableRounded), fixedX + sliderWidth + variableClearance, fixedY - wrapEnd/2 - endCap/2);
break;
case "TOP_LEFT":
textAlign(RIGHT, TOP);
text(nf(variable, 1, variableRounded), fixedX - variableClearance, fixedY - wrapEnd/2 - endCap/2);
break;
case "RIGHT":
textAlign(LEFT, CENTER);
text(nf(variable, 1, variableRounded), fixedX + sliderWidth + variableClearance, fixedY + sliderLength/2);
break;
case "LEFT":
textAlign(RIGHT, CENTER);
text(nf(variable, 1, variableRounded), fixedX - variableClearance, fixedY + sliderLength/2);
break;
default: //No variable display
break;
}
} else { //Horiztonal orientation
switch(variableLocation) {
case "IN_LEFT": case "DEFAULT":
textAlign(LEFT, CENTER);
text(nf(variable, 1, variableRounded), fixedX + variableClearance - wrapEnd/2 - endCap/2, fixedY + sliderWidth/2);
break;
case "IN_RIGHT":
textAlign(RIGHT, CENTER);
text(nf(variable, 1, variableRounded), fixedX + sliderLength - variableClearance + wrapEnd/2 + endCap/2, fixedY + sliderWidth/2);
break;
case "IN_TAB":
textAlign(CENTER, CENTER);
text(nf(variable, 1, variableRounded), x, fixedY + sliderWidth/2);
break;
case "TOP":
textAlign(CENTER, BOTTOM);
text(nf(variable, 1, variableRounded), fixedX + sliderLength/2, fixedY - variableClearance);
break;
case "TOP_RIGHT":
textAlign(RIGHT, BOTTOM);
text(nf(variable, 1, variableRounded), fixedX +sliderLength + wrapEnd/2 + endCap/2, fixedY - variableClearance);
break;
case "TOP_LEFT":
textAlign(LEFT, BOTTOM);
text(nf(variable, 1, variableRounded), fixedX - wrapEnd/2 - endCap/2, fixedY - variableClearance);
break;
case "BOTTOM":
textAlign(CENTER, TOP);
text(nf(variable, 1, variableRounded), fixedX + sliderLength/2, fixedY + sliderWidth + variableClearance);
break;
case "BOTTOM_RIGHT":
textAlign(RIGHT, TOP);
text(nf(variable, 1, variableRounded), fixedX + sliderLength + wrapEnd/2 + endCap/2, fixedY + sliderWidth + variableClearance);
break;
case "BOTTOM_LEFT":
textAlign(LEFT, TOP);
text(nf(variable, 1, variableRounded), fixedX - wrapEnd/2 - endCap/2, fixedY + sliderWidth + variableClearance);
break;
case "RIGHT":
textAlign(LEFT, CENTER);
text(nf(variable, 1, variableRounded), fixedX + sliderLength + variableClearance + wrapEnd/2 + endCap/2, fixedY + sliderWidth/2);
break;
case "LEFT":
textAlign(RIGHT, CENTER);
text(nf(variable, 1, variableRounded), fixedX - variableClearance - wrapEnd/2 - endCap/2, fixedY + sliderWidth/2);
break;
default: //No variable display
break;
}
}
}
/***** Limiter slider within background element *****/
void sliderBound() {
if (orientation == "VERTICAL") { //Vertical orientation
if (selected()) {
y = mouseY;
if (y < fixedY) {
y = fixedY;
}
if (y > fixedY + sliderLength) {
y = fixedY + sliderLength;
}
}
} else { //Default horizontal orientation
if (selected()) {
x = mouseX;
if (x < fixedX) {
x = fixedX;
}
if (x > fixedX + sliderLength) {
x = fixedX + sliderLength;
}
}
}
}
boolean selected() { //Was slider/slider tab selected
if (mousePressed && active()) {
return true;
} else {
return false;
}
}
boolean active() { //Is slider/slider tab active
if (orientation == "VERTICAL") { //Vertical orientation
if(tabRect) { //Rect bounds
if (mouseX > fixedX + sliderWidth/2 - tabLength/2 && mouseX < fixedX + sliderWidth/2 + tabLength/2 &&
mouseY > y - tabWidth/2 && mouseY < y + tabWidth/2) {
return true;
} else {
return false;
}
} else if(tabEllipse) { //Ellipse bounds
float disX = fixedX + sliderWidth/2 - mouseX;
float disY = y - mouseY;
if (sqrt(sq(disX) + sq(disY)) < tabWidth/2 ) {
return true;
} else {
return false;
}
} else { //No tab bounds
if (mouseX > fixedX && mouseX < fixedX + sliderWidth &&
mouseY > fixedY -1 && mouseY < fixedY + sliderLength +1) {
return true;
} else {
return false;
}
}
} else { //Default horiztonal orientation
if(tabRect) { //Rect bounds
if (mouseX > x - tabWidth/2 && mouseX < x + tabWidth/2 &&
mouseY > fixedY - tabLength/2 && mouseY < fixedY + tabLength/2) {
return true;
} else {
return false;
}
} else if(tabEllipse) { //Ellipse bonds
float disX = x - mouseX ;
float disY = fixedY + sliderWidth/2 - mouseY;
if (sqrt(sq(disX) + sq(disY)) < tabWidth/2 ) {
return true;
} else {
return false;
}
} else { //No tab bounds
if (mouseX > fixedX -1 && mouseX < fixedX+ sliderLength +1 &&
mouseY > fixedY && mouseY < fixedY + sliderWidth) {
return true;
} else {
return false;
}
}
}
}
}