convert dashboard progress bars to jqueryUI

2 files changed, 41 insertions, 40 deletions

diff --git a/usr/local/www/javascript/index/ajax.js b/usr/local/www/javascript/index/ajax.js
index fa33914..73bd208 100644
--- a/usr/local/www/javascript/index/ajax.js
+++ b/usr/local/www/javascript/index/ajax.js
@@ -51,10 +51,8 @@ function stats(x) {
 function updateMemory(x) {
 	if(jQuery('#memusagemeter'))
 		jQuery("#memusagemeter").html(x + '%');
-	if(jQuery('#memwidtha'))
-		jQuery("#memwidtha").css('width',x + 'px');
-	if(jQuery('#memwidthb'))
-		jQuery("#memwidthb").css('width', (100 - x) + 'px');
+	if(jQuery('#memUsagePB'))
+		jQuery('#memUsagePB').progressbar( { value: parseInt(x) } );
 }
 
 function updateMbuf(x) {
@@ -65,19 +63,15 @@ function updateMbuf(x) {
 function updateMbufMeter(x) {
 	if(jQuery('#mbufusagemeter'))
 		jQuery("#mbufusagemeter").html(x + '%');
-	if(jQuery('#mbufwidtha'))
-		jQuery("#mbufwidtha").css('width',x + 'px');
-	if(jQuery('#mbufwidthb'))
-		jQuery("#mbufwidthb").css('width', (100 - x) + 'px');
+	if(jQuery('#mbufPB'))
+		jQuery('#mbufPB').progressbar( { value: parseInt(x) } );
 }
 
 function updateCPU(x) {
 	if(jQuery('#cpumeter'))
 		jQuery("#cpumeter").html(x + '%');
-	if(jQuery('#cpuwidtha'))
-		jQuery("#cpuwidtha").css('width',x + 'px');
-	if(jQuery('#cpuwidthb'))
-		jQuery("#cpuwidthb").css('width',(100 - x) + 'px');
+	if(jQuery('#cpuPB'))
+		jQuery('#cpuPB').progressbar( { value: parseInt(x) } );
 	/* Load CPU Graph widget if enabled */
 	if(widgetActive('cpu_graphs')) {
 		GraphValue(graph[0], x);
@@ -87,10 +81,8 @@ function updateCPU(x) {
 function updateTemp(x) {
 	if(jQuery("#tempmeter"))
 		jQuery("#tempmeter").html(x + '\u00B0' + 'C');
-        if(jQuery('#tempwidtha'))
-		jQuery("#tempwidtha").css('width',x + 'px');
-        if(jQuery('#tempwidthb'))
-		jQuery("#tempwidthb").css('width',(100 - x) + 'px');
+        if(jQuery('#tempPB'))
+		jQuery("#tempPB").progressbar( { value: parseInt(x) } );
 }
 
 function updateDateTime(x) {
@@ -111,10 +103,8 @@ function updateState(x) {
 function updateStateMeter(x) {
 	if(jQuery('#pfstateusagemeter'))
 		jQuery("#pfstateusagemeter").html(x + '%');
-	if(jQuery('#pfstatewidtha'))
-		jQuery("#pfstatewidtha").css('width',x + 'px');
-	if(jQuery('#pfstatewidthb'))
-		jQuery("#pfstatewidthb").css('width',(100 - x) + 'px');
+	if(jQuery('#statePB'))
+		jQuery('#statePB').progressbar( { value: parseInt(x) } );
 }
 
 function updateGatewayStats(x){
@@ -192,4 +182,5 @@ function widgetActive(x) {
 /* start updater */
 jQuery(document).ready(function(){
 	setTimer();
-});
\ No newline at end of file
+});
+
diff --git a/usr/local/www/widgets/widgets/system_information.widget.php b/usr/local/www/widgets/widgets/system_information.widget.php
index 2bba499..bfb39cb 100644
--- a/usr/local/www/widgets/widgets/system_information.widget.php
+++ b/usr/local/www/widgets/widgets/system_information.widget.php
@@ -85,6 +85,16 @@ if($_REQUEST['getupdatestatus']) {
 $curcfg = $config['system']['firmware'];
 
 ?>
+<script>
+	jQuery(function() { 
+		jQuery("#statePB").progressbar( { value: <?php echo get_pfstate(true); ?> } );
+		jQuery("#mbufPB").progressbar( { value: <?php echo get_mbuf(true); ?> } );
+		jQuery("#cpuPB").progressbar( { value:false } );
+		jQuery("#memUsagePB").progressbar( { value: <?php echo mem_usage(); ?> } );
+		jQuery("#diskUsagePB").progressbar( { value: <?php echo disk_usage(); ?> } );    
+	});
+</script>
+<link rel="stylesheet" href="javascript/jquery/jquery-ui.custom.css" />
 
 <table width="100%" border="0" cellspacing="0" cellpadding="0" summary="system information">
 	<tbody>
@@ -189,8 +199,8 @@ $curcfg = $config['system']['firmware'];
 				<?php	$pfstatetext = get_pfstate();
 					$pfstateusage = get_pfstate(true);
 				?>
-				<img src="./themes/<?= $g['theme']; ?>/images/misc/bar_left.gif" height="15" width="4" border="0" align="middle" alt="left bar" /><img src="./themes/<?= $g['theme']; ?>/images/misc/bar_blue.gif" height="15" name="pfstatewidtha" id="pfstatewidtha" width="<?= round($pfstateusage); ?>" border="0" align="middle" alt="red bar" /><img src="./themes/<?= $g['theme']; ?>/images/misc/bar_gray.gif" height="15" name="pfstatewidthb" id="pfstatewidthb" width="<?= (100 - $pfstateusage); ?>" border="0" align="middle" alt="gray bar" /><img src="./themes/<?= $g['theme']; ?>/images/misc/bar_right.gif" height="15" width="5" border="0" align="middle" alt="right bar" />
-				<br/><span id="pfstateusagemeter"><?= $pfstateusage.'%'; ?></span> (<span id="pfstate"><?= htmlspecialchars($pfstatetext); ?></span>)
+				<div id="statePB"></div>
+				<span id="pfstateusagemeter"><?= $pfstateusage.'%'; ?></span> (<span id="pfstate"><?= htmlspecialchars($pfstatetext); ?></span>)
 		    	<br />
 		    	<a href="diag_dump_states.php"><?=gettext("Show states");?></a>
 			</td>
@@ -202,8 +212,8 @@ $curcfg = $config['system']['firmware'];
 					$mbufstext = get_mbuf();
 					$mbufusage = get_mbuf(true);
 				?>
-				<img src="./themes/<?= $g['theme']; ?>/images/misc/bar_left.gif" height="15" width="4" border="0" align="middle" alt="left bar" /><img src="./themes/<?= $g['theme']; ?>/images/misc/bar_blue.gif" height="15" name="mbufwidtha" id="mbufwidtha" width="<?= round($mbufusage); ?>" border="0" align="middle" alt="red bar" /><img src="./themes/<?= $g['theme']; ?>/images/misc/bar_gray.gif" height="15" name="mbufwidthb" id="mbufwidthb" width="<?= (100 - $mbufusage); ?>" border="0" align="middle" alt="gray bar" /><img src="./themes/<?= $g['theme']; ?>/images/misc/bar_right.gif" height="15" width="5" border="0" align="middle" alt="right bar" />
-				<br/><span id="mbufusagemeter"><?= $mbufusage.'%'; ?></span> (<span id="mbuf"><?= $mbufstext ?></span>)
+				<div id="mbufPB"></div>
+				<span id="mbufusagemeter"><?= $mbufusage.'%'; ?></span> (<span id="mbuf"><?= $mbufstext ?></span>)
 			</td>
 		</tr>
                 <?php if (get_temp() != ""): ?>
@@ -211,8 +221,10 @@ $curcfg = $config['system']['firmware'];
                         <td width="25%" class="vncellt"><?=gettext("Temperature");?></td>
 			<td width="75%" class="listr">
 				<?php $TempMeter = $temp = get_temp(); ?>
-				<img src="./themes/<?= $g['theme']; ?>/images/misc/bar_left.gif" height="15" width="4" border="0" align="middle" alt="left bar" /><img src="./themes/<?= $g['theme']; ?>/images/misc/bar_blue.gif" height="15" name="tempwidtha" id="tempwidtha" width="<?= round($TempMeter); ?>" border="0" align="middle" alt="red bar" /><img src="./themes/<?= $g['theme']; ?>/images/misc/bar_gray.gif" height="15" name="tempwidthb" id="tempwidthb" width="<?= (100 - $TempMeter); ?>" border="0" align="middle" alt="gray bar" /><img src="./themes/<?= $g['theme']; ?>/images/misc/bar_right.gif" height="15" width="5" border="0" align="middle" alt="right bar" />
-				&nbsp;
+				<script>
+					jQuery("#tempPB").progressbar( { value: <?php echo get_temp(); ?> } );
+				</script>
+				<div id="tempPB"></div>
 				<span id="tempmeter"><?= $temp."&#176;C"; ?></span>
 			</td>
                 </tr>
@@ -226,19 +238,16 @@ $curcfg = $config['system']['firmware'];
 		<tr>
 			<td width="25%" class="vncellt"><?=gettext("CPU usage");?></td>
 			<td width="75%" class="listr">
-				<?php $cpuUsage = "0"; ?>
-				<img src="./themes/<?= $g['theme']; ?>/images/misc/bar_left.gif" height="15" width="4" border="0" align="middle" alt="left bar" /><img src="./themes/<?= $g['theme']; ?>/images/misc/bar_blue.gif" height="15" name="cpuwidtha" id="cpuwidtha" width="<?= $cpuUsage; ?>" border="0" align="middle" alt="red bar" /><img src="./themes/<?= $g['theme']; ?>/images/misc/bar_gray.gif" height="15" name="cpuwidthb" id="cpuwidthb" width="<?= (100 - $cpuUsage); ?>" border="0" align="middle" alt="gray bar" /><img src="./themes/<?= $g['theme']; ?>/images/misc/bar_right.gif" height="15" width="5" border="0" align="middle" alt="right bar" />
-				&nbsp;
-				<br/><span id="cpumeter">(Updating in 10 seconds)</span>
+				<div id="cpuPB"></div>
+				<span id="cpumeter">(Updating in 10 seconds)</span>
 			</td>
 		</tr>
 		<tr>
 			<td width="25%" class="vncellt"><?=gettext("Memory usage");?></td>
 			<td width="75%" class="listr">
 				<?php $memUsage = mem_usage(); ?>
-				<img src="./themes/<?= $g['theme']; ?>/images/misc/bar_left.gif" height="15" width="4" border="0" align="middle" alt="left bar" /><img src="./themes/<?= $g['theme']; ?>/images/misc/bar_blue.gif" height="15" name="memwidtha" id="memwidtha" width="<?= $memUsage; ?>" border="0" align="middle" alt="red bar" /><img src="./themes/<?= $g['theme']; ?>/images/misc/bar_gray.gif" height="15" name="memwidthb" id="memwidthb" width="<?= (100 - $memUsage); ?>" border="0" align="middle" alt="gray bar" /><img src="./themes/<?= $g['theme']; ?>/images/misc/bar_right.gif" height="15" width="5" border="0" align="middle" alt="right bar" />
-				&nbsp;
-				<br/><span id="memusagemeter"><?= $memUsage.'%'; ?></span> of <?= sprintf("%.0f", `/sbin/sysctl -n hw.physmem` / (1024*1024)) ?> MB
+				<div id="memUsagePB"></div>
+				<span id="memusagemeter"><?= $memUsage.'%'; ?></span> of <?= sprintf("%.0f", `/sbin/sysctl -n hw.physmem` / (1024*1024)) ?> MB
 			</td>
 		</tr>
 		<?php if($showswap == true): ?>
@@ -246,9 +255,11 @@ $curcfg = $config['system']['firmware'];
 			<td width="25%" class="vncellt"><?=gettext("SWAP usage");?></td>
 			<td width="75%" class="listr">
 				<?php $swapusage = swap_usage(); ?>
-				<img src="./themes/<?= $g['theme']; ?>/images/misc/bar_left.gif" height="15" width="4" border="0" align="middle" alt="left bar" /><img src="./themes/<?= $g['theme']; ?>/images/misc/bar_blue.gif" height="15" width="<?= $swapusage; ?>" border="0" align="middle" alt="red bar" /><img src="./themes/<?= $g['theme']; ?>/images/misc/bar_gray.gif" height="15" width="<?= (100 - $swapusage); ?>" border="0" align="middle" alt="gray bar" /><img src="./themes/<?= $g['theme']; ?>/images/misc/bar_right.gif" height="15" width="5" border="0" align="middle" alt="right bar" />
-				&nbsp;
-				<br/><span id="swapusagemeter"><?= $swapusage.'%'; ?></span> of <?= sprintf("%.0f", `/usr/sbin/swapinfo -m | /usr/bin/grep -v Device | /usr/bin/awk '{ print $2;}'`) ?> MB
+				<script>
+					jQuery("#swapUsagePB").progressbar( { value: <?php echo swap_usage(); ?> } );
+				</script>
+				<div id="swapUsagePB"></div>
+				<span id="swapusagemeter"><?= $swapusage.'%'; ?></span> of <?= sprintf("%.0f", `/usr/sbin/swapinfo -m | /usr/bin/grep -v Device | /usr/bin/awk '{ print $2;}'`) ?> MB
 			</td>
 		</tr>
 		<?php endif; ?>
@@ -256,9 +267,8 @@ $curcfg = $config['system']['firmware'];
 			<td width="25%" class="vncellt"><?=gettext("Disk usage");?></td>
 			<td width="75%" class="listr">
 				<?php $diskusage = disk_usage(); ?>
-				<img src="./themes/<?= $g["theme"]; ?>/images/misc/bar_left.gif" height="15" width="4" border="0" align="middle" alt="left bar" /><img src="./themes/<?= $g["theme"]; ?>/images/misc/bar_blue.gif" height="15" width="<?= $diskusage; ?>" border="0" align="middle" alt="red bar" /><img src="./themes/<?= $g["theme"]; ?>/images/misc/bar_gray.gif" height="15" width="<?= (100 - $diskusage); ?>" border="0" align="middle" alt="gray bar" /><img src="./themes/<?= $g["theme"]; ?>/images/misc/bar_right.gif" height="15" width="5" border="0" align="middle" alt="right bar" />
-				&nbsp;
-				<br/><span id="diskusagemeter"><?= $diskusage.'%'; ?></span> of <?= `/bin/df -h / | /usr/bin/grep -v 'Size' | /usr/bin/awk '{ print $2 }'` ?>
+				<div id="diskUsagePB"></div>
+				<span id="diskusagemeter"><?= $diskusage.'%'; ?></span> of <?= `/bin/df -h / | /usr/bin/grep -v 'Size' | /usr/bin/awk '{ print $2 }'` ?>
 			</td>
 		</tr>
 	</tbody>