# CanvasGUI problems

**URL:** <https://discourse.processing.org/t/canvasgui-problems/46089>\
**Category:** Libraries\
**Created:** [March 27, 2025, 4:14pm UTC](https://discourse.processing.org/t/canvasgui-problems/46089 "2025-03-27T16:14:00Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![rbytes](https://avatars.discourse-cdn.com/v4/letter/r/da6949/32.png) [@rbytes](https://discourse.processing.org/u/rbytes)\
**Post date:** [March 27, 2025, 4:14pm UTC](https://discourse.processing.org/t/canvasgui-problems/46089/1 "2025-03-27T16:14:00Z")

</div>

The sliders do not work with touch in p5_js. I am using Safari on an iPad Pro. I have no problem using sliders in other guis, and the built in p5_js sliders work fine as well.

---

<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:** [March 27, 2025, 4:25pm UTC](https://discourse.processing.org/t/canvasgui-problems/46089/2 "2025-03-27T16:25:22Z")

</div>

canvasGUI works only with mouse and keyboard.

---

<div class="post-metadata">

**Author:** ![rbytes](https://avatars.discourse-cdn.com/v4/letter/r/da6949/32.png) [@rbytes](https://discourse.processing.org/u/rbytes)\
**Post date:** [March 27, 2025, 6:22pm UTC](https://discourse.processing.org/t/canvasgui-problems/46089/3 "2025-03-27T18:22:46Z")

</div>

An iPad simulates mouse actions with a screen touch

---

<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:** [March 27, 2025, 6:35pm UTC](https://discourse.processing.org/t/canvasgui-problems/46089/4 "2025-03-27T18:35:42Z")

</div>

I have updated the github wiki and my website making it clear that canvasGUI only works with mouse and keyboard.

Unfortunately I don’t have an iPad to try out canvasGUI and I have no experience of coding touch screen devices so it might be some time before I get a chance to solve this issue.

---

<div class="post-metadata">

**Author:** ![rbytes](https://avatars.discourse-cdn.com/v4/letter/r/da6949/32.png) [@rbytes](https://discourse.processing.org/u/rbytes)\
**Post date:** [March 27, 2025, 6:45pm UTC](https://discourse.processing.org/t/canvasgui-problems/46089/5 "2025-03-27T18:45:20Z")

</div>

Thanks for replying, Peter. My iPad Pro generates mouse and keyboard input which works with every browser I have tested - Safari, Chrome, Firefox etc. I have also used many GUI libraries such as OPC and dat.GUI. Never a problem with sliders. I think your library looks very cool and would like to use it too, but sliders and range don’t respond. I found your Quark page on OpenProcessing and tried a few sketches sketches. All CanvasGui features work fine except range and slider. I’m sure Sinan Ascioglu would assist you to get CanvasGUI fully functional on OP.

Richard

---

<div class="post-metadata">

**Author:** ![rbytes](https://avatars.discourse-cdn.com/v4/letter/r/da6949/32.png) [@rbytes](https://discourse.processing.org/u/rbytes)\
**Post date:** [March 27, 2025, 8:40pm UTC](https://discourse.processing.org/t/canvasgui-problems/46089/6 "2025-03-27T20:40:51Z")

</div>

Ok. I will give up on using it, and stick with OPC, which is well-supported on Open Processing. Thanks anyway.

---

<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:** [March 27, 2025, 9:30pm UTC](https://discourse.processing.org/t/canvasgui-problems/46089/7 "2025-03-27T21:30:33Z")

</div>

I believe the issue is not with OP or with iPad rather it is that canvasGUI does not process touch events.

I created canvasGUI because I wanted to learn JavaScript and I wanted a meaty project to get my teeth into. Unfortunately I have no experience programming touch events and I had enough to get to grips with including VSC, TypeScript, p5js, WEBGL, Typedoc, GCC and of course JavaScript so touch events got put on the back burner.

Perhaps it is time for me to revisit canvasGUI and touch events but I have had other exciting projects demanding my attention. 😄

---

<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:** [March 29, 2025, 5:48pm UTC](https://discourse.processing.org/t/canvasgui-problems/46089/8 "2025-03-29T17:48:57Z")

</div>

> [@quark](#):
>
> Perhaps it is time for me to revisit canvasGUI and touch events …

I decided to make this a priority because it severely affects the usability of canvasGUI. Also I do like a challenge. 😀

To make canvasGUI transparent to the user it attaches its own event listeners to the canvas for mouse, keyboard and focus events. It doesn’t use the p5js event handling methods because they can easily be reassigned (replaced / overwritten) adversely affecting canvasGUI.

I started the journey with some [research](https://developer.mozilla.org/en-US/docs/Web/API/Touch_events) on implementing touch events in pure JavaScript. So I have spent much of the day experimenting and exploring the touch events API to get an understanding of how it all works.

Today has been a good day 👍 as I now have the sliders responding to touch events. I still have a lot of work to do as the code is definitely work in progress and I will have to test it fully before doing the same for the Range control.

Hopefully I will be able to release a touch-screen enabled version of canvasGUI in a couple of weeks. 🤩

---

<div class="post-metadata">

**Author:** ![rbytes](https://avatars.discourse-cdn.com/v4/letter/r/da6949/32.png) [@rbytes](https://discourse.processing.org/u/rbytes)\
**Post date:** [March 29, 2025, 7:53pm UTC](https://discourse.processing.org/t/canvasgui-problems/46089/9 "2025-03-29T19:53:26Z")

</div>

That is great news, Peter. I will look forward to incorporating CanvasGui into my new sketches.

Richard

---

<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:** [March 30, 2025, 5:19pm UTC](https://discourse.processing.org/t/canvasgui-problems/46089/10 "2025-03-30T17:19:14Z")

</div>

All fixed 😁 see the announcement [here](https://discourse.processing.org/t/canvasgui-new-vesrion-0-9-5/46116)

---

<div class="post-metadata">

**Author:** ![rbytes](https://avatars.discourse-cdn.com/v4/letter/r/da6949/32.png) [@rbytes](https://discourse.processing.org/u/rbytes)\
**Post date:** [March 30, 2025, 5:39pm UTC](https://discourse.processing.org/t/canvasgui-problems/46089/11 "2025-03-30T17:39:28Z")

</div>

Thanks, Peter. Will you let Sinan Ascioglu know about the new version? He could add it to the current library selections on Open Processing. I can let him know if you prefer.

Also do you have a link to import the new CanvasGui version?

---

<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:** [March 30, 2025, 5:47pm UTC](https://discourse.processing.org/t/canvasgui-problems/46089/12 "2025-03-30T17:47:09Z")

</div>

> [@rbytes](#):
>
> I can let him know if you prefer.

Yes please.

This link might not work because it is not a secure `https` link

[http://www.lagers.org.uk/libs/canvasgui/0.9.5/gui.min.js](http://www.lagers.org.uk/libs/canvasgui/0.9.5/gui.min.js)

---

<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:** [April 6, 2025, 10:06am UTC](https://discourse.processing.org/t/canvasgui-problems/46089/13 "2025-04-06T10:06:14Z")

</div>

I was so focused on sliders and ranges I forgot to include touch events for the other controls 😇

I have rectified this with version 0.9.6 which also fixes a bug from 0.9.4 when using multiple sketches with GUIs on the same web page (example of what I mean [here](http://www.lagers.org.uk/gallery/gy-3d-models/gy-index.html)).

**So use V0.9.6** 👍

---

<div class="post-metadata">

**Author:** ![rbytes](https://avatars.discourse-cdn.com/v4/letter/r/da6949/32.png) [@rbytes](https://discourse.processing.org/u/rbytes)\
**Post date:** [April 6, 2025, 2:48pm UTC](https://discourse.processing.org/t/canvasgui-problems/46089/14 "2025-04-06T14:48:12Z")

</div>

The new library works perfectly. You were correct that the link [http://www.lagers.org.uk/libs/canvasgui/0.9.6/gui.min.js](http://www.lagers.org.uk/libs/canvasgui/0.9.5/gui.min.js)  
was not accepted by OP. I had to follow the link, copy the library code and paste it into a new tab. Do you have plans to give it an https link?

Thanks, Peter.

---

<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:** [April 6, 2025, 3:01pm UTC](https://discourse.processing.org/t/canvasgui-problems/46089/15 "2025-04-06T15:01:10Z")

</div>

> [@rbytes](#):
>
> Do you have plans to give it an https link?

My web-host charges £60 per year for a SSL certificate and since everything I do is free software I am not inclined to take on the expense.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [April 6, 2025, 4:08pm UTC](https://discourse.processing.org/t/canvasgui-problems/46089/16 "2025-04-06T16:08:44Z")

</div>

Many CDNs, like [jsDelivr](https://www.jsdelivr.com/?docs=gh), can automatically serve links from GitHub repos.

As an example, here’s the 1 for [q5\*js](https://q5js.org):  
[https://cdn.JsDelivr.net/gh/q5js/q5.js/q5.js](https://cdn.JsDelivr.net/gh/q5js/q5.js/q5.js)

We can also browse a repo’s content like this:

> **[q5js/q5.js CDN by jsDelivr - A free, fast, and reliable Open Source CDN](https://cdn.jsdelivr.net/gh/q5js/q5.js/)**
>
> q5js/q5.js CDN by jsDelivr - A free, fast, and reliable Open Source CDN for npm and GitHub

---

<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:** [April 6, 2025, 4:48pm UTC](https://discourse.processing.org/t/canvasgui-problems/46089/17 "2025-04-06T16:48:57Z")

</div>

@GoToLoop thanks for that I will look into this when I get a chance. 👍

---

<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:** [April 7, 2025, 3:59pm UTC](https://discourse.processing.org/t/canvasgui-problems/46089/18 "2025-04-07T15:59:10Z")

</div>

I have taken @GoToLoop 's excellent advice and now canvasGUI can be loaded in the webpage using the link

```auto
https://cdn.jsdelivr.net/gh/quarks/canvasGUI@main/dist/canvasgui/0.9.6/gui.min.js

```

@rbytes This should be OK for Open Processing 😁

---

<div class="post-metadata">

**Author:** ![rbytes](https://avatars.discourse-cdn.com/v4/letter/r/da6949/32.png) [@rbytes](https://discourse.processing.org/u/rbytes)\
**Post date:** [April 7, 2025, 5:28pm UTC](https://discourse.processing.org/t/canvasgui-problems/46089/19 "2025-04-07T17:28:07Z")

</div>

Hi, Peter. I have been creating a new canvasGUI demo on Open Processing. I assumed that it was possible to change the text color on Titles, but so far I have only managed to change the surround color when the text is set to opaque. I am sure a text color change is possible, but would you please send me a command line example to do that?

---

<div class="post-metadata">

**Author:** ![rbytes](https://avatars.discourse-cdn.com/v4/letter/r/da6949/32.png) [@rbytes](https://discourse.processing.org/u/rbytes)\
**Post date:** [April 7, 2025, 5:49pm UTC](https://discourse.processing.org/t/canvasgui-problems/46089/20 "2025-04-07T17:49:41Z")

</div>

Thanks, Peter. I sent the new link to Sinan, with a request to add CanvasGui to the Open Processing GUI libraries.

Richard

[Next page](https://discourse.processing.org/t/canvasgui-problems/46089.md?page=2)