stv0g/vzlogger
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity
vzlogger/frontend/index.html

568 lines
16 KiB
HTML
Raw Normal View History

first commit to project repository, lets work together! import of my reworked version of justins code merged f10's frontend (some work nescessary)
2010-06-06 16:05:46 +02:00
<!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">
<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>
<script type="text/javascript" src="javascript/jqplot/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="javascript/jqplot/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script type="text/javascript" src="javascript/jqplot/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
<script type="text/javascript" src="javascript/jqplot/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script type="text/javascript" src="javascript/jqplot/plugins/jqplot.cursor.min.js"></script>
adapt fronted to new backend
2010-06-08 21:26:02 +02:00
<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>
frontend: first step to manage channels/groups with jQuery-UI and ajax
2010-06-12 12:18:37 +02:00
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.js"></script>
first commit to project repository, lets work together! import of my reworked version of justins code merged f10's frontend (some work nescessary)
2010-06-06 16:05:46 +02:00
<script type="text/javascript" src="javascript/smartmeter.js"></script>
<link rel="stylesheet" type="text/css" href="javascript/jqplot/jquery.jqplot.css">
frontend: first step to manage channels/groups with jQuery-UI and ajax
2010-06-12 12:18:37 +02:00
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/ui-lightness/jquery-ui.css" rel="Stylesheet" />
first commit to project repository, lets work together! import of my reworked version of justins code merged f10's frontend (some work nescessary)
2010-06-06 16:05:46 +02:00
<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;
}
frontend: first step to manage channels/groups with jQuery-UI and ajax
2010-06-12 12:18:37 +02:00
/* 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; }
first commit to project repository, lets work together! import of my reworked version of justins code merged f10's frontend (some work nescessary)
2010-06-06 16:05:46 +02:00
</style>
</head>
<body style="background-color:#9ACC67;">
<form action="" method="POST" name="formular">
<div>
<div id="options">
<!--list of available channels - loaded via json-->
<b>Kan&auml;le:</b><br>
<table id="channelList" style="font-size:7pt;">
<tr>
<td></td>
</tr>
</table>
frontend: first step to manage channels/groups with jQuery-UI and ajax
2010-06-12 12:18:37 +02:00
<button id="addChannel">add channel</button>
first commit to project repository, lets work together! import of my reworked version of justins code merged f10's frontend (some work nescessary)
2010-06-06 16:05:46 +02:00
<br>
<b>Information:</b><br>
<select name="info">
<option value="power">Leistung</option>
<option value="energy">Energie</option>
<option value="infos">weitere Infos</option>
</select>
<br><br>
<b>Anzeigebereich:</b><br>
<select name="window">
<option value="1HOUR">1 Stunde</option>
frontend: quick'n'dirty fix for bad bug at summer winter time change
2010-06-09 19:13:58 +02:00
<option value="1DAY">1 Tag</option>
first commit to project repository, lets work together! import of my reworked version of justins code merged f10's frontend (some work nescessary)
2010-06-06 16:05:46 +02:00
<option value="3DAY">3 Tage</option>
<option value="7DAY">7 Tage</option>
frontend: quick'n'dirty fix for bad bug at summer winter time change
2010-06-09 19:13:58 +02:00
<option value="1MONTH" selected="selected">1 Monat</option>
first commit to project repository, lets work together! import of my reworked version of justins code merged f10's frontend (some work nescessary)
2010-06-06 16:05:46 +02:00
<option value="1YEAR">1 Jahr</option>
</select>
<br><br>
<b>Gruppierung:</b><br>
<select name="grouping">
<option value="400">dynamisch</option>
<option value="minute">Minute</option>
frontend: quick'n'dirty fix for bad bug at summer winter time change
2010-06-09 19:13:58 +02:00
<option value="hour" selected="selected">Stunde</option>
first commit to project repository, lets work together! import of my reworked version of justins code merged f10's frontend (some work nescessary)
2010-06-06 16:05:46 +02:00
<option value="day">Tag</option>
<option value="month">Monat</option>
<option value="year">Jahr</option>
</select>
<br><br>
<div style="font-size:8pt;">
<input type="checkbox" name="stackChannels" /> Kan&auml;le addieren<br>
<input type="checkbox" name="autoReload" /> auto reload (5s)<br>
<button type="button" onclick="JavaScript:return getData();">anzeigen</button>
</div>
<div id="loading"></div>
</div>
<div id="Chart">
<div id="ChartPlot" style="height:100%">
<div class="moveArrow" style="left:0px;">
<table cellpadding="0" cellspacing="0" height="100%">
<tr>
<td><a id="moveBack" href="#" onclick="JavaScript:moveWindow('back');">&laquo;</a></td>
</tr>
</table>
</div>
<div id="ChartDIV" style="height:100%;width:100%;"></div>
<div class="moveArrow" style="right:0px;">
<table cellpadding="0" cellspacing="0" height="100%">
<tr>
<td>
<a id="moveForward" href="#" onclick="JavaScript:moveWindow('forward');">&raquo;</a><br><br />
<a id="moveNow" href="#" onclick="JavaScript:moveWindow('last');">&raquo;&raquo;</a>
</td>
</tr>
</table>
</div>
</div>
<div id="ChartInfo" style="display:none;">
</div>
</div>
</div>
</form>
frontend: first step to manage channels/groups with jQuery-UI and ajax
2010-06-12 12:18:37 +02:00
<div id="dialog-form" title="add new channel">
<p class="validateTips">All form fields are required.</p>
<form>
<fieldset>
<label for="ucid">ucid</label>
<input type="text" name="ucid" id="ucid" class="text ui-widget-content ui-corner-all" />
</fieldset>
</form>
</div>
adapt fronted to new backend
2010-06-08 21:26:02 +02:00
<div id="json"></div>
first commit to project repository, lets work together! import of my reworked version of justins code merged f10's frontend (some work nescessary)
2010-06-06 16:05:46 +02:00
<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
frontend: quick'n'dirty fix for bad bug at summer winter time change
2010-06-09 19:13:58 +02:00
var myWindowEnd = getGroupedTimestamp((new Date()).getTime());
first commit to project repository, lets work together! import of my reworked version of justins code merged f10's frontend (some work nescessary)
2010-06-06 16:05:46 +02:00
// windowGrouping for json server
var windowGrouping = 0;
// mouse position on mousedown (x-axis)
var moveXstart = 0;
// executed on document loaded complete
$(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
frontend: first step to manage channels/groups with jQuery-UI and ajax
2010-06-12 12:18:37 +02:00
loadChannelList();
// start autoReload timer
window.setInterval("autoReload()",5000);
// code for adding a channel
var ucid = $("#ucid"),
allFields = $([]).add(ucid),
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(ucid,"UCID",36,36);
//bValid = bValid && checkRegexp(name,/^[a-z]([0-9a-z_])+$/i,"Username may consist of a-z, 0-9, underscores, begin with a letter.");
// From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
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;
});
});
function loadChannelList() {
first commit to project repository, lets work together! import of my reworked version of justins code merged f10's frontend (some work nescessary)
2010-06-06 16:05:46 +02:00
change json request to correct API calls
2010-06-08 19:13:17 +02:00
$('#debug').append('<a href="../backend/index.php?uuid='+myUUID+'&controller=channel&action=get&format=json">json</a>');
first commit to project repository, lets work together! import of my reworked version of justins code merged f10's frontend (some work nescessary)
2010-06-06 16:05:46 +02:00
// load json data
change json request to correct API calls
2010-06-08 19:13:17 +02:00
$.getJSON("../backend/index.php",{uuid: myUUID, controller: 'channel', action: 'get', format: 'json'}, function(j){
first commit to project repository, lets work together! import of my reworked version of justins code merged f10's frontend (some work nescessary)
2010-06-06 16:05:46 +02:00
$('#channelList').empty();
// add channels to table #channelList
for(var i=0;i<j.channels.length;i++) {
$('#channelList').append('<tr><td><input style="margin:0px;margin-bottom:2px;" type="checkbox" value="' + j.channels[i]['id'] + '" name="ids" checked="checked" /></td><td>' + j.channels[i]['description'] + '</td><td>(id=' + j.channels[i].id + ')</td></tr>');
}
// initioal load data with all channels
getData();
});
frontend: first step to manage channels/groups with jQuery-UI and ajax
2010-06-12 12:18:37 +02:00
}
first commit to project repository, lets work together! import of my reworked version of justins code merged f10's frontend (some work nescessary)
2010-06-06 16:05:46 +02:00
function autoReload() {
// call getData if autoReload checkbox is active
if(f.autoReload.checked == true) {
frontend: quick'n'dirty fix for bad bug at summer winter time change
2010-06-09 19:13:58 +02:00
myWindowEnd = getGroupedTimestamp((new Date()).getTime());
first commit to project repository, lets work together! import of my reworked version of justins code merged f10's frontend (some work nescessary)
2010-06-06 16:05:46 +02:00
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();
change json request to correct API calls
2010-06-08 19:13:17 +02:00
$('#debug').append('<a href="../backend/index.php?uuid='+myUUID+'&controller=data&action=get&format=json&ids='+ids_parameter+'&from='+myWindowStart+'&to='+myWindowEnd+'&groupBy='+f.grouping.value+'">json</a>');
first commit to project repository, lets work together! import of my reworked version of justins code merged f10's frontend (some work nescessary)
2010-06-06 16:05:46 +02:00
// load json data with given time window
separeted frontend from backend adjusted include paths of tools
2010-06-07 12:11:51 +02:00
//$.getJSON("../backend/index.php",{uuid: myUUID,mode: 'getPulses', ids: ids_parameter, windowEnd: myWindowEnd, windowSize: f.window.value.substring(0,1), windowInterval: f.window.value.substring(1)}, function(j){
change json request to correct API calls
2010-06-08 19:13:17 +02:00
$.getJSON("../backend/index.php",{uuid: myUUID, controller: 'data', action: 'get', format: 'json', ids: ids_parameter, from: myWindowStart, to: myWindowEnd, groupBy: f.grouping.value}, function(j){
first commit to project repository, lets work together! import of my reworked version of justins code merged f10's frontend (some work nescessary)
2010-06-06 16:05:46 +02:00
data = j;
//$('#debug').empty().append(data.toSource());
// then show/reload the chart
//if(data.channels.length > 0 && data.channels[0].pulses.length > 0)
if(f.info.value == 'infos')
showInfos()
else
showChart();
$('#loading').empty();
});
return false;
}
function showInfos() {
$('#ChartPlot').hide();
$('#ChartInfo').show();
$('#ChartInfo').empty();
for(var i=0;i<data.channels.length;i++) {
$('#ChartInfo').append(data.channels[i]['description']+' (Aufl&ouml;sung:'+data.channels[i]['resolution']+'imp/kWh) Momentanverbrauch: Min: Max:<br>');
}
}
function showChart() {
var jqData = new Array();
var series_chart = new Array();
$('#ChartInfo').hide();
$('#ChartPlot').show();
jqOptions = {
legend:{show:true},
series:[],
adapt fronted to new backend
2010-06-08 21:26:02 +02:00
cursor:{zoom:true, showTooltip:true,constrainZoomTo:'x'},
first commit to project repository, lets work together! import of my reworked version of justins code merged f10's frontend (some work nescessary)
2010-06-06 16:05:46 +02:00
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(var i=0;i<data.channels.length;i++) {
jqOptions.series.push({label:data.channels[i]['description']});
}
// different formatStrings for different grouping times
switch(f.grouping.value) {
case 'year':
EformatString = '%Y';
break;
case 'month':
EformatString = '%m/%Y';
break;
case 'day':
EformatString = '%d.%m.%y';
break;
case 'hour':
EformatString = '%d.%m.%y %H:%M';
break;
case 'minute':
EformatString = '%d.%m.%y %H:%M';
break;
default:
EformatString = '%d.%m.%y %H:%M:%S';
}
// power
if(f.info.value == 'power') {
// for each channel in json response
for(var i=0;i<data.channels.length;i++) {
// power (moving average) gray line
//jqData.push(raw2Power(data.channels[i],true));
//series_chart.push({showLabel:false,color:'#808080'})
// power
adapt fronted to new backend
2010-06-08 21:26:02 +02:00
if(f.grouping.value == '') {
first commit to project repository, lets work together! import of my reworked version of justins code merged f10's frontend (some work nescessary)
2010-06-06 16:05:46 +02:00
jqData.push(raw2Power(data.channels[i],false));
adapt fronted to new backend
2010-06-08 21:26:02 +02:00
}
else {
jqData.push(raw2Energy(data.channels[i]));
}
first commit to project repository, lets work together! import of my reworked version of justins code merged f10's frontend (some work nescessary)
2010-06-06 16:05:46 +02:00
}
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}},
};
}
// energy
else if(f.info.value == 'energy') {
// thats not possible without grouping
if(f.grouping.value == '' )
return;
// for each channel in json response
for(var i=0;i<data.channels.length;i++) {
jqData.push(raw2Energy(data.channels[i]));
}
jqOptions.axes={
yaxis:{autoscale:true, min:0, tickOptions:{formatString:'%.3f'},label:"Energie (kWh)",labelRenderer: $.jqplot.CanvasAxisLabelRenderer},
xaxis:{
adapt fronted to new backend
2010-06-08 21:26:02 +02:00
renderer:$.jqplot.CategoryAxisRenderer,
first commit to project repository, lets work together! import of my reworked version of justins code merged f10's frontend (some work nescessary)
2010-06-06 16:05:46 +02:00
autoscale:true,
adapt fronted to new backend
2010-06-08 21:26:02 +02:00
tickOptions:{formatString:'%d.%m.%y %H:%M:%S',angle:-30},
pad:1,
rendererOptions:{tickRenderer:$.jqplot.CanvasAxisTickRenderer},
ticks:generateAxisTicks()
first commit to project repository, lets work together! import of my reworked version of justins code merged f10's frontend (some work nescessary)
2010-06-06 16:05:46 +02:00
}
};
adapt fronted to new backend
2010-06-08 21:26:02 +02:00
jqOptions.highlighter={sizeAdjust: 7.5};
jqOptions.seriesDefaults.renderer=$.jqplot.BarRenderer;
jqOptions.cursor={show:false,zoom:false,showTooltip:true,showMarker:true}
first commit to project repository, lets work together! import of my reworked version of justins code merged f10's frontend (some work nescessary)
2010-06-06 16:05:46 +02:00
}
chart = $.jqplot("ChartDIV",jqData,jqOptions);
chart.replot();
/*
// support for window move by mouse
// mouse cursor for plot area (dirty hack: multiple elements with this css class)
$('.jqplot-series-canvas').css("cursor", "pointer");
$(".jqplot-series-canvas").css("z-index", "6");
$(".jqplot-series-canvas").draggable({
axis: 'x',
start: function(event, ui) { // executed on start of drag
moveXstart = event.pageX },
stop:function(event, ui) { // executed on stop of drag
differencePX = event.pageX-moveXstart;
differenceTime = Math.round(differencePX/($('.jqplot-series-canvas').innerWidth()) * (data.windowEnd-data.windowStart));
myWindowEnd = getGroupedTimestamp(data.windowEnd-differenceTime);
// load new data from json server with new windowEnd and redraw chart
getData();
}
});*/
}
adapt fronted to new backend
2010-06-08 21:26:02 +02:00
function generateAxisTicks() {
var data_grouped_time = getEmptyGroupArray();
var ticks = new Array();
for(var timestamp in data_grouped_time) {
var time = new Date(timestamp*1000);
if(f.grouping.value == 'month')
ticks.push((time.getMonth()+1)+'/'+time.getFullYear());
if(f.grouping.value == 'day')
ticks.push(time.getDate()+'.'+(time.getMonth()+1)+'.');
if(f.grouping.value == 'hour')
ticks.push(time.getDate()+'.'+(time.getMonth()+1)+'.'+' '+time.getHours()+':00');
if(f.grouping.value == 'minute')
ticks.push(time.getDate()+'.'+(time.getMonth()+1));
}
return ticks;
}
first commit to project repository, lets work together! import of my reworked version of justins code merged f10's frontend (some work nescessary)
2010-06-06 16:05:46 +02:00
</script>
</body>
</html>
Reference in a new issue Copy permalink