diff --git a/frontend/index.html b/frontend/index.html index 318b72b..4376ed6 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -1,8 +1,7 @@ - Volkszaehler.org - + volkszaehler.org - web frontend @@ -14,63 +13,13 @@ - - + + - - + - @@ -127,301 +76,10 @@ -
-

All form fields are required.

- -
- -
- - -
-
-
-
- - diff --git a/frontend/javascript/functions.js b/frontend/javascript/functions.js new file mode 100644 index 0000000..03f514d --- /dev/null +++ b/frontend/javascript/functions.js @@ -0,0 +1,228 @@ +/* +* Copyright (c) 2010 by Florian Ziegler +* +* This program is free software; you can redistribute it and/or modify it +* under the terms of the GNU General Public License (either version 2 or +* version 3) as published by the Free Software Foundation. +* +* This program 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 this program; if not, write to the Free Software +* Foundation, Inc., 675 Mass Ave, Cambridge, MA 02139, USA. +* +* For more information on the GPL, please go to: +* http://www.gnu.org/copyleft/gpl.html +*/ + +// return an array with timestamps of e.g. +// 2010-05-01 00:00:00, 2010-05-01 01:00, 2010-05-01 02:00 for grouping=hour +// between windowStart and windowEnd of json response +function getEmptyGroupArray() { + var empty_array = new Object(); + + var iterator = getGroupedTimestamp(myWindowStart); + //$('#debug').empty().append('start:'+myWindowStart+'end:'+myWindowEnd); + + if(myWindowStart < myWindowEnd && iterator < myWindowEnd) { + var i=0; + while(iterator < myWindowEnd) { + i++; + + empty_array[iterator] = 0; + + var iteratorDate = new Date(iterator); + //$('#debug').append('#'+i+':'+iteratorDate+'
'); + iteratorDate.setDate(iteratorDate.getDate()+1); + // very bad bug: infinity loop for summer winter change + if(i==750) return empty_array; + + iterator = iteratorDate.getTime(); + } + } + + return empty_array +} + +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() { + // call getData if autoReload checkbox is active + if(f.autoReload.checked == true) { + myWindowEnd = getGroupedTimestamp((new Date()).getTime()); + getData(); + } +} + +function moveWindow(mode) { + if(mode == 'last') + myWindowEnd = (new Date()).getTime(); + if(mode == 'back') { + myWindowEnd = myWindowStart; + } + if(mode == 'forward') { + myWindowEnd += (myWindowEnd-myWindowStart); + } + + getData(); +} + + +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, function(j){ + data = j; + $('#debug').empty().append(data.toSource()); + // then show/reload the chart + // if(data.channels.length > 0 && data.channels[0].pulses.length > 0) + showChart(); + $('#loading').empty(); + }); + + return false; +} + +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}} + + // stack plot seiries if add channels is active + if(f.stackChannels.checked == true) { + jqOptions.stackSeries = true; + jqOptions.seriesDefaults.fill = true; + jqOptions.seriesDefaults.showShadow = 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}}, + }; + + chart = $.jqplot("ChartDIV",jqData,jqOptions); + chart.replot(); + +} + +function generateAxisTicks() { + var data_grouped_time = getEmptyGroupArray(); + var ticks = new Array(); + + for(var timestamp in data_grouped_time) { + var time = new Date(timestamp*1000); + ticks.push(time.getDate()+'.'+(time.getMonth()+1)+'.'+' '+time.getHours()+':00'); + } + + return ticks; +} + +function updateTips(t) { + tips + .text(t) + .addClass('ui-state-highlight'); + setTimeout(function() { + tips.removeClass('ui-state-highlight', 1500); + }, 500); +} + + +function checkLength(o,n,min,max) { + + if ( o.val().length > max || o.val().length < min ) { + o.addClass('ui-state-error'); + updateTips("Length of " + n + " must be between "+min+" and "+max+"."); + return false; + } else { + return true; + } +} + +function checkRegexp(o,regexp,n) { + if ( !( regexp.test( o.val() ) ) ) { + o.addClass('ui-state-error'); + updateTips(n); + return false; + } else { + return true; + } +} \ No newline at end of file diff --git a/frontend/javascript/script.js b/frontend/javascript/script.js new file mode 100644 index 0000000..97b91d0 --- /dev/null +++ b/frontend/javascript/script.js @@ -0,0 +1,67 @@ +HTTP_GET_VARS = new Array(); +strGET = document.location.search.substr(1,document.location.search.length); +if(strGET != '') { + gArr=strGET.split('&'); + for(i=0;i1) { + v=vArr[1]; + } + HTTP_GET_VARS[unescape(vArr[0])] = unescape(v); + } +} + +var myUUID = ''; +if(HTTP_GET_VARS['uuid']) + myUUID = HTTP_GET_VARS['uuid']; + + +// easy access to formular with f +var f; + +// storing json data +var data; + +// windowStart parameter for json server +var myWindowStart = 0; + +// windowEnd parameter for json server +var myWindowEnd = getGroupedTimestamp((new Date()).getTime()); + +// 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() { + f = document.formular; + + // 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({ + width:$(window).width()-40, + height:$(window).height()-3, + },0); + $("#options").animate({ + height:$(window).height()-3, + },0); + } + + // load channel list + // loadChannelList(); + + // start autoReload timer + window.setInterval("autoReload()",5000); + + // code for adding a channel + var uuid = $("#uuid"); + var allFields = $([]).add(uuid); + var tips = $(".validateTips"); + + getData(); +}); \ No newline at end of file diff --git a/frontend/javascript/smartmeter.js b/frontend/javascript/smartmeter.js deleted file mode 100644 index 2197a17..0000000 --- a/frontend/javascript/smartmeter.js +++ /dev/null @@ -1,83 +0,0 @@ -/* -* Copyright (c) 2010 by Florian Ziegler -* -* This program is free software; you can redistribute it and/or modify it -* under the terms of the GNU General Public License (either version 2 or -* version 3) as published by the Free Software Foundation. -* -* This program 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 this program; if not, write to the Free Software -* Foundation, Inc., 675 Mass Ave, Cambridge, MA 02139, USA. -* -* For more information on the GPL, please go to: -* http://www.gnu.org/copyleft/gpl.html -*/ - -// return an array with timestamps of e.g. -// 2010-05-01 00:00:00, 2010-05-01 01:00, 2010-05-01 02:00 for grouping=hour -// between windowStart and windowEnd of json response -function getEmptyGroupArray() { - var empty_array = new Object(); - - var iterator = getGroupedTimestamp(myWindowStart); - //$('#debug').empty().append('start:'+myWindowStart+'end:'+myWindowEnd); - - if(myWindowStart < myWindowEnd && iterator < myWindowEnd) { - var i=0; - while(iterator < myWindowEnd) { - i++; - - empty_array[iterator] = 0; - - var iteratorDate = new Date(iterator); - //$('#debug').append('#'+i+':'+iteratorDate+'
'); - iteratorDate.setDate(iteratorDate.getDate()+1); - // very bad bug: infinity loop for summer winter change - if(i==750) return empty_array; - - iterator = iteratorDate.getTime(); - } - } - - return empty_array -} - -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(); -} - diff --git a/frontend/style.css b/frontend/style.css new file mode 100644 index 0000000..e7910ab --- /dev/null +++ b/frontend/style.css @@ -0,0 +1,78 @@ +a { + color: gray; +} + +body { + margin: 0; + padding: 0; +} + +#options { + width: 165px; + height: 450px; + border: 1px solid #555555; + background-color: white; +} + +#Chart { + border: 1px solid #555555; + background-color: white; + width: 800px; + height: 450px; + padding-left: 20px; + padding-right: 20px; + left: 165px; + top: 0px; + position: absolute; + overflow: hidden; +} + +.moveArrow { + position: absolute; + height: 100%; + top: 0; +} + +/* styles for jQuery-UI */ +input.text { + margin-bottom: 12px; + width: 95%; + padding: .4em; +} + +fieldset { + padding: 0; + border: 0; + margin-top: 25px; +} + +h1 { + font-size: 1.2em; + margin: .6em 0; +} + +div#users-contain { + width: 350px; + margin: 20px 0; +} + +div#users-contain table { + margin: 1em 0; + border-collapse: collapse; + width: 100%; +} + +div#users-contain table td,div#users-contain table th { + border: 1px solid #eee; + padding: .6em 10px; + text-align: left; +} + +.ui-dialog .ui-state-error { + padding: .3em; +} + +.validateTips { + border: 1px solid transparent; + padding: 0.3em; +} \ No newline at end of file