Yahir
2/19/2019 - 1:42 AM
Slider Simple Example 2019
/**********************************************************************
Simple Example of the Slider Class by Yahir
For Slider Class Version 2
Full guide and Attribute list at:
https://www.yahir360.com/gui
**********************************************************************/
// Declare slider object
Slider mySlider;
// Variable to be adjusted by slider
float xPos = 200;
void setup() {
size(400, 400, FX2D);
// Initialize slider object
// constructor 2 (name, x, y, value, min, max)
mySlider = new Slider("my slider", 100, 240, xPos, 30, width - 30);
}
void draw() {
backgroundDetails();
// Display slider object
mySlider.display();
// Assign global variable to slider class value
xPos = mySlider.getValue();
// Example move ellipse x position
fill(255, 115, 60);
ellipse(xPos, 140, 60, 60);
}
/***
* Built in Processing method that is used to update the
* slider value when mouse dragged across slider
* the update() method from the slider class must be placed here
***/
void mouseDragged() {
//Update slider value on mouseDragged
mySlider.update();
}
/**
* Simple method that stores the background
* and text for the example sketch
**/
void backgroundDetails() {
background(230);
// boarder columns
fill(180);
noStroke();
rect(0, 0, 80, 400);
rect(320, 0, 80, 400);
// Sketch name and credit
textAlign(CENTER);
textSize(12);
fill(100);
text("by yahir", 200, 370);
fill(89);
textSize(24);
text("slider example", 200, 40);
}
/***
* Slider Class by Yahir
* Full Guide and Attribute list at:
*
* Class for creating GUI sliders
* Version 2
* February 2019
***/
class Slider {
boolean showFill; // Toggle showing a value fill
boolean showTab; // Toggle showing a value tab within slider
color sliderActiveColor; // color on active (mouse over)
color sliderColor; // Color of the slider background
color sliderFillColor; // Color of the slider foreground (fill)
color nameColor; // Color of the slider name text
color valueColor; // Color of the value text
color tabColor; // Color of the slider value tab
color tabActiveColor; // Color of the slider value tab on active (mouse over)
float sliderMax; // Maximum value of the slider range
float sliderMin; // Minimum valu eof the slider range
float x; // The x position of the slider
float y; // The y position of the slider
float value; // The current value of the slider
int nameClearance; // The gap between the slider name and the edge of the slider
int nameSize; // The text size of the slider name
int nameRotation; // The rotation angle of certain name location displays
int roundValTo; // Round value to dicimal place (-1 = whole number)
int sliderHeight; // The height of the slider
int sliderWidth; // The width of the slider
int tabSize; // The size of the slider tab
int valueClearance; // The gap between the value text and the slider edge
int valueSize; // The text size of the value slider
String nameLocation; // The location to display the slider name text
String orientation; // The orientation of the slider (VERTICAL or HORIZONTAL)
String sliderName; // The name of the slider
String theme; // The color theme of the slider
String valueLocation; // Thelocation to display the value text
/**
* Constructor 1 used for setting slider name, position, and value to be adjusted
*
* @PARAM sName: String name of the slider
* @PARAM sX: float value of the slider x position
* @PARAM sY: float value of the slider y position
* @PARAM sValue: float value of the variable being adjusted by slider
**/
Slider(String sName, float sX, float sY, float sValue) {
setShowFill(true);
setShowTab(false);
setX(sX);
setY(sY);
setSliderHeight(20);
setSliderWidth(200);
setSliderMax(100);
setSliderMin(0);
setNameSize(14);
setSliderName(sName);
setValueSize(12);
setTabSize(20);
setOrientation("HORIZONTAL");
setTheme("DARK");
setValue(sValue);
setNameLocation("BOTTOM");
setValueLocation("BOTTOM_VERT");
nameClearance = 15;
nameRotation = -90;
roundValTo = -1;
}
/**
* Constructor 2 used for setting slider name, position, value to be adjusted, min and max values
*
* @PARAM sName: String name of the slider
* @PARAM sX: Integer value of the slider x position
* @PARAM sY: Integer value of the slider y position
* @PARAM sValue: Float value of the variable being adjusted by slider
* @PARAM sMin: Integer value of the slider minimum value
* @PARAM sMax: Integer value of the slider maximum value
**/
Slider(String sName, float sX, float sY, float sVar, float sMin, float sMax) {
setShowFill(true);
setShowTab(false);
setX(sX);
setY(sY);
setSliderHeight(20);
setSliderWidth(200);
setSliderMax(sMax);
setSliderMin(sMin);
setNameSize(14);
setSliderName(sName);
setValueSize(12);
setTabSize(20);
setOrientation("HORIZONTAL");
setTheme("DARK");
setValue(sVar);
setNameLocation("BOTTOM");
setValueLocation("BOTTOM_VERT");
nameClearance = 15;
nameRotation = -90;
roundValTo = -1;
}
/**
* Setter methods
**/
void setShowFill(boolean sShow) {
showFill = sShow;
}
void setShowTab(boolean sShow) {
showTab = sShow;
}
void setSliderMax(float sMax) {
sliderMax = sMax;
}
void setSliderMin(float sMin) {
sliderMin = sMin;
}
void setValue(float sValue) {
value = sValue;
}
void setX(float sX) {
x = sX;
}
void setY(float sY) {
y = sY;
}
void setNameSize(int sSize) {
nameSize = sSize;
}
void setSliderHeight(int sHeight) {
sliderHeight = sHeight;
}
void setSliderWidth(int sWidth) {
sliderWidth = sWidth;
}
void setTabSize(int sSize) {
tabSize = sSize;
}
void setValueSize(int sSize) {
valueSize = sSize;
}
void setOrientation(String sOrient) {
orientation = sOrient;
}
void setSliderName(String sName) {
sliderName = sName;
}
void setTheme(String sTheme) {
theme = sTheme;
switch(theme) {
case "LIGHT":
sliderColor = color(225, 235, 240);
sliderFillColor = color(207, 216, 220);
sliderActiveColor = color(142, 145, 163);
tabActiveColor = color(220, 187, 148);
tabColor = color(96, 125, 139);
nameColor = color(207, 216, 220);
valueColor = color(69, 90, 100);
break;
case "DARK":
default:
sliderColor = color(96, 125, 139);
sliderFillColor = color(69, 90, 100);
sliderActiveColor = color(78, 82, 109);
tabActiveColor = color(220, 187, 148);
tabColor = color(41, 76, 93);
nameColor = color(69, 90, 100);
valueColor = color(207, 216, 220);
break;
}
}
void setNameLocation(String sLocation) {
nameLocation = sLocation;
}
void setValueLocation(String sLocation) {
valueLocation = sLocation;
}
/**
* Getter methods
**/
boolean getShowFill() {
return showFill;
}
boolean getShowTab() {
return showTab;
}
float getSliderMax() {
return sliderMax;
}
float getSliderMin() {
return sliderMin;
}
float getValue() {
return value;
}
float getX() {
return x;
}
float getY() {
return y;
}
int getNameSize() {
return nameSize;
}
int getSliderHeight() {
return sliderHeight;
}
int getSliderWidth() {
return sliderWidth;
}
int getTabSize() {
return tabSize;
}
int getValueSize() {
return valueSize;
}
String getOrientation() {
return orientation;
}
String getSliderName() {
return sliderName;
}
String getTheme() {
return theme;
}
String getNameLocation() {
return nameLocation;
}
String getValueLocation() {
return valueLocation;
}
/**
* Method for displaying the slider and all features
** This method should be called within the draw method of the sketch
**/
void display() {
preShow();
showSlider();
showValueFill(getShowFill());
showValueTab(getShowTab());
showNameText();
showValueText();
postShow();
}
/**
* Method for insuring elements align and are set appropriately
* prior to displaying slider
**/
void preShow() {
rectMode(CORNER);
}
/**
* Method for returning the changed settings back to default to
* prevent alterations to remaining sketch
**/
void postShow() {
textAlign(LEFT);
strokeWeight(1);
textSize(12);
}
/**
* Method for displaying the main slider body
**/
void showSlider() {
fill(sliderColor);
noStroke();
switch(orientation) {
case "VERTICAL":
rect(getX(), getY(), getSliderHeight(), getSliderWidth());
break;
case "HORIZONTAL":
default:
rect(getX(), getY(), getSliderWidth(), getSliderHeight());
break;
}
}
/**
* Method for displaying the slider value visually via fill
**/
void showValueFill(boolean tShow) {
if(tShow) {
float valueMapped = map(getValue(), getSliderMin(), getSliderMax(), 0, getSliderWidth());
if(active()) {
fill(sliderActiveColor);
} else {
fill(sliderFillColor);
}
noStroke();
switch(orientation) {
case "VERTICAL":
valueMapped = map(getValue(), getSliderMin(), getSliderMax(), 0, getSliderWidth());
rect(getX(), getY() + getSliderWidth(), getSliderHeight(), -valueMapped);
break;
case "HORIZONTAL":
default:
rect(getX(), getY(), valueMapped, getSliderHeight());
break;
}
}
}
/**
* Method for displaying a tab within slider
*
* @PARAM tShow: boolean indicates whether to show tab or not
**/
void showValueTab(boolean tShow) {
if(tShow) {
if(active()) {
fill(tabActiveColor);
} else {
fill(tabColor);
}
noStroke();
switch(orientation) {
case "VERTICAL":
float tabMappedV = map(getValue(), getSliderMin() , getSliderMax(), 0 + tabSize, getSliderWidth());
float tabValueV = getY() + (-tabMappedV);
rect(getX(), getSliderWidth() + tabValueV, getSliderHeight(), tabSize);
break;
case "HORIZONTAL":
default:
float tabMappedH = map(getValue(), getSliderMin() , getSliderMax(), 0, getSliderWidth() - tabSize);
float tabValueH = getX() + tabMappedH;
rect(tabValueH, getY(), tabSize, getSliderHeight());
break;
}
}
}
/**
* Method for updating the slider value
** This method should be placed withing the mouseDragged method of the sketch
**/
void update() {
switch(orientation) {
case "VERTICAL":
if(active()) {
setValue(map(mouseY, getY(), getY() + getSliderWidth(), getSliderMax(), getSliderMin()));
}
break;
case "HORIZONTAL":
default:
if(active()) {
setValue(map(mouseX, getX(), getX() + getSliderWidth(), getSliderMin(), getSliderMax()));
}
break;
}
}
/**
* Method for displaying the name text for the slider
**/
void showNameText() {
fill(nameColor);
textSize(getNameSize());
switch(orientation) {
case "VERTICAL":
switch(getNameLocation()) {
case "TOP_TILT":
pushMatrix();
translate(getX(), getY() - nameClearance);
rotate(radians(nameRotation));
textAlign(LEFT, TOP);
text(getSliderName(), 0, 0);
popMatrix();
break;
case "TOP":
textAlign(CENTER, CENTER);
text(getSliderName(), getX() + (getSliderHeight() /2 ), getY() - nameClearance);
break;
case "LEFT_VERT":
pushMatrix();
textAlign(CENTER, CENTER);
translate(getX() - nameClearance, getY() + (getSliderWidth() / 2));
rotate(radians(-90));
text(getSliderName(), 0, 0);
popMatrix();
break;
case "LEFT":
textAlign(RIGHT, CENTER);
text(getSliderName(), getX() - nameClearance, getY() + (getSliderWidth() / 2));
break;
case "BOTTOM_TILT":
pushMatrix();
translate(getX(), getY() + getSliderWidth() + nameClearance);
rotate(radians(nameRotation));
textAlign(RIGHT, TOP);
text(getSliderName(), 0,0);
popMatrix();
break;
case "BOTTOM":
default:
textAlign(CENTER);
text(getSliderName(), getX() + (getSliderHeight() /2 ), getY() + getSliderWidth() + nameClearance);
break;
}
break;
case "HORIZONTAL":
default:
switch(getNameLocation()) {
case "TOP":
textAlign(CENTER, CENTER);
text(getSliderName(), getX() + (getSliderWidth() /2 ), getY() - nameClearance);
break;
case "LEFT":
textAlign(RIGHT, BOTTOM);
text(getSliderName(), getX() - nameClearance, getY() + getSliderHeight());
break;
case "BOTTOM":
default:
textAlign(CENTER);
text(getSliderName(), getX() + (getSliderWidth() /2 ), getY() + getSliderHeight() + nameClearance);
break;
}
break;
}
}
/**
* Method for displaying the value text for the slider
**/
void showValueText() {
String valueString = nf(getValue(), 0, roundValTo);
fill(valueColor);
textSize(getNameSize());
switch(orientation) {
case "VERTICAL":
switch(getValueLocation()) {
case"BOTTOM":
textAlign(CENTER);
text(valueString, getX() + (getSliderHeight() /2 ), getY() + getSliderWidth() - nameClearance);
break;
case "BOTTOM_VERT":
default:
pushMatrix();
translate(getX(), getY() + getSliderWidth() - nameClearance);
rotate(radians(-90));
textAlign(CENTER, TOP);
text(valueString, 0, 0);
popMatrix();
break;
}
break;
case "HORIZONTAL":
default:
textAlign(CENTER, BOTTOM);
text(valueString, getX() + nameClearance, getY() + getSliderHeight());
break;
}
}
/**
* Check mouse position is within slider
**/
boolean active() {
switch(orientation) {
case "VERTICAL":
if(mouseX > getX() && mouseX < getX() + sliderHeight &&
mouseY > getY() - 1 && mouseY < getY() + (sliderWidth + 1)) {
return true;
} else {
return false;
}
case "HORIZONTAL":
default:
if(mouseX > getX() - 1 && mouseX < getX() + (sliderWidth + 1) &&
mouseY > getY() && mouseY < getY() + (sliderHeight)) {
return true;
} else {
return false;
}
}
}
}