-
-
-
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
');
+ * // 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;i