DropDownList_p5.js

Gallery
1

Drop down list in a p5.js class.

// Drop Down List parts => a.)display field, b.)arrow, c.)listItems
// Syntax: List(x, y, w, h, itemH, txtSize)

let list;
let selectedItem = -1;
let drop = false;
let items = ["Apples", "Peaches", "Oranges", "Bananas", "Pears" ];
let itemY = [];

class List {

  constructor(x, y, w, h, itemH, txtSize) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.itemH = itemH;
    this.txtSize = txtSize;
    this.arrwX = this.x + this.w;
    this.arrwY = this.y;
    this.arrwH = this.h;
  }

  press(mx, my) {
    // arrow touches
    if ((mx >= this.arrwX) && (mx <= this.arrwX+this.arrwH) && (my >= this.arrwY) && (my <= this.arrwY+this.arrwH)) {
      if (drop == true) {
        drop = false;
      } else {
        drop = true;
      }
    } // list touches
    if (drop) {
      if (items.length > 0) {
        for (let j = 0; j < items.length; j++) {
          if ((mx >= this.x) && (mx <= this.x + this.w) && (my >= itemY[j] ) && (my <= itemY[j] + this.itemH)) {
            selectedItem = j;
            drop = false;
          }
        }
      }
    }
  }

  displayFieldString(title) {
    fill(255); // background color
    rect(this.x, this.y, this.w, this.h);
    fill(0); // text color
    textSize(this.txtSize);
    text(title, this.x + 10, this.y + this.txtSize);
  }

  display() {
    if (selectedItem == -1) {
      this.displayFieldString("Select item:");
    } else {
      this.displayFieldString(items[selectedItem]);
    }
    // arrow
    fill(255); // arrow background color
    rect(this.arrwX, this.arrwY, this.arrwH, this.arrwH);
    fill(0, 255, 0); // arrow color
    triangle(this.arrwX+5, this.arrwY+5, this.arrwX+this.arrwH-5, this.arrwY+5, this.arrwX+this.arrwH/2, this.arrwY+this.arrwH-5);
    // listItems
    if ((items.length > 0) && (drop)) {
      for (let j = 0; j < items.length; j++) {
        itemY[j] = (this.y + this.h) + j*this.itemH;
        fill(255);
        rect(this.x, itemY[j], this.w, this.itemH);
        fill(0);
        textSize(this.txtSize);
        text(items[j], this.x + 10, itemY[j] + this.txtSize);
      }
    }
    if (!drop) {
      rect(this.x, this.y + this.h, this.w, 0);
    }
  }
}

function setup() {
  createCanvas(500, 400);
  list = new List(100, 100, 120, 24, 24, 16);
}

function draw() {
  background(220);
  list.display();
}

function mousePressed() {
  list.press(mouseX, mouseY);
}

output:

DropDownList

3 Likes