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