Script panel label keyboard entry?
-
Done for knobs with Shift+Click. How to do this for the script panel? I see setEditable for the label but nothing for the script panel.
-
@aaronventure Can I ask why you want to use the panel for this and not a label?
-
@d-healey I have a knob that I'm styling with local Look and Feel. Doing color changes on mouse hover and click is easy enough with ternary operator when setting the color.
But if I wanted to animate that color change, what would be the best way to approach it? From what I gather, I would use Colors.mix and feed it an alpha value, but triggered and executed where? So I turned to Script Panel and its mouse callbacks. (the color thing I would ask in a separate thread after fiddling some more but since you asked...
)Plus I really want custom modifier behavior (Ctrl+Click etc.).
I basically slightly modified my knob LAF function to work as a paint routine for the Script panel (because the script panel wouldn't take the local LAF for whatever reason, it would just be emtpy) which prints text under the knob as well.
For the text entry, is the answer just using a separate label component?
-
Yeah panels only respond to paint routines, laf is for everything else (it came along quite a while after paint routines).
I think a separate label is probably the simplest option since it already has the functionality. You can make it invisible (except the text) and draw the design beneath it on its parent panel.
If the colour animation isn't event triggered then you'd need to use a timer to call one of the events that triggers a repaint (actually you can probably just call component.repaint(), or whatever the function is called).
-
@d-healey Is there any way to gauge mouse state on default components? I can, for example, do obj.hover inside a LAF function but that's not exactly referring to the component, rather than to something inside the registerFunction, right?
-
@aaronventure You can use a broadcaster for this.
Here's where I'm using one for my preset browser - https://codeberg.org/LibreWave/RhapsodyBoilerplate/src/branch/main/includes/Presets.js#L126
-
@d-healey Ah, might be the missing link. Let me go through the docs for the broadcaster thoroughly. Thanks for sharing the link to your use case.
-
@aaronventure Yeah the broadcasters are very useful. It's something I used to from web Javascript but the implementation in HISE gave me a little learning curve. The broadcaster map is helpful to make sense of what is going on, especially when you have a lot of them.
-
@d-healey So broadcaster will let me start a timer on hover, but from what I read the timers should only go down to 20-30 fps. That'll be quite jarring given how the entire interface runs at monitor refresh rate by default, especially the OpenGL stuff I have in the background.
Now, I found that there's fadeComponent for every single component and it looks great. Obviously that's running on some timer in the backend. Would it be crazy to think that some sort of animation function like in CSS could be added? It would really just need to return an alpha 0.0-1.0 over a set duration, then that could be passed over to the paint routine / LAF. Transition types would be ease-in, ease-out, ease-in-out, etc.
If called from the ScriptPanel function it could be something like animateAlpha(var storeHere, var durationMs, transitionType), it would be passed this.data.alpha1 that could then be used in the paint routine.
-
@aaronventure Maybe the web view will do what you need
-
@d-healey That's two rabbit holes you've sent me down in the last few hours, David.
Is it working on Linux?
-
@aaronventure No :( so i have no experience with it
Libre Wave - Freedom respecting instruments and effects
My Patreon - HISE tutorials
YouTube Channel - Public HISE tutorials -
but from what I read the timers should only go down to 20-30 fps
If you notice the difference between 30fps and 60fps for a small UI component being faded out, then you've got eagle eyes.
60fps makes a difference when rendering dynamic signal graphs, oscilloscopes and spectrum analyzers etc, but otherwise a timer frequency of 30fps should be good enough. Also note that you can run the timer at faster rates, it's just not recommended (and macOS might clog the UI thread if you set the timer interval for too short.
-
@Christoph-Hart OpenGL and knobs on interaction are running at 175hz from what I can see on my main screen. Comparing it to Kontakt which runs at 20-30 fps is super jarring. I did my background animations in openGL for precisely this reason. I actually wrote my first lines of glsl two weeks ago so that's all still fresh. I could probably do the knobs in openGL, but then that needs a fallback option.
The fadeComponent animation looks to be running on the screen refresh rate as well. Does what I proposed about a function that's equally just called but would be storing an alpha value over time into a given variable make any sense to you and is it implementable?
I'm coming from a game engine paradigm where animations can "fired off" as montages without needing separate timers for every thing. If I have 30 UI elements on a single page and were to just move the mouse across the screen with a desire to see them all animate and change colors on hover, what's the difference in implementation and prototyping if something like that exists vs. where I have to manually set up everything?
That smoothly modulated alpha could be used for a bunch of other things, not necessarily just animations. The nature is anything but linear, and having access to fire off a curved alpha value to modulate things with a single line could help speed up both development and protoyping and keep everything more organized and clean when working with animations.
-
@Christoph-Hart To follow up on this, 40-60 Hz seems sufficient for such small-scale quick animations. 20fps is noticeable, though. If it ends up performing bad, I'll knock it down to 30 which is still acceptable.
So I have my custom panels all behaving exactly as I want them to. Great. Awesome. But the value entry is still something I'm failing to achieve the final, production ready result for.
I created a placeholder label that gets focused on doubleclick and moves over to the current label position. Then, if the doubleclick was executed at certain event.mouseY. It can then take the string, store it in a variable, hide itself after hitting enter, and if the string is a valid value, pass it to the control, redraw and trigger the control callback.
My issue with this is that it's quite tricky to get right because even if the text is centered, when entering edit mode, the text moves over to the left. So I can't really encapsulate this properly to work for all cases.
Can the editing cursor and the editing mode be centered somehow? Is there a parameter that can be added for that? Alignment only works for the text itself, and I don't see anything on the lookAndFeel page in the docs.
Alternatively, could a function be implemented to the script panel that when called opens this text edit behavior at a given position(x, y, width, height, font, fontSize, textColour), and simply returns whatever I type into it?
-
The problem with adding the method will be that it won‘t stop there - the next request will be alignment, focus outline colour, cursor blink speed, highlight colour etc. and I‘ll be recreating the label component within the Panel soon.
I‘d rather change the Label so that the alignment is used in editing mode too but I vaguely remember there was an issue in the JUCE TextEditor class that prevented this.
-
@Christoph-Hart said in Script panel label keyboard entry?:
I‘d rather change the Label so that the alignment is used in editing mode too
Well that'll work, too. The only LAF thing I could imagine someone asking for would be as you said, the speed and color, though historically it's always been either white or black. Nevertheless, it already responds to correct font type and size and doesn't overlay any kind of dark background on top, I'd just want to see the editing mode following alignment.
That, or I'll have to somehow measure string (with font type and font size) length in pixels, use that to position the edit label properly for any given text and it'll be the same thing.
-
@aaronventure there‘s Engine.getStringWifdth() but that solution sounds a bit hacky.
-
-
@Christoph-Hart Right, so my whole idea won't work because clicking outside the label (closing edit mode) doesn't trigger the callback where the label gets hidden again. I'm now thinking of manually doing the whole edit thing with a paint routine and the KeyPressCallback.
