Font Awesome Dashing Widget

README.md

Font Awesome Dashing Widget

This is a Dashing widget and all components needed to port the original radiator information into an Dashing Widget.

##Usage

To use this widget, copy fa.html, fa.coffee, and fa.scss into the /widgets/fa directory. Or simply run dashing install da8fcf69316b1d16fcf6 to let dashing do that for you.

To include the widget in a dashboard, add the following snippet to the dashboard layout file:

 <li data-row="1" data-col="1" data-sizex="1" data-sizey="2">
   <div data-id="some_data" data-view="Fa" data-title="My title"></div>
 </li>

Keep in mind that Dashing comes with Font Awesome 3.2.1

##Settings

Just bring up some data point and let the icon appear on your screen. E.g. via curl: curl -d '{ "auth_token": "TOKEN", "icon": "smile" }' http://localhost:3030/widgets/some_data

fa.coffee

class Dashing.Fa extends Dashing.Widget

  ready: ->
    # This is fired when the widget is done being rendered

  onData: (data) ->
    console.log(data)
    @set 'icon', data.icon

fa.html

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

<i data-bind-class="icon | prepend 'icon icon-'"></i>

fa.scss

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color:  #47bbb3;
$value-color:       #fff;

$title-color:       rgba(255, 255, 255, 0.7);

// ----------------------------------------------------------------------------
// Widget-number styles
// ----------------------------------------------------------------------------
.widget-fa {

  background-color: $background-color;

  .title {
    color: $title-color;
  }

  .icon {
    font-size: 7em;
  }
}

screen.png