1

i am currently working on a project which is taking an active check feed from Nagios Check_mk and displaying on a text widget. i am trying to get the widget to change colour, working through the workshop page i am stuck with the coffee script, it doesn't appear to have any effect when the value is changed. here is what i have

alert.coffee

class Dashing.Alert extends Dashing.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
# Example: $(@node).fadeOut().fadeIn() will make the node flash each time data comes in.

@accessor 'value', Dashing.AnimatedValue

@accessor 'isTooHigh', ->
@get('value') > 200

alert scss

 .widget-alert {
background: #00ff99; 
font-size: 65px; 
font-weight: bold; 
}

.danger {
background: #ff1a00;
}

all other files are exactly as detailed in the workshop page: any help greatly appreciated.

user2932543
  • 21
  • 4

1 Answers1

0

Basically the change of color or animated flashing of color was handled by the scss @keyframe rule, you must bind it to a selector, otherwise the animation will have no effect

Here's some example

    $background-alert-color-1: #FFFF66;
    $background-alert-color-2: #FF9618;
    $text-alert-color: #fff;


    @-webkit-keyframes status-alert-background {
      0%   { background-color: $background-alert-color-1; }
      50%  { background-color: $background-alert-color-2; }
      100% { background-color: $background-alert-color-1; }
    }

    .widget.status-alert {
      color: $text-alert-color;
      background-color: $background-alert-color-1;
      @include animation(status-alert-background, 2s, ease, infinite);

      .icon-alert-sign {
        display: inline-block;
      }

     .title, .more-info {
      color: $text-alert-color;
    }

For some example and reference (also for the coffescript) you can check this one dashing_zabbix

chojayr
  • 1
  • 2