UISLIM + P5JS BaseTemplate

GUI example/base sketch

This little sketch has been set up to have the best practices for configuring p5js for apps and small installations. It includes:


The example sketch shows:

State-Based Navigation:

Demo Panel:

uiSlim

uiSlim is a lightweight, minimalistic Immediate Mode Graphical User Interface (IMGUI) library for p5.js, designed to make it easy to create simple and interactive UI components like buttons, sliders, graphs, and text boxes in a flexible manner.

It is written by Mads Hobye specifically for simple interactive interfaces in P5JS where buttons and graphs are needed.  In the example above, there is a demo function which shows the most typical elements to use.

In the following, we’ll cover how to set up uiSlim and use various UI elements. We’ll walk through basic examples to give you a better understanding of how to use the library effectively in p5.js sketches.

Getting Started

To begin using uiSlim, you’ll need to load the library within your p5.js environment. uiSlim comes prepackaged in the example sketch above and is located in the uiSlim.js file.

Basic UI Elements

uislim provides several basic UI components that can be used to create buttons, text boxes, sliders, etc.

Button:

You can create a button using uiButton. The button responds to hover and clicks.

function uiButton(name, bgColor = 255, width = 200, height = 30, x = undefined, y = undefined)


Example:

if (uiButton(name = "Click me!", bgColor = 255, width = 200, height = 30, x = 50, y = 100).clicked) {

    print("Button clicked!");

}

Text:

Use uiText to display static text

uiText("Welcome to the UI Demo!");

Parameters:

(this is typically only used with containerStart/End

Scrollbar:

Scrollbars allow users to adjust numerical values by dragging the bar.

function uiScrollbar( name, min = 0, max = 100, value = undefined,  width = 200,  x = undefined,  y = undefined)

Example:

var scrollValue = new uiFloat(0);

uiScrollbar("Value", 0, 100, scrollValue, 200, 50, 50);


Toggle:

A toggle is used for switching between two states (on/off).

function uiToggle( name, value, bgColor = 255, width = 200, height = 30, x = undefined,  y = undefined)

Example: 

var toggleValue = false; // this variable should be defined at the top

if (uiToggle("Enable feature", toggleValue, 255, 200, 30, 30, 30).clicked) {

    toggleValue = !toggleValue;

}

Container Start/End:

Containers help group UI elements and manage their layout. uiContainerStart marks the beginning: 

uiContainerStart(x = 0, y = 0, width = 200)

uiContainerEnd() marks the end:

uiContainerEnd() 

Example:

uiContainerStart(50, 50, 200); // Starts a container at (50, 50) with width 200

uiText("Inside a container");

uiButton("Click me inside!");

uiContainerEnd(); // Ends the container

Joystick:

A joystick allows for 2D input control, such as a game controller.

function uiJoystick(name, min, max, joyX, joyY, x, y, size = 200)

Example:

var joyX = new uiFloat(0);  

var joyY = new uiFloat(0); 


var joyobj = uiJoystick("2D control", -100, 100, joyX, joyY);


  if (joyobj.pressed) {

    print("joystick: " + joyX.get() + "," + joyY.get());

  }


Graph

To display a simple graph, use uiGraph.

function uiGraph(name, data = [], xMin = undefined,  xMax = undefined, bgColor = 255, width = 200, height = 100, x = undefined, y = undefined)

Example:

uiGraph("Data Graph", [23, 45, 56, 33, 76], 0, 100, 255, 200, 100);


State Management

You can manage multiple screens or states using a simple state variable:

var state = 0;


function draw() {

  background(200);

  uiUpdateSimple();


  if (state == 0) {

    if (uiButton("Go to next state", 255, 200, 30, 50, 100).clicked) {

      state = 1;

    }

  } else if (state == 1) {

    if (uiButton("Go back", 255, 200, 30, 50, 150).clicked) {

      state = 0;

    }

  }

}

Interactive Parameters in uiSlim

In uiSlim, interactive parameters are properties associated with UI components that help detect user interaction, such as hovering, clicking, pressing, and dragging. These parameters allow you to handle user input dynamically and update the UI accordingly.

By understanding these interactive parameters (hover, pressed, clicked, pressedDown, pressedUp, and dragging), you can easily create dynamic and interactive user interfaces with uislim. These parameters allow you to track how users interact with your UI elements and respond accordingly.

.hover

Definition: The hover parameter is true when the mouse pointer is positioned over the UI component. It becomes false when the pointer moves away from the component.

Use Case: You can use hover to change the visual appearance of a button when the user hovers over it.

Example:

var button = uiButton( "Hover me",255, 100, 100, 200, 50);


if (button.hover) {

  fill(150);  // Change color if hovered

} else {

  fill(255);  // Default color

}

rect(50,250,50,50);

In this example, when the button is hovered, the rectangle will change color.

.pressed

Definition: The pressed parameter is true when the mouse is clicked and held down on the UI component. It remains true as long as the mouse button is held down.

Use Case: Use pressed to track the state when the user holds down a button. You could change the appearance or trigger events while the button is being held.

Example:

var button = uiButton("Press me", 255, 100, 100, 200, 50);


if (button.pressed) {

  fill(100);  // Darker color when pressed

} else {

  fill(255);  // Default color

}

rect(50,250,50,50);

When the user clicks and holds the button, it will change color until the mouse button is released.

.clicked

Definition: The clicked parameter is true when the user clicks (presses and releases) on the UI component. This is useful for detecting single-click actions.

Use Case: You typically use clicked to trigger an action when the button is clicked.

Example:

var button = uiButton( "Click me", 255, 100, 100, 200, 50);

if (button.clicked) {

  print("Button clicked!");  // Trigger an action on click

}

In this example, the message "Button clicked!" will be printed when the user clicks on the button.

.pressedDown

Definition: The pressedDown parameter is true when the mouse button is first pressed down on the UI component. It only triggers once per press.

Use Case: Use pressedDown to detect the initial press of a button without waiting for the mouse to be released.

Example:

var button = uiButton("Press down", 255, 100, 100, 200, 50);

if (button.pressedDown) {

  print("Button pressed down!");  // Triggered when button is first pressed down

}

In this example, the message "Button pressed down!" will print when the button is first pressed.

.pressedUp

Definition: The pressedUp parameter is true when the mouse button is released after being pressed on the UI component.

Use Case: This can be used to detect when the user finishes interacting with a component (i.e., releasing the button).

Example:

var button = uiButton("Press and release", 255, 200, 100, 200, 50);


if (button.pressedUp) {

  print("Button released!");  // Triggered when the button is released

}

In this example, the message "Button released!" will print when the user releases the button after pressing.

.dragging (not implemented yet)

Definition: The dragging parameter is true when the mouse button is held down on the UI component and the mouse is moved. It remains true as long as the user is dragging the component.

Use Case: Use dragging for components like sliders or draggable objects where you need to track the mouse movement while the button is held.

Example:

var slider = uiScrollbar("Drag me", 0, 100, scrollValueTextSize, 150, 50, 50);

if (slider.dragging) {

  print("Slider being dragged: " + slider.value.get());  // Triggered while dragging

}

In this example, the message with the slider's value will be printed continuously as the user drags the slider.