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         return pcol + u[0];
  62 }
  63
  64
  65 function iec_scale(db) {
  66         var def = 0.0;
  67
  68         if (db < -70.0 || isNaN(db)) {
  69                 def = 0.0;
  70         } else if (db < -60.0) {
  71                 def = (db + 70.0) * 0.25;
  72         } else if (db < -50.0) {
  73                 def = (db + 60.0) * 0.5 + 2.5;
  74         } else if (db < -40.0) {
  75                 def = (db + 50.0) * 0.75 + 7.5;
  76         } else if (db < -30.0) {
  77                 def = (db + 40.0) * 1.5 + 15.0;
  78         } else if (db < -20.0) {
  79                 def = (db + 30.0) * 2.0 + 30.0;
  80         } else if (db < 0.0) {
  81                 def = (db + 20.0) * 2.5 + 50.0;
  82         } else {
  83                 def = 100.0;
  84         }
  85
  86         return (def / 100.0);
  87
  88 }
  89
  90 scale = document.getElementById('scale');
  91 var i;
  92 for (i=0; i<scale.children.length; i++) {
  93         var span = scale.children[i];
  94         span.style.right = (100 - (iec_scale(parseFloat(span.textContent)) * 100)) + '%';
  95 }
  96
  97 var ws = new WebSocket(get_appropriate_ws_url(), 'jack-wsmeter-protocol');
  98 ws.onmessage = function(event) {
  99         var peaks = event.data.split(" ");
 100         var gauges = document.getElementsByClassName('gauge');
 101         var meters = document.getElementsByClassName('meter');
 102         if (meters.length != peaks.length) {
 103                 for (i=meters.length; i>1; i--) {
 104                         meters[i-1].remove();
 105                 }
 106                 for (i=1; i<peaks.length; i++) {
 107                         document.body.appendChild(meters[0].cloneNode(true));
 108                 }
 109         }
 110         for (i=0; i<peaks.length; i++) {
 111                 gauges[i].style.width = iec_scale(parseFloat(peaks[i])) * 100 + '%';
 112         }
 113 }
 114 </script>
 115 </html>