Skip to content

Commit

Permalink
Refactoring of dashboard code to make it easier to add new widgets.
Browse files Browse the repository at this point in the history
  • Loading branch information
Trystan committed Oct 22, 2012
1 parent 46fd6a6 commit f6ed0fa
Show file tree
Hide file tree
Showing 16 changed files with 621 additions and 394 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,4 @@
settings.php
Modules/energyaudit
Modules/node
Modules/auto
54 changes: 44 additions & 10 deletions Modules/dashboard/Views/dashboard_edit_view.php
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,36 @@
<?php global $session,$path; ?>
<?php global $session,$path;

if (!$dashboard['height']) $dashboard['height'] = 400;
?>

<script type="text/javascript" src="<?php echo $path; ?>Lib/flot/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo $path; ?>Lib/flot/jquery.flot.min.js"></script>
<script type="text/javascript" src="<?php echo $path; ?>Modules/dashboard/Views/js/widgetlist.js"></script>
<script type="text/javascript" src="<?php echo $path; ?>Modules/dashboard/Views/js/render.js"></script>
<script type="text/javascript" src="<?php echo $path; ?>Modules/dashboard/Views/js/widgets/dial.js"></script>
<script type="text/javascript" src="<?php echo $path; ?>Modules/dashboard/Views/js/widgets/led.js"></script>
<script type="text/javascript" src="<?php echo $path; ?>Modules/dashboard/Views/js/widgets/cylinder.js"></script>


<?php

$widgets = array();
$dir = scandir("Modules/dashboard/Views/js/widgets");
for ($i=2; $i<count($dir); $i++)
{
if (filetype("Modules/dashboard/Views/js/widgets/".$dir[$i])=='dir')
{
if (is_file("Modules/dashboard/Views/js/widgets/".$dir[$i]."/".$dir[$i]."_widget.php"))
{
require_once "Modules/dashboard/Views/js/widgets/".$dir[$i]."/".$dir[$i]."_widget.php";
$widgets[] = $dir[$i];
}
else if (is_file("Modules/dashboard/Views/js/widgets/".$dir[$i]."/".$dir[$i]."_render.js"))
{
echo "<script type='text/javascript' src='".$path."Modules/dashboard/Views/js/widgets/".$dir[$i]."/".$dir[$i]."_render.js'></script>";
$widgets[] = $dir[$i];
}
}
}

?>

<div style="background-color:#ddd; padding:4px;">
<span id="widget-buttons"></span>
<span id="when-selected">
Expand All @@ -19,9 +42,9 @@
<span id="state" style="float:right; margin-top:9px; color:#888;"></span>
</div>

<div id="page-container" style="height:400px; position:relative;">
<div id="page-container" style="height:<?php echo $dashboard['height']; ?>px; position:relative;">
<div id="page"><?php echo $dashboard['content']; ?></div>
<canvas id="can" width="940px" height="400px" style="position:absolute; top:0px; left:0px; margin:0; padding:0;"></canvas>
<canvas id="can" width="940px" height="<?php echo $dashboard['height']; ?>px" style="position:absolute; top:0px; left:0px; margin:0; padding:0;"></canvas>

<div id="testo" style="position:absolute; top:0px; left:0px; width:938px; background-color:rgba(255,255,255,0.9); border: 1px solid #ddd;">
<div style="padding:20px;">
Expand All @@ -35,10 +58,22 @@
<script type="application/javascript">

var dashid = <?php echo $dashboard['id']; ?>;
var page_height = "<?php echo $dashboard['height']; ?>";
var path = "<?php echo $path; ?>";
var apikey_read = "<?php echo $apikey_read; ?>";
$("#testo").hide();


var widget = <?php echo json_encode($widgets); ?>;

console.log(widgets);

for (z in widget)
{
var fname = widget[z]+"_widgetlist";
var fn = window[fname];
$.extend(widgets,fn());
}

var redraw = 0;
var reloadiframe = 0;

Expand All @@ -50,14 +85,13 @@

setInterval(function() { update("<?php echo $apikey_read; ?>"); }, 5000);
setInterval(function() { fast_update("<?php echo $apikey_read; ?>"); }, 30);
setInterval(function() { slow_update("<?php echo $apikey_read; ?>"); }, 60000);

$("#save-dashboard").click(function (){
console.log("Saving");
$.ajax({
type: "POST",
url : path+"dashboard/set.json",
data : "&content=" + encodeURIComponent($("#page").html())+"&id="+dashid,
data : "&content=" + encodeURIComponent($("#page").html())+"&id="+dashid+"&height="+page_height,

success : function(data) { console.log(data); if (data=="ok") $("#state").html("Saved"); }
});
Expand Down
37 changes: 32 additions & 5 deletions Modules/dashboard/Views/dashboard_view.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,24 +4,51 @@
<script type="text/javascript" src="<?php echo $path; ?>Lib/flot/jquery.flot.min.js"></script>
<script type="text/javascript" src="<?php echo $path; ?>Modules/dashboard/Views/js/widgetlist.js"></script>
<script type="text/javascript" src="<?php echo $path; ?>Modules/dashboard/Views/js/render.js"></script>
<script type="text/javascript" src="<?php echo $path; ?>Modules/dashboard/Views/js/widgets/dial.js"></script>
<script type="text/javascript" src="<?php echo $path; ?>Modules/dashboard/Views/js/widgets/led.js"></script>
<script type="text/javascript" src="<?php echo $path; ?>Modules/dashboard/Views/js/widgets/cylinder.js"></script>

<div id="page-container" style="height:400px; position:relative;">
<?php

$widgets = array();
$dir = scandir("Modules/dashboard/Views/js/widgets");
for ($i=2; $i<count($dir); $i++)
{
if (filetype("Modules/dashboard/Views/js/widgets/".$dir[$i])=='dir')
{
if (is_file("Modules/dashboard/Views/js/widgets/".$dir[$i]."/".$dir[$i]."_widget.php"))
{
require_once "Modules/dashboard/Views/js/widgets/".$dir[$i]."/".$dir[$i]."_widget.php";
$widgets[] = $dir[$i];
}
else if (is_file("Modules/dashboard/Views/js/widgets/".$dir[$i]."/".$dir[$i]."_render.js"))
{
echo "<script type='text/javascript' src='".$path."Modules/dashboard/Views/js/widgets/".$dir[$i]."/".$dir[$i]."_render.js'></script>";
$widgets[] = $dir[$i];
}
}
}

?>

<div id="page-container" style="height:<?php echo $dashboard['height']; ?>px; position:relative;">
<div id="page"><?php echo $dashboard['content']; ?></div>
</div>

<script type="application/javascript">
var dashid = <?php echo $dashboard['id']; ?>;
var path = "<?php echo $path; ?>";
var apikey_read = "<?php echo $apikey_read; ?>";
var widget = <?php echo json_encode($widgets); ?>;

for (z in widget)
{
var fname = widget[z]+"_widgetlist";
var fn = window[fname];
$.extend(widgets,fn());
}

var redraw = 1;
var reloadiframe = 0;
show_dashboard();
setInterval(function() { update("<?php echo $apikey_read; ?>"); }, 5000);
setInterval(function() { fast_update("<?php echo $apikey_read; ?>"); }, 30);
setInterval(function() { slow_update("<?php echo $apikey_read; ?>"); }, 60000);

</script>
7 changes: 5 additions & 2 deletions Modules/dashboard/Views/js/designer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,11 @@ function dashboard_designer(_canvas, _grid_size, _widgets)
var mousedown_y = 0;

var page_width = $(canvas).attr("width");
var page_height = $(canvas).attr("height");
$("#when-selected").hide();
draw();
scan();
$("#page-container").css("height",page_height);
$("#can").attr("height",page_height);
draw();
widget_buttons();

function snap(pos) {return Math.round(pos/grid_size)*grid_size;}
Expand Down Expand Up @@ -57,6 +58,8 @@ function dashboard_designer(_canvas, _grid_size, _widgets)
'width':parseInt($(this).css("width")),
'height':parseInt($(this).css("height"))
};

if ((boxlist[id]['top'] + boxlist[id]['height'])>page_height) page_height = (boxlist[id]['top'] + boxlist[id]['height']);
});
}
}
Expand Down
152 changes: 26 additions & 126 deletions Modules/dashboard/Views/js/render.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,15 @@ http://openenergymonitor.org
*/

// Global page vars definition
var feedids = [];

// Array that holds ID's of feeds of associative key
var assoc = [];
var feedids = [];
// Array for exact values
var assoc_curve = [];
var assoc = [];
// Array for smooth change values - creation of smooth dial widget

var assoc_curve = [];
var widgetcanvas = {};

var firstdraw = 1;

var dialrate = 0.02;
var browserVersion = 999;

Expand All @@ -36,54 +34,15 @@ var Browser =

function show_dashboard()
{
update(apikey_read);
slow_update(apikey_read);
}


function onetime(apikey_read)
{
$('.rawdata,.bargraph,.zoom,.realtime,.simplezoom,.threshold,.orderthreshold,.orderbars,.stacked,.multigraph,.histgraph,.smoothie').each(function(index)
{

var id = $(this).attr("id");
var feed = $(this).attr("feed") || 0;
var width = $(this).width();
var height = $(this).height();

var attrstring = "";
var target = $(this).get(0);
var l = target.attributes.length
for (var i=0; i<l; i++)
{
var attr = target.attributes[i].name;
if (attr!="id" && attr!="class" && attr!="style")
{
console.log(attr);
attrstring += "&"+attr+"="+target.attributes[i].value;
}
}

if (!$(this).html() || reloadiframe==id){
$(this).html('<iframe style="width:'+width+'px; height:'+height+'px;" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="'+path+'vis/'+$(this).attr("class")+'?apikey='+apikey_read+'&embed=1'+attrstring+'"></iframe>');
}

var iframe = $(this).children('iframe');
iframe.width(width);
iframe.height(height);

});
browserVersion = Browser.Version();
if (browserVersion < 9) dialrate = 0.2;

reloadiframe = 0;
update(apikey_read);
}

// update function
function update(apikey_read)
{
browserVersion = Browser.Version();
if (browserVersion < 9)
dialrate = 0.2;

$.ajax(
{
url : path + "feed/list.json?apikey=" + apikey_read,
Expand All @@ -94,101 +53,42 @@ function update(apikey_read)
{
var newstr = data[z]['name'].replace(/\s/g, '-');
var value = parseFloat(data[z]['value']);

if (value < 100)
value = value.toFixed(1);
else
value = value.toFixed(0);

$("." + newstr).html(value);
assoc[newstr] = value * 1;
feedids[newstr] = data[z]['id'];
}

// Calls specific page javascript update function for any in page javascript
if ( typeof page_js_update == 'function')
for (z in widget)
{
page_js_update(assoc);
var fname = widget[z]+"_slowupdate";
var fn = window[fname];
fn();
}
//--------------------------------------------------------------------------

} // End of data return function
});
// End of AJAX function

$('.cylinder').each(function(index)
{
var cyl_top = assoc[$(this).attr("topfeed")]*1;
var cyl_bot = assoc[$(this).attr("botfeed")]*1;

var id = "can-"+$(this).attr("id");
draw_cylinder(widgetcanvas[id],cyl_bot,cyl_top,$(this).width(),$(this).height());
});

$('.led').each(function(index)
{
var feed = $(this).attr("feed");
var val = assoc[feed];
var id = "can-"+$(this).attr("id");
if (browserVersion < 9)
draw_led_ie8(widgetcanvas[id], val);
else
draw_led(widgetcanvas[id], val);
});

$('.feedvalue').each(function(index)
{
var feed = $(this).attr("feedname");
var units = $(this).attr("units");
var val = assoc[feed];

if (feed==undefined) val = 0;
if (units==undefined) units = '';

$(this).html(val+units);
}
});
}

function fast_update(apikey_read)
{
if (redraw)
{
setup_widget_canvas();
update(apikey_read);
onetime(apikey_read);
for (z in widget)
{
var fname = widget[z]+"_init";
var fn = window[fname];
fn();
}
redraw = 0;
}
draw_dials();
//draw_leds();
redraw = 0;
}

function slow_update()
{
}



function draw_dials()
{

$('.dial').each(function(index)
for (z in widget)
{
var feed = $(this).attr("feed");
var val = curve_value(feed,dialrate);
// ONLY UPDATE ON CHANGE
if ((val * 1).toFixed(1) != (assoc[feed] * 1).toFixed(1) || redraw == 1)
{
var id = "can-"+$(this).attr("id");
var scale = 1*$(this).attr("scale") || 1;
draw_gauge(widgetcanvas[id],0,0,$(this).width(),$(this).height(),val*scale, $(this).attr("max"), $(this).attr("units"),$(this).attr("type"));
}
});

var fname = widget[z]+"_fastupdate";
var fn = window[fname];
fn();
}
}




function curve_value(feed,rate)
{
var val = 0;
Expand All @@ -200,9 +100,9 @@ function curve_value(feed,rate)
return val;
}

function setup_widget_canvas()
function setup_widget_canvas(elementclass)
{
$('.dial,.cylinder,.led').each(function(index)
$('.'+elementclass).each(function(index)
{
var widgetId = $(this).attr("id");

Expand Down
Loading

0 comments on commit f6ed0fa

Please sign in to comment.