p5_gui

Experimental Graphical User Interface for P5js sketches

• Used for creating this SRT log viewer: https://djitelemetryoverlay.com

This was created for a specific project, so the interface and capabilities are very dependant on what was needed on that project. Hopefully it can be expanded and improved to fit other needs. Please let me know if you do something with it.

For it to work with P5js, your sketch should be in instance mode: https://github.com/processing/p5.js/wiki/Global-and-instance-mode

Installation

Using npm:

$ npm install p5_gui

Usage

//Load module
let gui = require('p5_gui');

//setup basic parameters
gui.setup(p,//p5js instance
  2,//shadow distance
  .5);//shadow alpha in HSB mode

//then we can start creating elements. Here we assume p is the p5js instance:
//Buttons and similar elements are drawn in CORNER mode, text alginment can be changed

//Area prints a rect where specified. Useful for backgrounds
gui.createArea("area_name",//element label
            0,//x position
            0,//y position
            600,//width
            600,//height
            p.color(100),//p5 color
            callback_function);//callback function

//Button
gui.createButton("button_name",//element label
            "Press me",//text value
            10,//x position
            10,//y position
            200,//width
            30,//height
            p.color(100,0,0),//p5 color
            callback_function,//callback function
            p.color(255));//textcolor

//Interactive slider
gui.createSlider("slider_name",//element label
          10,//initial value (number)
            10,//x position
            50,//y position
            400,//width
            10,//height
            p.color(100,0,0),//p5 color
            callback_function,//callback function
            0,//minimum value
            20);//maximum value

//Toggle creates a button that can be either on or off
gui.createToggle("toggle_name",//element label
            true, //state, true or false
            "Press me",//label
            10,//x position
            100,//y position
            200,//width
            30,//height
            p.color(100,0,0),//p5 color
            callback_function,//callback function
            p.color(255);//text p5 color

//Radio creates several options in the form of buttons. Only one can be pressed
gui.createRadio("radio_name",//element label
            2, //initial value
            [1,2,3],//available values
            ["One","Two","Three"],//labels
            10,//x position
            150,//y position
            500,//width
            30,//height
            p.color(100,0,0),//p5 color
            callback_function,//callback function
            p.color(255));//text p5 color

//Text just prints text
gui.createText("text_name",//element label
            "Text to display goes here",//initial value
            10,//x position
            200,//y position
            10,//height will determine text size
            p.color(0),//text p5 color
            callback_function,//callback function
            [p.CENTER,p.TOP],//TEXT ALIGN p5 values
            p.NORMAL);//text style p5

//To enable the drawing and interactivity of the elements, you should add the following methods to the usual p5 functions:

p.draw = function() {
  gui.mouseIsPressed(p.mouseIsPressed,p.mouseX,p.mouseY);
  gui.mouseOver(p.mouseX,p.mouseY);
  gui.draw();
  //your code
}

p.mousePressed = function() {
  gui.mousePressed(p.mouseX,p.mouseY);
  //your code
}

p.mouseReleased = function() {
  gui.mouseReleased();
  //your code
}

let gui_elements = gui.getGuiElts(); //returns the object to find elements by key

TODO

• Simplify element creation?
• Make interface clearer
• parenting in gui elements???