<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>

<body>
  <div id="app">
    <v-app>
      <v-row>
        <v-col>
          <v-card>
            <v-card-title>Speed</v-card-title>
            <v-card-text>
              <h1 class="mx-auto">{{ currentSpeed }}</h1>
              <canvas width="400" height="300" id="speedo"></canvas>
            </v-card-text>
          </v-card>
        </v-col>
        <v-col>
          <v-card>
            <v-card-title>RPM</v-card-title>
            <v-card-text>
              <h1 class="mx-auto">{{ currentRPM }}</h1>
              <canvas width="400" height="300" id="tach"></canvas>
            </v-card-text>
          </v-card>
        </v-col>
        <v-col>
          <v-card>
            <v-card-title>Intake Pressure</v-card-title>
            <v-card-text>
              <h1 class="mx-auto">{{ currentPSI }}</h1>
              <canvas width="400" height="300" id="boost"></canvas>
            </v-card-text>
          </v-card>
        </v-col>
      </v-row>
      <v-row><v-col><v-card><v-card-title>WS Status</v-card-title>
      <v-card-text><h1>{{ Status }}</h1></v-card-text></v-card></v-col></v-row>
        </v-content>
    </v-app>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
  <script src="https://bernii.github.io/gauge.js/dist/gauge.min.js"></script>
  <script>
  /* global Vue */
  /* global Vuetify */
  
    new Vue({
          el: '#app',
          vuetify: new Vuetify(),
            data: function() {
              return {
                speed: [],
                rpm: [],
                psi: [],
                maxframes: 0,
                currentSpeed: 0,
                currentRPM: 0,
                currentPSI: 0,
                sock: {},
                Status: 'Loading',
              }
            },
            mounted: function() { //initialize gauges
              var opts = {
                angle: 0, // The span of the gauge arc
                lineWidth: 0.44, // The line thickness
                radiusScale: 1, // Relative radius
                pointer: {
                  length: 0.6, // // Relative to gauge radius
                  strokeWidth: 0.035, // The thickness
                  color: '#000000' // Fill color
                },
                limitMax: false, // If false, max value increases automatically if value > maxValue
                limitMin: false, // If true, the min value of the gauge will be fixed
                colorStart: '#6FADCF', // Colors
                colorStop: '#8FC0DA', // just experiment with them
                strokeColor: '#E0E0E0', // to see which ones work best for you
                generateGradient: true,
                highDpiSupport: true, // High resolution support
                // renderTicks is Optional
                renderTicks: {
                  divisions: 5,
                  divWidth: 1.1,
                  divLength: 0.7,
                  divColor: '#333333',
                  subDivisions: 3,
                  subLength: 0.5,
                  subWidth: 0.6,
                  subColor: '#666666'
                }

              };
              var target = document.getElementById('speedo'); // your canvas element
              this.speed = new Gauge(target).setOptions(opts); // create sexy gauge!
              this.speed.maxValue = 100; // set max gauge value
              this.speed.setMinValue(0); // Prefer setter over gauge.minValue = 0
              this.speed.animationSpeed = 32; // set animation speed (32 is default value)
              this.speed.set(0); // set actual value

              target = document.getElementById('tach'); // your canvas element
              this.rpm = new Gauge(target).setOptions(opts); // create sexy gauge!
              this.rpm.maxValue = 2500; // set max gauge value
              this.rpm.setMinValue(0); // Prefer setter over gauge.minValue = 0
              this.rpm.animationSpeed = 32; // set animation speed (32 is default value)
              this.rpm.set(00); // set actual value

              target = document.getElementById('boost'); // your canvas element
              this.psi = new Gauge(target).setOptions(opts); // create sexy gauge!
              this.psi.maxValue = 30; // set max gauge value
              this.psi.setMinValue(0); // Prefer setter over gauge.minValue = 0
              this.psi.animationSpeed = 32; // set animation speed (32 is default value)
              this.psi.set(0); // set actual value

              // Set up websocket connection
            this.sock = new WebSocket("wss://" + window.location.hostname + "/ws/");
            this.sock.addEventListener('open', this.gotWsOpen );
            this.sock.addEventListener('message', this.gotWsMessage);
            this.sock.addEventListener('error', this.gotWsError);
            this.sock.addEventListener('close', this.gotWsClose);

            },
            methods: {
                gotWsOpen: function(e) {
                    this.Status="Connected";
                },
                gotWsClose: function(e) {
                    this.Status="Disconnected";
                },
                gotWsError: function(e) {
                    this.Status="Error";
                },
                gotWsMessage: function(e) {
                    var d=JSON.parse(e.data);
                    this.currentSpeed=d.speed;
                    this.speed.set(this.currentSpeed);
                    this.currentRPM=d.rpm;
                    this.rpm.set(this.currentRPM);
                    this.currentPSI=parseFloat(d.psi)/2.036.toFixed(2);
                    this.psi.set(this.currentPSI);
                }
            }

          })
  </script>
</body>

</html>