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

improved controls

Browse source 
added overlay for loading animation
This commit is contained in:
Steffen Vogel 2010-11-07 22:20:24 +01:00
parent ab92155d66
commit 8ba0edb040
3 changed files with 33 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
frontend/index.html
View file

@ -38,7 +38,10 @@
<body>
<div id="content">
<div id="plot"></div>
<div id="plot">
<div id="flot"></div>
<div id="overlay">Test</div>
</div>
<div id="accordion">
<div id="controls">

22
frontend/javascripts/frontend.js
View file

@ -42,7 +42,11 @@ vz.wui.init = function() {
}).next().hide();
// make buttons fancy
$('button, input[type=button]').button();
$('button, input[type=button],[type=image]').button();
// bind plot actions
$('#controls button').click(this.handleControls);
$('#controls').buttonset();
// tuple resolution
var tup = $('#tuples');
@ -127,11 +131,6 @@ vz.wui.dialogs.init = function() {
* Bind events to handle plot zooming & panning
*/
vz.wui.initEvents = function() {
// bind plot actions
$('#controls button').button().click(vz.wui.handleControls);
$('#controls').buttonset();
$('#plot')
.bind("plotselected", function (event, ranges) {
vz.options.plot.xaxis.min = ranges.xaxis.from;
@ -361,7 +360,7 @@ vz.entities.each = function(cb) {
* Load json data from the backend
*/
vz.entities.loadData = function() {
//$('#plot').html('<div class="plotcenter"><img src="images/loading.gif" alt="loading..." /><p>Loading...</p></div>');
$('#overlay').html('<img src="images/loading.gif" alt="loading..." /><p>Loading...</p>');
this.each(function(entity, parent) {
if (entity.active && entity.type != 'group') { // TODO add group data aggregation
vz.load('data', entity.uuid,
@ -404,12 +403,15 @@ vz.drawPlot = function () {
}
});
if (data.length > 0) {
vz.plot = $.plot($('#plot'), data, vz.options.plot);
if (data.length == 0) {
$('#overlay').html('<img src="images/empty.png" alt="no data..." /><p>Nothing to plot...</p>');
data.push({}); // add empty dataset to show axis
}
else {
$('#plot').html('<div class="plotcenter"><img src="images/empty.png" alt="no data..." /><p>Nothing to plot...</p></div>');
$('#overlay').empty();
}
vz.plot = $.plot($('#flot'), data, vz.options.plot);
};
/**

25
frontend/stylesheets/style.css
View file

@ -34,9 +34,26 @@ tbody tr td {
}
#plot {
position: relative;
}
#flot {
height: 400px;
}
#overlay {
position: absolute;
width: 800px;
top: 0;
z-index: 1;
display: block;
margin: auto;
padding-top: 150px;
text-align: center;
color: grey;
}
#footer {
text-align: center;
font-size: 0.7em;
@ -129,14 +146,6 @@ tbody tr td {
width: 20px;
}
.plotcenter {
display: block;
margin: auto;
padding-top: 150px;
text-align: center;
color: grey;
}
/* additional theming for user interface */
.ui-error .ui-widget-header {
background-image: url("../images/ui-bg_gloss-wave_35_red_500x100.png");