# canvasGUI 3 : user-defined controls (1)

**URL:** <https://discourse.processing.org/t/canvasgui-3-user-defined-controls-1/48529>\
**Category:** Libraries\
**Created:** [May 10, 2026, 2:32pm UTC](https://discourse.processing.org/t/canvasgui-3-user-defined-controls-1/48529 "2026-05-10T14:32:40Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [May 10, 2026, 2:32pm UTC](https://discourse.processing.org/t/canvasgui-3-user-defined-controls-1/48529/1 "2026-05-10T14:32:40Z")

</div>

In this discussion I will describe one strategy for creating user-defined controls that extend the canvasGUI 3 library.

To do this I am going to create a **Bridge Bidding Box** control. For the uninitiated, Bridge is a very popular card game and the bidding box is an essential part when playing Bridge competitively. You don’t have to be a Bridge player or understand the role of the bidding box to get the benefit of this discussion.

The sketch below shows the final control in action and the code is available in the p5js web editor [here](https://editor.p5js.org/canvasgui/sketches/Aw2hgZAiw). You might try it out before continuing with the discussion.

**The Implementation**

The bidding box control is a _ **composite control** _ in that it is created entirely from existing  
canvasGUI controls. It means the control doesn’t need any extra functionality to handle events  
and rendering, making the whole implementation process simpler.

The first step is to create a class, CvsBiddingBox that extends the CvsPanel class.  
`class CvsBiddingBox extends CvsPanel {`

Note: all control classes in canvasGui have the prefix `Cvs`.

This means that the bidding box control has all the functionality of a draggable panel and we can add other controls as needed. In this case we will add 40 CvsImage controls (image buttons) and a single standard button (CvsButton) to reset the bidding box.

The overall size of the bidding box depends on the tab size specified in the constructor parameters. Since the tab size is determined when the control is created all 40 tab images are created dynamically.

All tab clicks are forwarded to a single method `_doBid(info)`in the CvsBiddingBox class. This creates an object that will be passed to the bidding box action method specified by the user with the `setAction` method.

I cannot possibly describe every aspect involved in creating this control so feel free to ask questions in this discussion.

In a future discussion I will describe a second strategy to create user-defined controls that are not composite so require their own event handling and rendering code.

Hope you find this interesting and give you ideas for your own projects. 😁

https://editor.p5js.org/canvasgui/full/Aw2hgZAiw

Example of a real bidding box

 ![Screenshot 2026-05-10 at 15.31.44](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/2/a/2a72643286f77436326c4b7f42de3dd9d1dcbc3b.jpeg)