<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>