<script type="module"  src="stats-line.js"></script>

      <script type="module"  src="stats-process.js"></script>

    <dom-module id="service-button-row">

      <template>

        <style>

         :host > div:nth-child(3) { width: 5em; }

         :host > div:nth-child(4) { width: 3em; }

         :host > div:nth-child(5) { width: 50px; }

        </style>

          <div class="left"><a class="big" href="{{name}}/">{{name}}</a></div>

          <div class="window"><button on-click="click">window</button></div>

          <div><a href="{{name}}/stats/">stats</a></div>

          <div id="stats"><stats-line name="{{name}}"></div>

      </template>

      <script>

       HTMLImports.whenReady(function () {

                   window.open(this.name + '/', '_blank',

                               'scrollbars=1,resizable=1,titlebar=0,location=0');

               },

           });

       });

      </script>

      <hr>

      <service-button-row name="ascoltami"></service-button-row>

      <hr>

      <service-button-row name="vidref"></service-button-row>

      <hr>

      <service-button-row name="collector"></service-button-row>

      <service-button-row name="timeline"></service-button-row>

      <service-button-row name="paint"></service-button-row>

      <service-button-row name="effectEval"></service-button-row>

      <service-button-row name="subServer"></service-button-row>

      <service-button-row name="subComposer"></service-button-row>

    </div>

  </body>

                            resp.json().then((msg) => {

                                this.stats = msg;

                                setTimeout(reload, 1000);

                            });

                        }

                    });

                }

            // wrong type of fade- never goes to 0

            ctx.fillStyle = '#00000003';

            ctx.fillRect(0, 0, w, h);

                return;

            }

            const dt = now - prev;