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 }
  28 </style>
  29 </head>
  30 <body>
  31 <div id="scale">
  32   <span>0</span><span>-5</span><span>-10</span><span>-15</span><span>-20</span>
  33   <span>-25</span><span>-30</span><span>-40</span><span>-50</span><span>-60</span>
  34 </div>
  35 <div class="meter"><span class="gauge"></span></div>
  36 </body>
  37 <script>
  38 function get_appropriate_ws_url()
  39 {
  40         var pcol;
  41         var u = document.URL;
  42
  43         /*
  44          * We open the websocket encrypted if this page came on an
  45          * https:// url itself, otherwise unencrypted
  46          */
  47
  48         if (u.substring(0, 5) == "https") {
  49                 pcol = "wss://";
  50                 u = u.substr(8);
  51         } else {
  52                 pcol = "ws://";
  53                 if (u.substring(0, 4) == "http")
  54                         u = u.substr(7);
  55         }
  56
  57         u = u.split('/');
  58
  59         return pcol + u[0];
  60 }
  61
  62
  63 function iec_scale(db) {
  64         var def = 0.0;
  65
  66         if (db < -70.0 || isNaN(db)) {
  67                 def = 0.0;
  68         } else if (db < -60.0) {
  69                 def = (db + 70.0) * 0.25;
  70         } else if (db < -50.0) {
  71                 def = (db + 60.0) * 0.5 + 2.5;
  72         } else if (db < -40.0) {
  73                 def = (db + 50.0) * 0.75 + 7.5;
  74         } else if (db < -30.0) {
  75                 def = (db + 40.0) * 1.5 + 15.0;
  76         } else if (db < -20.0) {
  77                 def = (db + 30.0) * 2.0 + 30.0;
  78         } else if (db < 0.0) {
  79                 def = (db + 20.0) * 2.5 + 50.0;
  80         } else {
  81                 def = 100.0;
  82         }
  83
  84         return (def / 100.0);
  85
  86 }
  87
  88 scale = document.getElementById('scale');
  89 var i;
  90 for (i=0; i<scale.children.length; i++) {
  91         var span = scale.children[i];
  92         span.style.left = iec_scale(parseFloat(span.textContent)) * 100 + '%';
  93 }
  94
  95 var ws = new WebSocket(get_appropriate_ws_url(), 'jack-wsmeter-protocol');
  96 ws.onmessage = function(event) {
  97         var peaks = event.data.split(" ").slice(0, -1);
  98         var gauges = document.getElementsByClassName('gauge');
  99         var meters = document.getElementsByClassName('meter');
 100         if (meters.length != peaks.length) {
 101                 for (i=meters.length; i>1; i--) {
 102                         meters[i-1].remove();
 103                 }
 104                 for (i=1; i<peaks.length; i++) {
 105                         document.body.appendChild(meters[0].cloneNode(true));
 106                 }
 107         }
 108         for (i=0; i<peaks.length; i++) {
 109                 gauges[i].style.width = iec_scale(parseFloat(peaks[i])) * 100 + '%';
 110         }
 111 }
 112 </script>
 113 </html>