user3423784
user3423784

Reputation: 47

How to make a button where you can import your own music on processing?

I am looking for a way to make a type of import button where users can import their music from their folder. I've got no idea on how to do this so any tips would be grateful.

Upvotes: 1

Views: 152

Answers (1)

Nico
Nico

Reputation: 3489

Here is something to get you going:

float buttonX;
float buttonY;
float buttonW;
float buttonH;

void setup() {

  textSize(24);

  frame.setResizable(false);

  background(255);

  size(600, 200);

  fill(0);
  stroke(0);
  noFill();

  buttonW = 200;
  buttonH = 50;
  buttonX = width - width/2 - buttonW/2;
  buttonY = height/2 - buttonH/2;
}

void draw() {

  background(255);
  fill(0);

  rectMode(CORNER);

  rect(buttonX, buttonY, buttonW, buttonH);

  fill(255);

  textAlign(LEFT);
  text("Import File", buttonX+35, buttonY+30);
}

void mouseClicked() {
  if (mouseX>buttonX && mouseX < buttonX+buttonW && mouseY > buttonY && mouseY < buttonY+buttonH) {
    selectInput("Import music file", "fileSelected");
  }
}

/* Taken from Processing.org */
void fileSelected(File selection) {
  if (selection == null) {
    println("Window was closed or user hit cancel");
  } else {
    println("User selected " + selection.getAbsolutePath());
  }
}

Notice some things here. The button is simply a rect that is drawn on the screen and then the click is bound within the limit of the rect, which in effect creates a button. I am showing this here so you can understand that you can create a GUI with the simplest and the most basic objects available to you in Processing. This is a very simple sketch that doesn't do anything other than give you a file browser (check Processing docs for that) and prints the path of the file you choose or writes out a message if you hit cancel. What you do with this is up to you. Have fun with it.

Once you're done playing around and want to see what others have done and what some of the GUIs made by others look like, go to this page and check out the GUI section: http://www.processing.org/reference/libraries/ (this is only to see how they've implemented their buttons, not for the file browser).

Upvotes: 1

Related Questions