Control P5 Library Questions

nvwingh

I am getting data from a public API and displaying them in a Line Graph. This part of the sketch is working. Now I would like to add a button to press to launch the data and the line graph. I am using Control P5 library for this.

I have 4 questions:

• In general, I find the methods ok to find, but not as easy to understand. Do you have tips/ tricks to best approach this?

• The Line Graph appears when launching the sketch, not when pressing the button, how can I change this?

• What is the appropriate method for changing the color of the button? I have tried ".setColorValue(color(#7a1018))" and ".setColorForeground(color(#7a1018))", but I cannot get them to work..

• What is the appropriate method for changing the shape of the button? I cannot find a method for this..

The code is the following - everything is working as planned, except for the controlP5 part..

import controlP5.*;

String API_Key = "f77c39703fb6be71e2c5a96e58edc077";
String url = "http://api.openweathermap.org/data/2.5/forecast?q=Brussels&mode=json";
float speedBru; 
float[] winddata, tempdata, clouddata;
String[] dtdata, ddata_adapted, tdata_adapted; 
int margin; 
float graphHeight, graphWidth;
float XSpacer;
int size_list;
float overallMin_windspeed, overallMax_windspeed; 
PVector[] positions = new PVector[40]; 
ControlP5 cp5; 

void setup() {
  size(800, 800);
  background(250);
  loadData();
  calculatedraw();
  cp5 = new ControlP5(this);
  cp5.addButton("Wind")
     .setValue(0)
     .setPosition(0,50)
     .setSize(50,50);
     //.setColorValue(color(#7a1018))
     //.setColorForeground(color(#7a1018));
}

void Wind(){

  for (int i=0; i<positions.length; i++){
     stroke (#008080,80); 
     line(positions[i].x, margin, positions[i].x, height-margin); 
     //first put down textSize, then text 
     textSize(5); 
     text(tdata_adapted[i], positions[i].x-2, height-margin+20);

    if(i>0){
      stroke(#1A8011);
      line(positions[i].x, positions[i].y, positions[i-1].x, positions[i-1].y);
    }
  }
  //first put down textSize, then text 
  textSize(20);
  text(overallMax_windspeed,5,margin);
  text(overallMin_windspeed,5,height-margin);

  fill(200);
   for (int i=0; i<positions.length; i++){
     ellipse (positions[i].x, positions[i].y, 10,10);
   }
}

void calculatedraw(){

  overallMin_windspeed = min(winddata); 
  overallMax_windspeed = max(winddata); 

  margin = 50;
  graphHeight = (height - margin)-margin;
  graphWidth = (width- margin)-margin;
  XSpacer = graphWidth/(size_list-1);

  for (int i=0; i<size_list; i++){
    float adjScore_windspeed = map(winddata[i], overallMin_windspeed, overallMax_windspeed, 0, graphHeight);  
    float yPos_windspeed = height - margin - adjScore_windspeed; 
    float xPos_windspeed = margin + (XSpacer * i); 
    positions[i] = new PVector(xPos_windspeed, yPos_windspeed);
  } 
}

void loadData(){
  JSONObject jsonBru = loadJSONObject(url+"&APPID="+API_Key);
  JSONArray listBru = jsonBru.getJSONArray("list");
  size_list = listBru.size();
  winddata = new float[40];
  tempdata = new float[40];
  clouddata = new float[40];
  dtdata = new String[40];
  ddata_adapted = new String[40];
  tdata_adapted = new String[40];

  for (int i=0; i<listBru.size(); i++){
     JSONObject data = listBru.getJSONObject(i);
     JSONObject windBru = data.getJSONObject("wind");
     float windspeed = windBru.getFloat("speed");
     winddata[i] = windspeed;
     JSONObject main = data.getJSONObject("main");
     float temperature = main.getFloat("temp");
     tempdata[i] = temperature; 
     JSONObject clouds = data.getJSONObject("clouds");
     float cloud_perc = clouds.getFloat("all");
     clouddata[i] = cloud_perc; 
     String date_time = data.getString("dt_txt");  
     dtdata[i] = date_time;   
     String date_adapted = date_time.substring(8,10)+"/"+date_time.substring(5,7);
     ddata_adapted[i] = date_adapted; 
     String time_adapted = date_time.substring(11,13)+"h";
     tdata_adapted[i] = time_adapted;
  }
}

kfrajer

Please format your code. Edit your post (gear on top right side of any of your posts), select your code and hit ctrl+o. Leave an empty line above and below your block of code. Details here: https://forum.processing.org/two/discussion/15473/readme-how-to-format-code-and-text

For the color, have you tried using in rgb format? Not sure if webformat is accepted by controlP5.

For the button to show the graph, when you click the button, you will change a boolean flag to true. When this boolean flag changes to true, you draw your graph in draw(). Does it make sense? That is the generic concept. Format your code and I will have a look at your code.

For changing the shape of the button... what do you mean? Do you want to use an image? There is a method for buttons called setImage(). You need to provide three images corresponding to three states.

Kf

nvwingh

Code is formatted.. I have tried using rgb format, this is also not working. I cannot find the method for changing the color. The idea with the button is to have a round button with a slightly thicker border. So question is, how do I change the shape of the button to "ellipse".

If I understand correctly; in the Wind() method in sketch, I indicate a condition "if buttontrue(), and then put my code"? And then toggle button of in case another button is pressed?

Thank you for your help!