[ControlP5] hover about a List?

dogdogdog

hello,
i need help. :-S the programm should change the font, while i'm hovering about the list-Items.

import controlP5.*;
ControlP5   cp5;
DropdownList l; 

PFont myFont;
void setup() {
  size(1000, 500);
  cp5 = new ControlP5(this);

  l = cp5.addDropdownList("myList")
    .setPosition(100, 100)
      ;

  String[] fontList = PFont.list();
  for (int i=0; i<fontList.length; i++) {
    l.addItem(fontList[i], i);
  }

  myFont = createFont("Arial", 20);
}

void draw() {
  background(90);
  fill(l.isMouseOver() ? color (255, 255, 0) : 200);

  if (l.isMouseOver()) {
    //println(l.getItem((int)l.value()).getName());
    myFont = createFont(l.getItem((int)l.value()).getName(), 20);
  }
  textFont(myFont);
  text("Hellou i'm a text here..", 20, 30);
}


void controlEvent(ControlEvent theEvent) {
  if (theEvent.isFrom("myList")) {
    myFont = createFont(l.getItem((int)theEvent.value()).getName(), 20);
  }
}

colouredmirrorball

The problem is that you do createFont() with the name of the currently active list item (i.e. the item you clicked on). You'll need to figure out which one the mouse hovers over instead. ControlP5 has a method getMouseOverList() for that. This is my working solution, others might suggest a more elegant one.

import controlP5.*;
ControlP5   cp5;
DropdownList l;
String font = "Arial";

PFont myFont;
void setup() {
  size(1000, 500);
  cp5 = new ControlP5(this);

  l = cp5.addDropdownList("myList")
    .setPosition(100, 100)
      ;

  String[] fontList = PFont.list();
  for (int i=0; i<fontList.length; i++) {
    l.addItem(fontList[i], i);
  }

  myFont = createFont(font, 20);
}

void draw() {
  background(90);
  fill(l.isMouseOver() ? color (255, 255, 0) : 200);

  for (Object o : cp5.getMouseOverList ()) //The list we get is not of a particular class, we get Objects 
  {
    if (o instanceof Button)   //Check if it's a Button
    {
      Button button = (Button) o;    //cast the Object to a Button
      //Compare the font String to the value we get and only change myFont if it's different so it doesn't do that at each draw()
      if (!button.getLabel().equals(font))  
      {
        myFont = createFont(button.getLabel(), 20);
        font = button.getLabel();
      }
    }
  }
  textFont(myFont);
  text("Hellou i'm a text here..", 20, 30);
}


void controlEvent(ControlEvent theEvent) {
  if (theEvent.isFrom("myList")) {
    myFont = createFont(l.getItem((int)theEvent.value()).getName(), 20);
  }
}

dogdogdog

thank you! ;)
but it doesn't fall back to the last font, when i go out. that means only when i klick a font it should save.
..yes, it shouldn't do it in each draw()

colouredmirrorball

Then use two global Strings: one where you store the mouseover font and another where you store the original font. If you're hovering over the Dropdownlist, use the one font and when you're no longer over the list, use the original font. Assign the original font in the controlEvent() method. I'll leave the coding to you ;)

dogdogdog

Yes" ^:)^ thanx colouredmirrorball !!: here my best try:

 import controlP5.*;
ControlP5   cp5;
DropdownList l; 

String font = "Arial";
PFont myFont, hoverFont;

void setup() {
  size(300, 300);
  cp5 = new ControlP5(this);

  l = cp5.addDropdownList("myList")
    .setPosition(100, 100)
      ;

  String[] fontList = PFont.list();
  for (int i=0; i<fontList.length; i++) {
    l.addItem(fontList[i], i);
  }

  myFont = createFont(font, 20);
  hoverFont = createFont(font, 20);
}

void draw() {
  background(90);

  if (l.isMouseOver()) {
    for (Object o : cp5.getMouseOverList ())
    {
      if (o instanceof Button) 
      {
        Button button = (Button) o;
        if (!button.getLabel().equals(font))  
        {
          font = button.getLabel();
          hoverFont = createFont(font, 20);
        }
      }
    }

    fill(color(255, 255, 0));
    textFont(hoverFont);
  } else {
    fill(200);  
    textFont(myFont);
  }
  text("Hellou i'm a text here..", 20, 30);
}

void controlEvent(ControlEvent theEvent) {
  if (theEvent.isFrom("myList")) {
    myFont = createFont(l.getItem((int)theEvent.value()).getName(), 20);
  }
}