# What's the best way to Blink a component? (indicator leds)..GIFs?

**URL:** <https://forums.fusetools.com/t/whats-the-best-way-to-blink-a-component-indicator-leds-gifs/7002>\
**Category:** How-to Discussions\
**Created:** [August 15, 2016, 1:09am UTC](https://forums.fusetools.com/t/whats-the-best-way-to-blink-a-component-indicator-leds-gifs/7002 "2016-08-15T01:09:08Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mojo](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/mojo/32/167_2.png) [@Mojo](https://forums.fusetools.com/u/Mojo)\
**Post date:** [August 15, 2016, 1:09am UTC](https://forums.fusetools.com/t/whats-the-best-way-to-blink-a-component-indicator-leds-gifs/7002/1 "2016-08-15T01:09:08Z")

</div>

Hi guys

So i have a Status monitor module with Led style indicator ![file](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/Q18EKqpjzQHZ-legacy-files-6V4YGf0t6iLvwMfE-piZr1oCGdeqU_nA8U0JppJmJ.jpg)

Right now that’s a plain green circle coded into source

What’s the best/easiest way to make this led indicator blink?

I have a few ways in my head but wanted to know what’s the best/easiest/CPU friendly way?

Or should I just make this an animated GIF? (IMPORTANT QUESTION: does fuse UX Support rendering GIFs?)

Thanks

---

<div class="post-metadata">

**Author:** ![Edwin\_Reynoso](https://avatars.discourse-cdn.com/v4/letter/e/e99b99/32.png) [@Edwin\_Reynoso](https://forums.fusetools.com/u/Edwin_Reynoso)\
**Post date:** [August 15, 2016, 2:26am UTC](https://forums.fusetools.com/t/whats-the-best-way-to-blink-a-component-indicator-leds-gifs/7002/2 "2016-08-15T02:26:51Z")

</div>

I wouldn’t use a GIF because you can’t control the timing, and I’m doubting is more memory efficient. But here’s a basic example:

```auto
<App>
    <JavaScript>
        var Observable = require('FuseJS/Observable');
        var isOn = Observable(false);

        function changeLight() {
            isOn.value = !isOn.value;
            setTimeout(changeLight, 100);
        }

        changeLight();

        module.exports = {
            isOn: isOn
        }
    </JavaScript>
    <Circle ux:Name="light" Width="100" Height="100">
        <WhileTrue Value="{isOn}">
            <Change Target="light.Color" Value="Green" />
        </WhileTrue>
    </Circle>
</App>

```

**Notice I don’t use `setInterval` you shouldnt use it, call `setTimeout` at the end of the function call, this guarentees that the last call was finished before being added to the javascript event loop. `setInterval` would keep calling the function even if the function has not finished running**

It’d be interesting to know if there’s a full ux only way of doing this

---

<div class="post-metadata">

**Author:** ![Edwin\_Reynoso](https://avatars.discourse-cdn.com/v4/letter/e/e99b99/32.png) [@Edwin\_Reynoso](https://forums.fusetools.com/u/Edwin_Reynoso)\
**Post date:** [August 15, 2016, 2:46am UTC](https://forums.fusetools.com/t/whats-the-best-way-to-blink-a-component-indicator-leds-gifs/7002/3 "2016-08-15T02:46:51Z")

</div>

You could also make it its own class:

```auto
<App>
    <Circle ux:Class="MyBlinkLight" ux:Name="light" Width="100" Height="100" Time="300">
        <float ux:Property="Color" />
        <float ux:Property="Time" />
        <JavaScript>
            var Circle = this;
            function changeLight() {
                if(Circle.Color.value[1] >= 0.5) {
                    Circle.Color.value = [0, 0, 0, 1];
                } else {
                    Circle.Color.value = [0, 0.5, 0, 1];
                }
                setTimeout(changeLight, Circle.Time.value);
            }

            changeLight();
        </JavaScript>
    </Circle>
    <MyBlinkLight Time="500" />
</App>

```

Hard to add color properties because you have to deal with an array of colors, instead of strings of hex/rgba

---

<div class="post-metadata">

**Author:** ![Kristian\_Hasselknipp](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/kristian_hasselknipp/32/549_2.png) [@Kristian\_Hasselknipp](https://forums.fusetools.com/u/Kristian_Hasselknipp)\
**Post date:** [August 15, 2016, 8:18am UTC](https://forums.fusetools.com/t/whats-the-best-way-to-blink-a-component-indicator-leds-gifs/7002/4 "2016-08-15T08:18:38Z")

</div>

Hi Mojo!

Here is a version which does not require JavaScript (which is advantageous for animation):

```auto
<App>
    <Panel ux:Class="Blinker" TimeOn="0.5" TimeOff="0.5" Frequency="1">
        <double ux:Property="TimeOn" />
        <double ux:Property="TimeOff" />
        <double ux:Property="Frequency" />
        <Circle ux:Name="circle" Color="Green"/>
        <Timeline ux:Name="changeColor">
            <Change circle.Color="Black" Delay="{Property this.TimeOn}" Duration="0"/>
            <Nothing Delay="{Property this.TimeOn}" Duration="{Property this.TimeOff}" />
        </Timeline>
        <WhileTrue Value="true" Bypass="Never">
            <Cycle Waveform="Sine" Target="changeColor.Progress" Frequency="{Property this.Frequency}" Low="0" High="1"/>
        </WhileTrue>
    </Panel>
    <StackPanel Alignment="Center" ItemSpacing="5">
        <Blinker Width="30" Height="30" TimeOn="0.2" TimeOff="1" Frequency="1.5"/>
        <Blinker Width="30" Height="30" TimeOn="0.5" TimeOff="0.5" Frequency="1" />
        <Blinker Width="30" Height="30" TimeOn="0.1" TimeOff="0.1" Frequency="2"/>
        <Blinker Width="30" Height="30" TimeOn="0.2" TimeOff="0.4" Frequency="0.5"/>
    </StackPanel>
</App>

```

---

<div class="post-metadata">

**Author:** ![Mojo](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/mojo/32/167_2.png) [@Mojo](https://forums.fusetools.com/u/Mojo)\
**Post date:** [August 15, 2016, 9:12am UTC](https://forums.fusetools.com/t/whats-the-best-way-to-blink-a-component-indicator-leds-gifs/7002/5 "2016-08-15T09:12:01Z")

</div>

> **Kristian Hasselknippe wrote:**
> 
> Hi Mojo!
> 
> Here is a version which does not require JavaScript (which is advantageous for animation):
> 
> ```ux
> <App>
> <Panel ux:Class="Blinker" TimeOn="0.5" TimeOff="0.5" Frequency="1">
> <double ux:Property="TimeOn" />
> <double ux:Property="TimeOff" />
> <double ux:Property="Frequency" />
> <Circle ux:Name="circle" Color="Green"/>
> <Timeline ux:Name="changeColor">
> <Change circle.Color="Black" Delay="{Property this.TimeOn}" Duration="0"/>
> <Nothing Delay="{Property this.TimeOn}" Duration="{Property this.TimeOff}" />
> </Timeline>
> <WhileTrue Value="true" Bypass="Never">
> <Cycle Waveform="Sine" Target="changeColor.Progress" Frequency="{Property this.Frequency}" Low="0" High="1"/>
> </WhileTrue>
> </Panel>
> <StackPanel Alignment="Center" ItemSpacing="5">
> <Blinker Width="30" Height="30" TimeOn="0.2" TimeOff="1" Frequency="1.5"/>
> <Blinker Width="30" Height="30" TimeOn="0.5" TimeOff="0.5" Frequency="1" />
> <Blinker Width="30" Height="30" TimeOn="0.1" TimeOff="0.1" Frequency="2"/>
> <Blinker Width="30" Height="30" TimeOn="0.2" TimeOff="0.4" Frequency="0.5"/>
> </StackPanel>
> </App>
> 
> ```

@ALL Thanks guys, and yeh I was gonna go the JS route… or GIF …

@Kristian so awesome man, so glad there is a pure UX way of doing it! Although I though it’d be simpler haha. Perhaps ya’ll should add this to your Animation stack… and calling the effect Blink, Fade, Pulse, Beat … with extra parameter LoopCount = number of blinks or infinite looping … That would be rad.

Now that I think about it though, would a GIF be more CPU friendly (at a little more expense to memory) vs programatically blinking the darn thing? Since:

1. JS is on separated thread which needs to run along w/ business logic, and then communicate to Native UI thread

2. UX Code adds constant weight on the UI thread

Just wondering…

---

<div class="post-metadata">

**Author:** ![Remi\_Pedersen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/remi_pedersen/32/432_2.png) [@Remi\_Pedersen](https://forums.fusetools.com/u/Remi_Pedersen)\
**Post date:** [August 15, 2016, 9:34am UTC](https://forums.fusetools.com/t/whats-the-best-way-to-blink-a-component-indicator-leds-gifs/7002/6 "2016-08-15T09:34:42Z")

</div>

> Now that I think about it though, would a GIF be more CPU friendly (at a little more expense to memory) vs programatically blinking the darn thing?

No, the pure UX approach is the way to go.

Currently I believe the only way to support animated GIFs in Fuse is by putting them inside a WebView and I really wouldn’t expect this to change in the near future: animated GIFs are simply not the right tool for app development 🙂

---

<div class="post-metadata">

**Author:** ![Mojo](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/mojo/32/167_2.png) [@Mojo](https://forums.fusetools.com/u/Mojo)\
**Post date:** [August 15, 2016, 11:08am UTC](https://forums.fusetools.com/t/whats-the-best-way-to-blink-a-component-indicator-leds-gifs/7002/7 "2016-08-15T11:08:20Z")

</div>

> **Remi Pedersen wrote:**
> 
> > Now that I think about it though, would a GIF be more CPU friendly (at a little more expense to memory) vs programatically blinking the darn thing?
> 
> No, the pure UX approach is the way to go.
> 
> Currently I believe the only way to support animated GIFs in Fuse is by putting them inside a WebView and I really wouldn’t expect this to change in the near future: animated GIFs are simply not the right tool for app development 🙂

oohhh i thought Animated GIFs worked right off the bat as a regular image component …

anyway, thanks very much for the clarifcation!