I would create a new widget for my dashboard with Dashing. With a server REST, I receive a hexadecimal code color, and I want use this for the background color of my widget, dynamically.
My job work, I receivre the right color. But I can't change dynamically the background color.
SCSS code :
$background-color: #008000; /*default color*/
$title-color: rgba(255, 255, 255, 1);
$moreinfo-color: rgba(255, 255, 255, 0.7);
.widget-state {
background: $background-color;
font-size: 65px;
font-weight: bold;
}
And the coffee script of my widget
ready: ->
# This is fired when the widget is done being rendered
onData: (data) ->
# Handle incoming data
# You can access the html node of this widget with `@node`
@accessor 'value', Dashing.AnimatedValue
@accessor 'FCurrentColor', Dashing.AnimatedValue
@accessor 'FCurrentState', Dashing.AnimatedValue
$(@node).fadeOut().css('background-color', @get('FCurrentColor')).fadeIn()
The last line must change the background color, no ? But it's not working.
now, the dynamically color of the background works. I have set the ready part and extract the @accessor from onData.
class Dashing.State extends Dashing.Widget
@accessor 'FCurrentColor', Dashing.AnimatedValue
@accessor 'FCurrentState', Dashing.AnimatedValue
@accessor 'FPreviousState', Dashing.AnimatedValue
ready: ->
# This is fired when the widget is done being rendered
$(@node).css('background-color',@get('FCurrentColor'))
onData: (data) ->
# Handle incoming data
# You can access the html node of this widget with `@node`
# Example: $(@node).fadeOut().fadeIn() will make the node flash each time data comes in.
if data.FCurrentState isnt data.FPreviousState
$(@node).fadeOut().css('background-color',@get('FCurrentColor')).fadeIn()