initial commit, import from pixelated_dashboard

39 files changed, 884 insertions, 0 deletions

diff --git a/widgets/ccmenu/ccmenu.coffee b/widgets/ccmenu/ccmenu.coffee
new file mode 100644
index 0000000..7c22cd6
--- /dev/null
+++ b/widgets/ccmenu/ccmenu.coffee
@@ -0,0 +1,9 @@
+class Dashing.Ccmenu extends Dashing.Widget
+
+  onData: (data) ->
+    if data.color
+      # clear existing "status-*" classes
+      $(@get('node')).attr 'class', (i,c) ->
+        c.replace /\bstatus-\S+/g, ''
+      # add new class
+      $(@get('node')).addClass "status-#{data.color}"
diff --git a/widgets/ccmenu/ccmenu.html b/widgets/ccmenu/ccmenu.html
new file mode 100644
index 0000000..0508028
--- /dev/null
+++ b/widgets/ccmenu/ccmenu.html
@@ -0,0 +1,7 @@
+<a class="title-link" data-bind="title" data-bind-href="job_url" target="_blank"></a>
+<ul>
+	<li data-foreach-item="items">
+		<p data-bind="item"></p>
+	</li>
+</ul>
+<p class="updated-at" data-bind="updatedAtMessage"></p>
diff --git a/widgets/ccmenu/ccmenu.scss b/widgets/ccmenu/ccmenu.scss
new file mode 100644
index 0000000..fe3d3a3
--- /dev/null
+++ b/widgets/ccmenu/ccmenu.scss
@@ -0,0 +1,44 @@
+// ----------------------------------------------------------------------------
+// Sass declarations
+// ----------------------------------------------------------------------------
+$title-color:       rgba(255, 255, 255, 0.7);
+$green-color:       #50BA5B;
+$red-color:         #D93C38;
+$orange-color:      #F6A41C;
+
+// ----------------------------------------------------------------------------
+// Widget-ccmenu styles
+// ----------------------------------------------------------------------------
+.widget-ccmenu {
+  vertical-align: top;
+
+  .title {
+    color: $title-color;
+  }
+
+  .title-link {
+    font-size: 30px;
+
+    &:hover {
+      color: rgba(255, 255, 255, 0.7);
+    }
+  }
+
+  li {
+    margin-bottom: 5px;
+  }
+  .updated-at {
+    color: rgba(0, 0, 0, 0.3);
+  }
+}
+
+.status-green {
+  background-color: $green-color;
+}
+.status-red {
+  background-color: $red-color;
+}
+
+.status-orange {
+  background-color: $orange-color;
+}
diff --git a/widgets/clock/clock.coffee b/widgets/clock/clock.coffee
new file mode 100644
index 0000000..cd6b116
--- /dev/null
+++ b/widgets/clock/clock.coffee
@@ -0,0 +1,18 @@
+class Dashing.Clock extends Dashing.Widget
+
+  ready: ->
+    setInterval(@startTime, 500)
+
+  startTime: =>
+    today = new Date()
+
+    h = today.getHours()
+    m = today.getMinutes()
+    s = today.getSeconds()
+    m = @formatTime(m)
+    s = @formatTime(s)
+    @set('time', h + ":" + m + ":" + s)
+    @set('date', today.toDateString())
+
+  formatTime: (i) ->
+    if i < 10 then "0" + i else i
\ No newline at end of file
diff --git a/widgets/clock/clock.html b/widgets/clock/clock.html
new file mode 100644
index 0000000..06759d4
--- /dev/null
+++ b/widgets/clock/clock.html
@@ -0,0 +1,2 @@
+<h1 data-bind="date"></h1>
+<h2 data-bind="time"></h2>
\ No newline at end of file
diff --git a/widgets/clock/clock.scss b/widgets/clock/clock.scss
new file mode 100644
index 0000000..19e91bf
--- /dev/null
+++ b/widgets/clock/clock.scss
@@ -0,0 +1,13 @@
+// ----------------------------------------------------------------------------
+// Sass declarations
+// ----------------------------------------------------------------------------
+$background-color:  #dc5945;
+
+// ----------------------------------------------------------------------------
+// Widget-clock styles
+// ----------------------------------------------------------------------------
+.widget-clock {
+
+  background-color: $background-color;
+
+}
diff --git a/widgets/comments/comments.coffee b/widgets/comments/comments.coffee
new file mode 100644
index 0000000..ff659ec
--- /dev/null
+++ b/widgets/comments/comments.coffee
@@ -0,0 +1,24 @@
+class Dashing.Comments extends Dashing.Widget
+
+  @accessor 'quote', ->
+    "“#{@get('current_comment')?.body}”"
+
+  ready: ->
+    @currentIndex = 0
+    @commentElem = $(@node).find('.comment-container')
+    @nextComment()
+    @startCarousel()
+
+  onData: (data) ->
+    @currentIndex = 0
+
+  startCarousel: ->
+    setInterval(@nextComment, 8000)
+
+  nextComment: =>
+    comments = @get('comments')
+    if comments
+      @commentElem.fadeOut =>
+        @currentIndex = (@currentIndex + 1) % comments.length
+        @set 'current_comment', comments[@currentIndex]
+        @commentElem.fadeIn()
diff --git a/widgets/comments/comments.html b/widgets/comments/comments.html
new file mode 100644
index 0000000..7c580be
--- /dev/null
+++ b/widgets/comments/comments.html
@@ -0,0 +1,7 @@
+<h1 class="title" data-bind="title"></h1>
+<div class="comment-container">
+  <h3><img data-bind-src='current_comment.avatar'/><span data-bind='current_comment.name' class="name"></span></h3>
+  <p class="comment" data-bind='quote'></p>
+</div>
+
+<p class="more-info" data-bind="moreinfo"></p>
diff --git a/widgets/comments/comments.scss b/widgets/comments/comments.scss
new file mode 100644
index 0000000..2ace30e
--- /dev/null
+++ b/widgets/comments/comments.scss
@@ -0,0 +1,33 @@
+// ----------------------------------------------------------------------------
+// Sass declarations
+// ----------------------------------------------------------------------------
+$background-color:  #eb9c3c;
+
+$title-color:       rgba(255, 255, 255, 0.7);
+$moreinfo-color:    rgba(255, 255, 255, 0.7);
+
+// ----------------------------------------------------------------------------
+// Widget-comment styles
+// ----------------------------------------------------------------------------
+.widget-comments {
+
+  background-color: $background-color;
+
+  .title {
+    color: $title-color;
+    margin-bottom: 15px;
+  }
+
+  .name {
+    padding-left: 5px;
+  }
+
+  .comment-container {
+    display: none;
+  }
+
+  .more-info {
+    color: $moreinfo-color;
+  }
+
+}
diff --git a/widgets/github_pr/github_pr.coffee b/widgets/github_pr/github_pr.coffee
new file mode 100644
index 0000000..43f4fc4
--- /dev/null
+++ b/widgets/github_pr/github_pr.coffee
@@ -0,0 +1,6 @@
+class Dashing.Github_pr extends Dashing.Widget
+  ready: ->
+    if @get('unordered')
+      $(@node).find('ol').remove()
+    else
+      $(@node).find('ul').remove()
diff --git a/widgets/github_pr/github_pr.html b/widgets/github_pr/github_pr.html
new file mode 100644
index 0000000..5d4d8d8
--- /dev/null
+++ b/widgets/github_pr/github_pr.html
@@ -0,0 +1,10 @@
+<h1 class="title" data-bind="title"></h1>
+
+<ul class="github_pr-nostyle">
+  <li data-foreach-item="items">
+    <a class="label-link" data-bind="item.label | truncate 30" data-bind-href="item.pr_url" target="_blank"></a>
+  </li>
+</ul>
+
+<p class="more-info" data-bind="moreinfo"></p>
+<p class="updated-at" data-bind="updatedAtMessage"></p>
diff --git a/widgets/github_pr/github_pr.scss b/widgets/github_pr/github_pr.scss
new file mode 100644
index 0000000..e4ad010
--- /dev/null
+++ b/widgets/github_pr/github_pr.scss
@@ -0,0 +1,57 @@
+// ----------------------------------------------------------------------------
+// Sass declarations
+// ----------------------------------------------------------------------------
+$background-color:  #178CA6;
+$value-color:       #fff;
+
+$title-color:       #fff;
+$label-color:       rgba(255, 255, 255, 0.7);
+$moreinfo-color:    rgba(255, 255, 255, 0.7);
+
+// ----------------------------------------------------------------------------
+// Widget-github_pr styles
+// ----------------------------------------------------------------------------
+.widget-github-pr {
+
+  background-color: $background-color;
+  vertical-align: top;
+
+  .title {
+    color: $title-color;
+  }
+
+  ol, ul {
+    margin: 0 15px;
+    text-align: left;
+    color: $label-color;
+  }
+
+  ol {
+    list-style-position: inside;
+  }
+
+  li {
+    margin-bottom: 5px;
+  }
+
+  .github_pr-nostyle {
+    list-style: none;
+  }
+
+  .label-link {
+    color: $value-color;
+
+    &:hover {
+      color: rgba(255, 255, 255, 0.7);
+    }
+  }
+
+  .updated-at {
+    color: rgba(0, 0, 0, 0.3);
+  }
+
+  .more-info {
+    color: $moreinfo-color;
+  }
+
+}
diff --git a/widgets/graph/graph.coffee b/widgets/graph/graph.coffee
new file mode 100644
index 0000000..a54de08
--- /dev/null
+++ b/widgets/graph/graph.coffee
@@ -0,0 +1,36 @@
+class Dashing.Graph extends Dashing.Widget
+
+  @accessor 'current', ->
+    return @get('displayedValue') if @get('displayedValue')
+    points = @get('points')
+    if points
+      points[points.length - 1].y
+
+  ready: ->
+    container = $(@node).parent()
+    # Gross hacks. Let's fix this.
+    width = (Dashing.widget_base_dimensions[0] * container.data("sizex")) + Dashing.widget_margins[0] * 2 * (container.data("sizex") - 1)
+    height = (Dashing.widget_base_dimensions[1] * container.data("sizey"))
+    @graph = new Rickshaw.Graph(
+      element: @node
+      width: width
+      height: height
+      renderer: @get("graphtype")
+      series: [
+        {
+        color: "#fff",
+        data: [{x:0, y:0}]
+        }
+      ]
+    )
+
+    @graph.series[0].data = @get('points') if @get('points')
+
+    x_axis = new Rickshaw.Graph.Axis.X(graph: @graph)
+    y_axis = new Rickshaw.Graph.Axis.Y(graph: @graph, tickFormat: Rickshaw.Fixtures.Number.formatKMBT)
+    @graph.render()
+
+  onData: (data) ->
+    if @graph
+      @graph.series[0].data = data.points
+      @graph.render()
diff --git a/widgets/graph/graph.html b/widgets/graph/graph.html
new file mode 100644
index 0000000..456dd0f
--- /dev/null
+++ b/widgets/graph/graph.html
@@ -0,0 +1,5 @@
+<h1 class="title" data-bind="title"></h1>
+
+<h2 class="value" data-bind="current | prettyNumber | prepend prefix"></h2>
+
+<p class="more-info" data-bind="moreinfo"></p>
diff --git a/widgets/graph/graph.scss b/widgets/graph/graph.scss
new file mode 100644
index 0000000..d1d7534
--- /dev/null
+++ b/widgets/graph/graph.scss
@@ -0,0 +1,65 @@
+// ----------------------------------------------------------------------------
+// Sass declarations
+// ----------------------------------------------------------------------------
+$background-color:  #178CA6;
+
+$title-color:       rgba(255, 255, 255, 0.7);
+$moreinfo-color:    rgba(255, 255, 255, 0.3);
+$tick-color:        rgba(0, 0, 0, 0.4);
+
+
+// ----------------------------------------------------------------------------
+// Widget-graph styles
+// ----------------------------------------------------------------------------
+.widget-graph {
+
+  background-color: $background-color;
+  position: relative;
+
+
+  svg {
+    position: absolute;
+    opacity: 0.4;
+    fill-opacity: 0.4;
+    left: 0px;
+    top: 0px;
+  }
+
+  .title, .value {
+    position: relative;
+    z-index: 99;
+  }
+
+  .title {
+    color: $title-color;
+  }
+
+  .more-info {
+    color: $moreinfo-color;
+    font-weight: 600;
+    font-size: 20px;
+    margin-top: 0;
+  }
+
+  .x_tick {
+    position: absolute;
+    bottom: 0;
+    .title {
+      font-size: 20px;
+      color: $tick-color;
+      opacity: 0.5;
+      padding-bottom: 3px;
+    }
+  }
+
+  .y_ticks {
+    font-size: 20px;
+    fill: $tick-color;
+    fill-opacity: 1;
+  }
+
+  .domain {
+    display: none;
+  }
+
+}
diff --git a/widgets/iframe/iframe.coffee b/widgets/iframe/iframe.coffee
new file mode 100644
index 0000000..e674e6b
--- /dev/null
+++ b/widgets/iframe/iframe.coffee
@@ -0,0 +1,7 @@
+class Dashing.Iframe extends Dashing.Widget
+
+ready: ->
+  $(@node).find(".iframe").attr('src', @get('src'))
+
+onData: (data) ->
+  $(@node).find(".iframe").attr('src', data.src)
diff --git a/widgets/iframe/iframe.html b/widgets/iframe/iframe.html
new file mode 100644
index 0000000..c626d10
--- /dev/null
+++ b/widgets/iframe/iframe.html
@@ -0,0 +1 @@
+<iframe class="iframe" data-bind-src="src" frameborder=0></iframe>
diff --git a/widgets/iframe/iframe.scss b/widgets/iframe/iframe.scss
new file mode 100644
index 0000000..6827a1b
--- /dev/null
+++ b/widgets/iframe/iframe.scss
@@ -0,0 +1,8 @@
+.widget-iframe {
+  padding: 3px 0px 0px 0px !important;
+
+  iframe {
+    width: 100%;
+    height: 100%;
+  }
+}
diff --git a/widgets/image/image.coffee b/widgets/image/image.coffee
new file mode 100644
index 0000000..c3892c0
--- /dev/null
+++ b/widgets/image/image.coffee
@@ -0,0 +1,9 @@
+class Dashing.Image 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.
diff --git a/widgets/image/image.html b/widgets/image/image.html
new file mode 100644
index 0000000..41a88eb
--- /dev/null
+++ b/widgets/image/image.html
@@ -0,0 +1 @@
+<img data-bind-src="image | prepend '/assets'" data-bind-width="width"/>
diff --git a/widgets/image/image.scss b/widgets/image/image.scss
new file mode 100644
index 0000000..0b1a316
--- /dev/null
+++ b/widgets/image/image.scss
@@ -0,0 +1,13 @@
+// ----------------------------------------------------------------------------
+// Sass declarations
+// ----------------------------------------------------------------------------
+$background-color:  #4b4b4b;
+
+// ----------------------------------------------------------------------------
+// Widget-image styles
+// ----------------------------------------------------------------------------
+.widget-image {
+
+  background-color: $background-color;
+
+}
diff --git a/widgets/jenkins_build_status/jenkins_build_status.coffee b/widgets/jenkins_build_status/jenkins_build_status.coffee
new file mode 100644
index 0000000..d7d8630
--- /dev/null
+++ b/widgets/jenkins_build_status/jenkins_build_status.coffee
@@ -0,0 +1,28 @@
+class Dashing.JenkinsBuildStatus extends Dashing.Widget
+
+  lastPlayed: 0
+  timeBetweenSounds: 300000
+
+  onData: (data) ->
+    if data.failed
+      $(@node).find('div.build-failed').show()
+      $(@node).find('div.build-succeeded').hide()
+      $(@node).css("background-color", "red")
+
+      if 'speechSynthesis' of window
+        @playSoundForUser data.failedJobs[0].value if Date.now() - @lastPlayed > @timeBetweenSounds
+    else
+      $(@node).find('div.build-failed').hide()
+      $(@node).find('div.build-succeeded').show()
+      $(@node).css("background-color", "#12b0c5")
+
+  playSoundForUser: (user) ->
+    @lastPlayed = Date.now()
+    texts = ["#{user} has broken the build.", "The build is broken by #{user}", "#{user} is great, but lacks some programming skills", "Oops, I did it again."]
+    textNr = Math.floor((Math.random() * texts.length));
+    @playSound texts[textNr]
+
+  playSound: (text) ->
+    msg = new SpeechSynthesisUtterance(text)
+    msg.voice = speechSynthesis.getVoices()[0]
+    speechSynthesis.speak msg
\ No newline at end of file
diff --git a/widgets/jenkins_build_status/jenkins_build_status.html b/widgets/jenkins_build_status/jenkins_build_status.html
new file mode 100644
index 0000000..472bc73
--- /dev/null
+++ b/widgets/jenkins_build_status/jenkins_build_status.html
@@ -0,0 +1,16 @@
+<div class="build-failed">
+	<h1 class="jenkins-status"><span data-bind="title"></span> FAILED</h1>
+	<ul class="list-nostyle list-failed">
+	  <li data-foreach-item="failedJobs">
+	    <div class="label" data-bind="item.label"></div>
+	    <div class="value" data-bind="item.value"></div>
+	  </li>
+	</ul>
+</div>
+
+<div class="build-succeeded">
+	<h1 class="jenkins-status">All <span data-bind="title"></span> builds are successful</h1>
+	<i class="fa fa-thumbs-o-up"></i>
+</div>
+
+<p class="updated-at" data-bind="updatedAtMessage"></p>
diff --git a/widgets/jenkins_build_status/jenkins_build_status.scss b/widgets/jenkins_build_status/jenkins_build_status.scss
new file mode 100644
index 0000000..5e1eff1
--- /dev/null
+++ b/widgets/jenkins_build_status/jenkins_build_status.scss
@@ -0,0 +1,56 @@
+// ----------------------------------------------------------------------------
+// Sass declarations
+// ----------------------------------------------------------------------------
+$background-color:  #ec663c;
+$title-color:       rgba(255, 255, 255, 0.7);
+$label-color:       rgba(255, 255, 255, 0.7);
+$value-color:       #fff;
+
+// ----------------------------------------------------------------------------
+// Widget-text styles
+// ----------------------------------------------------------------------------
+.widget-jenkins-build-status {
+
+  background-color: $background-color;
+
+  .title {
+    color: $title-color;
+  }
+  .updated-at {
+    color: rgba(255, 255, 255, 0.7);
+  }
+
+  ol, ul {
+    margin: 0 15px;
+    text-align: left;
+    color: $label-color;
+  }
+
+  li {
+    margin-bottom: 5px;
+    font-size: 40px;
+  }
+
+  .label {
+    color: $label-color;
+  }
+
+  .value {
+    margin-left: 12px;
+    font-weight: 600;
+    color: $value-color;
+  }
+
+  .updated-at {
+    color: rgba(0, 0, 0, 0.3);
+  }
+
+  .build-failed {
+    display: none;
+  }
+
+  .fa {
+    font-size: 10em;
+    color: $label-color;
+  }
+}
diff --git a/widgets/list/list.coffee b/widgets/list/list.coffee
new file mode 100644
index 0000000..0028073
--- /dev/null
+++ b/widgets/list/list.coffee
@@ -0,0 +1,6 @@
+class Dashing.List extends Dashing.Widget
+  ready: ->
+    if @get('unordered')
+      $(@node).find('ol').remove()
+    else
+      $(@node).find('ul').remove()
diff --git a/widgets/list/list.html b/widgets/list/list.html
new file mode 100644
index 0000000..07e0471
--- /dev/null
+++ b/widgets/list/list.html
@@ -0,0 +1,18 @@
+<h1 class="title" data-bind="title"></h1>
+
+<ol>
+  <li data-foreach-item="items">
+    <span class="label" data-bind="item.label"></span>
+    <span class="value" data-bind="item.value"></span>
+  </li>
+</ol>
+
+<ul class="list-nostyle">
+  <li data-foreach-item="items">
+    <span class="label" data-bind="item.label"></span>
+    <span class="value" data-bind="item.value"></span>
+  </li>
+</ul>
+
+<p class="more-info" data-bind="moreinfo"></p>
+<p class="updated-at" data-bind="updatedAtMessage"></p>
diff --git a/widgets/list/list.scss b/widgets/list/list.scss
new file mode 100644
index 0000000..1d2bdb0
--- /dev/null
+++ b/widgets/list/list.scss
@@ -0,0 +1,60 @@
+// ----------------------------------------------------------------------------
+// Sass declarations
+// ----------------------------------------------------------------------------
+$background-color:  #178CA6;
+$value-color:       #fff;
+
+$title-color:       rgba(255, 255, 255, 0.7);
+$label-color:       rgba(255, 255, 255, 0.7);
+$moreinfo-color:    rgba(255, 255, 255, 0.7);
+
+// ----------------------------------------------------------------------------
+// Widget-list styles
+// ----------------------------------------------------------------------------
+.widget-list {
+
+  background-color: $background-color;
+  vertical-align: top;
+
+  .title {
+    color: $title-color;
+  }
+
+  ol, ul {
+    margin: 0 15px;
+    text-align: left;
+    color: $label-color;
+  }
+
+  ol {
+    list-style-position: inside;
+  }
+
+  li {
+    margin-bottom: 5px;
+  }
+
+  .list-nostyle {
+    list-style: none;
+  }
+
+  .label {
+    color: $label-color;
+  }
+
+  .value {
+    float: right;
+    margin-left: 12px;
+    font-weight: 600;
+    color: $value-color;
+  }
+
+  .updated-at {
+    color: rgba(0, 0, 0, 0.3);
+  }
+
+  .more-info {
+    color: $moreinfo-color;
+  }
+
+}
diff --git a/widgets/meter/meter.coffee b/widgets/meter/meter.coffee
new file mode 100644
index 0000000..b7b3aa8
--- /dev/null
+++ b/widgets/meter/meter.coffee
@@ -0,0 +1,16 @@
+class Dashing.Meter extends Dashing.Widget
+
+  @accessor 'value', Dashing.AnimatedValue
+
+  constructor: ->
+    super
+    @observe 'max', (max) ->
+      $(@node).find(".meter").trigger('configure', {'max': max})
+    @observe 'min', (min) ->
+      $(@node).find(".meter").trigger('configure', {'min': min})
+
+  ready: ->
+    meter = $(@node).find(".meter")
+    meter.attr("data-bgcolor", meter.css("background-color"))
+    meter.attr("data-fgcolor", meter.css("color"))
+    meter.knob()
diff --git a/widgets/meter/meter.html b/widgets/meter/meter.html
new file mode 100644
index 0000000..16f1f06
--- /dev/null
+++ b/widgets/meter/meter.html
@@ -0,0 +1,7 @@
+<h1 class="title" data-bind="title"></h1>
+
+<input class="meter" data-angleOffset=-125 data-angleArc=250 data-width=200 data-readOnly=true data-bind-value="value | shortenedNumber" data-bind-data-min="min" data-bind-data-max="max">
+
+<p class="more-info" data-bind="moreinfo"></p>
+
+<p class="updated-at" data-bind="updatedAtMessage"></p>
diff --git a/widgets/meter/meter.scss b/widgets/meter/meter.scss
new file mode 100644
index 0000000..da9ff0b
--- /dev/null
+++ b/widgets/meter/meter.scss
@@ -0,0 +1,35 @@
+// ----------------------------------------------------------------------------
+// Sass declarations
+// ----------------------------------------------------------------------------
+$background-color:  #9c4274;
+
+$title-color:       rgba(255, 255, 255, 0.7);
+$moreinfo-color:    rgba(255, 255, 255, 0.3);
+
+$meter-background:  darken($background-color, 15%);
+
+// ----------------------------------------------------------------------------
+// Widget-meter styles
+// ----------------------------------------------------------------------------
+.widget-meter {
+
+  background-color: $background-color;
+
+  input.meter {
+    background-color: $meter-background;
+    color: #fff;
+  }
+
+  .title {
+    color: $title-color;
+  }
+
+  .more-info {
+    color: $moreinfo-color;
+  }
+
+  .updated-at {
+    color: rgba(0, 0, 0, 0.3);
+  }
+
+}
diff --git a/widgets/nagios/nagios.coffee b/widgets/nagios/nagios.coffee
new file mode 100644
index 0000000..72f47e5
--- /dev/null
+++ b/widgets/nagios/nagios.coffee
@@ -0,0 +1,9 @@
+class Dashing.Nagios 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.
\ No newline at end of file
diff --git a/widgets/nagios/nagios.html b/widgets/nagios/nagios.html
new file mode 100644
index 0000000..cbc4e43
--- /dev/null
+++ b/widgets/nagios/nagios.html
@@ -0,0 +1,42 @@
+<ul>
+<li data-bind-class="status">
+
+<a class="title-link" data-bind-href="nagios_url" target="_blank" data-bind="title"></a>
+
+<div data-showif="status | equals 'error'"> <!-- error -->
+  <h4>Error querying Nagios</h4>
+</div> <!-- /no error -->
+<div data-hideif="status | equals 'error'"> <!-- no error -->
+<div data-hideif="criticals | equals 0">
+<h4 data-bind="criticals"></h4>
+<h4 data-showif="criticals | equals 1">critical</h4>
+<h4 data-hideif="criticals | equals 1">criticals</h4>
+</div>
+<ul>
+  <li class="alert" data-foreach-item="critical_services">
+    <p class="widget-content" data-bind="item"></p>
+  </li>
+</ul>
+<div data-hideif="warnings | equals 0">
+<h4 data-bind="warnings"></h3>
+<h4 data-showif="warnings | equals 1">warning</h4>
+<h4 data-hideif="warnings | equals 1">warnings</h4>
+</div>
+<ul>
+  <li class="alert" data-foreach-item="warning_services">
+    <p class="widget-content" data-bind="item"></p>
+  </li>
+</ul>
+<div data-hideif="unknown | equals 0">
+<h4 data-bind="unknown"></h3>
+<h4>unkown</h4>
+</div>
+<ul>
+  <li class="alert" data-foreach-item="unknown_services">
+    <p class="widget-content" data-bind="item"></p>
+  </li>
+</ul>
+<p class="updated-at" data-bind="updatedAtMessage"></p>
+</div> <!-- /no error -->
+</li>
+</ul>
diff --git a/widgets/nagios/nagios.scss b/widgets/nagios/nagios.scss
new file mode 100644
index 0000000..26e57cf
--- /dev/null
+++ b/widgets/nagios/nagios.scss
@@ -0,0 +1,102 @@
+$background: #444;
+$text: #fff;
+$success: #50BA5B;
+$warning: #F6A41C;
+$failure: #D93C38;
+$neutral: #888;
+
+$error: #000;
+
+.widget-nagios {
+  li {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding-top: 25px;
+
+    .alert {
+      position: relative;
+      padding: 2px 0 0 0;
+    }
+
+    .title-link {
+      font-size: 30px;
+
+      &:hover {
+        color: rgba(255, 255, 255, 0.7);
+      }
+    }
+
+    h3 {
+      font-size: 60px;
+      font-weight: bold;
+    }
+
+    h4 {
+      font-size: 20px;
+      font-weight: bold;
+      text-transform: uppercase;
+      display: inline;
+    }
+
+    p {
+      &.widget-content {
+        text-align: left;
+        margin-left: 20px;
+        font-size: 16px;
+      }
+    }
+
+    &.green {
+      background-color: $success;
+
+      p {
+        &.updated-at {
+          color: lighten($success, 20%);
+        }
+      }
+    }
+
+    &.yellow {
+      background-color: $warning;
+
+      p {
+        &.updated-at {
+          color: lighten($warning, 20%);
+        }
+      }
+    }
+
+    &.red {
+      background-color: $failure;
+
+      p {
+        &.updated-at {
+          color: lighten($failure, 20%);
+        }
+      }
+    }
+
+    &.gray {
+      background-color: $neutral;
+
+      p {
+        &.updated-at {
+          color: lighten($neutral, 20%);
+        }
+      }
+    }
+
+    &.error {
+      background-color: $error;
+
+      p {
+        &.updated-at {
+          color: lighten($error, 20%);
+        }
+      }
+    }
+  }
+}
diff --git a/widgets/number/number.coffee b/widgets/number/number.coffee
new file mode 100644
index 0000000..645ee7f
--- /dev/null
+++ b/widgets/number/number.coffee
@@ -0,0 +1,24 @@
+class Dashing.Number extends Dashing.Widget
+  @accessor 'current', Dashing.AnimatedValue
+
+  @accessor 'difference', ->
+    if @get('last')
+      last = parseInt(@get('last'))
+      current = parseInt(@get('current'))
+      if last != 0
+        diff = Math.abs(Math.round((current - last) / last * 100))
+        "#{diff}%"
+    else
+      ""
+
+  @accessor 'arrow', ->
+    if @get('last')
+      if parseInt(@get('current')) > parseInt(@get('last')) then 'icon-arrow-up' else 'icon-arrow-down'
+
+  onData: (data) ->
+    if data.status
+      # clear existing "status-*" classes
+      $(@get('node')).attr 'class', (i,c) ->
+        c.replace /\bstatus-\S+/g, ''
+      # add new class
+      $(@get('node')).addClass "status-#{data.status}"
diff --git a/widgets/number/number.html b/widgets/number/number.html
new file mode 100644
index 0000000..c82e5f4
--- /dev/null
+++ b/widgets/number/number.html
@@ -0,0 +1,11 @@
+<h1 class="title" data-bind="title"></h1>
+
+<h2 class="value" data-bind="current | shortenedNumber | prepend prefix | append suffix"></h2>
+
+<p class="change-rate">
+  <i data-bind-class="arrow"></i><span data-bind="difference"></span>
+</p>
+
+<p class="more-info" data-bind="moreinfo"></p>
+
+<p class="updated-at" data-bind="updatedAtMessage"></p>
diff --git a/widgets/number/number.scss b/widgets/number/number.scss
new file mode 100644
index 0000000..9e36c5a
--- /dev/null
+++ b/widgets/number/number.scss
@@ -0,0 +1,39 @@
+// ----------------------------------------------------------------------------
+// Sass declarations
+// ----------------------------------------------------------------------------
+$background-color:  #178CA6;
+$value-color:       #fff;
+
+$title-color:       rgba(255, 255, 255, 0.7);
+$moreinfo-color:    rgba(255, 255, 255, 0.7);
+
+// ----------------------------------------------------------------------------
+// Widget-number styles
+// ----------------------------------------------------------------------------
+.widget-number {
+
+  background-color: $background-color;
+
+  .title {
+    color: $title-color;
+  }
+
+  .value {
+    color: $value-color;
+  }
+
+  .change-rate {
+    font-weight: 500;
+    font-size: 30px;
+    color: $value-color;
+  }
+
+  .more-info {
+    color: $moreinfo-color;
+  }
+
+  .updated-at {
+    color: rgba(0, 0, 0, 0.3);
+  }
+
+}
diff --git a/widgets/text/text.coffee b/widgets/text/text.coffee
new file mode 100644
index 0000000..1741d8b
--- /dev/null
+++ b/widgets/text/text.coffee
@@ -0,0 +1 @@
+class Dashing.Text extends Dashing.Widget
diff --git a/widgets/text/text.html b/widgets/text/text.html
new file mode 100644
index 0000000..decd109
--- /dev/null
+++ b/widgets/text/text.html
@@ -0,0 +1,7 @@
+<h1 class="title" data-bind="title"></h1>
+
+<h3 data-bind="text"></h3>
+
+<p class="more-info" data-bind="moreinfo"></p>
+
+<p class="updated-at" data-bind="updatedAtMessage"></p>
diff --git a/widgets/text/text.scss b/widgets/text/text.scss
new file mode 100644
index 0000000..45d790e
--- /dev/null
+++ b/widgets/text/text.scss
@@ -0,0 +1,32 @@
+// ----------------------------------------------------------------------------
+// Sass declarations
+// ----------------------------------------------------------------------------
+$background-color:  #ec663c;
+
+$title-color:       rgba(255, 255, 255, 0.7);
+$moreinfo-color:    rgba(255, 255, 255, 0.7);
+
+// ----------------------------------------------------------------------------
+// Widget-text styles
+// ----------------------------------------------------------------------------
+.widget-text {
+
+  background-color: $background-color;
+
+  .title {
+    color: $title-color;
+  }
+
+  .more-info {
+    color: $moreinfo-color;
+  }
+
+  .updated-at {
+    color: rgba(255, 255, 255, 0.7);
+  }
+
+
+  &.large h3 {
+    font-size: 65px;
+  }
+}