linking sliders with imported data to display an image

jhouck89

linking sliders with imported data to display an image

in Contributed Library Questions • 6 months ago

I'm new to processing and programming in general. I'm trying to develop an interface to display design iterations using exported screenshots and parameter values (.csv file) from Grasshopper/Rhino 3D. I've managed put together code I've found online and in tutorial examples to get pretty far. I've been able to load in all 1000 screenshots, create sliders from controlp5, and load in the .csv file fairly well. My problem is linking them together.

I have 3 sliders for X,Y,Z values in processing (integers, 1 to 10). The data exported from Grasshopper has the screenshot file name in the first column then the corresponding X,Y,Z values that apply to the screen shot. Like this: "animation0002.png, 1, 1, 3". Each line has a separate screenshot filename with its data.

What I want to do is have processing display the correct screenshot that matches the slider's inputs. I'm not sure how to go about searching or matching the string array with the sliders. I'll post my code below. Let me know if anything is unclear. Thanks!

import controlP5.*;
ControlP5 cp5;
Slider abc;
int numFrames = 1000; // The number of screenshots to cycle through
PImage[] images = new PImage[numFrames];
void setup() {
size(1800,1000);
noStroke();
for (int i = 0; i < numFrames; i++){
String imageName = "animation" + nf(i, 4) + ".png";
images[i] = loadImage(imageName); // Load in the screenshots
}
String[] theFile = loadStrings("animation_data.csv"); // Load data file
String[][] dataTable = new String[theFile.length][4];
for (int i = 0; i < theFile.length; i++) {
String[] pieces = split(theFile[i], ",");
for (int j = 0; j < 4; j++) {
dataTable[i][j] = pieces[j];
println("data[" + i + "][" + j + "] = " + dataTable[i][j] );
}
}
cp5 = new ControlP5(this);
PFont p = createFont("Calibri",18);
cp5.setControlFont(p);
cp5.setColorForeground(0xff7F7F7F);
cp5.setColorBackground(0xffBFBFBF);
cp5.setColorActive(0xff404040);
cp5.setColorLabel(0xff000000);
cp5.setColorValue(0xff000000);
cp5.addSlider("X")
.setPosition(50,100)
.setSize(400, 10)
.setRange(1,10)
.setValue(5)
.setNumberOfTickMarks(10)
.setSliderMode(Slider.FIX)
.setColorTickMark(0)
.setColorValueLabel(0)
;
cp5.getController("X").getValueLabel().align(ControlP5.LEFT, ControlP5.TOP_OUTSIDE).setPaddingX(0);
cp5.getController("X").getCaptionLabel().setPaddingX(10);
cp5.addSlider("Y")
.setPosition(50,200)
.setSize(400, 10)
.setRange(1,10)
.setValue(5)
.setNumberOfTickMarks(10)
.setSliderMode(Slider.FIX)
.setColorTickMark(0)
.setColorValueLabel(0)
;
cp5.getController("Y").getValueLabel().align(ControlP5.LEFT, ControlP5.TOP_OUTSIDE).setPaddingX(0);
cp5.getController("Y").getCaptionLabel().setPaddingX(10);
cp5.addSlider("Z")
.setPosition(50,300)
.setSize(400, 10)
.setRange(1,10)
.setValue(5)
.setNumberOfTickMarks(10)
.setSliderMode(Slider.FIX)
.setColorTickMark(0)
.setColorValueLabel(0)
;
cp5.getController("Z").getValueLabel().align(ControlP5.LEFT, ControlP5.TOP_OUTSIDE).setPaddingX(0);
cp5.getController("Z").getCaptionLabel().setPaddingX(10);
}
void draw() {
background(255);
float x = cp5.getController("X").getValue();
int intx = int(x);
float y = cp5.getController("Y").getValue();
int inty = int(y);
float z = cp5.getController("Z").getValue();
int intz = int(z);
image(images[intx], 700, height/6, images[5].width, images[5].height); // Displayed image, linked with "X" slider right now.
// I want it to link with the data to display the correct image for the slider input.
text(intx, 50, 800);
text(inty, 50, 825);
text(intz, 50, 850);
fill(0);
}
void controlEvent(ControlEvent theEvent) {
if(theEvent.isController()) {
print("control event from : "+theEvent.controller().name());
println(", value : "+theEvent.controller().value());
}
}

Replies(4)

amnon.owed

Re: linking sliders with imported data to display an image

6 months ago

Different options, but we need more information.

Is there a logical order to the number sequences? With regard to the animation in the array there is, that's just 0-1000 corresponding with the filename. With regard to the xyz also? If so, then you can just take an xyz and turn it into an index to use. However we can't see if this is possible without the csv or more information.

If there is no logical order, then there are more possibilities, for example a simple class (which holds all the relevant and related information) or a HashMap (which can match a key -for example the xyz- with the correct filename/index).

jhouck89

Re: linking sliders with imported data to display an image

6 months ago

Right now I'm testing it with a simple box with XYZ dimensions ranging from 1-10 each. So there are 1000 possible combinations. Basically the csv looks like this:

animation0000.png,1,1,1

animation0001.png,1,1,2

animation0002.png,1,1,3

animation0003.png,1,1,4

animation0004.png,1,1,5

animation0005.png,1,1,6

animation0006.png,1,1,7

animation0007.png,1,1,8

animation0008.png,1,1,9

animation0009.png,1,1,10

animation0010.png,1,2,1

animation0011.png,1,2,2

It continues with the same pattern to "animation0999.png, 10,10,10". In the future I'm going to be using more complex parameters and relationships between so that the sliders might not directly correspond with simple xyz dimensions like in this example.

So to answer your question, there is a logical order. They way they are loaded the first line of data and the corresponding image should have the same index.

amnon.owed

Re: linking sliders with imported data to display an image

6 months ago

Right, with such a logical order you can use a simple translation method:

int xyzToIndex(int x, int y, int z) {
return (x-1)*100 + (y-1)*10 + (z-1);
}

You enter the current xyz and you get the corresponding image's index.

This is the first solution proposed above.

As stated, for non-logical order you need other solutions such as a class or a HashMap.

jhouck89

Re: linking sliders with imported data to display an image

6 months ago

Thanks a lot, that worked! I think when I try this with more complex values I'll have to use the HashMap but I'll save that for later. Thanks again.

Top Reply