Beta 0.9

Clickable Package

Global fields and methods

Simple Items
Clickable
Button
CircleButton
Checkbox
RadioButton
ClickablePanel
SwipePanel
ClickableMeter *
BarMeter *
Thermometer *
Draggable**
DraggablePanel**
MenuBar

Compound items
ButtonGroup
ListBox
RadioButtonListBox
ComboBox
Menu
ScrollPane**
ScrollBar**
SimpleScrollBar**
Slider**
Scroller**
ScrollSketch**

Additional Classes
ClickableGroup
Dragger

Demos
ClickableDemo
Home page
Drawing.html
Many Clickable Items
DrawingButtons
Various buttons
DrawingMenu
Uses menus
DrawingRedraw
Using noLoop and redraw
MeterDemo
Various meters
NoGroupDemo
Shows how use Clickable items without using a ClickableGroup
ExampleScrollBarDemo
Create a scrollbar class
ScrollSketchMenuDemo
Uses both a ScrollSketch and Menu
Button Example
Rewrite of Reas and Fry's example
Scrollbar Example
Rewrite of Reas and Fry's example

Additional information
Definitions
Limitations
Example code using a ClickableGroup
Example using an array of Clickables

* This class is contained in the ClickableMeter.pde file ** This class is contained in the Dragger.pde file

The Clickable Package provides a number of items like buttons that can be clicked. Some items can be dragged. It has been tested in both Processing and Processing.js and works in both.

It may take a minute for the sketch files to load.

A simple demo using some of the Clickable items including a menu and menu bar, button, list box (with optional circle buttons), checkbox, a multistate circle button, combo box, and vertical scroll bar. There are over 20 different gadgets in the package. The classes are stored in the files

Clickable.pde The basic files and classes. Required for all the classes.
ClickableMeter.pde Contains classes for meters.
Dragger.pde Contains classes processing drags.

The code for this example:
index.pde

Clickable Items Included in the Package

Simple Clickable Objects	Compound Clickable Objects	Additional Classes (Not clickable)
Buttons Circle Buttons Check Boxes Radio Buttons Clickable Panels Swipe Panels Clickable Meters* Clickable Bar Meters* Thermometers* DraggablePanel** MenuBar	Button Groups List Boxes List Boxes with Radio Buttons Combo Boxes Menus ScrollPane ScrollBars SimpleScrollBars Sliders ScrollSketch**	Clickable Group Dragger**

Required Files

The package includes three files. All of the classes require Clickable.pde. If additional files are not needed, the canvas statement might be:

<canvas id="Example"
 data-processing-sources="Example.pde Clickable.pde">
</canvas>

In addition, those marked with "*" require ClickableMeter.pde. The canvas statement might be:

<canvas id="Example"
 data-processing-sources="Example.pde Clickable.pde ClickableMeter.pde">
</canvas>

The classes marked "**" require Dragger.pde. The canvas statement might be:

<canvas id="Example"
 data-processing-sources="Example.pde Clickable.pde Dragger.pde">
</canvas>

Additional Examples

The first four examples use clickable items in a simple drawing program.
Drawing Buttons: Uses several kinds of buttons.
Drawing Menu: Uses a menu bar.
Drawing Redraw: Uses buttons in a noLoop() situation. The sketch is redrawn only after clicks.
Drawing: Uses both buttons and menus in the same sketch.
Meter Demo: Uses several clickable meters.
NoGroup Demo: Demonstrates using Clickable items without a ClickableGroup.
Example with an array of Clickables: Illustrates how to set up a Clickable group containing an array of Clickables.
ExampleScrollBarDemo: Shows how to create a scrollbar class.
ScrollSketchMenuDemo: Shows how to code sketches with both ScrollSketch and Menu.
Buttons Rewrite of Casey Reas and Ben Fry's Buttons example
Scrollbar Rewrite of Casey Reas and Ben Fry's Scrollbar example

Limitations

Does not distinguish between left and right clicks.
Does not handle double clicks.
Dragging probably will not work on touch screens.
Preliminary testing indicates clickables do not work when 3D is used.
Most Clickables change the fill color and some change the stroke color. (None change any of the modes and attributes. (E.g. ellipseMode() and strokeWeight() are not used.)
Does not help programmer with button widths and leaving room for the menu bar.
Requires using the mouseReleased() method at least in a minimal fashion. In addition, classes that use dragging require using mousePressed() and mouseDragged().
It could miss some very quick repeated clicks if the frame rate is too slow.

Download the code for the clickable items

Clickable.pde, ClickableMeter.pde, Dragger.pde, Complete package including demos and documentation

Return to the top of the page

This page has been visited Count times since April 5, 2014

Beta 0.9.0, Revised: 04/11/2014