search

ffd8 / P5LIVE

p5.js collaborative live-coding vj environment!
https://p5live.org
GNU General Public License v3.0
229 stars 35 forks source link

_gui_slidersGrid example not working #84

Closed amiika closed 1 year ago

amiika commented 1 year ago

Sliders are off the screen (which is a easy fix) but the sliders are also not focusable (which i dont know how to fix). Would be nice to have some example of how to create focusable GUI elements like buttons etc.

ffd8 commented 1 year ago

@amiika – the sliders should be sitting/hiding just behind the editor's code (press CTRL + E to toggle editor) – it's also necessary to toggle off the editor in order to click/focus on the sliders (at top of code mentions hide editor to adjust sliders. But it's a good point that the GUI is not ideally positioned behind the editor.. in the meantime, I have a better way of doing this (using CSS for positioning) = i'll update this one for pending release and center the GUI. Let me know if hiding the editor solves both issues above.

amiika commented 1 year ago

Thanks! Missed that. It is working. However, would be nice to be able to access the gui elements while live coding. Could it be done with some css? Changing the size of the editor perhaps?

ffd8 commented 1 year ago

I vaguely recall trying to have that work and there being some issue about the element getting 'focused' on, not giving it up, and thus the focus is stuck within P5LIVE's iframe, so shortcuts etc all stop working? Could also be that that it's potentially problematic if there's GUI behind your code you don't see, while clicking to adjust the code, pressing those buttons etc.. Clicks through the editor do pass, ie: if(mouseIsPressed){circle(mouseX, mouseY, 50)} works fine while the editor is visible – but maybe the actual mouseClick still lands on the editor (higher z-index), thus the target below (GUI) can't be felt.. if a dropdown was below and you clicked exactly on it and the editor to highlight text, how would it know which one to do? Editor size is tricky, since one often has long lines of code, params, URLs, etc. Could potentially be done with a key-modifier, that when held, turns editor's pointer-events:none;, thus clicking through.. but are there enough GUI VJ's out there to make it necessary?

amiika commented 1 year ago

I think it is more of a nice to have feature. There could also be separate togglable panel for custom GUI elements that you could open/hide much like the options menu now. Anyway thats a new feature. Closing this for now. Thanks!