Control P5 Library Questions

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; } }