Question

我想请一些帮助将这种表现转化为更具互动性的东西。我正在使用Processsing最新版本。主要的想法是我在excel中有一个表，我将它导入到processsing中。到现在为止还挺好。将值显示为气泡。我的问题是想要创建按钮以查看每个气泡的更多详细信息。因此，单击按钮A，根据导入的表格，相应的bubbleA将亮起并显示其特定值。我不知道如何将按钮连接到每个气泡，也不知道如何再次按下按钮时将气泡转到原始状态。

我不是来自编程领域，我只是设法通过我在网上找到的信息得到这么远，所以代码必须搞砸了。我试图使用Processing中的库，但我真的不明白controlP5是如何工作的......我认为结构比我现在能处理的更先进。所以，如果有人能帮助我，我会非常感激。

Table B_A_table;
//Bubble[] bubbles = new Bubble[29];
ArrayList<Bubble> bubbles = new ArrayList<Bubble>();
float scale = 3;
int c_verdeClaro = color(182,189,149);
import controlP5.*;
ControlP5 cp5;
PFont font;
PFont font1;


void setup() {
  size(1000, 1000);
  colorMode(HSB,255);
  loadData();
  font = createFont("Verdana", 18);
  font1 = createFont("Verdana Bold", 18);
  //font = loadFont("Arial-Black-48.vlw");
//BEGIN TEST 
cp5 = new ControlP5(this);


  noStroke();
  smooth();

//TEST

cp5 = new ControlP5(this);
  ButtonBar b = cp5.addButtonBar("bar")
     .setPosition(500, 0)
     .setSize(400, 20)
     .addItems(split("Man Woman 20s 30s 40s 50s µµ½É±Ç"," "))
     ;
     println(b.getItem("Man"));
  b.changeItem("a","text","first");
  b.changeItem("b","text","second");
  b.changeItem("c","text","third");
  b.onMove(new CallbackListener(){
    public void controlEvent(CallbackEvent ev) {
      ButtonBar bar = (ButtonBar)ev.getController();
      println("hello ",bar.hover());

    }
  });






//WND TEST 


}

void draw() {

  // Display all bubbles
  background(0);
    Graph_Bike_Aware_Experience_Sim();
  //Graph_Bike_Uso_Satisf();
  pushMatrix();
  translate(400,500);
      for (Bubble bubble : bubbles){
    bubble.display();
  }
    popMatrix();
    }



void loadData() {
  // "header"  indicates the file has header row. The size of the array 
  // is then determined by the number of rows in the table. 
  B_A_table = loadTable("BikeAwareExpr_Nao.csv", "header");
  for (int i = 0; i<B_A_table.getRowCount(); i++) {
    // Iterate over all the rows in a table.
    TableRow row = B_A_table.getRow(i);
    // Access the fields via their column name (or index).
    float x = row.getFloat("awareness_x")*scale;
    float y = row.getFloat("experi")*scale;
    float d = row.getFloat("awareness_x")*0.2;
    String n = row.getString("Awareness_Bike");
    Float id = row.getFloat("ID");
    // Make a Bubble object out of the data from each row.
    bubbles.add(new Bubble(x, y, d, n,id));
    //bubbles[i] = new Bubble(x, y, d, n);
  }
}

// This simple Bubble class draws a circle to the window 
// and displays a text label when the mouse hovers.
class Bubble {
  float x, y;
  float diameter;
  String name;
  Float id;

  // Create the Bubble
  Bubble(float tempX, float tempY, float tempD, String s, Float id) {
    x = tempX;
    y = tempY;
    diameter = tempD;
    name = s;
  }

  // Display the Bubble
  void display() {
    stroke(220);
    strokeWeight(1);
    noFill();
    ellipse(x, y, diameter, diameter);
    fill(200);
    textFont(font,15);
    textAlign(CENTER);
    text(name, x,y);

  }
}

void Graph_Bike_Aware_Experience_Sim(){
  pushMatrix();
  int tam_table = B_A_table.getRowCount();
  translate(400,500);
  stroke(150);
  strokeWeight(1);
  line( - 100 *scale, 0*scale, + 100*scale, 0*scale);
  line(0*scale,  - 100*scale, 0*scale, + 100*scale);
  //fill(c_verdeClaro);
  noStroke();

  fill(255);
  textFont(font,13);
  text("Experience", 40 , -97*scale);
  text("Awareness", -89*scale, -10);
  fill(50);
  //textFont(Arial-Black-48, 32);
  text("0", 10,15);
  pushMatrix();
  fill(0);
  textFont(font1,30 );
  text("IDEAL", 80*scale , -120*scale);
  fill(70);
  textFont(font1,25 );
  text("Bicycle", 0 , -110*scale);
  popMatrix();
popMatrix();

}
/*void Graph_Bike_Uso_Satisf(){
  pushMatrix();
  int tam_table = B_A_table.getRowCount();
  translate(900,400);
  stroke(150);
  strokeWeight(1);
  line( - 100 *scale, 0*scale, + 100*scale, 0*scale);
  line(0*scale,  - 100*scale, 0*scale, + 100*scale);
  //fill(c_verdeClaro);
  noStroke();
  c_verdeClaro_grad();
  c_verdeEscuro_grad();
  c_Vermelho_grad();



  fill(255);
  text("Experience", 40 , -97*scale);
  text("Awareness", -89*scale, -10);
  fill(0);
  //textFont(Arial-Black-48, 32);
  text("word", 10, 50);
  text("IDEAL", 97*scale , -97*scale);
  popMatrix();

}
*/

Answer 1

要在没有面向对象编程或“OOP”的情况下处理此问题。浪费时间和代码。

但放松OOP也被称为＆＃34;对象＆＃34;或＆＃34;类＆＃34 ;.这并不难。事实上，学习起来很简单，我的意思是基本的东西。它使事情变得非常容易。

在您的情况下，您需要构建一个对象来表示您的数据。然后，您创建其中几个，填充数据，所有将保持在一起。有点了解自己的事业。

通常的例子是

Class car

有这些属性

颜色

板

然后你可以说：

制作蓝色3231汽车！
制作一辆红色的3001轿车！

依旧......

当你需要它时，你可以问，蓝车是你的盘子，它会知道。

他们也可能有某种行为＆＃34;称为函数或方法。那些做的事情，所以你可以说：＆＃34;红色，右转＆＃34;或者＃34;泡泡，告诉我你的数据！＆＃34;他们会告诉你的。：）

尽管如此，尝试教这个听起来没有意义。有很多很棒的教程。如果你愿意，可以使用Duck Duck Go :)或google。

这一here来自Processing's tutorials section本身。伟大的开始。 :)

将按钮链接到csv文件中的导入信息

1 个答案: