growbot-web 0.0.1

data/bower.json

@@ -0,0 +1,19 @@
+{
+  "name": "growbot-web",
+  "version": "0.0.0",
+  "authors": [
+    "David Long <dave@davejlong.com>"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "public/vendor",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "jquery": "~2.1.1"
+  }
+}

data/config.ru

@@ -0,0 +1,13 @@
+require 'rubygems'
+require 'bundler/setup'
+
+Bundler.require(:default)
+
+$LOAD_PATH.unshift(::File.expand_path('lib', ::File.dirname(__FILE__)))
+
+require 'growbot/web/env'
+Growbot::Web::Env.root = File.expand_path '.', File.dirname(__FILE__)
+
+require 'growbot/web/app'
+
+run Growbot::Web::App

data/growbot-web.gemspec

@@ -0,0 +1,35 @@
+# coding: utf-8
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'growbot/web/version'
+
+Gem::Specification.new do |spec|
+  spec.name          = 'growbot-web'
+  spec.version       = Growbot::Web::VERSION
+  spec.authors       = ['David Long']
+  spec.email         = ['dave@davejlong.com']
+  spec.summary       = %q{Web client to display Growbot metrics}
+  spec.homepage      = 'http://github.com/davejlong/growbot-web'
+  spec.license       = 'MIT'
+
+  spec.files         = `git ls-files -z`.split("\x0")
+  spec.executables   = spec.files.grep(%r{^bin/}) { |f| File.basename(f) }
+  spec.test_files    = spec.files.grep(%r{^(test|spec|features)/})
+  spec.require_paths = ['lib']
+
+  spec.add_runtime_dependency 'sinatra', '~> 1.4'
+  spec.add_runtime_dependency 'sinatra-contrib', ' ~> 1.4'
+  spec.add_runtime_dependency 'yajl-ruby', '~> 1.2'
+  spec.add_runtime_dependency 'ashikawa-core', '~> 0.10'
+  spec.add_runtime_dependency 'haml', '~> 4.0'
+  spec.add_runtime_dependency 'coffee-script', '~> 2.2'
+  spec.add_runtime_dependency 'bourbon', '~> 4.0'
+  spec.add_runtime_dependency 'neat', '~> 1.6'
+  spec.add_runtime_dependency 'bitters', '~> 0.9'
+
+  spec.add_development_dependency 'bundler', '~> 1.6'
+  spec.add_development_dependency 'rake'
+  spec.add_development_dependency 'rspec', '~> 3.0.0.beta'
+  spec.add_development_dependency 'dotenv'
+  spec.add_development_dependency 'yard'
+end

data/lib/growbot/web.rb

@@ -0,0 +1,6 @@
+require_relative 'web/version'
+
+module Growbot
+  module Web
+  end
+end

data/lib/growbot/web/app.rb

@@ -0,0 +1,49 @@
+require 'sinatra/base'
+require 'sinatra/json'
+require 'yajl'
+
+require_relative '../web'
+require_relative 'data'
+
+module Growbot
+  module Web
+    class App < Sinatra::Base
+      configure do
+        set :root, File.expand_path(File.dirname(__FILE__))
+
+        set :public_folder, File.join(settings.root, '..', '..', '..', 'public')
+
+        set :haml, format: :html5, layout: :layout
+        set :scss, views: File.join(settings.root, 'views/sass')
+        if ENV['RACK_ENV'].eql? 'production'
+          set :scss, style: :compressed,
+            cache: true,
+            cache_location: '/tmp/growbot-sass-cache'
+        else
+          set :scss, style: :expanded
+        end
+
+        set :coffee, views: File.join(settings.root, 'views/coffee'),
+          cache: true,
+          cache_location: '/tmp/growbot-coffee-cache'
+
+      end
+
+      get '/' do
+        haml :index
+      end
+
+      get '/data.json' do
+        json Data.new.get
+      end
+
+      get '/stylesheets/:sheet.css' do
+        scss params[:sheet].to_sym
+      end
+
+      get '/javascripts/:script.js' do
+        coffee params[:script].to_sym
+      end
+    end
+  end
+end

data/lib/growbot/web/data.rb

@@ -0,0 +1,42 @@
+require 'ashikawa-core'
+module Growbot
+  module Web
+    class Data
+      attr_accessor :database
+
+      def initialize
+      end
+
+      def get
+        dataset = []
+        query = <<-QUERY
+          FOR row in readings
+            FILTER row.moisture != 0
+            FILTER row.light != 0
+            FILTER row.time >= #{start_time}
+            SORT row.time ASC
+            RETURN row
+        QUERY
+        collection.query.execute(query).each do |document|
+          dataset << document.to_h
+        end
+        dataset
+      end
+
+      private
+      def start_time
+        (Time.now - 6*24*60*60).to_i * 1000
+      end
+
+      def database
+        @database ||= Ashikawa::Core::Database.new do |config|
+          config.url = 'http://localhost:8529/_db/growbot'
+        end
+      end
+
+      def collection
+        @collection ||= database[:readings]
+      end
+    end
+  end
+end

data/lib/growbot/web/env.rb

@@ -0,0 +1,9 @@
+module Growbot
+  module Web
+    module Env
+      class << self
+        attr_accessor :root
+      end
+    end
+  end
+end

data/lib/growbot/web/version.rb

@@ -0,0 +1,5 @@
+module Growbot
+  module Web
+    VERSION = "0.0.1"
+  end
+end

data/lib/growbot/web/views/coffee/app.coffee

@@ -0,0 +1,131 @@
+menu = $('#navigation-menu')
+menuToggle = $('#js-mobile-menu')
+alert('Hello')
+menuToggle.on 'click', (e) ->
+  e.preventDefault()
+  menu.slideToggle () ->
+    menu.removeAttr 'style' if menu.is ':hidden'
+
+
+displayError = () ->
+  error = document.createElement 'div'
+  error.classList.add 'error'
+
+  text = document.createElement 'span'
+  text.innerText = 'An error has occurred. Please try again later.'
+  error.appendChild text
+
+  document.querySelector('.message-center').appendChild error
+
+drawAverages = (rawData) ->
+  # Reduce down the data to build averages
+  hourAgo = new Date()
+  hourAgo.setHours hourAgo.getHours()-1
+
+
+  data = rawData.filter (d) -> d.time >= hourAgo
+  return unless data.length
+
+  totalLevels = data.reduce ((p, c) ->
+    p.moisture += c.moisture
+    p.light += c.light
+    p
+  ), { moisture: 0, light: 0 }
+  averageLevels = {
+    moisture: Math.floor(totalLevels.moisture / data.length)
+    light: Math.floor(totalLevels.light / data.length)
+  }
+
+  d3.select('#moistureWidget .number').text averageLevels.moisture
+  d3.select('#lightWidget .number').text averageLevels.light
+
+getContainerWidth = (container) ->
+  $(container).innerWidth()
+
+drawLine = (data, container, xKey='x', yKey='y', scales) ->
+  width = getContainerWidth(container)
+  m = [15, 80, 15, 80] # Margins
+  w = width - m[1] - m[3] # Width
+  h = 400 - m[0] - m[2] # Height
+  # Create the initial chart to work with
+  chart = d3.select(container).append('svg')
+    .attr('width', w + m[1] + m[3]).attr('height', h + m[0] + m[1])
+    .append('g')
+    .attr('transform', "translate(#{m[3]}, #{m[0]})")
+
+  scales.x.range([0, w])
+  scales.y.range([0, h])
+
+  xAxis = d3.svg.axis().scale(scales.x)
+  yAxis = d3.svg.axis().scale(scales.y).orient('left')
+  chart.append('g').attr('class', 'x axis')
+    .attr('transform', "translate(0, #{h})")
+    .call(xAxis)
+  chart.append('g').attr('class', 'y axis')
+    .attr('transform', "translate(0, 0)")
+    .call(yAxis)
+
+  line = d3.svg.line()
+    .x((d) -> scales.x(d[xKey]))
+    .y((d) -> scales.y(d[yKey]))
+    # .interpolate('cardinal')
+
+  chart.append('path').attr('d', line(data))
+
+
+d3.json('/data.json')
+  .get (error, data) ->
+    data = data.map (d) ->
+      d.time = new Date(d.time)
+      d.x = d.time
+      d
+    min =
+      time: d3.min data, (d) -> d.time
+      light: d3.min data, (d) -> d.light
+      moisture: d3.min data, (d) -> d.moisture
+    max =
+      time: d3.max data, (d) -> d.time
+      light: d3.max data, (d) -> d.light
+      moisture: d3.max data, (d) -> d.moisture
+
+    drawAverages(data)
+
+
+    width = getContainerWidth('#lineChart')
+    m = [15, 80, 15, 80] # Margins
+    w = width - m[1] - m[3] # Width
+    h = 300 - m[0] - m[2] # Height
+
+    scales =
+      x: d3.time.scale().domain([min.time, max.time]).range([0, w])
+      y: d3.scale.linear().range([0, h])
+    if max.light > max.moisture
+      scales.y.domain([max.light, 0])
+    else
+      scales.y.domain([max.moisture, 0])
+
+    chart = d3.select('#lineChart').append('svg')
+      .attr('width', w + m[1] + m[3]).attr('height', h + m[0] + m[1])
+      .append('g')
+      .attr('transform', "translate(#{m[3]}, #{m[0]})")
+
+    xAxis = d3.svg.axis().scale(scales.x)
+    yAxis = d3.svg.axis().scale(scales.y).orient('left')
+    chart.append('g').attr('class', 'x axis')
+      .attr('transform', "translate(0, #{h})")
+      .call xAxis
+    chart.append('g').attr('class', 'y axis')
+      .attr('transform', 'translate(0, 0)')
+      .call yAxis
+
+    moistureLine = d3.svg.line()
+      .x((d) -> scales.x(d.time))
+      .y((d) -> scales.y(d.moisture))
+    lightLine = d3.svg.line()
+      .x((d) -> scales.x(d.time))
+      .y((d) -> scales.y(d.light))
+
+    colorScale = d3.scale.category10()
+    console.log(colorScale)
+    chart.append('path').attr('d', moistureLine(data)).style('stroke', colorScale(0))
+    chart.append('path').attr('d', lightLine(data)).style('stroke', colorScale(1))

data/lib/growbot/web/views/index.haml

@@ -0,0 +1,10 @@
+%section
+  %main
+    #lineChart
+  %aside
+    #moistureWidget.big-number.widget
+      .number 0
+      .label Avg moisture over last hour
+    #lightWidget.big-number.widget
+      .number 0
+      .label Avg light over last hour

data/lib/growbot/web/views/layout.haml

@@ -0,0 +1,20 @@
+%html(lang="en")
+  %head
+    %title Growbot
+    %link(href="/vendor/colorbrewer/colorbrewer.css" type="text/css" rel="stylesheet")
+    %link(href="/stylesheets/app.css" type="text/css" rel="stylesheet")
+  %body
+    %header.navigation
+      .menu-wrapper
+        %a.logo(href="/") Growbot
+        %p#js-mobile-menu.navigation-menu-button MENU
+        .nav
+          %ul#navigation-menu
+            %li.take-reading
+              %a(href="javascript:void(0)") Read Sensors
+    .message-center
+    = yield
+    %script(src="/vendor/jquery/dist/jquery.js")
+    %script(src="/vendor/d3/d3.js")
+    %script(src="/vendor/colorbrewer/colorbrewer.js")
+    %script(src="/javascripts/app.js")

data/lib/growbot/web/views/sass/app.scss

@@ -0,0 +1,59 @@
+@import 'bourbon/bourbon';
+@import 'neat/neat';
+@import 'bitters/bitters';
+
+@import 'refills/refills';
+
+@import 'widgets/widgets';
+
+body {
+  margin: 0;
+  padding: 0;
+}
+
+// Layout
+section {
+  @include outer-container;
+
+  main { @include span-columns(9); }
+  aside { @include span-columns(3); }
+}
+
+// Sections
+section {
+  .title {
+    border-bottom: 1px solid #eee;
+    margin-bottom: golden-ratio(15px, 1);
+  }
+}
+
+// Flash messages
+div.notice { @extend %flash-notice; }
+div.success { @extend %flash-success; }
+div.error { @extend %flash-error; }
+
+// Charting
+
+path {
+  // stroke: $base-accent-color;
+  stroke-width: 1;
+  fill: none;
+}
+
+.axis {
+  shape-rendering: crispEdges;
+
+  text {
+    font-size: 10px;
+  }
+
+  line, path {
+    stroke: $light-gray;
+  }
+
+  &.x {
+    .minor {
+      stroke-opacity: 0.5;
+    }
+  }
+}

data/lib/growbot/web/views/sass/bitters/_bitters.scss

@@ -0,0 +1,16 @@
+// Neat Settings -- uncomment if using Neat
+///////////////////////////////////////////////////////////////////////////////
+@import "../neat/neat-helpers"; // or "neat/neat-helpers" when not in Rails
+@import "grid-settings";
+
+
+// Bitters
+///////////////////////////////////////////////////////////////////////////////
+@import "variables";
+@import "extends/base";
+@import "mixins/base";
+@import "typography";
+@import "forms";
+@import "tables";
+@import "lists";
+@import "flashes";

data/lib/growbot/web/views/sass/bitters/_flashes.scss

@@ -0,0 +1,11 @@
+%flash-error {
+  @include flash($error-color);
+}
+
+%flash-notice {
+  @include flash($notice-color);
+}
+
+%flash-success {
+  @include flash($success-color);
+}