Beta 0.9

Clickable Package

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.

Your browser does not handle Processing Sketches

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

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







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