CanvasGUI problems

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

canvasGUI works only with mouse and keyboard.

An iPad simulates mouse actions with a screen touch

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.

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

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

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. :smile:

1 Like

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

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 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 :+1: 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. :star_struck:

2 Likes

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

Richard

All fixed :grin: see the announcement here

1 Like

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?

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

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

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).

So use V0.9.6 :+1:

2 Likes

The new library works perfectly. You were correct that the link http://www.lagers.org.uk/libs/canvasgui/0.9.6/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.

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.

Many CDNs, like jsDelivr, can automatically serve links from GitHub repos.

As an example, here’s the 1 for q5*js:
https://cdn.JsDelivr.net/gh/q5js/q5.js/q5.js

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

1 Like

@GoToLoop thanks for that I will look into this when I get a chance. :+1:

1 Like

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

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

@rbytes This should be OK for Open Processing :grin:

1 Like

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?

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

Richard