How to invoke resize(int,int) on a array type PImage()

mmuylle

This is needed to adapt the graphics to the different sizes of my android devices.

import controlP5.*;
int buttonSize = ... ;
ControlP5 MyController;
Button but_Play;
MyController = new ControlP5(this);

  // make button Play

  PImage[] play_Img = {loadImage("play.png"), loadImage("play.png"), loadImage("play.png")};

  //**play_Img.resize(0,60); = not allowed**

  but_Play = MyController.addButton("but_Play")
    .setValue(0)
    .setPosition(tab, dotWidth)
    .setSize(buttonSize, buttonSize)
    .setImages(play_Img)
    .updateSize()
    ;

_vk

playImg is an array, you need to call resize in a PImage. Loop trough array and call in each Image returned, I guess should work.

playImg[i].resize(0,60);

note naming collections with plural names help sporting this things, perhaps playImages...

KevinWorkman

Just use a for loop to loop through each PImage in the array.

GoToLoop

As already mentioned, playImg is an array.
Apart from clone() and other Object's methods, arrays got no more methods!

And why reload the same file? We can simply make cloned copies of it w/ get() or copy():
https://processing.org/reference/PImage_get_.html
https://processing.org/reference/PImage_copy_.html

You're gonna need an extra array for your Button objects too: :P

// forum.processing.org/two/discussion/13496/
// how-to-invoke-resize-int-int-on-a-array-type-pimage

// 2015-Nov-12

import controlP5.ControlP5;
import controlP5.Button;

final int QTY = 3, DIAM = 64;
final PImage[] imgs = new PImage[QTY];
final Button[] btns = new Button[QTY];

PImage pic, img = loadImage("play.png");
ControlP5 controller = new ControlP5(this);

for (int i = 0; i != QTY; ) {
  Button btn = btns[i] = controller.addButton("but_Play");
  (pic = imgs[i] = img.get()).resize(++i * DIAM, i * DIAM);
  btn.setImage(pic).updateSize().setValue(0);
}

mmuylle

comment to _vk and KevinWorkman:

  PImage[] playImages = {loadImage("play.png"), loadImage("play.png"), loadImage("play.png")};

  for (int i = 0; i != 3; ) {
    playImages[i].resize(0,60);
  }

  but_Play = MyController.addButton("but_Play")
    .setValue(0)
    .setPosition(tab, dotWidth)
    .setSize(buttonSize, buttonSize)
    .setImages(playImages)
    .updateSize()
    ;

does not work and freeze the program

_vk

for (int i = 0; i != 3; ) {

you r not incrementing i here... never ending loop...

mmuylle

Comment to GoToLoop As I have several buttons, for the moment using 3 times the same imgs, but also have several toggles, using 2 imgs for the different state, the resizing should be repeated. And there I run into trouble. I also don't understand why the import controlP5.Button ( import controlP5.Toggle) is needed as I thought that this is included in the import controlP5.ControlP5 statement. In the console the following type of warning is repeated WARNING: Controller with name "/but_Play" already exists. overwriting reference of existing controller. thanks

GoToLoop

• My ControlP5's knowledge is almost nil. And I've guessed wrong you needed 3 Button objects.
• My new guess is that you want every PImage resize() according to displayWidth & displayHeight.
• If that's correct, you just need to resize() once and keep it so. No need to re-apply it.
• I also think your other PImage file would be "stop.png".
• And that you wish for them to get "toggled", right?
• Well, that is as far as I'm gonna try to guess. I can't even run it for I don't have those files.

My new attempt below: :-\"

// forum.processing.org/two/discussion/13496/
// how-to-invoke-resize-int-int-on-a-array-type-pimage

// 2015-Nov-12

import controlP5.ControlP5;
import controlP5.Button;

final PImage[] playStopImgs = new PImage[2];
boolean isPlayButton = true;
Button playBtn;

void setup() {
  getSurface().setSize(displayWidth*3/4, displayHeight*3/4);

  (playStopImgs[0] = loadImage("stop.png")).resize(width/32, height/32);
  (playStopImgs[1] = loadImage("play.png")).resize(width/32, height/32);

  ControlP5 controller = new ControlP5(this);
  playBtn = controller.addButton("but_Play");
  toggleBtnImg(playBtn, isPlayButton, playStopImgs);
}

static final Button toggleBtnImg(Button btn, boolean b, PImage... imgs) {
  return btn.setImage(imgs[int(b)]).updateSize();
}

GoToLoop

I also don't understand why the import controlP5.Button; ...

I was just being explicit about which classes from controlP5 library were being imported.
Feel free to delete them and stick w/ generalized import controlP5.*; only. O:-)

mmuylle

Sorry for waiting but I first tried to understand and implement your solutions in my program. My program actually works fine in Java mode therefore I am a bit reluctant to change too much. To get it running on android devices there are still some problems to solve. One is a very practical one, getting the graphics for the buttons/toggles resizing to the screens of the devices. For most of the GUI I rely on the controlP5 library which I am happy with. The Button controller of the library requires three images to cover the different states of the buttons. The Toggle controller only two. In my program I have 15 buttons and 3 toggles. For the moment I generate each button / toggle separately. I understand that this could be programmed more compact but for the moment I do not care to write (cut and paste) a bit more lines as it helps me to understand what’s going on. Below you can find a working extract from my program in which I implemented you solutions. As you can see, the button solution works fine but when applying this to the toggle it also seems to work, but not quit as intended. First the toggle img is not resized to the same size as that of the buttons. This is of course clear as the resizing is dependent of the number of imgs ( 2 for the toggle, 3 for the buttons). I tried to fix this but did not find a solution. Second you can see (in the console) that the toggle value actually changes on clicking. But the corresponding img is not shown. This makes me wonder If the controller really works. ( in my original program, where the definition of the controller is similar to that of the buttons, it works fine). Last I tried to implement you second solution but could not get it running. So I had to comment out these lines. I don’t know how to upload the 4 required png’s. But they are just squares of 180x180 px. Maybe this makes things clearer. Anyway thanks for your help. Take your time as I cannot read the forum until Saturday afternoon. Regards, marc.

import controlP5.*;
ControlP5 MyController;

int start_time; // Add a holder for the startup time in milliseconds
// Flow will leave the function if called within 1 second of startup

void setup() {
  size(400, 400);
  MyController = new ControlP5(this);
  initControls();
}

void draw() {
  background(255);
}

void initControls() {
  final int but_QTY = 3, tog_QTY = 2, DIAM = 25;
  final PImage[] but_imgs = new PImage[but_QTY];
  final PImage[] tog_imgs = new PImage[tog_QTY];
  boolean isTog_Grid2 = true;

  // button Load
  PImage pic_Load, img_L = loadImage("load.png");
    Button but_Load = MyController.addButton("but_Load");
    for (int i = 0; i != but_QTY; ) {
    (pic_Load = but_imgs[i] = img_L.get()).resize(++i* DIAM, 0);
    but_Load.setImage(pic_Load).updateSize().setValue(0).setPosition(50,50);
    }    

  // button make - just 2 of the 15 buttons
  PImage pic_Make, img_M = loadImage("make.png");
    Button but_Make = MyController.addButton("but_Make");
    for (int i = 0; i != but_QTY; ) {
    (pic_Make = but_imgs[i] = img_M.get()).resize(++i * DIAM, 0);
    but_Make.setImage(pic_Make).updateSize().setValue(0).setPosition(150,50);
  } 

  // toggle grid/nogrid - just 1 of the 3 toggles
  // 1st solution based on the above
  PImage pic_Grid, img_G = loadImage("grid.png");
    Toggle tog_Grid1 = MyController.addToggle("tog_Grid");
    for (int i = 0; i != tog_QTY; ) {
    (pic_Grid = tog_imgs[i] = img_G.get()).resize(++i * DIAM, 0);
    tog_Grid1.setImage(pic_Grid).updateSize().setValue(0).setPosition(250,50);
  } 
  // resizing not correct because dependant of # of imgs
  // not sure if both pics are loaded at least they don't switch
  // toggle value works see console

  // toggle grid/nogrid 
  // 2nd solution based on you proposal
  // code commented out to get the rest working
  // (tog_imgs[0] = loadImage("grid.png")).resize(50, 0);
  // (tog_imgs[1] = loadImage("noGrid.png")).resize(50, 0);      
  // Toggle tog_Grid2 = MyController.addToggle("tog_Grid");
  // toggleBtnImg(tog_Grid2, isTog_Grid2, tog_imgs);

  //  static final Button toggleBtnImg(Button btn, boolean b, PImage tog_imgs) {
  //  return btn.setImage(imgs[int(b)]).updateSize();
  //  }

}

void but_Load() {
    if (millis()-start_time<1000) {
    return;
  } 
  println("but_Load was hit");
} 

void but_Make() {
    if (millis()-start_time<1000) {
    return;
  } 
  println("but_Make was hit");
}

void tog_Grid(int theValue) {
    if (millis()-start_time<1000) {
    return;
  } 
  println("tog_Grid was hit",theValue);
}