Reduced size of graphics

Author: linuxitux

graphics.php

@@ -18,29 +18,30 @@ function draw() {
 
                 case 'cpu':
                 ?>
-                <div class="metrics">
-                <h3>CPU</h3>
-                <canvas id="cpu" width="300" height="160">Your browser doesn't support canvas.</canvas>
+                <div class="small-metrics">
+                <h4>CPU</h4>
+                <canvas id="cpu" width="140" height="85">Your browser doesn't support canvas.</canvas>
                 </div>
                 <?php
                 break;
 
                 case 'mem':
                 ?>
-                <div class="metrics">
-                <h3>Memory</h3>
-                <canvas id="mem" width="300" height="160">Your browser doesn't support canvas.</canvas>
+                <div class="small-metrics">
+                <h4>Memory</h4>
+                <canvas id="mem" width="140" height="85">Your browser doesn't support canvas.</canvas>
                 </div>
                 <?php
                 break;
 
                 case 'swp':
                 ?>
-                <div class="metrics">
-                <h3>Swap</h3>
-                <canvas id="swp" width="300" height="160">Your browser doesn't support canvas.</canvas>
+                <div class="small-metrics">
+                <h4>Swap</h4>
+                <canvas id="swp" width="140" height="85">Your browser doesn't support canvas.</canvas>
                 </div>
                 <?php
+
                 break;
 
                 case 'top':
@@ -101,7 +102,7 @@ function draw() {
                 ?>
                 <div class="metrics">
                 <h3>Metrics</h3>
-                <table id="metricstable" class="metricstable" border="0" width="300px">
+                <table id="metricstable" class="metricstable">
                 <tr><td>CPU</td><td style="text-align: right;"><span id="cpu_value">No data.</span></td></tr>
                 <tr><td>TPS</td><td style="text-align: right;"><span id="tps_value">No data.</span></td></tr>
                 <tr><td>Memory</td><td style="text-align: right;"><span id="mem_value">No data.</span></td></tr>

index.php

@@ -28,7 +28,7 @@
 
 <h1>Stats for <span class="hostname"><?php echo $hostname; ?></span></h1>
 <h2><a class="buttons" href=".">LIVE</a>&nbsp;&#8226;&nbsp;<a class="buttons" href="?p=report">REPORT</a></h2>
-
+<div id="debug"></div>
 <?php
 
 if (isset($_GET["p"]) && $_GET["p"] == "report") {

jstats.php

@@ -95,7 +95,7 @@
 
 // Get uptime
 $output = "";
-exec("uptime", $output);
+exec("LANG=C uptime", $output);
 $metrics['uptime'] = $output[0];
 
 // Get ESTABLISHED connections

sere.js

@@ -9,6 +9,9 @@ var ift = ''; // ifacetxkB
 var upt = ''; // uptime
 var con = ''; // connections
 
+// Debug
+var stop = 0;
+
 // Movement
 var speed = 10;    // Boxes will move 10 pixels per step
 var direction = 1; // 1 moves in the positive direction; -1 vice versa
@@ -66,20 +69,30 @@ function getCanvasContext(x) {
   return canvas.getContext('2d');   
 }
 
-function drawClock(canvas,value) {
+function drawClock(canvas,value,width) {
   // Limits (pixels)
   var minx = 50;
   var maxx = 250;
   var miny = 10; 
-  var maxy = 150;
+  var maxy = 160;
+
+  if (width != null) {
+    minx = 0;
+    maxx = width;
+    var height = width * 0.6; 
+    miny = 0.05 * height; 
+    maxy = height;
+  }
 
   // Center coordinates
   cx = minx+(maxx-minx)/2;
-  //cy = miny+(maxy-miny)/2;
-  cy = 150;
+  cy = maxy;
+
+  // Radius
+  var radius = cx * 0.6;
 
   // Clear canvas
-  canvas.clearRect(0,0,300,160);
+  canvas.clearRect(0,0,maxx,maxy);
 
   // Draw clock background
   var startAngle = 1*Math.PI;
@@ -116,12 +129,16 @@ function drawClock(canvas,value) {
 
   var arcs = colors.length - 1;
 
+//var debug = minx+","+maxx+","+miny+","+maxy+","+radius;
+//document.getElementById('debug').innerHTML = debug;
+//stop = 1;
+
   // For each color-1 draw a piece of arc
   for (var i=0; i<arcs; i++) {
 
     // Begin new arc
     canvas.beginPath();
-    canvas.lineWidth = 90;
+    canvas.lineWidth = maxy*0.6;
 
     // Select color
     startColor = colors[i];
@@ -137,13 +154,13 @@ function drawClock(canvas,value) {
     if (endAnglei > endAngle) endAnglei = endAngle;
 
     // Define current arc
-    canvas.arc(cx,cy,cx-minx-20,startAnglei,endAnglei,false);
+    canvas.arc(cx,cy,radius,startAnglei,endAnglei,false);
 
     // Compute start and end points for current gradient
-    startX = cx+(cx-minx-20)*Math.cos(startAnglei);
-    startY = cy+(cx-minx-20)*Math.sin(startAnglei);
-    endX = cx+(cx-minx-20)*Math.cos(endAnglei);
-    endY = cy+(cx-minx-20)*Math.sin(endAnglei);
+    startX = cx+(radius)*Math.cos(startAnglei);
+    startY = cy+(radius)*Math.sin(startAnglei);
+    endX = cx+(radius)*Math.cos(endAnglei);
+    endY = cy+(radius)*Math.sin(endAnglei);
 
     // Define current gradient
     gradient = canvas.createLinearGradient(startX,startY,endX,endY);
@@ -156,20 +173,20 @@ function drawClock(canvas,value) {
 
   // Draw clock hand
   canvas.beginPath();
-  canvas.arc(cx,cy-10,6,2*Math.PI,false);
+  canvas.arc(cx,cy-maxy*0.05,maxy*0.025,2*Math.PI,false);
   canvas.fillStyle='black';
   canvas.strokeStyle='black';
-  canvas.lineWidth = 7;
+  canvas.lineWidth = maxy*0.05;
   canvas.fill();
   canvas.stroke();
   canvas.beginPath();
-  canvas.lineWidth = 4;
-  canvas.moveTo(cx,cy-10); // move to the center
+  canvas.lineWidth = maxy*0.025;
+  canvas.moveTo(cx,cy-maxy*0.05); // move to the center
   angle = Math.PI/2 + (Math.PI * (value/100));
   // Calculate displacements based on radius and angle
-  dx = -(cx-minx) * Math.sin(angle);
-  dy = (cx-minx) * Math.cos(angle);
-  canvas.lineTo(cx+dx,cy+dy-5);
+  dx = -(radius*1.3) * Math.sin(angle);
+  dy = (radius*1.3) * Math.cos(angle);
+  canvas.lineTo(cx+dx,cy+dy-maxy*0.03);
   canvas.strokeStyle = 'black';
   canvas.stroke();
 
@@ -226,6 +243,11 @@ function drawUptime()  {
 
 function updateGraphics(data) {
 
+  // Debug
+  if (stop) {
+    return;
+  }
+
   // Update Metrics chart
   if ((cpu !== '') && (document.getElementById('metricstable') != null)) {
     // Update values
@@ -243,15 +265,15 @@ function updateGraphics(data) {
 
   // Update CPU chart
   if (document.getElementById('cpu') != null)
-      drawClock(getCanvasContext('cpu'),cpu);
+      drawClock(getCanvasContext('cpu'),cpu,140);
 
   // Update memfree chart
   if (document.getElementById('mem') != null)
-      drawClock(getCanvasContext('mem'),mem);
+      drawClock(getCanvasContext('mem'),mem,140);
 
   // Update swp chart
   if (document.getElementById('swp') != null)
-      drawClock(getCanvasContext('swp'),swp);
+      drawClock(getCanvasContext('swp'),swp,140);
 
   // Update tps chart
   if (tps !== '' && document.getElementById('tps_value_big') != null)

template.css

@@ -39,6 +39,7 @@ text-decoration: underline;
 padding: 5px;
 }
 
+/*
 h3 {
 font-weight: 300;
 1font-size: 1.1em;
@@ -47,6 +48,24 @@ margin-bottom: 10px;
 text-align: center;
 color: #666;
 }
+*/
+
+h3, h4 {
+font-weight: 300;
+font-size: 1em;
+text-align: center;
+color: #666;
+}
+
+h3 {
+margin-top: 5px;
+margin-bottom: 5px;
+}
+
+h4 {
+margin-top: 0px;
+margin-bottom: 0px;
+}
 
 code {
 font-size: 1.2em;
@@ -66,7 +85,18 @@ background-color: #fafafa;
 /*border: 2px solid #fafafa;*/
 height: 240px;
 display: inline-block;
-max-width: 300px;
+max-width: 280px;
+vertical-align: top;
+}
+
+.small-metrics {
+padding: 10px;
+margin: 5px;
+background-color: #fafafa;
+/*border: 2px solid #fafafa;*/
+height: 105px;
+display: inline-block;
+max-width: 280px;
 vertical-align: top;
 }
 
@@ -82,7 +112,7 @@ text-align: right;
 .smallnote {
 word-wrap: break-word;
 font-size: .75em;
-width: 300px;
+width: 280px;
 text-align: left;
 }
 
@@ -110,7 +140,7 @@ font-size:.8em;
 }
 
 .toptable {
-width: 300px;
+width: 280px;
 font-family: monospace;
 font-size: .9em;
 text-align: left;
@@ -130,7 +160,12 @@ color: #f00;
 
 .uptime {
 text-align: left;
-width: 300px;
+width: 280px;
+}
+
+.metricstable {
+width: 280px;
+border: 0;
 }
 
 .metricstable td {
@@ -148,6 +183,7 @@ font-size: 0.75em;
 	height: 360px;
 	position: relative;
 	z-index: 50;
+    margin-bottom: 50px;
 }
 
 .graph h2 {