stv0g/vzlogger
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

simplified frontend again, adapted to new format

Browse source
This commit is contained in:
Steffen Vogel 2010-09-28 15:44:28 +02:00
parent f8e4e69fb6
commit 3702d84d7c
4 changed files with 83 additions and 132 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
frontend/index.html
View file

@ -18,34 +18,27 @@
<script type="text/javascript" src="javascript/script.js"></script>
<link rel="stylesheet" type="text/css" href="javascript/jqplot/jquery.jqplot.css">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="stylesheets/style.css">
</head>
<body style="background-color: #9ACC67;">
<body>
<div id="vz">
<div id="chart">
<!-- keep some space free for the chart -->
<div id="ChartPlot" style="height:100%">
<!-- jqplot draws the chart into the following DIV -->
<div id="ChartDIV" style="height:100%;width:100%;"></div>
</div>
<div id="ChartInfo" style="display:none;"></div>
</div>
<div id="plot"></div>
<table id="move">
<tr>
<td><a id="moveBack" href="#" onclick="moveWindow('back');">&laquo;</a></td>
<td><a id="moveNow" href="#" onclick="moveWindow('last');">&raquo;&raquo;</a></td>
<td><a id="moveForward" href="#" onclick="moveWindow('forward');">&raquo;</a></td>
<td><input type="button" onclick="moveWindow('back')" value="&laquo;" /></td>
<td><input type="button" onclick="moveWindow('last')" value="&raquo;&raquo;" /></td>
<td><input type="button" onclick="moveWindow('forward')" value="&raquo;" /></td>
</tr>
</table>
<div class="roller" id="legend">Legende</div>
<div class="roller" id="channels">Kanäle</div>
<!-- uncomment the following line to activate debugging -->
<div class="roller" id="debug">Debug</div>
</div>
<!-- uncomment the following line to activate debugging -->
<div id="debug"></div>
</body>
</html>

159
frontend/javascript/functions.js
View file

@ -25,63 +25,25 @@
* along with volkszaehler.org. If not, see <http://www.gnu.org/licenses/>.
*/
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><br />');
// 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('<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 + '.json?from='+myWindowStart+'&to='+myWindowEnd+'&resolution=500">JSON</a><br />');
// 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;

19
frontend/javascript/script.js
View file

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

10
frontend/style.css → frontend/stylesheets/style.css
View file

@ -1,10 +1,12 @@
a {
color: gray;
}
body {
margin: 0;
padding: 0;
background-color: #9ACC67;
font-family: sans-serif;
}
a {
color: gray;
}
#vz {