canvasGUI 3
canvasGUI enables the user to create a GUI (Graphical User Interface) directly on an HTML canvas element.
Originally created as a library for p5js, canvasGUI used p5js in its code base. Version 3 still works well as a p5js library but is no longer dependent on p5js so can be used in any JavaScript application.
For p5js users upgrading from V2 will find V3 easy to use because it is almost 100% backwardly compatible. The only significant difference is how the GUI controller object is created but creating the controls is the same. Despite this V3 is a major upgrade introducing several new controls and extending the configuration options of existing controls.
Controls Supported
| Control | Description |
|---|---|
| Label | displays text and / or an icon |
| Button | simple button displaying text and / or an icon |
| Image | simple button where the hit-zone is controlled by an image |
| Option | grouped with other options where only one can be selected at a time |
| Checkbox | simple boolean button that is either selected or not |
| Slider | Select a value within a user defined range |
| Ranger | select a low and high value within a user defined range |
| Joystick | switched and analog joysticks can be emulated with this control |
| Knob | rotate the knob to get a value within a user defined range |
| Textfield | accepts keyboard input with user defined text validation |
| Viewer | supports layered images and can zoom / pan over large images |
| Pane | holds controls on a pane that slides in from a canvas edge |
| Panel | holds controls on a draggable panel |
| Poster | similar to a label but configurable in terms of fonts, textsyle and alignment |
Using canvasGUI in your own webpages?
To use canvasGUI in your own webpage add the following code to the HTML in your webpage
<script
src="https://cdn.jsdelivr.net/gh/quarks/canvasGUI@3.0.0/dist/lib/gui.min.js">
</script>
replacing 3.0.0 with the library version number you wish to use.
If you don't include a version number, the latest available version will be used i.e.
<script
src="https://cdn.jsdelivr.net/gh/quarks/canvasGUI/dist/lib/gui.min.js">
</script>
Library Support
- The API reference created from the source code
- The API reference is supplemented with more detailed guides, see the links in the right pane.
- The source code is available in the github repositiory.
- The github wiki is another invaluable source of information.
- All the code demos on this site are available at the p5js sketch editor in an account dedicated to canvasGUI V3. If you create your own p5js sketch editor account you can copy these demos allowing you to edit and explore their code.
You should explore all of these resources if you want to get the best out of canvasGUI.
If you can't find the answer here or on github them you can always ask questions on the Processing forum as I am a regular visitor there.