How to make a led pulse / flash?

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 ?

1 Like

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)
1 Like

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 :slight_smile:
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 €

1 Like

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

1 Like

thanks a lot, much easier this way :grin:

Hi @jean-emmanuel

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

1 Like

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.

1 Like

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.

1 Like

There's a closing bracket missing in your css code.

1 Like

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:

  • Animation applied to button widgets (it works fine)
  • The Color will either be on one state or the other (just blinking) and will keep like this (it works fine)
  • They will be triggered upon velocity in (still haven't implemented but shouldn't be complicated)
  • The blinking times have to be in sync all widgets together (issue here)
    So as I don't need to timestamp this I just alter the CSS property of the root element such as:
@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)

  • button 1 & 2 blink when activated (out of phase when not activated at the same time).
  • button "reset" sets variable "resetCss" to "animation:none" and empties it shortly after
  • button 1 & 2 use that variable in their css to reset the animation when button "reset" is pushed.
1 Like

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

https://openstagecontrol.ammd.net/docs/widgets/scripting/

1 Like

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.

https://jsfiddle.net/xnt68739/