jackwsmeter.html

   1 <html>
   2 <head>
   3 <style>
   4 body {
   5         margin: 0;
   6 }
   7
   8 .gauge {
   9         display: inline-block;
  10         background: green;
  11         width: 0px;
  12         height: 1.2em;
  13         /*
  14         -webkit-transition: width .3s ease;
  15         transition: width .3s ease;
  16         */
  17 }
  18
  19 .meter {
  20         background: black;
  21         border-bottom: 1px solid #666;
  22 }
  23
  24 #scale span {
  25         position: absolute;
  26         color: white;
  27         border-right: 1px solid white;
  28         padding-right: 1ex;
  29 }
  30 </style>
  31 </head>
  32 <body>
  33 <div id="scale">
  34   <span>0</span><span>-5</span><span>-10</span><span>-15</span><span>-20</span>
  35   <span>-25</span><span>-30</span><span>-40</span><span>-50</span><span>-60</span>
  36 </div>
  37 <div class="meter"><span class="gauge"></span></div>
  38 </body>
  39 <script>
  40 function get_appropriate_ws_url()
  41 {
  42         var pcol;
  43         var u = document.URL;
  44
  45         /*
  46          * We open the websocket encrypted if this page came on an
  47          * https:// url itself, otherwise unencrypted
  48          */
  49
  50         if (u.substring(0, 5) == "https") {
  51                 pcol = "wss://";
  52                 u = u.substr(8);
  53         } else {
  54                 pcol = "ws://";
  55                 if (u.substring(0, 4) == "http")
  56                         u = u.substr(7);
  57         }
  58
  59         u = u.split('/');
  60
  61         if (!document.location.port) {
  62                 return pcol + u[0] + ':7681';
  63         }
  64
  65         return pcol + u[0];
  66 }
  67
  68
  69 function iec_scale(db) {
  70         var def = 0.0;
  71
  72         if (db < -70.0 || isNaN(db)) {
  73                 def = 0.0;
  74         } else if (db < -60.0) {
  75                 def = (db + 70.0) * 0.25;
  76         } else if (db < -50.0) {
  77                 def = (db + 60.0) * 0.5 + 2.5;
  78         } else if (db < -40.0) {
  79                 def = (db + 50.0) * 0.75 + 7.5;
  80         } else if (db < -30.0) {
  81                 def = (db + 40.0) * 1.5 + 15.0;
  82         } else if (db < -20.0) {
  83                 def = (db + 30.0) * 2.0 + 30.0;
  84         } else if (db < 0.0) {
  85                 def = (db + 20.0) * 2.5 + 50.0;
  86         } else {
  87                 def = 100.0;
  88         }
  89
  90         return (def / 100.0);
  91
  92 }
  93
  94 scale = document.getElementById('scale');
  95 var i;
  96 for (i=0; i<scale.children.length; i++) {
  97         var span = scale.children[i];
  98         span.style.right = (100 - (iec_scale(parseFloat(span.textContent)) * 100)) + '%';
  99 }
 100
 101 var ws = new WebSocket(get_appropriate_ws_url(), 'jack-wsmeter-protocol');
 102 ws.onmessage = function(event) {
 103         var peaks = event.data.split(" ");
 104         var gauges = document.getElementsByClassName('gauge');
 105         var meters = document.getElementsByClassName('meter');
 106         if (meters.length != peaks.length) {
 107                 for (i=meters.length; i>1; i--) {
 108                         meters[i-1].remove();
 109                 }
 110                 for (i=1; i<peaks.length; i++) {
 111                         document.body.appendChild(meters[0].cloneNode(true));
 112                 }
 113         }
 114         for (i=0; i<peaks.length; i++) {
 115                 gauges[i].style.width = iec_scale(parseFloat(peaks[i])) * 100 + '%';
 116         }
 117 }
 118 </script>
 119 </html>