3 files changed, 56 insertions, 0 deletions
diff --git a/templates/project/widgets/meter/meter.coffee b/templates/project/widgets/meter/meter.coffee
new file mode 100644
index 0000000..4dbc2da
--- /dev/null
+++ b/templates/project/widgets/meter/meter.coffee
@@ -0,0 +1,16 @@
+class AllTheThings.Meter extends AllTheThings.Widget
+  source: 'meter'
+
+  @accessor 'value', Batman.Property.EasingSetter
+
+  constructor: ->
+    super
+    @observe 'value', (value) ->
+      $(@node).find(".meter").val(value).trigger('change')
+
+  ready: ->
+    Batman.setImmediate =>
+      meter = $(@node).find(".meter")
+      meter.attr("data-bgcolor", meter.css("background-color"))
+      meter.attr("data-fgcolor", meter.css("color"))
+      meter.knob()
+\ No newline at end of file
diff --git a/templates/project/widgets/meter/meter.html b/templates/project/widgets/meter/meter.html
new file mode 100644
index 0000000..1476ba1
--- /dev/null
+++ b/templates/project/widgets/meter/meter.html
@@ -0,0 +1,5 @@
+<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" data-bind-data-min="min" data-bind-data-max="max">
+
+<p class="text-moreinfo" data-bind="moreinfo"></p>
+\ No newline at end of file
diff --git a/templates/project/widgets/meter/meter.scss b/templates/project/widgets/meter/meter.scss
new file mode 100644
index 0000000..b134361
--- /dev/null
+++ b/templates/project/widgets/meter/meter.scss
@@ -0,0 +1,35 @@
+// ----------------------------------------------------------------------------
+// Sass declarations
+// ----------------------------------------------------------------------------
+$widget-meter_background-color: #9c4274;
+$widget-meter_value-color:      #fff;
+
+$widget-meter_title-color:      lighten($widget-meter_background-color, 45%);
+$widget-text_moreinfo-color:    lighten($widget-meter_background-color, 45%);
+
+$widget-meter-bg: darken($widget-meter_background-color, 15%);
+$widget-meter-fg: lighten($widget-meter_background-color, 75%);
+
+// ----------------------------------------------------------------------------
+// Widget-meter styles
+// ----------------------------------------------------------------------------
+.widget-meter { 
+
+  background-color: $widget-meter_background-color;
+  
+  input.meter { 
+    background-color: $widget-meter-bg;
+    color: $widget-meter-fg;
+  }
+
+  .title { 
+    color: $widget-meter_title-color;
+  }
+
+  .text-moreinfo {
+    font-weight: 600;
+    font-size: 20px;
+    margin-top: 0;
+  }
+  
+}
+\ No newline at end of file