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. 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. 
Example of a real bidding box
