[ControlP5] How to use image as list item

lverdonk

[ControlP5] How to use image as list item

in Contributed Library Questions • 1 year ago

Hello,

I am currently trying to build a simple gui with controlp5. The whole thing is working really well and i'd like to thank the whole processing community for the tools and help it provides.

So, my problem is i'd like to build a sliding list (like a Boxlist) containing images instead of text. I did not find any documentation on such feature nor any hack that can easily change a listitem or the list container.

Is there any known way to make a simple sliding image (of fixed size) list using Controlp5?

Thanks!

Lucas.

Replies(3)

amnon.owed

Re: [ControlP5] How to use image as list item

1 year ago

Not that I know of. Long shot... you could extend ListBox and gain access to it's protected <Button> list. Like all controllers, Buttons have setImage methods. Not sure if it would work though.

lverdonk

Re: [ControlP5] How to use image as list item

1 year ago

I erased my previous post by mistake. I tried to say that i god your solution to work by overriding two functions of listbox:

addlistbutton(int);
scroll();

Here is the full code in case somebody has the same needs as me :).

Thanks again !

/**
* Feel free to use or modify!
*/

import java.util.Vector;

import processing.core.PImage;
import controlP5.Button;
import controlP5.ControlP5;
import controlP5.ControllerGroup;
import controlP5.ListBox;
import controlP5.ListBoxItem;

public class ImageList extends ListBox {

    public Vector<PImage> images;

    protected ImageList(ControlP5 arg0, ControllerGroup<?> arg1, String arg2,
            int arg3, int arg4, int arg5, int arg6) {
        super(arg0, arg1, arg2, arg3, arg4, arg5, arg6);
        images = new Vector<PImage>();
    }
    public ListBoxItem addItem(String arg0, int idx,PImage img) {
        ListBoxItem i = super.addItem(arg0, idx);
        images.add(idx,img);
        return i;
    }

    @Override
    protected ListBox addListButton(int arg0) {
        super.addListButton(arg0);
        int i = 0;
        /*Get offset in number of items (private memver in listbox)*/
        int itemOffset = (int) Math.abs(_myScrollValue * (items.size() - buttons.size()));
        /*Initialise item images when buttons are first created*/
        for (Button b : buttons) {
            if(i+itemOffset < images.size())
                b.setImage(images.get((int) (i + itemOffset )));
            i++;
        }
        return this;
    }

    @Override
    protected void scroll() {
        super.scroll();
        /*Upgate images on scroll*/
        int itemOffset = (int) Math.abs(_myScrollValue * (items.size() - buttons.size()));
        int i = 0;
        for (Button b : buttons) {
            if(i+itemOffset < images.size())
                b.setImage(images.get((int) (i + itemOffset )));
            i++;
        }

    }

}

andreas.s..

Re: [ControlP5] How to use image as list item

1 year ago

just in case, here another approach to customize a listbox, please see the comments for details

import controlP5.*;
MyListBox l1;
ControlP5 cp5;
ArrayList<MyListBoxItemIcon> icons;
void setup() {
size(400, 400);
cp5 = new ControlP5(this);
l1 = new MyListBox(cp5, "hello");
l1.setPosition(50, 100).setSize(205, 120).setItemHeight(25);
// How does a ListBox work?
// a ListBox consists of a static number of buttons, a scrollbar,
// and a number of ListBoxItems. when scrolling the list, buttons remain
// the same but only change behavior according to which ListBoxItems
// are currently visible. Number of ListBox Buttons is not equal to number
// of ListBoxItems, this is important in order to understand what is
// happening below.
//
// Why is the number of ListBox Buttons not equal to number of ListBoxItems?
// scalability, in case a list has 1000 or more items but only 10 are visible
// at a time, the creation of the other 990 buttons would result in a big
// slowdown, therefore only 10 buttons are created and change
// behavior/data when needed.
//
// A number of ListBoxItems are added to our custom ListBox, each ListBoxItem
// is using a unique int id (the value) which will be used to change the
// view (stored inside ArrayList icons) of a ListBox button accordingly.
// now lets create a list of MyListBoxItemIcons. MyListBoxItemIcon is an Object
// that only contains an image which will be drawn when calling it's display function.
// we will need this list of icons later to customize the ListBox Buttons.
// I am using an ArrayList here but for better id mapping in case the items of
// a ListBox change over time, you could consider to use a Map instead.
icons = new ArrayList<MyListBoxItemIcon>();
// for each ListBoxItem added to our custom MyListBox, an icon is added
// to the ArrayList icons, these icons will then be used to change the
// View of the ListBoxItems visible.
for (int i=0;i<80;i++) {
int id = icons.size();
l1.addCustomItem("item "+id, id, new MyCustomListBoxButton());
icons.add(i,new MyListBoxItemIcon());
}
}
void draw() {
background(100);
}
class MyListBox extends ListBox {
MyListBox(ControlP5 cp5, String theName) {
super(cp5, cp5.getTab("default"), theName, 0, 0, 100, 10);
}
// now we have to add a custom function to add Items to the ListBox so that
// we can set our custom view of each item.
void addCustomItem(String theName, int theValue, ControllerView<Button> theView) {
addItem(theName, theValue);
// when overriding a view, the properties of the previous view are lost,
// here the label will get lost in favor of the image, but you can manually add
// a label to your custom view of course (custom view class see below)
buttons.get(buttons.size()-1).setView(theView);
}
}
class MyCustomListBoxButton implements ControllerView<Button> {
public void display(PApplet theApplet, Button theButton) {
theApplet.fill(!theButton.isPressed() ? 200:color(255,0,0));
theApplet.rect(0, 0, theButton.getWidth(), theButton.getHeight());
int id = (int)theButton.getValue();
if(!theButton.isInside()) {
icons.get(id).display(theApplet);
}
}
}
class MyListBoxItemIcon {
PImage img;
MyListBoxItemIcon() {
img = createImage(200,25,RGB);
img.loadPixels();
for (int n = 0; n < img.pixels.length; n++) {
img.pixels[n] = color(random(255));
}
img.updatePixels();
}
void display(PApplet theApplet) {
theApplet.image(img,0,0);
}
}

Top Reply