如何仅在所需选项卡中显示带有图像的按钮？

Question

我有 OKNO1 和 OKNO2，我想在 OKNO1 中严格显示带有图像的按钮。

目前，带图片的按钮是全局显示的。我曾经使用 cp5.addButton 然后我用 .moveTo("okno1");

现在图像按钮使用OOP/Java。如何解决棘手的问题？你可以用什么方法完成任务。我想再次使用 void draw().

完整代码示例：

import controlP5.*;
ControlP5 cp5;
ImageButton button;
Textlabel I;
Textlabel tempIn;

void setup() {
  size(700, 420, P3D);
  surface.setResizable(false);
  smooth();
  frameRate(30);
  cp5 = new ControlP5(this);

  PFont p = createFont("Times New Roman", 18);
  ControlFont font=new
    ControlFont(p);
  cp5.setFont(font);

  cp5.addTab("okno2")
    .setColorBackground(color(0, 160, 100))
    .setColorLabel(color(255))
    .setColorActive(color(255, 128, 0));

  cp5.getTab("default")
    .activateEvent(true)
    .setLabel("okno1")
    .setId(1);

  cp5.getTab("okno2")
    .activateEvent(true)
    .setId(2);

  tempIn = cp5.addTextlabel("Sostoyanie")
    .setText("1")
    .setFont(createFont("Times New Roman", 20))
    .setColor(color(0xffffff00))
    .setPosition(155, 35);

  I = cp5.addTextlabel("Impuls")
    .setText("2")
    .setPosition(155, 35)
    .setFont(createFont("Times New Roman", 20))
    .setColor(color(0xffffff00))
    .moveTo("okno2");

  int w = 99;
  int h = 25;
  button = new ImageButton(112, 137, w, h, 
    new PImage[]{
    loadImage("0.png"), // off
    loadImage("1.png"), // 10
    loadImage("2.png"), // 20
    loadImage("3.png"), // 30
    loadImage("4.png"), // 40
    loadImage("5.png"), // 50
    loadImage("6.png"), // 60
    });
}
void draw() {
  background(0);
  button.draw();
}
void mousePressed() {
  button.mousePressed(mouseX, mouseY);
  println(button.min);
}
PImage getImage(int w, int h, int c) {
  PImage img = createImage(w, h, RGB);
  java.util.Arrays.fill(img.pixels, c);
  img.updatePixels();
  return img;
}
class ImageButton {
  int min = 0;
  PImage[] stateImages;
  int stateIndex;
  int x, y;
  int w, h;
  String label = "ВЫКЛ";
  ImageButton(int x, int y, int w, int h, PImage[] stateImages) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.stateImages = stateImages;
  }
  void mousePressed(int mx, int my) {
    boolean isOver = ((mx >= x && mx <= x + w) &&
      (my >= y && my <= y + h) ); // check vertical
    if (isOver) {
      min += 10;
      stateIndex++;
      if (min>60) {
        min = 0; 
        stateIndex = 0;
        label = "ВЫКЛ";
      } else {
        label = min + " Мин";
      }
    }
  }
  void draw() {
    if (stateImages != null && stateIndex < stateImages.length) {
      image(stateImages[stateIndex], x, y, w, h);
    } else {
      println("error displaying button state image");
      println("stateImages: ");
      printArray(stateImages);
      println("stateIndex: " + stateIndex);
    }
}

Answer 1

帮助别人（包括我自己）帮助你：

保持代码整洁（删除任何不必要的内容，例如 getImage）
格式化代码以便于阅读。我怎么强调都不过分。

为了帮助自己始终确保完全理解所有代码：

阅读
在你的脑海中想象一下它会怎样运行
运行它并观察实际行为
了解您的心智模型与计算机所做的有何不同。

这通常会帮助您调试代码。还要结帐 Kevin Workman's Debugging tutorial.

关于您的问题：按钮在 draw() 中一直呈现。您只想在第一个选项卡处于活动状态时绘制它，因此：

获取第一个选项卡
检查它是否活跃
如果是，渲染按钮

例如，您可以使用：

而不是 button.draw()

if(cp5.getTab("default").isActive()){
    button.draw();
  }

这样就可以了，但是随着界面变得越来越复杂，您可能希望将每个选项卡绘制的内容分组。下面是关于如何组织 UI 每个选项卡有更多控件的想法：

添加一个全局变量（在您的代码顶部）以跟踪当前选项卡：int currentTab = 1;
在 draw() 中调用 displayTabs(); 而不是 button.draw() 来处理每个选项卡绘图。（更多关于 displayTabs() 波纹管）
controlEvent()更新currentTab

像这样：

void controlEvent(ControlEvent event) {
  // update current tab only if the current event comes from a tab (and not other controllers) 
  if(event.isTab()){
    currentTab = event.getId();
  }
}

想法是 controlEvent 将在任何 ControlP5 组件（控制器）为 clicked/updated 时触发。如果它是一个选项卡，您可以使用 displayTabs():

更新 currentTab 以了解 draw() 哪些内容到 draw()

void displayTabs(){
  switch(currentTab){
    case 1:
      displayTab1();
      break;
    case 2:
      displayTab2();
      break;
  }
}

void displayTab1(){
  button.draw();
}

void displayTab2(){
  // render stuff for tab 2 only
}

所以有一个开关根据 currentTab 值调用一个函数或另一个函数。这样做的好处是，您以后可以轻松地为另一个选项卡复制另一个 case，并且每个选项卡内容都被整齐地划分。

如何仅在所需选项卡中显示带有图像的按钮？

How to display a button with an image only in the desired tab?

java

processing

control-p5