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

428 lines
11 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>
<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">
some minor changes
2010-09-24 02:30:31 +02:00
<!-- keep some space free for the chart -->
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="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>
some minor changes
2010-09-24 02:30:31 +02:00
</div>
<!-- jqplot draws the chart into the following 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="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>
getting fe and be together
2010-09-11 05:09:00 +02:00
<label for="uuid">uuid</label>
<input type="text" name="uuid" id="uuid" class="text ui-widget-content ui-corner-all" />
frontend: first step to manage channels/groups with jQuery-UI and ajax
2010-06-12 12:18:37 +02:00
</fieldset>
</form>
</div>
adapt fronted to new backend
2010-06-08 21:26:02 +02:00
<div id="json"></div>
some minor changes
2010-09-24 02:30:31 +02:00
<!-- uncomment the following line to activate debugging -->
deactivated debug mode
2010-09-11 20:16:57 +02:00
<!--<div id="debug"></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
<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
some minor changes
2010-09-24 02:30:31 +02:00
// this is where it all starts...
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
$(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
flo: fe changes to display some data
2010-09-16 15:36:18 +02:00
// loadChannelList();
frontend: first step to manage channels/groups with jQuery-UI and ajax
2010-06-12 12:18:37 +02:00
// start autoReload timer
window.setInterval("autoReload()",5000);
// code for adding a channel
getting fe and be together
2010-09-11 05:09:00 +02:00
var uuid = $("#uuid"),
allFields = $([]).add(uuid),
frontend: first step to manage channels/groups with jQuery-UI and ajax
2010-06-12 12:18:37 +02:00
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');
getting fe and be together
2010-09-11 05:09:00 +02:00
bValid = bValid && checkLength(uuid,"UUID",36,36);
frontend: first step to manage channels/groups with jQuery-UI and ajax
2010-06-12 12:18:37 +02:00
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;
});
flo: fe changes to display some data
2010-09-16 15:36:18 +02:00
getData();
frontend: first step to manage channels/groups with jQuery-UI and ajax
2010-06-12 12:18:37 +02:00
});
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
getting fe and be together
2010-09-11 05:09:00 +02:00
$('#debug').append('<a href="../backend/index.php/data/"' + myUUID + '"/channel">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
getting fe and be together
2010-09-11 05:09:00 +02:00
$.getJSON("../backend/index.php/data/" + myUUID + {format: 'json'});
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
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() {
flo: fe changes to display some data
2010-09-16 15:36:18 +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
if(f.ids.length>0)
getting fe and be together
2010-09-11 05:09:00 +02:00
$('#loading').empty().html('<img src="images/ladebild.gif" />');
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
// 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 + ",";
}
}
flo: fe changes to display some data
2010-09-16 15:36:18 +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
// calcMyWindowStart
myWindowStart = calcMyWindowStart();
getting fe and be together
2010-09-11 05:09:00 +02:00
$('#debug').append('<a href="../backend/index.php/data/'+myUUID+'/format/json/from/'+myWindowStart+'/to/'+myWindowEnd+'">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
fixed timestamp in ms related issues
2010-09-18 01:48:59 +02:00
//$.getJSON("../backend/index.php/data/" + myUUID + '/format/json/from/'+myWindowStart+'/to/'+myWindowEnd, function(j){
adopted fe to new json format (fettes merci an flo!)
2010-09-20 08:48:38 +02:00
$.getJSON("../backend/index.php/data/" + myUUID + '.json?from='+myWindowStart+'&to='+myWindowEnd, 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;
flo: fe changes to display some data
2010-09-16 15:36:18 +02:00
$('#debug').empty().append(data.toSource());
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
// then show/reload the chart
//if(data.channels.length > 0 && data.channels[0].pulses.length > 0)
showChart();
$('#loading').empty();
flo: fe changes to display some data
2010-09-16 15:36:18 +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
return false;
}
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
adopted fe to new json format (fettes merci an flo!)
2010-09-20 08:48:38 +02:00
for( uuid in data.channels ) {
jqOptions.series.push({label:data.channels[uuid]['description']});
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
}
adopted fe to new json format (fettes merci an flo!)
2010-09-20 08:48:38 +02:00
EformatString = '%d.%m.%y %H:%M';
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
adopted fe to new json format (fettes merci an flo!)
2010-09-20 08:48:38 +02:00
// power (moving average) gray line
for( uuid in data.data ) {
jqData.push(data.data[uuid]);
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
}
adopted fe to new json format (fettes merci an flo!)
2010-09-20 08:48:38 +02:00
adopted fe to new json format (fettes merci an flo!!!)
2010-09-23 21:28:02 +02:00
removed buttons and code that belongs to it
2010-09-11 21:39:34 +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}},
};
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();
}
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);
removed buttons and code that belongs to it
2010-09-11 21:39:34 +02:00
ticks.push(time.getDate()+'.'+(time.getMonth()+1)+'.'+' '+time.getHours()+':00');
adapt fronted to new backend
2010-06-08 21:26:02 +02:00
}
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>
getting fe and be together
2010-09-11 05:09:00 +02:00
</html>
changed path to backend data-controller
2010-09-11 07:37:28 +02:00
Reference in a new issue Copy permalink