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 and data
Page Index Toggle Pages: 1
scrollbar and data (Read 1468 times)
scrollbar and data
Mar 24th, 2010, 4:53am
 
hi,

I got this data (this is all the data btw),

Quote:
IT      2006      2007      233      11      234      18      232      18      233      16
IT      2007      2008      240      14      239      16      250      16      229      14
IT      2008      2009      250      10      247      12      244      14      247      8

ENG      2006      2007      234      15      233      17      231      19      233      20
ENG      2007      2008      240      8      250      10      260      17      252      21
ENG      2008      2009      235      6      240      10      232      16      235      17

NL      2006      2007      200      11      222      13      244      19      222      14
NL      2007      2008      220      9      232      19      219      14      231      11
NL      2008      2009      242      10      232      10      188      10      208      10

SPA      2006      2007      264      10      230      17      260      12      299      19
SPA      2007      2008      263      13      230      22      250      22      309      19
SPA      2008      2009      275      11      250      18      275      17      300      16


It's about football stats and goes like:

country - start season - end season - goals trimester 1 - penaltys trimester 1 - goals trimester 2 - penaltys trimester 2 - goals trimester 3 - penaltys trimester 3 - goals trimester 4 - penaltys trimester 4

I want to visualize the data like this:

...

So in the scrollbar you start by 2006 and go threw each trimester and every season.

To work with the data i use this:

Code:

Record[] records;

void setup(){
String[] lines = loadStrings("data_voetbal2.txt");
records = new Record[lines.length];
for (int i = 0; i < lines.length; i++) {
String[] pieces = split(lines[i], '\t'); // Load data into array
if (pieces.length == 11) {
records[recordCount] = new Record(pieces);
recordCount++;
}
}
}

class Record {
String land;
int seizoen_s, seizoen_e;//start end
int k1_g, k1_p, k2_g, k2_p, k3_g, k3_p, k4_g, k4_p;
public Record(String[] pieces) {
land = pieces[0];
seizoen_s = int(pieces[1]);//start season
seizoen_e = int(pieces[2]);//end season
k1_g = int(pieces[3]);//goals trimester 1
k1_p = int(pieces[4]);//penaltys trimester 1
k2_g = int(pieces[5]);//goals trimester 2
k2_p = int(pieces[6]);//penaltys trimester 2
k3_g = int(pieces[7]);//goals trimester 3
k3_p = int(pieces[8]);//penaltys trimester 3
k4_g = int(pieces[9]);//goals trimester 4
k4_p = int(pieces[10]);//penaltys trimester 4
}
}



My problem is how can i use a scrollbar for this way.
I use the scrollbar code from the blue processing book.
Only this one goes smooth and not in steps like 20 pixel shifts.
Also how can i use it with the data, the data can be stored different if needed btw.

I will put all my code i got this far in the next post maybe it helps.

Code:
Scrollbar bar1;

void setup() {
bar1 = new Scrollbar(10, height-30, 700, 10, 0.0, 100.0);
}

void draw(){
bar1.update(mouseX, mouseY);
bar1.display();
}

void mousePressed() {
bar1.press(mouseX, mouseY);
}

void mouseReleased() {
bar1.release();
}


Code:
class Scrollbar {
int x, y; // The x- and y-coordinates
float sw, sh; // Width and height of scrollbar
float pos; // Position of thumb
float posMin, posMax; // Max and min values of thumb
boolean rollover; // True when the mouse is over
boolean locked; // True when its the active scrollbar
float minVal, maxVal; // Min and max values for the thumb
Scrollbar(int xp, int yp, int w, int h, float miv, float mav) {
x = xp;
y = yp;
sw = w;
sh = h;
minVal = miv;
maxVal = mav;
pos = x + sw / 2 - sh / 2;
posMin = x;
posMax = x + sw - sh;
}

// Updates the over boolean and the position of the thumb
void update(int mx, int my) {
if (over(mx, my) == true) {
rollover = true;
} else {
rollover = false;
}
if (locked == true) {
pos = constrain(mx - sh / 2, posMin, posMax);
}
}

// Locks the thumb so the mouse can move off and still update
void press(int mx, int my) {
if (rollover == true) {
locked = true;
} else {
locked = false;
}
}

// Resets the scrollbar to neutral
void release() {
locked = false;
}

// Returns true if the cursor is over the scrollbar
boolean over(int mx, int my) {
if ((mx > x) && (mx < x + sw) && (my > y) && (my < y + sh)) {
return true;
} else {
return false;
}
}

// Draws the scrollbar to the screen
void display() {
fill(255);
rect(x, y, sw, sh);
if ((rollover == true) || (locked == true)) {
fill(0);
} else {
fill(102);
}
rect(pos, y, sh, sh);
}

// Returns the current value of the thumb
float getPos() {
float scalar = sw / (sw - sh);
float ratio = (pos - x) * scalar;
float offset = minVal + (ratio / sw * (maxVal - minVal));
return offset;
}
}


Re: scrollbar and data
Reply #1 - Mar 24th, 2010, 4:54am
 
Code:
Scrollbar bar1;
Record[] records;
int recordCount;

float minGoals = MAX_FLOAT;
float maxGoals = MIN_FLOAT;
float minPenal = MAX_FLOAT;
float maxPenal = MIN_FLOAT;

void setup() {
size(1000, 600);
strokeWeight(1);
smooth();
//Inputs: x, y, width, height, minVal, maxVal
bar1 = new Scrollbar(10, height-30, 700, 10, 0.0, 100.0);

String[] lines = loadStrings("data_voetbal2.txt");
records = new Record[lines.length];
for (int i = 0; i < lines.length; i++) {
String[] pieces = split(lines[i], '\t'); // Load data into array
if (pieces.length == 11) {
records[recordCount] = new Record(pieces);
recordCount++;
}
}
for (int i = 0; i < recordCount; i++) { //get min en max values
checkOuterGoals(records[i].k1_g);//goals
checkOuterGoals(records[i].k2_g);
checkOuterGoals(records[i].k3_g);
checkOuterGoals(records[i].k4_g);
checkOuterPenaltys(records[i].k1_p);//penaltys
checkOuterPenaltys(records[i].k2_p);
checkOuterPenaltys(records[i].k3_p);
checkOuterPenaltys(records[i].k4_p);
}
println(" minGoals "+minGoals+"\n maxGoals"+maxGoals+"\n minPenal"+minPenal+"\n maxPenal"+maxPenal);
}


void draw(){
background(255);
noFill();

bar1.update(mouseX, mouseY);
bar1.display();

for (int i = 0; i < recordCount; i++) {
if(records[i].land.equals("NL"))stroke(255, 84, 5);
if(records[i].land.equals("ENG"))stroke(0, 0, 255);
if(records[i].land.equals("IT"))stroke(15, 180, 40);
if(records[i].land.equals("SPA"))stroke(180, 0, 0);
if(records[i].seizoen_s == 2008){
float mappedY = map(records[i].k1_p, minPenal, maxPenal, height-50, 10);
float mappedX = map(records[i].k1_g, minGoals, maxGoals, width-10, 10);
println(mappedX);
fill(200);
ellipse(mappedX, mappedY, 5, 5);

}
}
}

void mousePressed() {
bar1.press(mouseX, mouseY);
}

void mouseReleased() {
bar1.release();
}

void checkOuterGoals(float value){
if (value > maxGoals){
maxGoals = value;
}
if (value < minGoals){
minGoals = value;
}
}

void checkOuterPenaltys(float value){
if (value > maxPenal){
maxPenal = value;
}
if (value < minPenal){
minPenal = value;
}
}

class Record {
String land;
int seizoen_s, seizoen_e;//start end
int k1_g, k1_p, k2_g, k2_p, k3_g, k3_p, k4_g, k4_p;
public Record(String[] pieces) {
land = pieces[0];
seizoen_s = int(pieces[1]);//start season
seizoen_e = int(pieces[2]);//end season
k1_g = int(pieces[3]);//goals trimester 1
k1_p = int(pieces[4]);//penaltys trimester 1
k2_g = int(pieces[5]);//goals trimester 2
k2_p = int(pieces[6]);//penaltys trimester 2
k3_g = int(pieces[7]);//goals trimester 3
k3_p = int(pieces[8]);//penaltys trimester 3
k4_g = int(pieces[9]);//goals trimester 4
k4_p = int(pieces[10]);//penaltys trimester 4
}
}


Code:

class Scrollbar {
int x, y; // The x- and y-coordinates
float sw, sh; // Width and height of scrollbar
float pos; // Position of thumb
float posMin, posMax; // Max and min values of thumb
boolean rollover; // True when the mouse is over
boolean locked; // True when its the active scrollbar
float minVal, maxVal; // Min and max values for the thumb
Scrollbar(int xp, int yp, int w, int h, float miv, float mav) {
x = xp;
y = yp;
sw = w;
sh = h;
minVal = miv;
maxVal = mav;
pos = x + sw / 2 - sh / 2;
posMin = x;
posMax = x + sw - sh;
}

// Updates the over boolean and the position of the thumb
void update(int mx, int my) {
if (over(mx, my) == true) {
rollover = true;
} else {
rollover = false;
}
if (locked == true) {
pos = constrain(mx - sh / 2, posMin, posMax);
}
}

// Locks the thumb so the mouse can move off and still update
void press(int mx, int my) {
if (rollover == true) {
locked = true;
} else {
locked = false;
}
}

// Resets the scrollbar to neutral
void release() {
locked = false;
}

// Returns true if the cursor is over the scrollbar
boolean over(int mx, int my) {
if ((mx > x) && (mx < x + sw) && (my > y) && (my < y + sh)) {
return true;
} else {
return false;
}
}

// Draws the scrollbar to the screen
void display() {
fill(255);
rect(x, y, sw, sh);
if ((rollover == true) || (locked == true)) {
fill(0);
} else {
fill(102);
}
rect(pos, y, sh, sh);
}

// Returns the current value of the thumb
float getPos() {
float scalar = sw / (sw - sh);
float ratio = (pos - x) * scalar;
float offset = minVal + (ratio / sw * (maxVal - minVal));
return offset;
}
}

Re: scrollbar and data
Reply #2 - Mar 26th, 2010, 1:17pm
 
In the following code I have made use of the new sliders available in the G4P library. These sliders support stick to ticks so will work better that the one you are using.
The handleSliderEvents method  shows how to retrieve the season and trimester values.

I have rewritten the record class so that a record is for [1 club  > one season > one trimester] So each line in the file becomes 4 records.
I have also ignored storing the season end since it can be calculated from the season start (i.e. add 1).

The last part of the setup() method demonstrates how you can get the results for a particular season and trimester.

I leave the creation of the graph to you.

Cheesy

MAIN TAB
Code:
import guicomponents.*;

GWSlider sdr;

String[] labels;
String[] lands = {"IT", "ENG", "NL", "SPA" };
ArrayList records;
int seasonStart, seasonEnd , trimester;

void setup(){
 size(400,240, JAVA2D);
 // Setup the slider
 sdr = new GWSlider(this, "red_yellow18px", 20, 160, 360);
 sdr.setValueType(GWSlider.INTEGER);
 labels = new String[] {
   "T1\n06/07", "T2", "T3", "T4",
   "T1\n07/08", "T2", "T3", "T4",
   "T1\n08/09", "T2", "T3", "T4"         };
 sdr.setLimits(0, 0, labels.length-1);
 sdr.setTickLabels(labels);
 sdr.setStickToTicks(true);
 sdr.setRenderValueLabel(false);
 // Initialise the season and trimester to match the slider
 seasonStart = 2006;
 trimester = 1;
 // Read the data
 readRecords();
 
 // Demonstrate how to get the results for a particular
 // season & trimester
 Record result;
 println("\n\n### Results for 2008/9 Trimester 3 ###");
 for(int i = 0;i < lands.length; i++){
     result = getRecord(lands[i], 2008, 3);
     println(result);
 }
}

void draw(){
 background(200);
}

void handleSliderEvents(GSlider slider) {
 int v = sdr.getValue();
 seasonStart = 2006 + (v / 4);
 trimester = (v % 4) + 1;
 print("Season " +  seasonStart + "/" + (seasonStart + 1) + "  ");
 println("Trimester " + trimester);
}

/*
Read the data from the file and create a record
for each club
-> for each season
-> for each trimester
This means that there are 4 records for each club per season
*/
void readRecords(){
 String land;
 String[] pieces, lines = loadStrings("data_voetbal2.txt");
 int sstart, tri, g1, g2;
 records = new ArrayList();
 Record arecord;

 for(int i = 0; i < lines.length; i++){
   lines[i] = lines[i].trim();
   if(lines[i].length() > 0) {
     pieces = splitTokens(lines[i], " \t");
     land = pieces[0];
     sstart = Integer.parseInt(pieces[1]);
     for(int t=0; t < 4; t++){
       g1 = Integer.parseInt(pieces[2*t + 3]);
       g2 = Integer.parseInt(pieces[2*t + 4]);
       arecord = new Record (land, sstart, (t % 4) + 1, g1, g2);
       records.add(arecord);
       // Display each record created on a new line.
       println(arecord);
     }
   }
 }
}

/*
Get the record for a given club/season/trimester combination.
Returns null if a matching record can not be found.
*/
Record getRecord(String land, int sstart, int tri){
 Record search = new Record(land, sstart,tri);
 int found = records.indexOf(search);
 if(found < 0)
   return null;
 else
   return (Record)records.get(found);
}


RECORD TAB
Code:
/*
This class holds the details for a club for a particular
season and trimester
*/
class Record {
 public String land;
 public int season_s;
 public int trimester;
 public int goals, penalties;

 /*
 Used to generate search objects.
 */
 public Record(String land, int seasonStart, int trimester){
   this.land = land;
   season_s = seasonStart;
   this.trimester = trimester;
 }

 /*
 Used to create our records.
 A record is created for each club
   -> for each season
     -> for each trimester
 */
 public Record(String land, int seasonStart, int trimester, int goals , int penalties){
   this.land = land;
   season_s = seasonStart;
   this.trimester = trimester;
   this.goals = goals;
   this.penalties = penalties;
 }

 public boolean equals(Object obj){
   Record r = (Record) obj;
   return (land.equalsIgnoreCase(r.land) && season_s == r.season_s && trimester == r.trimester);
 }

 public String toString(){
   String s = land + "\t Season " + season_s + " Trimester " + trimester;
   s += ("  goals " + goals + "  penalties "+ penalties);
   return s;
 }
}



Re: scrollbar and data
Reply #3 - Mar 31st, 2010, 12:00pm
 
sorry for the late reply, i was sick.

Thank you so much, the first thing i will do tomorow is look into this.

your awsome!
Page Index Toggle Pages: 1