Loading...
Logo
Processing Forum
Programming Questions
smithvisual
smithvisu..

Linking UI method to selected child

in Programming Questions  •  1 year ago  
This is my first Processing project, so please feel free to point out any additional inaccuracies in the code . 

This is the issue. 

I've been able to draw a map using imported PShape SVG and grab children from it. I've been able to draw a UI element that cycles through a series of 'selected Days.' But I can't get the current selected day on the UI element to reflect a color change in the Map. 

I'm using this sketch as a reference for what I've done:  http://www.openprocessing.org/sketch/16277

In her example she's importing a csv data sheet to control the size of her specific selected items on the map. I don't think i need to do that, because I'm only selecting the child SVG group and changing the color based on the corrosponding selected number in the UI method. 

There are a few variable defined globally that aren't being used because there were part of my experiment in trying to change the sources sketch into my own.... 

here is a link to the .svg file if you want to include in in a data directory:  http://www.smithvisual.com/medellin/

Copy code
  2.     //Graphic breakdown of multi day routes throughout the city of Medellin, Colombia. 
  3.     //Routes are hand-drawn for aesthetic effect, and so are also loaded as a SVG file. 
  4.     // Improvements
  5.     //control row in numCol dynamically instead of adjusting value every time a new day is added. 
  6.     
  7.     
  8.     PFont font;
  9.     PShape days;
  10.     PShape[] routes;
  11.     int numDays; //count number of days
  12.     String[] daysColor;
  13.     
  14.     String[] rowLabel;
  15.     float[][] metric;
  16.     float[] metricColor;  //defines color of selected route
  17.     float[] metricTotal;
  18.     
  19.     HashMap hm_metric = new HashMap();
  20.     
  21.     //Some variables for graph
  22.     int selDay = 1;
  23.     int numCols = 7;
  24.     
  25.     int marginX = 5;
  26.     int firstDay = 1;
  27.     
  28.     
  29.     void setup(){
  30.      size(550, 700);
  31.      
  32.      font = createFont("Arial",36); 
  33.      //load the map
  34.      days = loadShape("days.svg");
  35.      parseMap();
  36.      metricTotal = new float[numCols];
  37.     
  38.      smooth();
  39.     
  40.     }
  41.     
  42.     void draw() {
  43.       background(220);
  44.       drawRef();
  45.       drawMap();
  46.       drawDays();
  47.     
  48.     }
  49.     
  50.     void parseMap() {
  51.       numDays = days.getChildCount(); //count number of Child routes
  52.       routes = new PShape[numDays];
  53.       //dayCodes = new String[numDays];
  54.       days.disableStyle(); //turn off styles for whole map
  55.       
  56.       //make route object
  57.       for(int i = 0; i < numDays; i++){
  58.         routes[i] = days.getChild(i);
  59.       }
  60.     }
  61.     
  62.     void drawMap() {
  63.       for (int i = 0; i< numDays; i++){
  64.         routes[i].disableStyle();
  65.         fill(100,99);
  66.         stroke(0);
  67.         strokeWeight(.25);
  68.         shape(routes[i]);
  69.       }
  70.     }
  71.     void drawDays(){
  72.       textFont(font, 14);
  73.       fill(0);
  74.       textAlign(CENTER);
  75.       float dayX = marginX + (((width-2*marginX)*selDay)/(numCols-1));
  76.       text(selDay+firstDay-1, dayX, 650);
  77.       strokeWeight(1);
  78.       stroke(0);
  79.       line(dayX, 620, dayX, 590); 
  80.       //draw the line chart of total visitors
  81.       stroke(0);
  82.       noFill();
  83.       strokeWeight(2);
  84.       beginShape();
  85.       for (int i=1; i<numCols-1; i++){
  86.         vertex(marginX + (i*((width-2*marginX)/(numCols-1.01))),
  87.               height-70-((metricTotal[i])));
  88.       }
  89.       
  90.     }
  91.     void keyPressed(){
  92.       int displayDay = selDay + firstDay;
  93.       
  94.       if (keyCode == RIGHT){
  95.         if (selDay == numCols-2) selDay = 1;
  96.         else if (selDay < numCols-2) selDay = selDay+1;  //when moving right don't go further than num years
  97.       }
  98.       else if (keyCode == LEFT){                //when moving left don't go further than first year
  99.         if (selDay == 1) selDay = numCols-2;
  100.         else if (selDay > 1) selDay = selDay -1;
  101.       }
  102.     }
  103.     void drawRef(){
  104.         //write the references information
  105.       noStroke();
  106.       textFont(font,12);
  107.       fill(100);
  108.       textAlign(LEFT);
  109.       text("Use Left and Right Arrow Keys to cycle through Days", 20, height-15);
  110.       textFont(font,10);
  111.     }
  112.     
I was thinking about using an if statement in void draw, but don't really know what to include.  


Thanks for any help you can give me. Very much appreciated. I'll be sure to post the sketch once I'm finished. This forum has already been a massive help. 

Replies(3)

smithvisual
smithvisu..

Re: Linking UI method to selected child

1 year ago
So. After a few days and some help from some friends I figured out the issue. Again. this is my first processing sketch, so please feel free to point out any ineffeciencies or inaccuracies in the code.

I'm posting this incase anyone else has a similar issue. Basically, what solved my problem was assigning a int variable called 'selectedRoute' to the shape call for the drawRoutes function. then associating that with the key press commands. That part was figured out by a friend of mine, Still pretty green at all of this 

Copy code

  3. //Graphic breakdown of multi day routes throughout the city of Medellin, Colombia. 
  4. //Routes are hand-drawn for aesthetic effect, and so are also loaded as a SVG file. 
  5. // Improvements
  6. //control row in numCol dynamically instead of adjusting value every time a new day is added. 

  8. PFont font;
  9. PShape days;
  10. PShape[] routes;
  11. int numDays; //count number of days

  13. String[] dayName;


  16. int selectedRoute= 0;

  18. //Some variables for graph
  19. int selDay = 1;
  20. int numCols = 13;
  21. int displayDay;


  24. int marginX = 5;
  25. int firstDay = 1;


  28. void setup() {
  29.   size(550, 700);
  30.   font = createFont("Arial",36); 
  31.   //load the map
  32.   days = loadShape("days.svg");

  34.   parseMap();

  36.   smooth();
  37. }

  39. void draw() {
  40.   background(20);
  41.   drawRef();
  42.   drawMap();
  43.   drawRoutes();
  44.   drawUI();
  45. }

  47. void parseMap() {
  48.   numDays = days.getChildCount(); //count number of Child routes
  49.   routes = new PShape[numDays];
  50.   dayName = new String [numDays];

  52.   //make route object
  53.   for(int i = 0; i < numDays; i++) {
  54.     routes[i] = days.getChild(i);
  55.     dayName[i] = routes[i].getName();
  56.   }
  57. }



  61. void drawRoutes() {
  62.   for (int i = 0; i< numDays; i++) {
  63.     //disable style to allow for creation in processing
  64.     routes[i].disableStyle();
  65.     stroke(220);
  66.     strokeWeight(.25);
  67.     noFill();
  68.     shape(routes[selectedRoute]);
  69.   }
  70. }
  71. void drawMap() {
  72.   days = loadShape("days.svg");
  73.   shape(days, 0, 0);
  74. }
  75. void drawUI() {
  76.   textFont(font, 14);
  77.   fill(200);
  78.   textAlign(CENTER);
  79.   float dayX = marginX + (((width-2*marginX)*selDay)/(numCols-1));
  80.   text(selDay+firstDay-1, dayX, 650);
  81.   strokeWeight(2);
  82.   stroke(200);
  83.   line(dayX, 631, dayX, 630); 
  84.   //draw the line chart of total visitors
  85.   stroke(200);
  86.   noFill();
  87.   beginShape();
  88. }
  89. void keyPressed() {
  90.   displayDay = selDay + firstDay;

  92.   if (keyCode == RIGHT) {
  93.     if (selDay == numCols-2) selDay = 1;
  94.     else if (selDay < numCols-2) selDay = selDay+1;  //when moving right don't go further than num years
  95.     selectedRoute= (selDay-1)%numDays;
  96.   }
  97.   else if (keyCode == LEFT) {                //when moving left don't go further than first year
  98.     if (selDay == 1) selDay = numCols-2;
  99.     else if (selDay > 1) selDay = selDay -1;
  100.     selectedRoute= (selDay-1)%numDays;
  101.   }
  102. }
  103. void drawRef() {
  104.   //write the references information
  105.   noStroke();
  106.   textFont(font,10);
  107.   fill(200);
  108.   textAlign(LEFT);
  109.   text("Use Left and Right Arrow Keys to cycle through Days", 20, height-15);
  110.   textFont(font,10);
  111. }

PhiLho
PhiLho

Re: Linking UI method to selected child

1 year ago
OK, for inefficiency, we have a classical here: you load (and parse) days.svg on each frame, in drawMap(). Which isn't useful since you already loaded it in setup(), anyway.
smithvisual
smithvisu..

Re: Linking UI method to selected child

1 year ago
Finally got around to fixing my code for the efficiency issue you outlined. Thanks for the advice PHI. 

this is the snippet of code from void draw map that now relies on void setup for the initialized shape.

Copy code
  2. void drawMap() {
  3.   for (int i = 0; i< numDays; i++) {
  4.     shape(routes[i]);  
  5.   }
  6. }
Pretty easy once I thought about it for a minute.....Took me a while to really understand how these conditionals work with arrays :) Still kind of swatting in the dark....

Hope this helps someone. 
Top Reply

Statistics

  • 3 Replies
  • 522  Views
  • 0 Followers

Actions

Related Posts