Hi guys
So i have a Status monitor module with Led style indicator 
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
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:
<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
You could also make it its own class:
<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
Hi Mojo!
Here is a version which does not require JavaScript (which is advantageous for animation):
<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>
Kristian Hasselknippe wrote:
Hi Mojo!
Here is a version which does not require JavaScript (which is advantageous for animation):
<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:
JS is on separated thread which needs to run along w/ business logic, and then communicate to Native UI thread
UX Code adds constant weight on the UI thread
Just wondering…
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 
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!