README.md

Dashing Ringing Hotness Widget

Are you dashing? Are you hot? Then you need the Dashing Ringing Hotness Widget!

See the blog post for more details.

This widget is a fork of original Hotness widget with support for sound alert added.

About

This widget is similar to the basic Number widget, except that the entire widget changes colour based on the value displayed. It is designed to draw attention to metrics which need attention.

Good for metrics which are monitored for their 'good' (cold) or 'bad' (hot) status.

Not good for metrics which don't have a pre-determined range, or aren't that important.

Installation

From your Dashing Dashboard's directory, use the command:

dashing install 6246149

Using the widget

Include a widget with a data-view of Hotness. The widget must include a data-cool and data-warm value to work properly.

<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
  <div data-id="synergy" data-view="Hotness" data-title="Synergy Hotness" data-cool="20" data-warm="90"></div>
</li>

See below for a full list of fields this widget uses.

Fields

Required

• data-id: Like all widgets, you must include an identifier so that your jobs can update the value.
• data-cool: Anything below this value will show the 'cold' colour. It should be set high enough to include all the 'good' range of value for this metric.
• data-warm: Anything above this value will show the 'hot' colour. It should be set just below the 'bad' range of value for this metric - ie. those that need attention!

Not Required

• data-title: Optional title to show in the widget box (above the value).
• data-prefix: Optional prefix to the value.
• data-suffix: Optional suffix to the value.

Colours

The default colour scheme is Sweet Lolly by nekyo.

Colour Blindness (untested)

The file SCSS file has an alternative colour scheme which should (I hope!) be colour-blindness friendly (going from blue to yellow) called 400 Lovers by Tzadkiel.

To use this scheme, just uncomment the last 5 lines of the SCSS file

Sound support

As a bonus, this widget can also play a sound when status is modified. Just add one or more data-level*level*sound attributes with the value set to an absolute or relative url pointing to an audio file. level must be between 0 and 4.

Each time the status will change, the widget will play the audio file associated to the new status.

Example:

<

Thanks

License

The colour schemes and this widget are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 license.

ringing_hotness.coffee

class Dashing.RingingHotness extends Dashing.Widget

  @accessor 'value', Dashing.AnimatedValue

  constructor: ->
    super

  onData: (data) ->
    node = $(@node)
    value = parseInt data.value
    cool = parseInt node.data "cool"
    warm = parseInt node.data "warm"
    level = switch
      when value <= cool then 0
      when value >= warm then 4
      else 
        bucketSize = (warm - cool) / 3 # Total # of colours in middle
        Math.ceil (value - cool) / bucketSize
  
    backgroundClass = "ringing-hotness#{level}"
    lastClass = @get "lastClass"
    node.toggleClass "#{lastClass} #{backgroundClass}"
    @set "lastClass", backgroundClass

    if lastClass != backgroundClass
      audiosound = @get('level' + level + 'sound')
      audioplayer = new Audio(audiosound) if audiosound?
      if audioplayer
        audioplayer.play()

ringing_hotness.html

<h1 class="title" data-bind="title"></h1>

<h2 class="value" data-bind="value | shortenedNumber | prepend prefix | append suffix"></h2>

<p class="updated-at" data-bind="updatedAtMessage"></p>

ringing_hotness.scss

// ----------------------------------------------------------------------------
// Mixins
// ----------------------------------------------------------------------------
@mixin transition($transition-property, $transition-time, $method) {
  -webkit-transition: $transition-property $transition-time $method;
  -moz-transition: $transition-property $transition-time $method;
  -o-transition: $transition-property $transition-time $method;
  transition: $transition-property $transition-time $method;
}

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color: #000000;
$value-color: #FFFFFF;
$title-color: rgba(255, 255, 255, 0.7);
$updated-at-color: rgba(0, 0, 0, 0.3);

// ----------------------------------------------------------------------------
// Widget-ringing-hotness styles
// ----------------------------------------------------------------------------
.widget-ringing-hotness {

  background-color: $background-color;
  @include transition(background-color, 1s, linear);

  .title {
    color: $title-color;
  }

  .value {
    color: $value-color;
  }

  .updated-at {
    color: $updated-at-color;
  }

}

.ringing-hotness0 { background-color: #00C176; }
.ringing-hotness1 { background-color: #88C100; }
.ringing-hotness2 { background-color: #FABE28; }
.ringing-hotness3 { background-color: #FF8A00; }
.ringing-hotness4 { background-color: #FF003C; }

// // More colour-blind friendly palette
// .ringing-hotness0 { background-color: #046D8B; }
// .ringing-hotness1 { background-color: #309292; }
// .ringing-hotness2 { background-color: #2FB8AC; }
// .ringing-hotness3 { background-color: #93A42A; }
// .ringing-hotness4 { background-color: #ECBE13; }