Live update fixes, configuration fixes, better html style

wardbekker · May 13, 2012 · 4ceb774 · 4ceb774
1 parent becc039
commit 4ceb774
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 20 deletions.
diff --git a/presentation/erlang_EUG_NL_april_2012.key b/presentation/erlang_EUG_NL_april_2012.key
diff --git a/src/chart_resource.erl b/src/chart_resource.erl
@@ -44,10 +44,10 @@ to_html(ReqData, State) ->
     EndTimestamp = db_queries:maxESenseTimestamp(),
     StartTimestamp = EndTimestamp - utils:timestamp({0,1000,0}),
     Charts = [
-              "meditation", "theta", "highBeta",
-              "highGamma", "attention", "lowBeta",
-              "delta", "highAlpha", "lowGamma",
-              "lowAlpha", "combined", "poorsignal", "blink"
+              "attention", "meditation", "highAlpha", "highBeta", "blink", "poorsignal", "combined"
+              %% "highGamma", "attention", "lowBeta",
+              %% "delta", "highAlpha", "lowGamma",
+              %% "lowAlpha", "combined", "poorsignal", "blink"
              ],
     ChartsData = lists:map(
                    fun(C) -> chartData(C, StartTimestamp, EndTimestamp) end,
@@ -91,7 +91,7 @@ blinkData(StartTimestamp, EndTimestamp) ->
             {"height", "200"},
             {"title", "Blink"},
             {"chartDataType", "blink"},
-            {"columns", [{ "number", "Timestamp"}, { "number", "strength" }]},
+            {"columns", [{ "number", "Timestamp"}, { "number", "blink" }]},
             {"rows", DataRows }
            ],
     Data.

diff --git a/src/connection_ser.erl b/src/connection_ser.erl
@@ -47,10 +47,10 @@ start_link(Config) ->
 -spec init([]) -> {'ok',#state{socket::port()}}.
 init(Config) ->
     Hostname = proplists:get_value(
-                 connector_hostname, Config, DEF_CONNECTOR_HOSTNAME
+                 connector_hostname, Config, ?DEF_CONNECTOR_HOSTNAME
                 ),
     Port = proplists:get_value(
-             connector_port, Config, DEF_CONNECTOR_PORT
+             connector_port, Config, ?DEF_CONNECTOR_PORT
             ),
     {ok, Socket} = gen_tcp:connect(
                      Hostname, Port, [binary, {packet, 0}]

diff --git a/templates/linechart.dtl b/templates/linechart.dtl
@@ -1,21 +1,70 @@
 <html>
   <head>
+    <style type="text/css" media="screen">
+/* from blueprint */
+.container { width:960px; margin:0 auto;}
+.clearfix:after,.container:after { content:"\0020"; display:block; height:0; clear:both;
+visibility:hidden; overflow:hidden; }
+.container:after { content:"\0020"; display:block; height:0; clear:both;
+visibility:hidden; overflow:hidden; }
+.clearfix, .container {display:block;}
+html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address,
+code,del, dfn, em, img, q, dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody,
+tfoot, thead, tr, th, td { margin:0; padding:0; border:0; font-weight:inherit; font-style:inherit;
+font-size:100%; font-family:inherit; vertical-align:baseline;}body { line-height:1.5; }table {
+border-collapse:separate; border-spacing:0; }caption, th, td { text-align:left; font-weight:normal; }table,
+td, th { vertical-align:middle; }blockquote:before, blockquote:after, q:before, q:after { content:"";
+}blockquote, q { quotes:"" ""; }a img { border:none; }html { font-size:100.01%; }body { font-size:75%;
+color:#222; background:#fff; font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;}h1,h2,h3,h4,h5,h6 {
+font-weight:normal; color:#111; }h1 { font-size:3em; line-height:1; margin-bottom:0.5em; }h2 {
+font-size:2em; margin-bottom:0.75em; }h3 { font-size:1.5em; line-height:1; margin-bottom:1em; }h4 {
+font-size:1.2em; line-height:1.25; margin-bottom:1.25em; }h5 { font-size:1em; font-weight:bold;
+margin-bottom:1.5em; }h6 { font-size:1em; font-weight:bold; }h1 img, h2 img, h3 img, h4 img, h5 img, h6 img
+{ margin:0;}p { margin:0 0 1.5em; }p img.left { float:left; margin:1.5em 1.5em 1.5em 0; padding:0; }p
+img.right { float:right; margin:1.5em 0 1.5em 1.5em; }a:focus, a:hover { color:#000; }a { color:#009;
+text-decoration:underline; }blockquote { margin:1.5em; color:#666; font-style:italic; }strong {
+font-weight:bold; }em,dfn { font-style:italic; }dfn { font-weight:bold; }sup, sub { line-height:0; }abbr,
+acronym { border-bottom:1px dotted #666; }address { margin:0 0 1.5em; font-style:italic; }del { color:#666;
+}pre { margin:1.5em 0; white-space:pre; }pre,code,tt { font:1em 'andale mono', 'lucida console', monospace;
+line-height:1.5; }li ul, li ol { margin:0 1.5em; }ul, ol { margin:0 1.5em 1.5em 1.5em; }ul {
+list-style-type:disc; }ol { list-style-type:decimal; }dl { margin:0 0 1.5em 0; }dl dt { font-weight:bold;
+}dd { margin-left:1.5em;}table { margin-bottom:1.4em; width:100%; }th { font-weight:bold; }thead th {
+background:#c3d9ff; }th,td,caption { padding:4px 10px 4px 5px; }tr.even td { background:#e5ecf9; }tfoot {
+font-style:italic; }caption { background:#eee; }.small { font-size:.8em; margin-bottom:1.875em;
+line-height:1.875em; }.large { font-size:1.2em; line-height:2.5em; margin-bottom:1.25em; }.hide {
+display:none; }.quiet { color:#666; }.loud { color:#000; }.highlight { background:#ff0; }.added {
+background:#060; color:#fff; }.removed { background:#900; color:#fff; }.first { margin-left:0;
+padding-left:0; }.last { margin-right:0; padding-right:0; }.top { margin-top:0; padding-top:0; }.bottom {
+margin-bottom:0; padding-bottom:0; }
+.clear { clear:both; }
+/**/
+    </style>
     <script type="text/javascript" src="https://www.google.com/jsapi"></script>
     <script type="text/javascript">
       google.load("visualization", "1", {packages:["corechart"]});
       google.load("jquery", "1.4.2");
       google.setOnLoadCallback(drawCharts);
+
+      {% for chart in charts %}
+      {% with datacount=forloop.counter0 %}
+      var data{{datacount}} = null;
+      var chart{{datacount}} = null;
+      var maxValue{{datacount}} = 0;
+      {% endwith %}
+      {% endfor %}
+
       function drawCharts() {
-
         {% for chart in charts %}
+        {% with datacount=forloop.counter0 %}
 
-        var data = new google.visualization.DataTable();
+        data{{datacount}} = new google.visualization.DataTable();
+        chart{{datacount}} = new google.visualization.LineChart(document.getElementById('chart_div{{datacount}}'));
 
         {% for type, label in chart.columns %}
-            data.addColumn('{{ type }}', '{{ label }}');
+            data{{datacount}}.addColumn('{{ type }}', '{{ label }}');
         {% endfor %}
 
-        data.addRows([
+        data{{datacount}}.addRows([
           {% for label, values in chart.rows %}
             [{{ label }}, {{ values }}],
           {% endfor %}
@@ -28,30 +77,33 @@
           interpolateNulls: true
         };
 
-        var chart = new google.visualization.LineChart(document.getElementById('chart_div{{forloop.counter0 }}'));
-        chart.draw(data, options);
+        chart{{datacount}}.draw(data{{datacount}}, options);
 
-        var maxValue = {{ chart.hAxis_maxValue }};
+        maxValue{{datacount}} = {{ chart.hAxis_maxValue }};
 
         setInterval(function() {
-            $.getJSON('/chart?esense={{ chart.chartDataType }}&maxValue=' + maxValue, function(rows) {
+            $.getJSON('/chart?chartDataType={{ chart.chartDataType }}&maxValue=' + maxValue{{datacount}} , function(rows) {
                     for(var index in rows) {
-                        data.addRow([parseInt(index), rows[index]]);
-                        maxValue = [parseInt(index)];
+                        data{{datacount}}.addRow([parseInt(index), rows[index]]);
+                        maxValue{{datacount}} = [parseInt(index)];
                     }
-                    chart.draw(data);
+                    chart{{datacount}}.draw(data{{datacount}});
                     }
             )
         }, 
         200);
-
-        {% endfor %}        
+        {% endwith %}
+        {% endfor %}
       }
     </script>
   </head>
   <body>
+      <div class="container" style="padding:20px">
+      <h1>Erltricity</h1>
+      <h3>Monitor your brainwaves with Erlang</h3>
    {% for chart in charts %}
     <div id="chart_div{{forloop.counter0 }}"></div>
    {% endfor %}
+      </div>
   </body>
 </html>