coffeescriptbackground-colordashing

Dashing : change background color of widget


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.


Solution

  • 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()