Skip to content

Latest commit

 

History

History
165 lines (124 loc) · 3.34 KB

GuiCheckbox.md

File metadata and controls

165 lines (124 loc) · 3.34 KB
Raw

Home | Reference

GuiChecbox

Example | Constructor | Variables | Functions

Description

Checkbox class.

Picture of a p5.touchgui GuiCheckbox

Example

let gui;

// Create a variable for your Toggle
let t;

function setup() {
  createCanvas(400, 400);
  gui = createGui();
  
  // Create Toggle
  t = createToggle("Toggle", 100, 50, 200, 50);
}

function draw() {
  background(220);
  drawGui();
  
  if (t.isPressed) {
    // Print a message when Toggle is pressed
    // that displays its value.
    print(t.label + " is " + t.val);
  }
  
  if (t.val) {
    // Draw an ellipse when Toggle is true.
    fill(255, 0, 0);
    ellipse(200, 300, 100);
  }
}

/// Add these lines below sketch to prevent scrolling on mobile
function touchMoved() {
  // do some stuff
  return false;
}

Constructor

createCheckbox()

[Back to top]

Example
let gui;
let cb;

function setup() {
    createCanvas(400, 400);
    gui = createGui();
    cb = createCheckbox("Checkbox", 50, 50);
}
Description

Creates a new GuiCheckbox object. This is a checkbox which functions like a toggle button.

Syntax
createCheckbox(label, x, y, [w], [h], [defaultVal])
Parameters
  • label String: label for the GuiCheckbox
  • x Number: x-coordinate of the GuiCheckbox
  • y Number: y-coordinate of the GuiCheckbox
  • w Number: width of the GuiCheckbox (default is 32)
  • h Number: height of the GuiCheckbox (default is 32)
  • defaultVal Number: default value for your GuiCheckbox (default is false)
Returns

GuiCheckbox

Variables

val

[Back to top] [Back to top]

Example
checkbox.val = True;

print(checkbox.val)
Description

Value of the GuiCheckbox.

Functions

setStyle()

[Back to top]

Example
checkbox.setStyle("fillBg", color(255, 0, 0));
checkbox.setStyle({
    fillBg: color("#FF0000"),
    rounding: 10,
    textSize: 40
});
Description

Individual GuiCheckbox objects can be styled using this method. There are two types of input it takes. Use an input string and value to set an individual property, and use an Object with key/value notation to set multiple properties at once.

Syntax
setStyle(property, value)
setStyle(Object)
Parameters

property String: name of property to be set value Number|String|Object: value of property to be set Object Object: multiple propertys and values to be set

Returns

None

Style

[Back to top]

The GuiCheckbox style properties are:

  • strokeWeight Number: the weight (in pixels) of the stroke
  • rounding Number: radius of corners
  • textSize Number: the size of the letters in units of pixels
  • fillBg p5.Color: default background color
  • fillBgHover p5.Color: hover background color
  • fillBgActive p5.Color: active background color
  • fillCheck p5.Color: default check color
  • fillCheckHover p5.Color: hover check color
  • fillCheckActive p5.Color: active check color
  • strokeBg p5.Color: default stroke color