From 3702d84d7c10810a54dde3446338e8d2fafeb10b Mon Sep 17 00:00:00 2001 From: Steffen Vogel Date: Tue, 28 Sep 2010 15:44:28 +0200 Subject: [PATCH] simplified frontend again, adapted to new format --- frontend/index.html | 27 ++--- frontend/javascript/functions.js | 159 ++++++++++----------------- frontend/javascript/script.js | 19 ++-- frontend/{ => stylesheets}/style.css | 10 +- 4 files changed, 83 insertions(+), 132 deletions(-) rename frontend/{ => stylesheets}/style.css (81%) diff --git a/frontend/index.html b/frontend/index.html index 170bcbf..2a6eb25 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -18,34 +18,27 @@ - + - +
-
- -
- -
-
- -
+
- - - + + +
«»»»
+
Legende
+
Kanäle
+ +
Debug
- - -
- diff --git a/frontend/javascript/functions.js b/frontend/javascript/functions.js index 05229e6..2e1be6c 100644 --- a/frontend/javascript/functions.js +++ b/frontend/javascript/functions.js @@ -25,63 +25,25 @@ * along with volkszaehler.org. If not, see . */ -function calcMyWindowStart() { - var myWindowStart = new Date(myWindowEnd); - - var year = myWindowStart.getFullYear(); - var month = myWindowStart.getMonth();// 0 is january - var day = myWindowStart.getDate(); // getDay() returns day of week - var hours = myWindowStart.getHours(); - var minutes = myWindowStart.getMinutes(); - - // var windowSize = f.window.value.substring(0,1); - var windowSize = "1"; - // var windowInterval = f.window.value.substring(1); - var windowInterval = "MONTH"; // we want to display 1 day (for now) - - myWindowStart.setMonth(myWindowStart.getMonth()-windowSize); - return myWindowStart.getTime(); -} - -// groups a timestamp depending on grouping value -// e.g. 2010-05-01 23:23:23 will become 2010-05-01 23:00:00 vor grouping=hour -function getGroupedTimestamp(timestamp) { - time = new Date(timestamp); - - var year = time.getFullYear(); - var month = time.getMonth();// 0 is january - var day = time.getDate(); // getDay() returns day of week - var hours = time.getHours(); - var minutes = time.getMinutes(); - - hours = 0; - - return (new Date(year,month,day,hours,minutes)).getTime(); -} - function loadChannelList() { - $('#debug').append('json
'); - // load json data - $.getJSON("../backend/index.php/data/" + myUUID + {format: 'json'}); - -} - -function autoReload() { - if (false) { - myWindowEnd = getGroupedTimestamp((new Date()).getTime()); - getData(); - } + $.getJSON('../backend/index.php/entity/' + myUUID + '.json', {format: 'json'}, function(json) { + channels = json; + }); } function moveWindow(mode) { + delta = myWindowEnd - myWindowStart; if(mode == 'last') myWindowEnd = (new Date()).getTime(); + myWindowStart = myWindowEnd - delta; if(mode == 'back') { - myWindowEnd = myWindowStart; + myWindowStart -= delta; + myWindowEnd -= delta; } if(mode == 'forward') { - myWindowEnd += (myWindowEnd-myWindowStart); + myWindowStart += delta; + myWindowEnd += delta; } getData(); @@ -89,29 +51,10 @@ function moveWindow(mode) { function getData() { - - /* - * if(f.ids.length>0) $('#loading').empty().html(''); - * // list of channel ids, comma separated ids_parameter = ""; - * - * if(typeof f.ids.length == 'undefined') { // only one channel - * ids_parameter = f.ids.value; } else { // more than one channel for(i=0;iJSON
'); // load json data with given time window - // $.getJSON("../backend/index.php/data/" + myUUID + - // '/format/json/from/'+myWindowStart+'/to/'+myWindowEnd, function(j){ - $.getJSON("../backend/index.php/data/" + myUUID + '.json?from='+myWindowStart+'&to='+myWindowEnd+'&resolution=500', function(j){ - data = j; - // then show/reload the chart - // if(data.channels.length > 0 && data.channels[0].pulses.length > 0) - showChart(); + $.getJSON("../backend/index.php/data/" + myUUID + '.json?from='+myWindowStart+'&to='+myWindowEnd+'&resolution=500', function(json){ + data = json; + showChart(); $('#loading').empty(); }); @@ -119,47 +62,65 @@ function getData() { } function showChart() { - var jqData = new Array(); - var series_chart = new Array(); - - $('#ChartInfo').hide(); - $('#ChartPlot').show(); - - jqOptions = { - legend:{show:true}, - series:[], - cursor:{zoom:true, showTooltip:true,constrainZoomTo:'x'}, - seriesDefaults:{lineWidth:1,showMarker:false}} - - // legend entries - for( uuid in data.channels ) { - jqOptions.series.push({label:data.channels[uuid]['description']}); - } EformatString = '%d.%m.%y %H:%M'; - // power (moving average) gray line - for( uuid in data.data ) { - jqData.push(data.data[uuid]); - } - - - - jqOptions.axes = { - yaxis:{autoscale:true, min:0, label:"Leistung (Watt)", tickOptions:{formatString:'%.3f'},labelRenderer: $.jqplot.CanvasAxisLabelRenderer}, - xaxis:{autoscale:true, min:calcMyWindowStart(), max:myWindowEnd, tickOptions:{formatString:EformatString,angle:-30},pad:1, renderer:$.jqplot.DateAxisRenderer,rendererOptions:{tickRenderer:$.jqplot.CanvasAxisTickRenderer}}, + jqOptions = { + series: [], + cursor: { + zoom: true, + showTooltip: true, + constrainZoomTo: 'x' + }, + seriesDefaults: { + lineWidth: 1, + showMarker: false + } }; - chart = $.jqplot("ChartDIV",jqData,jqOptions); - chart.replot(); + // legend entries + $.each(data.data, function(index, value) { + jqData.push(value.tuples); + }); + + jqOptions.axes = { + yaxis: { + autoscale: true, + min: 0, + label: 'Leistung (Watt)', + tickOptions: { + formatString: '%.3f' + }, + labelRenderer: $.jqplot.CanvasAxisLabelRenderer + }, + xaxis: { + autoscale: true, + min: myWindowStart, + max: myWindowEnd, + tickOptions: { + formatString: EformatString, + angle: -30 + }, + pad: 1, + renderer: $.jqplot.DateAxisRenderer, + rendererOptions: { + tickRenderer: $.jqplot.CanvasAxisTickRenderer + } + } + }; + $('plot').empty(); + chart = $.jqplot('plot', jqData, jqOptions); + chart.replot({ + clear: true, + resetAxes: true + }); } -/* +/** * jQuery extensions */ - $.extend({ getUrlVars: function(){ var vars = [], hash; diff --git a/frontend/javascript/script.js b/frontend/javascript/script.js index c52d3b0..1f7549d 100644 --- a/frontend/javascript/script.js +++ b/frontend/javascript/script.js @@ -32,11 +32,11 @@ if($.getUrlVar('uuid')) // storing json data var data; -// windowStart parameter for json server -var myWindowStart = 0; +//windowEnd parameter for json server +var myWindowEnd = new Date().getTime(); -// windowEnd parameter for json server -var myWindowEnd = getGroupedTimestamp((new Date()).getTime()); +// windowStart parameter for json server +var myWindowStart = myWindowEnd - 24*60*60*1000; // windowGrouping for json server var windowGrouping = 0; @@ -52,19 +52,14 @@ $(document).ready(function() { // perhaps you have to reload after display rotation if($(window).width() < 800) { $("#chart").animate({ - width:$(window).width() - 40, - height:$(window).height() - 3, - },0); - $("#options").animate({ - height:$(window).height() - 3, - },0); + width: $(window).width() - 40, + height: $(window).height() - 3, + }, 0); } // load channel list // loadChannelList(); // start autoReload timer - window.setInterval("autoReload()",5000); - getData(); }); diff --git a/frontend/style.css b/frontend/stylesheets/style.css similarity index 81% rename from frontend/style.css rename to frontend/stylesheets/style.css index e021918..51b5a3c 100644 --- a/frontend/style.css +++ b/frontend/stylesheets/style.css @@ -1,10 +1,12 @@ -a { - color: gray; -} - body { margin: 0; padding: 0; + background-color: #9ACC67; + font-family: sans-serif; +} + +a { + color: gray; } #vz {