Linking UI method to selected child

Programming Questions

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/

//Graphic breakdown of multi day routes throughout the city of Medellin, Colombia.
//Routes are hand-drawn for aesthetic effect, and so are also loaded as a SVG file.
// Improvements
//control row in numCol dynamically instead of adjusting value every time a new day is added.
PFont font;
PShape days;
PShape[] routes;
int numDays; //count number of days
String[] daysColor;
String[] rowLabel;
float[][] metric;
float[] metricColor; //defines color of selected route
float[] metricTotal;
HashMap hm_metric = new HashMap();
//Some variables for graph
int selDay = 1;
int numCols = 7;
int marginX = 5;
int firstDay = 1;
void setup(){
size(550, 700);
font = createFont("Arial",36);
//load the map
days = loadShape("days.svg");
parseMap();
metricTotal = new float[numCols];
smooth();
}
void draw() {
background(220);
drawRef();
drawMap();
drawDays();
}
void parseMap() {
numDays = days.getChildCount(); //count number of Child routes
routes = new PShape[numDays];
//dayCodes = new String[numDays];
days.disableStyle(); //turn off styles for whole map
//make route object
for(int i = 0; i < numDays; i++){
routes[i] = days.getChild(i);
}
}
void drawMap() {
for (int i = 0; i< numDays; i++){
routes[i].disableStyle();
fill(100,99);
stroke(0);
strokeWeight(.25);
shape(routes[i]);
}
}
void drawDays(){
textFont(font, 14);
fill(0);
textAlign(CENTER);
float dayX = marginX + (((width-2*marginX)*selDay)/(numCols-1));
text(selDay+firstDay-1, dayX, 650);
strokeWeight(1);
stroke(0);
line(dayX, 620, dayX, 590);
//draw the line chart of total visitors
stroke(0);
noFill();
strokeWeight(2);
beginShape();
for (int i=1; i<numCols-1; i++){
vertex(marginX + (i*((width-2*marginX)/(numCols-1.01))),
height-70-((metricTotal[i])));
}
}
void keyPressed(){
int displayDay = selDay + firstDay;
if (keyCode == RIGHT){
if (selDay == numCols-2) selDay = 1;
else if (selDay < numCols-2) selDay = selDay+1; //when moving right don't go further than num years
}
else if (keyCode == LEFT){ //when moving left don't go further than first year
if (selDay == 1) selDay = numCols-2;
else if (selDay > 1) selDay = selDay -1;
}
}
void drawRef(){
//write the references information
noStroke();
textFont(font,12);
fill(100);
textAlign(LEFT);
text("Use Left and Right Arrow Keys to cycle through Days", 20, height-15);
textFont(font,10);
}

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)

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

//Graphic breakdown of multi day routes throughout the city of Medellin, Colombia.
//Routes are hand-drawn for aesthetic effect, and so are also loaded as a SVG file.
// Improvements
//control row in numCol dynamically instead of adjusting value every time a new day is added.
PFont font;
PShape days;
PShape[] routes;
int numDays; //count number of days
String[] dayName;
int selectedRoute= 0;
//Some variables for graph
int selDay = 1;
int numCols = 13;
int displayDay;
int marginX = 5;
int firstDay = 1;
void setup() {
size(550, 700);
font = createFont("Arial",36);
//load the map
days = loadShape("days.svg");
parseMap();
smooth();
}
void draw() {
background(20);
drawRef();
drawMap();
drawRoutes();
drawUI();
}
void parseMap() {
numDays = days.getChildCount(); //count number of Child routes
routes = new PShape[numDays];
dayName = new String [numDays];
//make route object
for(int i = 0; i < numDays; i++) {
routes[i] = days.getChild(i);
dayName[i] = routes[i].getName();
}
}
void drawRoutes() {
for (int i = 0; i< numDays; i++) {
//disable style to allow for creation in processing
routes[i].disableStyle();
stroke(220);
strokeWeight(.25);
noFill();
shape(routes[selectedRoute]);
}
}
void drawMap() {
days = loadShape("days.svg");
shape(days, 0, 0);
}
void drawUI() {
textFont(font, 14);
fill(200);
textAlign(CENTER);
float dayX = marginX + (((width-2*marginX)*selDay)/(numCols-1));
text(selDay+firstDay-1, dayX, 650);
strokeWeight(2);
stroke(200);
line(dayX, 631, dayX, 630);
//draw the line chart of total visitors
stroke(200);
noFill();
beginShape();
}
void keyPressed() {
displayDay = selDay + firstDay;
if (keyCode == RIGHT) {
if (selDay == numCols-2) selDay = 1;
else if (selDay < numCols-2) selDay = selDay+1; //when moving right don't go further than num years
selectedRoute= (selDay-1)%numDays;
}
else if (keyCode == LEFT) { //when moving left don't go further than first year
if (selDay == 1) selDay = numCols-2;
else if (selDay > 1) selDay = selDay -1;
selectedRoute= (selDay-1)%numDays;
}
}
void drawRef() {
//write the references information
noStroke();
textFont(font,10);
fill(200);
textAlign(LEFT);
text("Use Left and Right Arrow Keys to cycle through Days", 20, height-15);
textFont(font,10);
}

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.

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.

void drawMap() {
for (int i = 0; i< numDays; i++) {
shape(routes[i]);
}
}

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