Add dashboard

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

widgets/clock/clock.html

@@ -0,0 +1,2 @@
+<h1 data-bind="date"></h1>
+<h2 data-bind="time"></h2>

widgets/clock/clock.scss

@@ -0,0 +1,13 @@
+// ----------------------------------------------------------------------------
+// Sass declarations
+// ----------------------------------------------------------------------------
+$background-color:  #dc5945;
+
+// ----------------------------------------------------------------------------
+// Widget-clock styles
+// ----------------------------------------------------------------------------
+.widget-clock {
+
+  background-color: $background-color;
+
+}

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

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>

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;
+  }
+
+}

widgets/daily_xkcd/daily_xkcd.coffee

@@ -0,0 +1,9 @@
+class Dashing.DailyXKCD 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.

widgets/daily_xkcd/daily_xkcd.html

@@ -0,0 +1,7 @@
+<h1 class="header" data-bind="'xkcd #' | append num | append ': ' | append title"></h1>
+
+<img class="xkcd-image" data-bind-src="img" />
+<p class="date" data-bind="'Published: ' | append datestr"></p>
+<p class="caption" data-bind="alt"></p>
+
+<p class="updated-at" data-bind="updatedAtMessage"></p>

widgets/daily_xkcd/daily_xkcd.scss

@@ -0,0 +1,60 @@
+// ----------------------------------------------------------------------------
+// Sass declarations
+// ----------------------------------------------------------------------------
+$background-color: white;
+
+$header-color: rgba(0, 0, 0, 0.7);
+
+$title-color: rgba(0, 0, 0, 0.7);
+
+$caption-color: rgba(0, 0, 0, 0.7);
+
+$published-color: rgba(0, 0, 0, 0.7);
+
+$updated-at-color: rgba(0, 0, 0, 0.3);
+
+// ----------------------------------------------------------------------------
+// Widget-daily-xkcd styles
+// ----------------------------------------------------------------------------
+.widget-daily-xkcd {
+	background-color: $background-color;
+	vertical-align: top !important;
+	padding: 8px 12px !important;
+
+	.wrapper {
+		max-height: 100%;
+	}
+
+	.header {
+		color: $header-color;
+
+		font-size: large;
+		font-variant: small-caps;
+	}
+
+	.xkcd-image {
+		max-height: 200px;
+	}
+
+	.date {
+		color: $published-color;
+		margin-bottom: 0.5vh;
+		font-size: small;
+		text-align: left;
+	}
+
+	.caption {
+		color: $caption-color;
+		font-size: small;
+		text-align: justify;
+		margin-bottom: 0.5vh;
+	}
+
+	.updated-at {
+		color: $updated-at-color;
+		position: relative;
+		padding: 0;
+		margin: 0;
+		bottom: 0;
+	}
+}

widgets/fullscreen/fullscreen.coffee

@@ -0,0 +1,17 @@
+class Dashing.Fullscreen extends Dashing.Widget
+
+  ready: ->
+    $(document).keypress =>
+        if event.charCode is 102
+          @requestFullscreen()
+
+  requestFullscreen: ->
+    elem = $('body')[0]
+    if elem.requestFullscreen
+      elem.requestFullscreen()
+    else if elem.msRequestFullscreen
+      elem.msRequestFullscreen()
+    else if elem.mozRequestFullScreen
+      elem.mozRequestFullScreen()
+    else if elem.webkitRequestFullscreen
+      elem.webkitRequestFullscreen()

widgets/fullscreen/fullscreen.html

@@ -0,0 +1 @@
+<sup></sup>

widgets/fullscreen/fullscreen.scss

@@ -0,0 +1,3 @@
+.widget-fullscreen {
+  display: none !important;
+}

widgets/graph/graph.coffee

@@ -0,0 +1,37 @@
+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}]
+        }
+      ]
+      padding: {top: 0.02, left: 0.02, right: 0.02, bottom: 0.02}
+    )
+
+    @graph.series[0].data = @get('points') if @get('points')
+
+    x_axis = new Rickshaw.Graph.Axis.Time(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()

widgets/graph/graph.html

@@ -0,0 +1,5 @@
+<h1 class="title" data-bind="title"></h1>
+
+<h2 class="value" data-bind="current | prettyNumber | prepend prefix | append suffix"></h2>
+
+<p class="more-info" data-bind="moreinfo"></p>

widgets/graph/graph.scss

@@ -0,0 +1,65 @@
+// ----------------------------------------------------------------------------
+// Sass declarations
+// ----------------------------------------------------------------------------
+$background-color:  #dc5945;
+
+$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;
+  }
+
+}

widgets/iframe/iframe.coffee

@@ -0,0 +1,9 @@
+class Dashing.Iframe 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.

widgets/iframe/iframe.html

@@ -0,0 +1 @@
+<iframe data-bind-src="url" frameborder=0></iframe>

widgets/iframe/iframe.scss

@@ -0,0 +1,8 @@
+.widget-iframe {
+  padding: 3px 0px 0px 0px !important;
+
+  iframe {
+    width: 100%;
+    height: 100%;
+  }
+}

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.

widgets/image/image.html

@@ -0,0 +1 @@
+<img data-bind-src="image | prepend '/assets'" data-bind-width="width"/>

widgets/image/image.scss

@@ -0,0 +1,13 @@
+// ----------------------------------------------------------------------------
+// Sass declarations
+// ----------------------------------------------------------------------------
+$background-color:  #4b4b4b;
+
+// ----------------------------------------------------------------------------
+// Widget-image styles
+// ----------------------------------------------------------------------------
+.widget-image {
+
+  background-color: $background-color;
+
+}

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

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>

widgets/list/list.scss

@@ -0,0 +1,60 @@
+// ----------------------------------------------------------------------------
+// Sass declarations
+// ----------------------------------------------------------------------------
+$background-color:  #12b0c5;
+$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;
+  }
+
+}

widgets/meter/meter.coffee

@@ -0,0 +1,14 @@
+class Dashing.Meter extends Dashing.Widget
+
+  @accessor 'value', Dashing.AnimatedValue
+
+  constructor: ->
+    super
+    @observe 'value', (value) ->
+      $(@node).find(".meter").val(value).trigger('change')
+
+  ready: ->
+    meter = $(@node).find(".meter")
+    meter.attr("data-bgcolor", meter.css("background-color"))
+    meter.attr("data-fgcolor", meter.css("color"))
+    meter.knob()

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-bind-data-height="height | default 200" data-bind-data-width="width | default 200" data-readOnly=true data-bind-value="value | shortenedNumber | prepend prefix | append suffix" 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>

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);
+  }
+
+}

widgets/national_rail/national_rail.coffee

@@ -0,0 +1,6 @@
+class Dashing.NationalRail extends Dashing.Widget
+  ready: ->
+    if @get('unordered')
+      $(@node).find('ol').remove()
+    else
+      $(@node).find('ul').remove()

widgets/national_rail/national_rail.html

@@ -0,0 +1,19 @@
+<h1 class="title" data-bind="title"></h1>
+<p class="message" data-bind="message | raw">
+<p>
+<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>

widgets/national_rail/national_rail.scss

@@ -0,0 +1,76 @@
+// ----------------------------------------------------------------------------
+// Sass declarations
+// ----------------------------------------------------------------------------
+$background-color: #12b0c5;
+$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-national-rail {
+
+	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;
+	}
+
+	.message {
+		color: #ec8080;
+		font-size: 17px;
+		margin-bottom: 14px;
+
+		p {
+			color: #ec8080;
+		}
+
+		a {
+			font-weight: bold;
+			text-decoration: underline;
+		}
+	}
+
+}

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 'fa fa-arrow-up' else 'fa fa-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}"

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>

widgets/number/number.scss

@@ -0,0 +1,39 @@
+// ----------------------------------------------------------------------------
+// Sass declarations
+// ----------------------------------------------------------------------------
+$background-color:  #47bbb3;
+$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);
+  }
+
+}

widgets/quote/quote.coffee

@@ -0,0 +1 @@
+class Dashing.Quote extends Dashing.Widget

widgets/quote/quote.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>

widgets/quote/quote.scss

@@ -0,0 +1,36 @@
+// ----------------------------------------------------------------------------
+// Sass declarations
+// ----------------------------------------------------------------------------
+$background-color: #9c4274;
+
+$title-color: rgba(255, 255, 255, 0.7);
+
+$moreinfo-color: rgba(255, 255, 255, 0.7);
+
+// ----------------------------------------------------------------------------
+// Widget-quote styles
+// ----------------------------------------------------------------------------
+.widget-quote {
+	background: $background-color url('/assets/quote.png') no-repeat 50% 50%;
+
+	.title {
+		color: $title-color;
+	}
+
+	.more-info {
+		color: $moreinfo-color;
+	}
+
+	.updated-at {
+		color: rgba(0, 0, 0, 0.3);
+	}
+
+	h3 {
+		position: relative;
+		z-index: 1;
+	}
+
+	&.large h3 {
+		font-size: 65px;
+	}
+}

widgets/random_aww/random_aww.coffee

@@ -0,0 +1,9 @@
+class Dashing.RandomAww 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.

widgets/random_aww/random_aww.html

@@ -0,0 +1 @@
+<div class="image_container" data-bind-style="image"></div>

widgets/random_aww/random_aww.scss

@@ -0,0 +1,24 @@
+// ----------------------------------------------------------------------------
+// Sass declarations
+// ----------------------------------------------------------------------------
+$background-color: #2d2e29;
+
+// ----------------------------------------------------------------------------
+// Widget-image styles
+// ----------------------------------------------------------------------------
+.widget-random-aww {
+
+	background-color: $background-color;
+
+	.image_container {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		background-size: cover;
+		background-position: center;
+		background-repeat: no-repeat;
+	}
+
+}

widgets/server_status/server_status.coffee

@@ -0,0 +1 @@
+class Dashing.ServerStatus extends Dashing.Widget

widgets/server_status/server_status.html

@@ -0,0 +1,13 @@
+<h1 class="title" data-bind="title"></h1>
+
+<ul>
+	<li data-foreach-item="items">
+		<span class="label" data-bind="item.label"></span>
+		<span class="value">
+			<div data-bind-class="item.color"><i data-bind-class="item.arrow"></i></div>
+		</span>
+	</li>
+</ul>
+
+<p class="more-info" data-bind="moreinfo"></p>
+<p class="updated-at" data-bind="updatedAtMessage"></p>

widgets/server_status/server_status.scss

@@ -0,0 +1,68 @@
+// ----------------------------------------------------------------------------
+// Sass declarations
+// ----------------------------------------------------------------------------
+$background-color: #12b0c5;
+$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-server-status {
+
+	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;
+	}
+
+	.red {
+		color: red;
+	}
+
+	.green {
+		color: green;
+	}
+}

widgets/text/text.coffee

@@ -0,0 +1 @@
+class Dashing.Text extends Dashing.Widget

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>

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;
+  }
+}

widgets/timeline/timeline.coffee

@@ -0,0 +1,25 @@
+class Dashing.Timeline extends Dashing.Widget
+  ready: ->
+    @renderTimeline(@get('events'))
+
+  onData: (data) ->
+    # Handle incoming data
+    # You can access the html node of this widget with `@node` E8F770 616161
+    # Example: $(@node).fadeOut().fadeIn() will make the node flash each time data comes in.
+    if data.events
+        @renderTimeline(data.events)
+
+  renderTimeline: (events) ->
+    # Margins: zero if not set or the same as the opposite margin
+    # (you likely want this to keep the chart centered within the widget)
+    left = @get('leftMargin') || 0
+    right = @get('rightMargin') || left
+    top = @get('topMargin') || 10
+    bottom = @get('bottomMargin') || top
+
+    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) - left - right
+    height = (Dashing.widget_base_dimensions[1] * container.data("sizey")) - ($(@node).find("h1").outerHeight() + 12) - top - bottom
+    id = "." + @get('id')
+    TimeKnots.draw(id, events, {horizontalLayout: false, color: "#222222", height: height, width: width, showLabels: true, labelFormat:"%H:%M"});

widgets/timeline/timeline.html

@@ -0,0 +1,3 @@
+<h1 data-bind="title"></h1>
+
+<div class="timeline"></div>

widgets/timeline/timeline.scss

@@ -0,0 +1,34 @@
+// ----------------------------------------------------------------------------
+// Sass declarations
+// ----------------------------------------------------------------------------
+$background-color:  #4b4b4b;
+
+$title-color:       rgba(255, 255, 255, 0.7);
+$moreinfo-color:    rgba(255, 255, 255, 0.7);
+
+// ----------------------------------------------------------------------------
+// Widget-text styles
+// ----------------------------------------------------------------------------
+.widget-timeline {
+
+  background-color: $background-color;
+  padding-bottom: 70px;
+
+  .title {
+    color: $title-color;
+  }
+
+  .more-info {
+    color: $moreinfo-color;
+  }
+
+  .event-description {
+	fill: white;
+	font-size: 14px;
+  }
+
+  .event-description-date {
+	fill: white;
+	font-size: 12px;
+  }
+}