I would like to make a LED pulse / flash when it receives a message. (= stay on during only 1 frame and going back to off)
I’v found this snipet :
but it does nothing… is it supposed to work in O-S-C v1.x ?
I would like to make a LED pulse / flash when it receives a message. (= stay on during only 1 frame and going back to off)
I’v found this snipet :
but it does nothing… is it supposed to work in O-S-C v1.x ?
but it does nothing… is it supposed to work in O-S-C v1.x ?
No, most of these tricks are obsolete, I closed the ticket with a message that says that. Here is an adapted version of the snippet:
/* css property */
JS{{
var x = OSC{/pulse}; // subscribe to osc messages on address "/pulse"
locals.T = Date.now(); // generate timestamped css animations to force reset
}}
@keyframes pulse-#{locals.T} {
0% {opacity:0;}
10% {opacity:1;}
100% {opacity:0;}
}
inner:after {
animation: pulse-#{locals.T} .5s 1 forwards
}
Alternatively you could use the new script feature to make the led 's value fall programmatically when it changes, for example:
// script property
var fallTime = 0.2,
fps = 24,
maxValue = 1,
step = maxValue / fps / fallTime
setTimeout(()=>{
if (value <= 0) clearTimeout()
set("this", value - step)
}, 1000 / fps)
Thanks for your help !
in your first example, (css property), the address to make the led pulse is an absolute address (took me some time to realize
to make a led with id myLed pulse with a message sent to /myLed/pulse, the script should be :
/* css property */
JS{{
var x = OSC{pulse}; // subscribe to osc messages on address "id/pulse"
locals.T = Date.now(); // generate timestamped css animations to force reset
}}
@keyframes pulse-#{locals.T} {
0% {opacity:0;}
10% {opacity:1;}
100% {opacity:0;}
}
inner:after {
animation: pulse-#{locals.T} .5s 1 forwards
}
I personally prefer the new script property, as it works with any value sent to the widget address.
I would love to use this method with a button @mode tap
(tried to use the same script, but doesn’t work…)
I would need to use a single widget (button) to send a message when I tap it
f.e. : /go
and pulse once when it receives the same message.
(like a bang button in Max or PD)
is there a way to adapt this script to a button ?
don’t you think that a button in tap mode should by default do this when it receives a message ?
(Actually, a button in tap mode does nothing when it receives a message ; I have the feeling that it should “flash” just like when user taps on it)
and about mode tap :
to make it more clear from a user point of view, I think that the button should immediatly fall back to off when you tap it. Holding the on value when you keep your finger on it suggests that it holds a value, and sends something else on release, which ins not the case.
(it should react differently from the mode push)
just my 0.2 €
don’t you think that a button in tap mode should by default do this when it receives a message ?
(Actually, a button in tap mode does nothing when it receives a message ; I have the feeling that it should “flash” just like when user taps on it)
Makes sense, I'm including this in beta 10
thanks a lot, much easier this way
Could you please point me in direction how to adjust this script to work with alphaFillOn property?
I have incoming osc messages:
Play
PlaySection
HoldSection
Stop
What I would like to do is while “HoldSection” message is coming in, for button to flash constantly.
So far I managed to change the color with this script in colorWidget property:
JS{{
var val = @{play_mode}
if (val == “PlaySection”) {
return “lime” // brighter than “green”
} else if (val == “HoldSection”) {
return “yellow”
}
else {
return “auto”
}
}}
Thank you in advance!
You’ll need to use the css property to make it flash:
/* css property */
@keyframes flash {
0% {--alpha-fill-on:0.75;}
100% {--alpha-fill-on:1;}
}
JS{{
if (@{play_mode} == "HoldSection") return ":host {animation: flash 1s steps(2) infinite;"
}}
Worked like a charm! Thank you!
Hi, i know this is a old thread...
i use here a button and need to apply styles
i do that with inserting before
inner {
font-size: 170%;
xxxxx;
}
weirdly at startup this does not what expected (the flashing does not work), when i cut out the css code
inner {..]
save it, copy it back in, save it, and it works like expected(Version: 1.8.15) ???
The "inner" selector was the only one i found for the button, maybe i have the wrong selector here...?
Thank you!
the :host
selector can be used to target the widget's root element, that's the one used in the example above.
Thanks, i think i need to clarify, i have a button, when i press the button i want to trigger the pulse effect on the button itself.
Addressing with @{..} the id of the button itself.
i have to insert a line and delete it while on((in the css property of the button) , to trigger the flashing (trying the same code in the css property of a led does nothing)..?
Pasting the above code as is doesn't work because it answers a very specific use case. To make a button blink when on you'll need to adjust the code:
/* css property */
@keyframes flash {
0% {--alpha-fill-on:0.75;}
100% {--alpha-fill-on:1;}
}
:host.on {
animation: flash 1s steps(2) infinite;
}
If you're gonna use this on multiple widgtets, the keyframes definition can be written in the root's css or in a theme file to avoid code repetition.
Thanks! I opt for "extra css classes"
I'm trying to do this exact thing, but it's not working. I've used this code, changing only the names of widgets. Pasting into the CSS property like this:
@keyframes flash {
0% {--alpha-fill-on:0.75;}
100% {--alpha-fill-on:1;}
}
JS{{
if (@{cueNumber} == @{gp_song_index}) return ":host {animation: flash 1s steps(2) infinite;"
}}
Any thoughts?? Many thanks.
There's a closing bracket missing in your css code.
Ok so following the topic, I need to create an animation for my buttons, and following your snippets I was able to create it. My use case is a bit more specific in that:
@keyframes mainBlink {
0% {opacity:1;}
100% {opacity:0;}
}
Then on successive children I will
inner:after {
animation: mainBlink 1s steps(2, start) infinite running;
}
I will toggle that last running
for paused
upon MIDI in events (still to be implemented) , the problem is that I'm toggeling this manually right now, and it looks that If I do that with one of them off/on , then the phase of this blink will be out of sync.
Any ideas on how to make this on sync ? Thanks
Here's a proof of concept attempt to do something like that: resetCssAnim.json (4.5 KB)
Thanks for your response, but 'm struggling to see thisone. Where is the function set(argumentOne,argumentTwo);
Defined ? is not a JS built-in function
I was trying your way , but I can't figure an automatic way to trigger that action (the reset action) (although I'm going to check now that)
My alternative was to create a dummy layer (.screen
) and tuck the buttons underneath upon pressing them.
The problem is that now all the background sits beneath this dummy layer which is rectangular.