seperated code from layout and structure

This commit is contained in:
Steffen Vogel 2010-09-27 00:26:35 +02:00
parent 39414ab9e2
commit aad462c297
5 changed files with 377 additions and 429 deletions

View file

@ -1,8 +1,7 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Volkszaehler.org</title>
<meta name="GENERATOR" content="Quanta Plus">
<title>volkszaehler.org - web frontend</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="javascript/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="javascript/jqplot/jquery.jqplot.min.js"></script>
@ -14,63 +13,13 @@
<script type="text/javascript" src="javascript/jqplot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="javascript/jqplot/plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="javascript/jqplot/plugins/jqplot.highlighter.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.js"></script>
<script type="text/javascript" src="javascript/smartmeter.js"></script>
<script type="text/javascript" src="javascript/functions.js"></script>
<script type="text/javascript" src="javascript/script.js"></script>
<link rel="stylesheet" type="text/css" href="javascript/jqplot/jquery.jqplot.css">
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/ui-lightness/jquery-ui.css" rel="Stylesheet" />
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
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; }
</style>
</head>
<body style="background-color:#9ACC67;">
@ -127,301 +76,10 @@
</div>
</form>
<div id="dialog-form" title="add new channel">
<p class="validateTips">All form fields are required.</p>
<form>
<fieldset>
<label for="uuid">uuid</label>
<input type="text" name="uuid" id="uuid" class="text ui-widget-content ui-corner-all" />
</fieldset>
</form>
</div>
<div id="json"></div>
<!-- uncomment the following line to activate debugging -->
<!--<div id="debug"></div>-->
<script language="JavaScript" type="text/javascript">
HTTP_GET_VARS = new Array();
strGET = document.location.search.substr(1,document.location.search.length);
if(strGET != '') {
gArr=strGET.split('&');
for(i=0;i<gArr.length;++i) {
v='';vArr=gArr[i].split('=');
if(vArr.length>1) {
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 = document.formular;
// 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() {
// 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"),
allFields = $([]).add(uuid),
tips = $(".validateTips");
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;
}
}
$("#dialog-form").dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
'add channel': function() {
var bValid = true;
allFields.removeClass('ui-state-error');
bValid = bValid && checkLength(uuid,"UUID",36,36);
if (bValid) {
$(this).dialog('close');
// ajax command to add the channel
//$.getJSON("../backend/index.php",{uuid: myUUID, controller: 'channel', action: 'add', format: 'json'}, function(j){});
// reload the channel list
loadChannelList();
}
},
Cancel: function() {
$(this).dialog('close');
}
},
close: function() {
allFields.val('').removeClass('ui-state-error');
}
});
$('#addChannel')
.button()
.click(function() {
$('#dialog-form').dialog('open');
return false;
});
getData();
});
function loadChannelList() {
$('#debug').append('<a href="../backend/index.php/data/"' + myUUID + '"/channel">json</a>');
// 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('<img src="images/ladebild.gif" />');
// 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<f.ids.length;i++) {
if(f.ids[i].checked == 1) {
ids_parameter += f.ids[i].value + ",";
}
}
}*/
// calcMyWindowStart
myWindowStart = calcMyWindowStart();
$('#debug').append('<a href="../backend/index.php/data/'+myUUID+'/format/json/from/'+myWindowStart+'/to/'+myWindowEnd+'">json</a>');
// 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;
}
</script>
</body>
</html>

View file

@ -0,0 +1,228 @@
/*
* Copyright (c) 2010 by Florian Ziegler <fz@f10-home.de>
*
* 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+'<br>');
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('<a href="../backend/index.php/data/"' + myUUID + '"/channel">json</a>');
// 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('<img
* src="images/ladebild.gif" />');
* // 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<f.ids.length;i++) {
* if(f.ids[i].checked == 1) { ids_parameter += f.ids[i].value + ","; } } }
*/
// calcMyWindowStart
myWindowStart = calcMyWindowStart();
$('#debug').append('<a href="../backend/index.php/data/'+myUUID+'/format/json/from/'+myWindowStart+'/to/'+myWindowEnd+'">json</a>');
// 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;
}
}

View file

@ -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;i<gArr.length;++i) {
v='';vArr=gArr[i].split('=');
if(vArr.length>1) {
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();
});

View file

@ -1,83 +0,0 @@
/*
* Copyright (c) 2010 by Florian Ziegler <fz@f10-home.de>
*
* 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+'<br>');
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();
}

78
frontend/style.css Normal file
View file

@ -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;
}