From e6bf6952d957f3ea0d4cdc13eb11232346b3aa4c Mon Sep 17 00:00:00 2001 From: Steffen Vogel Date: Tue, 28 Sep 2010 18:17:45 +0200 Subject: [PATCH] frontend is processing.. --- frontend/index.html | 9 +-- frontend/javascript/functions.js | 94 ++++++++---------------- frontend/javascript/jquery-extensions.js | 73 ++++++++++++++++-- frontend/javascript/script.js | 72 +++++++++++++++--- 4 files changed, 161 insertions(+), 87 deletions(-) diff --git a/frontend/index.html b/frontend/index.html index 3ec807c..3e41719 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -40,14 +40,11 @@

Kanäle

-
Second content
- -

Debug

-
Third content
+

Optionen

-
+
- +
diff --git a/frontend/javascript/functions.js b/frontend/javascript/functions.js index ea513cb..fcc9a53 100644 --- a/frontend/javascript/functions.js +++ b/frontend/javascript/functions.js @@ -1,6 +1,6 @@ /** * Javascript functions for the frontend - * + * * @author Florian Ziegler * @author Justin Otherguy * @author Steffen Vogel @@ -10,24 +10,33 @@ */ /* * This file is part of volkzaehler.org - * - * volkzaehler.org is free software: you can redistribute it and/or modify - * it under the terms of the GNU General Public License as published by - * the Free Software Foundation, either version 3 of the License, or - * any later version. - * - * volkzaehler.org is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU General Public License for more details. - * - * You should have received a copy of the GNU General Public License - * along with volkszaehler.org. If not, see . + * + * volkzaehler.org is free software: you can redistribute it and/or modify it + * under the terms of the GNU General Public License as published by the Free + * Software Foundation, either version 3 of the License, or any later version. + * + * volkzaehler.org is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or + * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more + * details. + * + * You should have received a copy of the GNU General Public License along with + * volkszaehler.org. If not, see . */ -function loadChannelList() { - $.getJSON('../backend/index.php/entity/' + myUUID + '.json', {format: 'json'}, function(json) { - channels = json; +function refresh() { + if ($('[name=refresh]').attr('checked')) { + getData(); + } +} + +function loadEntities() { + $('#entities').empty(); + $.each(uuids, function(index, value) { + $.getJSON(backendUrl + '/entity/' + value + '.json', function(json) { + var entity = (json.group) ? json.group : json.channel; + $('#entities').append('' + entity.uuid + '' + entity.title + '' + entity.type + ''); + }); }); } @@ -52,10 +61,9 @@ function moveWindow(mode) { function getData() { // load json data with given time window - $.getJSON("../backend/index.php/data/" + myUUID + '.json?from='+myWindowStart+'&to='+myWindowEnd+'&resolution=500', function(json){ - data = json; + $.getJSON(backendUrl + '/data/' + myUUID + '.json', {from: myWindowStart, to: myWindowEnd, tuples: 500}, function(data){ + json = data; showChart(); - $('#loading').empty(); }); return false; @@ -64,53 +72,11 @@ function getData() { function showChart() { var jqData = new Array(); - EformatString = '%d.%m.%y %H:%M'; - - jqOptions = { - series: [], - cursor: { - zoom: true, - showTooltip: true, - constrainZoomTo: 'x' - }, - seriesDefaults: { - lineWidth: 1, - showMarker: false - } - }; - - // legend entries - $.each(data.data, function(index, value) { + $.each(json.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(); + // TODO read docs chart = $.jqplot('plot', jqData, jqOptions); chart.replot({ clear: true, diff --git a/frontend/javascript/jquery-extensions.js b/frontend/javascript/jquery-extensions.js index 21594bc..56d0e88 100644 --- a/frontend/javascript/jquery-extensions.js +++ b/frontend/javascript/jquery-extensions.js @@ -25,18 +25,81 @@ * along with volkszaehler.org. If not, see . */ -$.extend({ - getUrlVars: function(){ +/** + * + */ +$.extend( { + getUrlVars : function() { var vars = [], hash; - var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); - for(var i = 0; i < hashes.length; i++) { + var hashes = window.location.href.slice( + window.location.href.indexOf('?') + 1).split('&'); + for ( var i = 0; i < hashes.length; i++) { hash = hashes[i].split('='); vars.push(hash[0]); vars[hash[0]] = hash[1]; } return vars; }, - getUrlVar: function(name){ + getUrlVar : function(name) { return $.getUrlVars()[name]; } +}); + +/** + * Cookie plugin + * + * @author Klaus Hartl + * @author Steffen Vogel + * + * Copyright (c) 2006 Klaus Hartl (stilbuero.de) + * Dual licensed under the MIT and GPL licenses: + * http://www.opensource.org/licenses/mit-license.php + * http://www.gnu.org/licenses/gpl.html + */ +$.extend({ + cookie: function(name, value, options) { + if (typeof value != 'undefined') { // name and value given, set cookie + options = options || {}; + if (value === null) { + value = ''; + options.expires = -1; + } + var expires = ''; + if (options.expires + && (typeof options.expires == 'number' || options.expires.toUTCString)) { + var date; + if (typeof options.expires == 'number') { + date = new Date(); + date.setTime(date.getTime() + + (options.expires * 24 * 60 * 60 * 1000)); + } else { + date = options.expires; + } + expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE + } + // CAUTION: Needed to parenthesize options.path and options.domain + // in the following expressions, otherwise they evaluate to undefined + // in the packed version for some reason... + var path = options.path ? '; path=' + (options.path) : ''; + var domain = options.domain ? '; domain=' + (options.domain) : ''; + var secure = options.secure ? '; secure' : ''; + document.cookie = [ name, '=', encodeURIComponent(value), expires, + path, domain, secure ].join(''); + } else { // only name given, get cookie + var cookieValue = null; + if (document.cookie && document.cookie != '') { + var cookies = document.cookie.split(';'); + for ( var i = 0; i < cookies.length; i++) { + var cookie = jQuery.trim(cookies[i]); + // Does this cookie string begin with the name we want? + if (cookie.substring(0, name.length + 1) == (name + '=')) { + cookieValue = decodeURIComponent(cookie + .substring(name.length + 1)); + break; + } + } + } + return cookieValue; + } + } }); \ No newline at end of file diff --git a/frontend/javascript/script.js b/frontend/javascript/script.js index 9c0c77e..1421eb7 100644 --- a/frontend/javascript/script.js +++ b/frontend/javascript/script.js @@ -25,12 +25,62 @@ * along with volkszaehler.org. If not, see . */ +/* + * Constants + */ +const backendUrl = '../backend/index.php'; +const jqOptions = { + title: 'volkszaehler.org', + series: [], + cursor: { + zoom: true, + showTooltip: true, + constrainZoomTo: 'x' + }, + seriesDefaults: { + lineWidth: 1, + showMarker: false + }, + axes: { + yaxis: { + autoscale: true, + min: 0, + label: 'Leistung (Watt)', + tickOptions: { + formatString: '%.3f' + }, + labelRenderer: $.jqplot.CanvasAxisLabelRenderer + }, + xaxis: { + autoscale: true, + min: myWindowStart, + max: myWindowEnd, + tickOptions: { + formatString: '%d.%m.%y %H:%M', + angle: -35 + }, + pad: 1, + renderer: $.jqplot.DateAxisRenderer, + rendererOptions: { + tickRenderer: $.jqplot.CanvasAxisTickRenderer + } + } + } +}; + +/* + * Variables + */ var myUUID = ''; -if($.getUrlVar('uuid')) +var uuids = $.parseJSON($.cookie('uuids')); + +if($.getUrlVar('uuid')) { myUUID = $.getUrlVar('uuid'); + uuids.push($.getUrlVar('uuid')); +} // storing json data -var data; +var json; //windowEnd parameter for json server var myWindowEnd = new Date().getTime(); @@ -38,34 +88,32 @@ var myWindowEnd = new Date().getTime(); // windowStart parameter for json server var myWindowStart = myWindowEnd - 24*60*60*1000; -// windowGrouping for json server -var windowGrouping = 0; - -// mouse position on mousedown (x-axis) -var moveXstart = 0; - // executed on document loaded complete // this is where it all starts... $(document).ready(function() { // initialization of user interface $('#accordion h3').click(function() { - $(this).next().toggle('slow'); + $(this).next().toggle('fast'); return false; }).next().hide(); + + $('#refreshInterval').slider(); // resize chart area for low resolution displays // works fine with HTC hero // perhaps you have to reload after display rotation if($(window).width() < 800) { - $("#chart").animate({ + $('#chart').animate({ width: $(window).width() - 40, height: $(window).height() - 3, }, 0); } - // load channel list - // loadChannelList(); + // load all entity information + loadEntities(); + + window.setInterval(refresh, 5000); // load data and show plot getData();