code.fastix.org

Dateiansicht:

Datei:Projekte -> PHP,JavaScript:Netzlast-Ticker -> netzlast.php
md5:f027bd4217cff8bf4081ae6a7d3e0d4a
sha1:a3c4bfd113f334d90a4a2addf4b39dd8a18d0405
  1. <?php
  2. #file: netzlast.php
  3. header ('Content-Type:text/html; charset="utf-8"');
  4. header('Cache-Control: no-cache, no-store, must-revalidate');
  5. header('Pragma: no-cache');
  6. header('Expires: 0');
  7.  
  8.  
  9. $defaultDevice= 'auto';      //config:string: Networkdevice e.g. 'eth0' :: '' or 'auto' set this for the device with highest traffic.
  10. $checkT       = 1000;        //config:int   : Time in ms between ticks ( waiting in JS ). If you doubt set 1000 (1s)
  11. $defTickWith  = 5;           //config:int   : size (width of a tick in px). 5 is a good value. $maxTicks (see below) can setthis higher.
  12. $maxTicks     = 'auto';         //config:int   : max. number of ticks on to the "canvas". If you doubt set to 'auto' or 0.
  13. $maxDefault   = 0;           //config:int   : First max value of bytes/s. see below.
  14. $max['eth0']  = 0;           //config:int   : First maximal value of bytes/s for named device. If you doubt set 0.
  15.                              //example: This device can work with 100 MBit. Set this value to 100000000 / 8 = 12500000
  16. $TxTickColor  = '#ffb300';   //config:string: CSS-color for Tx.
  17. $RxTickColor  = '#00b3ff';   //config:string: CSS-color for Rx.
  18. $denySearchM  = true;        //config:bolean: Send <meta name="robots" value="noindex"> ?.
  19. $showTimeDiff = false;       //config:bolean: Show the real time between 2 ticks?.
  20.  
  21. //config:string: Title to show. You can use [DEVICE] as placeholder for the (auto)selected device.
  22. $siteTitle    =  htmlspecialchars( $_SERVER['SERVER_NAME'] . '::' . '[DEVICE]');
  23.  
  24. require 'netzlast.inc.php';
  25. $oNetzlast = new Netzlast();
  26.  
  27. if ('' == $defaultDevice || 'auto' == $defaultDevice ) {
  28.     $defaultDevice = $oNetzlast -> getHighTrafficDevice();
  29. }
  30.  
  31. if ( isset( $_GET['device'] ) ) {
  32.     $device = $_GET['device'];
  33. } else {
  34.     $device = $defaultDevice;
  35. }
  36. if ( isset( $max[$device] ) ) {
  37.     $maxDefault = $max[$device];
  38. }
  39.  
  40. if ( ('auto') == $maxTicks or 1 > $maxTicks ) {
  41.     $maxTicks = 0;
  42. }
  43. $siteTitle = str_replace( '[DEVICE]', htmlspecialchars( $device ), $siteTitle );
  44.  
  45.  
  46.  
  47. ?><!DOCTYPE html>
  48. <html>
  49.     <head>
  50.         <title><?=$siteTitle;?></title>
  51.         <meta charset="utf-8">
  52.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  53.         <?php  
  54.         if ( $denySearchM ) {
  55.             echo '<meta name="robots" content="noindex">';
  56.         }
  57.         ?>
  58.         <style type="text/css">
  59.         html,body { margin:0; padding: 0; background-color:#fafafa; font-family: serif,times,roman; color:black; }
  60.         h1 { margin:0; padding:.3em .5em .3em 2.5em; background-color:#ffb300; border-bottom:3px solid gray; font-size:1.5em; white-space:nowrap; background-image: url("logo_80x80.png"); background-repeat:no-repeat; background-size: 1.5em 1.5em; background-position:.5em .25em;}            
  61.         main          { padding: 0 1rem 1rem 1rem; }
  62.         #Controls     { position:absolute; top: 4rem; }
  63.         #NtCanvasRX   { position: absolute; top: 7rem; left: 1rem; height: 400px; right: 1em; border: 1px solid black; text-align: right; overflow: hidden; background-color:rgba(240,240,240,0) }        
  64.         #NtCanvasTX   { position: absolute; top: 7rem; left: 1rem; height: 400px; right: 1em; border: 1px solid black; text-align: right; overflow: hidden;}        
  65.         #maximum      { position:absolute; top: 5.5rem; padding: .25rem .5rem ; left: 2rem; background-color:#fafafa; border: 1px solid black;  z-index:100; background-color:rgb(250,250,250); }
  66.         #ticker       { position:absolute; top: 8.5rem; left: 2.5rem;z-index:99 }
  67.         .NtCanvasItem {  position:relative; top: 0px; display:inline-block; background-color:rgba(240,240,240,.5) };
  68.         .controls     { height: 1.8rem; border: 1px solid gray;}
  69.         .RxBg         { background-color: <?=$RxTickColor;?>; }
  70.         .TxBg         { background-color: <?=$TxTickColor;?>; }
  71.        
  72.         </style>
  73.         <script>
  74.         var device       = '<?= htmlspecialchars( $device );?>';
  75.         var checkT       =  <?= intval( $checkT );?>;
  76.         var maxTicks     =  <?= intval( $maxTicks );?>;
  77.         var maxDefault   =  <?= intval( $maxDefault );?>;
  78.        
  79.         var max      = maxDefault;
  80.         var oldData = JSON.parse('<?=$oNetzlast -> getNetzlastAsJson(); ?>');
  81.         var newData = new Array();
  82.         var arTicker  = new Array();
  83.         var devicesSelector = '';
  84.         var run;
  85.  
  86.        
  87.         function changeDevice () {
  88.             document.location.href='?device=' + document.getElementById( 'devicesSelector' ).value;
  89.         }
  90.        
  91.         function resetTicker() {
  92.             document.location.reload();
  93.         }
  94.  
  95.         function getData() {
  96.             var xhttp = new XMLHttpRequest();
  97.             xhttp.onreadystatechange = function() {
  98.                 if ( this.readyState == 4 && this.status == 200 ) {
  99.                     ticker( xhttp.responseText );
  100.                 }
  101.             };
  102.             xhttp.open( "GET", "netzlast-api.php?device=" + device, true );
  103.             xhttp.send();
  104.         }
  105.  
  106.        
  107.         function ticker( json ) {
  108.             var newData        = JSON.parse( json );
  109.             var NtCanvasHeight = document.getElementById('NtCanvasTX').offsetHeight;
  110.             var NtCanvasWidth  = document.getElementById('NtCanvasTX').offsetWidth;
  111.             var maxTicks       = Math.round( NtCanvasWidth / <?=$defTickWith;?> ) + 1;
  112.             if ( <?=$maxTicks;?> > 0 ) {
  113.                 if ( maxTicks > <?=$maxTicks;?> ) {
  114.                     maxTicks = <?=$maxTicks;?>;
  115.                 }
  116.             }
  117.             var tickWidth      = Math.round( NtCanvasWidth / maxTicks );
  118.             if ( tickWidth < 1 ) {
  119.                 tickWidth = 1;
  120.                 maxTicks  = NtCanvasWidth;
  121.             }
  122.             var rx             = 0;
  123.             var tx             = 0;
  124.             var out            = '';
  125.             for ( key in newData ) {
  126.                 if ( "time" != key && 'error' != key ) {
  127.                     var timeDiff = newData['time'] - oldData['time'];
  128. <?php
  129. if( $showTimeDiff ) {
  130.     echo 'out = out + "ZeitDiff:   " + timeDiff + "\n";';
  131. }
  132. ?>
  133.                    
  134.                     rx  = Math.abs( Math.round( ( newData[key]['RX'] - oldData[key]['RX'] ) / timeDiff ) );
  135.                     tx  = Math.abs(Math.round( ( newData[key]['TX']  - oldData[key]['TX'] ) / timeDiff ) );
  136.                    
  137.                     if ( max < rx ) { max = rx; }
  138.                     if ( max < tx ) { max = tx; }
  139.  
  140.                     out = out + "Rx (Empfangen): " +  humanBytes( rx ) + "/s\n";
  141.                     out = out + "Tx (Gesendet):  " +  humanBytes( tx ) + "/s\n";
  142.                 }
  143.             }
  144.            
  145.             document.getElementById("ticker").innerHTML = out;
  146.            
  147.             oldData = newData;
  148.            
  149.             arTicker.push( [rx, tx] );
  150.             if ( maxTicks < arTicker.length ) {
  151.                 arTicker.shift();
  152.             }
  153.            
  154.             document.getElementById('maximumValue').innerHTML = humanBytes( max );
  155.            
  156.             var itemFaktor = NtCanvasHeight / max;
  157.            
  158.             var s = '<span style="display:inline-block; width:0px; height:' + NtCanvasHeight + 'px;"></span>';
  159.             for ( i=0; i < arTicker.length; i++ ) {
  160.                 item = arTicker[i];
  161.                 zIndex = ( item[0] < item[1] )? 25 : 20;
  162.                 s = s + '<span class="NtCanvasItem RxBg" style="z-index: ' + zIndex + '; width:' +  tickWidth + 'px; height:' + (item[0] * itemFaktor) + 'px;"></span>';
  163.             }
  164.             document.getElementById( 'NtCanvasRX' ).innerHTML = s;
  165.            
  166.             s = '<span style="display:inline-block; width:0px; height:' + NtCanvasHeight + 'px;"></span>';
  167.             for (i=0; i < arTicker.length; i++ ) {
  168.                 item = arTicker[i];
  169.                 zIndex = ( item[0] < item[1] ) ? 20 : 25;
  170.                 s = s + '<span class="NtCanvasItem TxBg" style="z-index: ' + zIndex + '; width:' +  tickWidth + 'px; height:' + (item[1] * itemFaktor) + 'px;"></span>';
  171.             }
  172.             document.getElementById( 'NtCanvasTX' ).innerHTML = s;
  173.             run = window.setTimeout( "getData();", checkT );
  174.         }
  175.  
  176.         function humanBytes(z) {
  177.             var s = '';
  178.             var ar = ['', 'Kilo', 'Mega', 'Giga', 'Terra', 'Peta'];
  179.             i = 0;
  180.             while ( z >= 1000 ) {
  181.                 z = z / 1000;
  182.                 i++;
  183.             }
  184.             return ( Math.round( z * 100 ) / 100 ).toString() + ' ' + ar[i] + 'Bytes';
  185.         }
  186.        
  187.         </script>
  188.     </head>
  189.     <body>
  190.         <header>
  191.             <h1 id="title"><?=$siteTitle;?></h1>
  192.         </header>
  193.         <main>
  194.             <div id="Controls">
  195.                 <select class="controls" id="devicesSelector" onChange="changeDevice();">
  196. <?php
  197.     foreach( $oNetzlast -> getDevicesAsArray() as $optDevice ) {
  198.         if ( $optDevice == $device ) {
  199.             echo '<option selected="selected" value="' .  htmlspecialchars( $optDevice ) . '">' . htmlspecialchars( $optDevice ) . '</option>';
  200.         } else {
  201.             echo '<option value="' .  htmlspecialchars( $optDevice ) . '">' . htmlspecialchars( $optDevice ) . '</option>';
  202.         }
  203.     }
  204. ?>
  205.                 </select> <button class="controls" onClick="resetTicker();">Reset</button>
  206.             </div>        
  207.             <div id="NtCanvasTX" role="img"></div>        
  208.             <div id="NtCanvasRX" role="img"></div>
  209.             <pre id="maximum">Maximum: <span id="maximumValue"></span>/s <span class="RxBg"> Rx </span> <span class="TxBg"> Tx </span></pre>
  210.             <pre id="ticker" style="height:6rem">Wird initialisiert…</pre>
  211.             <script>
  212.                 document.getElementById( 'maximumValue' ).innerHTML = humanBytes( max );
  213.                 run = window.setTimeout( "getData();", 100 );
  214.             </script>
  215.         </main>
  216.     </body>
  217. </html>