simplified frontend again, adapted to new format
This commit is contained in:
parent
f8e4e69fb6
commit
3702d84d7c
4 changed files with 83 additions and 132 deletions
|
@ -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');">«</a></td>
|
||||
<td><a id="moveNow" href="#" onclick="moveWindow('last');">»»</a></td>
|
||||
<td><a id="moveForward" href="#" onclick="moveWindow('forward');">»</a></td>
|
||||
<td><input type="button" onclick="moveWindow('back')" value="«" /></td>
|
||||
<td><input type="button" onclick="moveWindow('last')" value="»»" /></td>
|
||||
<td><input type="button" onclick="moveWindow('forward')" value="»" /></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>
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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();
|
||||
});
|
||||
|
|
|
@ -1,10 +1,12 @@
|
|||
a {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #9ACC67;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
a {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
#vz {
|
Loading…
Add table
Reference in a new issue