subduino 0.1.0 → 0.2.0

data/webapp/public/visualize.css

@@ -0,0 +1,32 @@
+/*plugin styles*/
+.block .visualize { border: 1px solid #bbb; position: relative; background: #fbfbfb; margin: 20px auto 40px auto; }
+.block .visualize canvas { position: absolute; }
+.block .visualize ul, .block .visualize ul li { margin: 0; padding: 0; background: none; }
+
+/*table title, key elements*/
+.block .visualize .visualize-info { padding: 0 0 2px 8px; background: #fafafa; border: 1px solid #aaa; position: absolute; top: -15px; right: 10px; font-size: 11px; }
+.block .visualize .visualize-title { display: block; color: #333; margin-bottom: 3px; }
+.block .visualize ul.visualize-key { list-style: none; }
+.block .visualize ul.visualize-key li { list-style: none; float: left; margin-right: 10px; padding-left: 10px; position: relative;}
+.block .visualize ul.visualize-key .visualize-key-color { width: 6px; height: 6px; left: 0; position: absolute; top: 50%; margin-top: -3px; font-size: 6px; }
+.block .visualize ul.visualize-key .visualize-key-label { color: #333; }
+
+/*pie labels*/
+.visualize-pie .visualize-labels { list-style: none; }
+.visualize-pie .visualize-label-pos, .visualize-pie .visualize-label { position: absolute;  margin: 0; padding:0; }
+.visualize-pie .visualize-label { display: block; color: #fff; font-weight: bold; font-size: 1em; }
+.visualize-pie-outside .visualize-label { color: #000; font-weight: normal; }
+
+/*line,bar, area labels*/
+.block .visualize-labels-x,.visualize-labels-y { position: absolute; left: 0; top: 0; list-style: none; }
+.block .visualize-labels-x li, .visualize-labels-y li { position: absolute; bottom: 0; }
+.block .visualize-labels-x li span.label, .visualize-labels-y li span.label { position: absolute; color: #555; }
+.block .visualize-labels-x li span.line, .visualize-labels-y li span.line {  position: absolute; border: 0 solid #ccc; }
+.block .visualize-labels-x li { height: 100%; font-size: 10px; }
+.block .visualize-labels-x li span.label { top: 100%; margin-top: 5px; }
+.block .visualize-labels-x li span.line { border-left-width: 1px; height: 100%; display: block; }
+.block .visualize-labels-x li span.line { border: 0;} /*hide vertical lines on area, line, bar*/
+.block .visualize-labels-y li { width: 100%; font-size: 11px; line-height: normal; }
+.block .visualize-labels-y li span.label { right: 100%; margin-right: 5px; display: block; width: 100px; text-align: right; }
+.block .visualize-labels-y li span.line { border-top-width: 1px; width: 100%; red; }
+.block .visualize-bar .visualize-labels-x li span.label { width: 100%; text-align: center; }

data/webapp/views/index.haml

@@ -1,51 +1,367 @@
 
+.block.small.left
+  .block_head
+    .bheadl
+    .bheadr
+    %h2 Sensors
+  / .block_head ends
+  .block_content
+    %ul.imglist
+      - for sensor in @sensors
+        %li
+          %img{:alt => "", :src => "icons/#{sensor.type}.png"}/
+          %h2= sensor
+          %ul
+            %li.view
+              %a{:href => "http://farm3.static.flickr.com/2646/4240549111_fcb8c478fe.jpg", :rel => "facebox"} View
+            %li.delete
+              %a{:href => "#deleted"} Delete
+          %br
+          .sparklines 1,3,6,2,7,2,4,5
+          %h3= sensor.name
+      -# %li
+      -#   %h3 Sala de Jantar
+      -#   %img{:alt => "", :src => "icons/luminosity.png"}/
+      -#   %h2 200
+      -#   %ul
+      -#     %li.view
+      -#       %a{:href => "http://farm3.static.flickr.com/2646/4240549111_fcb8c478fe.jpg", :rel => "facebox"} View
+      -#     %li.delete
+      -#       %a{:href => "#deleted"} Delete
+      -# %li
+      -#   %h3 Quintal
+      -#   %img{:alt => "", :src => "icons/rain.png"}/
+      -#   %h2 Chuva
+      -#   %ul
+      -#     %li.view
+      -#       %a{:href => "http://farm3.static.flickr.com/2646/4240549111_fcb8c478fe.jpg", :rel => "facebox"} View
+      -#     %li.delete
+      -#       %a{:href => "#deleted"} Delete
+      -# %li
+      -#   %img{:alt => "", :src => "icons/day.png"}/
+      -#   %h2 Dia
+      -#   %ul
+      -#     %li.view
+      -#       %a{:href => "http://farm3.static.flickr.com/2646/4240549111_fcb8c478fe.jpg", :rel => "facebox"} View
+      -#     %li.delete
+      -#       %a{:href => "#deleted"} Delete
+      -# %li
+      -#   %img{:alt => "", :src => "icons/night.png"}/
+      -#   %h2 Noite
+      -#   %ul
+      -#     %li.view
+      -#       %a{:href => "http://farm3.static.flickr.com/2646/4240549111_fcb8c478fe.jpg", :rel => "facebox"} View
+      -#     %li.delete
+      -#       %a{:href => "#deleted"} Delete
 
-%ul#home{:selected => "true", :title => @title}
-  - unless true # @sensors.empty?
-    %li.group Sensors
-    - @sensors.each do |name, sensor|
-      %li{:id => name}
-        %a{:href => "/g/#{name}"}
-          - if sensor.digital?
-            %img{:src => "icons/#{sensor.parse}.png"}/
-            = name
-            %span.tiny.gray= sensor
-          - else
-            %img{:src => "icons/groups.png"}/
-            = sensor
-            %span.tiny.gray= name.to_s.capitalize
-          %span.pico.gray (#{sensor.raw}~)
-  - @watches.each do |state, watches|
-    %li.group= state.capitalize
-    - for watch in watches.sort
-      %li{:id => watch}
-        %a{:href => "/w/#{watch}"}
-          %img{:src => "icons/#{@statuses[watch][:state]}.png"}/
-          = watch
-  %li.group Control
-  %li#god_opts
-    %a{:href => "/o"}
-      %img{:src => "icons/start.png"}/
-      Power
-  %li#god_opts
-    %a{:href => "/o"}
-      %img{:src => "icons/dashboard.png"}/
-      Sensors
-  %li#top_show
-    %a{:href => "/t"}
-      %img{:src => "icons/terminal.png"}/
-      Top
-  %li#home_icon
-    %a{:href => "/i"}
-      %img{:src => "icons/bookmark.png"}/
-      Icon
-  %li.group About
-  - for stat in @stats
-    %li.tiny
-      %img{:src => "icons/#{stat[0]}.png"}/
-      = stat[1]
-  %li.tiny
-    %img{:src => "icons/ruby.png"}/
-    = @footer
-    [ok]
-  #stats
+      -# %li
+      -#   %h3 Casa
+      -#   %img{:alt => "", :src => "icons/current.png"}/
+      -#   %h2 50A
+      -#   %ul
+      -#     %li.view
+      -#       %a{:href => "http://farm3.static.flickr.com/2646/4240549111_fcb8c478fe.jpg", :rel => "facebox"} View
+      -#     %li.delete
+      -#       %a{:href => "#deleted"} Delete
+      -# %li
+      -#   %h3 Room 1
+      -#   %img{:alt => "", :src => "icons/noise.png"}/
+      -#   %h2 Noise
+      -#   %ul
+      -#     %li.view
+      -#       %a{:href => "http://farm3.static.flickr.com/2646/4240549111_fcb8c478fe.jpg", :rel => "facebox"} View
+      -#     %li.delete
+      -#       %a{:href => "#deleted"} Delete
+
+      - unless true # @sensors.empty?
+        %li.group Sensors
+        - @sensors.each do |name, sensor|
+          %li{:id => name}
+            %a{:href => "/g/#{name}"}
+              - if sensor.digital?
+                %img{:src => "icons/#{sensor.parse}.png"}/
+                = name
+                %span.tiny.gray= sensor
+              - else
+                %img{:src => "icons/groups.png"}/
+                = sensor
+                %span.tiny.gray= name.to_s.capitalize
+              %span.pico.gray (#{sensor.raw}~)
+      - @watches.each do |state, watches|
+        %li.group= state.capitalize
+        - for watch in watches.sort
+          %li{:id => watch}
+            %a{:href => "/w/#{watch}"}
+              %img{:src => "icons/#{@statuses[watch][:state]}.png"}/
+              = watch
+  .bendl
+  .bendr
+.block.small.right
+  .block_head
+    .bheadl
+    .bheadr
+    %h2 Actions
+  / .block_head ends
+  .block_content
+    %ul.imglist
+      %li
+        %img{:alt => "", :src => "icons/unlocked.png"}/
+        %h2 Open
+        %ul
+          %li.view
+            %a{:href => "http://farm3.static.flickr.com/2646/4240549111_fcb8c478fe.jpg", :rel => "facebox"} View
+          %li.delete
+            %a{:href => "#deleted"} Delete
+        %br
+        %h3 Portão
+      -# %li
+      -#   %h3 Cafofo
+      -#   %img{:alt => "", :src => "icons/irrigation.png"}/
+      -#   %h2 On
+      -#   %ul
+      -#     %li.view
+      -#       %a{:href => "http://farm3.static.flickr.com/2646/4240549111_fcb8c478fe.jpg", :rel => "facebox"} View
+      -#     %li.delete
+      -#       %a{:href => "#deleted"} Delete
+
+
+      -# %li
+      -#   %img{:alt => "", :src => "icons/lamp-big.png"}/
+      -#   %h2 Open
+      -#   %ul
+      -#     %li.view
+      -#       %a{:href => "http://farm3.static.flickr.com/2646/4240549111_fcb8c478fe.jpg", :rel => "facebox"} View
+      -#     %li.delete
+      -#       %a{:href => "#deleted"} Delete
+
+      -# %li
+      -#   %h3 A/C
+      -#   %img{:alt => "", :src => "icons/refrigeration.png"}/
+      -#   %h2 +20
+      -#   %ul
+      -#     %li.view
+      -#       %a{:href => "http://farm3.static.flickr.com/2646/4240549111_fcb8c478fe.jpg", :rel => "facebox"} View
+      -#     %li.delete
+      -#       %a{:href => "#deleted"} Delete
+      -# %li
+      -#   %img{:alt => "", :src => "icons/lamp-big.png"}/
+      -#   %h2 On
+      -#   %ul
+      -#     %li.view
+      -#       %a{:href => "http://farm3.static.flickr.com/2646/4240549111_fcb8c478fe.jpg", :rel => "facebox"} View
+      -#     %li.delete
+      -#       %a{:href => "#deleted"} Delete
+
+      -# %li
+      -#   %h3 Porta Sala
+      -#   %img{:alt => "", :src => "icons/locked.png"}/
+      -#   %h2 Close
+      -#   %ul
+      -#     %li.view
+      -#       %a{:href => "http://farm3.static.flickr.com/2646/4240549111_fcb8c478fe.jpg", :rel => "facebox"} View
+      -#     %li.delete
+      -#       %a{:href => "#deleted"} Delete
+  .bendl
+  .bendr
+
+.block
+  .block_head
+    .bheadl
+    .bheadr
+    %h2 Stats
+    %ul.tabs
+      %li
+        %a{:href => "#days"} Per days
+      %li
+        %a{:href => "#months"} Per months
+  / .block_head ends
+  #days.block_content.tab_content
+    %table.stats{:cellpadding => "0", :cellspacing => "0", :rel => "line", :width => "100%"}
+      %thead
+        %tr
+          %td  
+          %th{:scope => "col"} 01.03
+          %th{:scope => "col"} 02.03
+          %th{:scope => "col"} 03.03
+          %th{:scope => "col"} 04.03
+          %th{:scope => "col"} 05.03
+          %th{:scope => "col"} 06.03
+          %th{:scope => "col"} 07.03
+          %th{:scope => "col"} 08.03
+          %th{:scope => "col"} 09.03
+          %th{:scope => "col"} 10.03
+          %th{:scope => "col"} 11.03
+          %th{:scope => "col"} 12.03
+          %th{:scope => "col"} 13.03
+          %th{:scope => "col"} 14.03
+      %tbody
+        %tr
+          %th{:scope => "row"} Umidade
+          %td 50
+          %td 90
+          %td 40
+          %td 120
+          %td 180
+          %td 280
+          %td 320
+          %td 220
+          %td 100
+          %td 120
+          %td 40
+          %td 70
+          %td 20
+          %td 60
+        %tr
+          %th{:scope => "row"} Temp
+          %td 30
+          %td 50
+          %td 15
+          %td 90
+          %td 140
+          %td 160
+          %td 230
+          %td 170
+          %td 50
+          %td 90
+          %td 30
+          %td 50
+          %td 10
+          %td 40
+    / .block_content ends
+    #months.block_content.tab_content
+      %table.stats{:cellpadding => "0", :cellspacing => "0", :rel => "bar", :width => "100%"}
+        %thead
+          %tr
+            %td  
+            %th{:scope => "col"} JAN
+            %th{:scope => "col"} FEB
+            %th{:scope => "col"} MAR
+            %th{:scope => "col"} APR
+            %th{:scope => "col"} MAY
+            %th{:scope => "col"} JUN
+            %th{:scope => "col"} JUL
+            %th{:scope => "col"} AUG
+            %th{:scope => "col"} SEP
+            %th{:scope => "col"} OCT
+            %th{:scope => "col"} NOV
+            %th{:scope => "col"} DEC
+            %th{:scope => "col"} JAN
+            %th{:scope => "col"} FEB
+        %tbody
+          %tr
+            %th{:scope => "row"} Page views
+            %td 1800
+            %td 900
+            %td 700
+            %td 1200
+            %td 600
+            %td 2800
+            %td 3200
+            %td 500
+            %td 2200
+            %td 1000
+            %td 1200
+            %td 700
+            %td 650
+            %td 800
+          %tr
+            %th{:scope => "row"} Unique visitors
+            %td 1600
+            %td 650
+            %td 550
+            %td 900
+            %td 500
+            %td 2300
+            %td 2700
+            %td 350
+            %td 1700
+            %td 600
+            %td 1000
+            %td 500
+            %td 400
+            %td 700
+    / .block_content ends
+  .bendl
+  .bendr
+
+.block.withsidebar
+  .block_head
+    .bheadl
+    .bheadr
+    %h2 Schedules
+  / .block_head ends
+  .block_content
+    .sidebar
+      %ul.sidemenu
+        %li
+          %a{:href => "#sb1"} Sensors
+        %li
+          %a{:href => "#sb2"} Actions
+        %li
+          %a{:href => "#sb3"} Info
+      %p
+        %strong Some notification text.
+        Donec hendrerit porttitor felis, id semper eros lobortis sed. Class aptent taciti sociosqu ad litora.
+    / .sidebar ends
+    #sb1.sidebar_content
+      %h3 Sidebar content 1
+      %p Aenean facilisis ligula eget orci adipiscing varius. Curabitur sem ligula, egestas vel bibendum sed, sodales eu nulla. Vestibulum luctus aliquam feugiat. Donec porta interdum placerat. Donec velit enim, porta vitae euismod ut, fermentum eu felis. Morbi aliquet, libero vel gravida facilisis, enim risus consequat tellus, vitae luctus est diam non nisi. Vivamus eget leo sit amet neque ultricies blandit. Sed tristique erat a sem ullamcorper tempor. Curabitur turpis lorem, semper et pharetra in, scelerisque in magna. Ut at tortor sed diam mattis rhoncus vel eget turpis. Praesent id diam velit, ullamcorper semper augue. Curabitur at orci tellus, sed tincidunt enim. Vivamus sed dolor vitae purus dignissim luctus quis sed nunc. Sed urna enim, auctor sit amet volutpat ut, porta sed leo. Integer dictum molestie elementum. Nullam dapibus tempus enim, id tincidunt arcu elementum varius.
+      %p Integer malesuada posuere nibh, ac commodo eros dictum eget. Maecenas vel urna ac sapien posuere tincidunt vel non metus. Morbi accumsan lectus at ante scelerisque molestie. Pellentesque in quam arcu, in lacinia orci. Sed blandit, neque sed ullamcorper lacinia, velit lectus lacinia lorem, id gravida sem arcu vel purus. Aenean tellus massa, elementum id condimentum ut, tempus ac dui. Integer consectetur neque placerat leo adipiscing iaculis. Vivamus tempor dui eu augue malesuada dignissim. In tempor odio eu augue ultricies ut hendrerit.
+    / .sidebar_content ends
+    #sb2.sidebar_content
+      %h3 Sidebar content 2
+      %p Integer malesuada posuere nibh, ac commodo eros dictum eget. Maecenas vel urna ac sapien posuere tincidunt vel non metus. Morbi accumsan lectus at ante scelerisque molestie. Pellentesque in quam arcu, in lacinia orci. Sed blandit, neque sed ullamcorper lacinia, velit lectus lacinia lorem, id gravida sem arcu vel purus. Aenean tellus massa, elementum id condimentum ut, tempus ac dui. Integer consectetur neque placerat leo adipiscing iaculis. Vivamus tempor dui eu augue malesuada dignissim. In tempor odio eu augue ultricies ut hendrerit.
+      %p Aenean facilisis ligula eget orci adipiscing varius. Curabitur sem ligula, egestas vel bibendum sed, sodales eu nulla. Vestibulum luctus aliquam feugiat. Donec porta interdum placerat. Donec velit enim, porta vitae euismod ut, fermentum eu felis. Morbi aliquet, libero vel gravida facilisis, enim risus consequat tellus, vitae luctus est diam non nisi. Vivamus eget leo sit amet neque ultricies blandit. Sed tristique erat a sem ullamcorper tempor. Curabitur turpis lorem, semper et pharetra in, scelerisque in magna. Ut at tortor sed diam mattis rhoncus vel eget turpis. Praesent id diam velit, ullamcorper semper augue. Curabitur at orci tellus, sed tincidunt enim. Vivamus sed dolor vitae purus dignissim luctus quis sed nunc. Sed urna enim, auctor sit amet volutpat ut, porta sed leo. Integer dictum molestie elementum. Nullam dapibus tempus enim, id tincidunt arcu elementum varius.
+    / .sidebar_content ends
+    #sb3.sidebar_content
+      %h3 Sidebar content 3
+      %p Aenean facilisis ligula eget orci adipiscing varius. Curabitur sem ligula, egestas vel bibendum sed, sodales eu nulla. Vestibulum luctus aliquam feugiat. Donec porta interdum placerat. Donec velit enim, porta vitae euismod ut, fermentum eu felis. Morbi aliquet, libero vel gravida facilisis, enim risus consequat tellus, vitae luctus est diam non nisi. Vivamus eget leo sit amet neque ultricies blandit. Sed tristique erat a sem ullamcorper tempor. Curabitur turpis lorem, semper et pharetra in, scelerisque in magna. Ut at tortor sed diam mattis rhoncus vel eget turpis. Praesent id diam velit, ullamcorper semper augue. Curabitur at orci tellus, sed tincidunt enim. Vivamus sed dolor vitae purus dignissim luctus quis sed nunc. Sed urna enim, auctor sit amet volutpat ut, porta sed leo. Integer dictum molestie elementum. Nullam dapibus tempus enim, id tincidunt arcu elementum varius.
+      %p Integer malesuada posuere nibh, ac commodo eros dictum eget. Maecenas vel urna ac sapien posuere tincidunt vel non metus. Morbi accumsan lectus at ante scelerisque molestie. Pellentesque in quam arcu, in lacinia orci. Sed blandit, neque sed ullamcorper lacinia, velit lectus lacinia lorem, id gravida sem arcu vel purus. Aenean tellus massa, elementum id condimentum ut, tempus ac dui. Integer consectetur neque placerat leo adipiscing iaculis. Vivamus tempor dui eu augue malesuada dignissim. In tempor odio eu augue ultricies ut hendrerit.
+    / .sidebar_content ends
+  / .block_content ends
+  .bendl
+  .bendr
+  / .block ends
+.block
+  .block_head
+    .bheadl
+    .bheadr
+    %h2 Log
+    %ul
+      %li
+        %a{:href => "#"} Alerts
+      %li
+        %a{:href => "#"} Today
+    / .block_head ends
+  .block_content
+    About
+    - for stat in @stats
+      %li.tiny
+        %img{:src => "icons/#{stat[0]}.png"}/
+        = stat[1]
+  .bendl
+  .bendr
+
+    -# .message.errormsg
+    -#   %p An error message goes here
+    -# .message.success
+    -#   %p A success message goes here
+
+  // %li.group Control
+  // %li#god_opts
+  //   %a{:href => "/o"}
+  //     %img{:src => "icons/start.png"}/
+  //     Power
+  // %li#god_opts
+  //   %a{:href => "/o"}
+  //     %img{:src => "icons/dashboard.png"}/
+  //     Sensors
+  // %li#top_show
+  //   %a{:href => "/t"}
+  //     %img{:src => "icons/terminal.png"}/
+  //     Top
+  // %li#home_icon
+  //   %a{:href => "/i"}
+  //     %img{:src => "icons/bookmark.png"}/
+  //     Icon
+  #stats

data/webapp/views/layout.haml

@@ -2,16 +2,87 @@
 %head
   %title= @title
   %meta{ :content => "text/html;charset=UTF-8", "http-equiv" => "content-type" }/
-  %style{:media => "screen", :type => "text/css"} @import "/iui/iuix.css";
-  %style{:media => "screen", :type => "text/css"} @import "/app.css";
-  %style{:media => "screen", :type => "text/css"} @import "/layout.css";
+  // %style{:media => "screen", :type => "text/css"} @import "/iui/iuix.css";
+  // %style{:media => "screen", :type => "text/css"} @import "/app.css";
+  // %style{:media => "screen", :type => "text/css"} @import "/layout.css";
+
+  = stylesheet_link_tag "style", "facebox", "visualize" #, :cache => "cache/cssall"
+  = javascript_include_tag "jquery", "jquery-ui", "rails", "helper", "main" #, :cache => "cache/jsall"
+
+  -# %link{:href => "jquery.wysiwyg.css", :media => "all", :rel => "stylesheet", :type => "text/css"}/
+  -# %link{:href => "date_input.css", :media => "all", :rel => "stylesheet", :type => "text/css"}/
+
   /%script{:src => "/app.js", :type => "application/x-javascript"}
   %script{:src => "/jquery.js", :type => "application/x-javascript"}
-  %script{:src => "/sparkline.js", :type => "application/x-javascript"}
+  %script{:src => "/jquery.img.preload.js", :type => "application/x-javascript"}
+  %script{:src => "/jquery.tablesorter.min.js", :type => "application/x-javascript"}
+  %script{:src => "/jquery.visualize.js", :type => "application/x-javascript"}
+  %script{:src => "/jquery.sparkline.js", :type => "application/x-javascript"}
+  %script{:src => "/facebox.js", :type => "application/x-javascript"}
   %script{:src => "/faye.js", :type => "application/x-javascript"}
+  %script{:src => "/custom.js", :type => "application/x-javascript"}
+
+  %link{:href => '/icons/favicon.png', :rel => 'shortcut icon'}
 
 %body
-  .toolbar
-    %h1#pageTitle= @title
-  = yield
+  #hld
+    .wrapper
+      / wrapper begins
+      #header
+        .hdrl
+        .hdrr
+        %h1
+          %a{:href => "#"}= @title
+        %ul#nav
+          %li
+            %a{:href => "#"} Dashboard
+          %li.active
+            %a{:href => "#"} Power
+            %ul
+              %li
+                %a{:href => "#"} List pages
+              %li
+                %a{:href => "#"} Add page
+              %li
+                %a{:href => "#"} More actions
+                %ul
+                  %li
+                    %a{:href => "#"} Some action
+                  %li
+                    %a{:href => "#"} Some action
+                  %li
+                    %a{:href => "#"} Some action
+                    %ul
+                      %li
+                        %a{:href => "#"} Some action
+                      %li
+                        %a{:href => "#"} Some action
+                      %li
+                        %a{:href => "#"} Some action
+          %li
+            %a{:href => "#"} Sensors
+          %li
+            %a{:href => "#"} Options
+            %ul
+              %li
+                %a{:href => "#"} List media
+              %li
+                %a{:href => "#"} Add media
+              %li
+                %a{:href => "#"} Something else
+          %li
+            %a{:href => "#"} Users
+        %p.user
+          Hello,
+          %a{:href => "#"} John
+          |
+          %a{:href => "index.html"} Logout
+      / #header ends
+      = yield
+
+  %li.tiny
+    %img{:src => "icons/ruby.png"}/
+    = @footer
+    [ok]
+
   %script{:src => "/rt.js", :type => "application/x-javascript"}