Initial commit
This commit is contained in:
Your Name
parent
31de5c0f84
commit
31dadde7fa
|
|
@ -0,0 +1 @@
|
|||
wsdashdemo
|
||||
|
|
@ -0,0 +1,156 @@
|
|||
<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">
|
||||
<script src="json.js"></script>
|
||||
</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>Current Time</v-card-title>
|
||||
<v-card-text>{{ iterator }} of {{ maxframes }} Seconds (10x rate)</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,
|
||||
iterator: 0,
|
||||
currentSpeed: 0,
|
||||
currentRPM: 0,
|
||||
currentPSI: 0,
|
||||
sock: {},
|
||||
}
|
||||
},
|
||||
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
|
||||
this.maxframes=data.length;
|
||||
setInterval(this.iterate, 100);
|
||||
|
||||
// Set up websocket connection
|
||||
this.sock = new WebSocket("wss://" + window.location.hostname + "/ws");
|
||||
this.sock.addEventListener('open', function(event) { this.gotWsOpen(event); });
|
||||
this.sock.addEventListener('message', function(event) { this.gotWsMessage(event); });
|
||||
this.sock.addEventListener('error', function(event) { this.gotWsError(event); });
|
||||
this.sock.addEventListener('close', function(event) { this.gotWsClose(event); });
|
||||
|
||||
},
|
||||
methods: {
|
||||
gotWsOpen: function(e) {
|
||||
this.Status="Connected";
|
||||
},
|
||||
gotWsClose: function(e) {
|
||||
this.Status="Disconnected";
|
||||
},
|
||||
gotWsError: function(e) {
|
||||
this.Status="Error";
|
||||
},
|
||||
gotWsMessage: function(e) {
|
||||
var d=e.data;
|
||||
this.currentSpeed=d.speed;
|
||||
this.currentRPM=d.rpm;
|
||||
this.currentPSI=d.psi.toFixed(2);
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
package main
|
||||
|
||||
import (
|
||||
"encoding/csv"
|
||||
"github.com/gorilla/websocket"
|
||||
"io"
|
||||
"log"
|
||||
"net/http"
|
||||
"os"
|
||||
"strconv"
|
||||
"time"
|
||||
)
|
||||
|
||||
type dashData struct {
|
||||
RPM int `json:"rpm"`
|
||||
Speed int `json:"speed"`
|
||||
PSI float64 `json:"psi"`
|
||||
}
|
||||
|
||||
// Process the data log at startup
|
||||
func load_data(filename string) []dashData {
|
||||
var d []dashData
|
||||
f, err := os.Open(filename)
|
||||
if err != nil {
|
||||
log.Fatal(err)
|
||||
}
|
||||
r := csv.NewReader(f)
|
||||
for {
|
||||
row, err := r.Read()
|
||||
if err == io.EOF {
|
||||
break
|
||||
}
|
||||
if err != nil {
|
||||
log.Fatal(err)
|
||||
}
|
||||
var e dashData
|
||||
e.RPM, _ = strconv.Atoi(row[0])
|
||||
e.Speed, _ = strconv.Atoi(row[2])
|
||||
e.PSI, _ = strconv.ParseFloat(row[1], 64)
|
||||
d = append(d, e)
|
||||
}
|
||||
return d
|
||||
}
|
||||
|
||||
var upgrader = websocket.Upgrader{}
|
||||
|
||||
func main() {
|
||||
http.HandleFunc("/ws", subscribe)
|
||||
log.Fatal(http.ListenAndServe("localhost:9888", nil))
|
||||
|
||||
}
|
||||
|
||||
func subscribe(w http.ResponseWriter, r *http.Request) {
|
||||
c, err := upgrader.Upgrade(w, r, nil)
|
||||
if err != nil {
|
||||
log.Print("upgrade:", err)
|
||||
return
|
||||
}
|
||||
defer c.Close()
|
||||
// Load data set
|
||||
d := load_data("fin.csv")
|
||||
iterator := 0
|
||||
for {
|
||||
if iterator == len(d) {
|
||||
iterator = 0
|
||||
}
|
||||
err := c.WriteJSON(d[iterator])
|
||||
if err != nil {
|
||||
// Conection dropped or otherwise
|
||||
log.Printf("Connection failed.")
|
||||
return
|
||||
}
|
||||
time.Sleep(100 * time.Millisecond)
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue