test with new websocket implementation

package.json

@@ -16,7 +16,6 @@
     "vue-chartjs": "^3.5.0",
     "vue-context": "^5.1.0",
     "vue-headful": "^2.1.0",
-    "vue-json-rpc-websocket": "^1.1.1",
     "vue-resource": "^1.5.1",
     "vue-simple-upload": "^0.1.6",
     "vue-toast-notification": "^0.2.0",

public/config.json

@@ -1,7 +1,7 @@
 {
   "socket": {
     "hostname": "voron250.local",
-    "reconnectInterval": 5000,
-    "reconnectAttempts": 1000
+    "port": 8080,
+    "reconnectInterval": 3000
   }
 }

src/App.vue

@@ -66,7 +66,7 @@
 
         <v-footer app class="d-block">
             <span v-if="version">{{ version }}</span>
-            <span class="float-right">Made with <img src="/img/heard.svg" height="10" /> by <img src="/img/voron.png" height="10" />.   &copy; 2020</span>
+            <span class="float-right">Made with <img src="/img/heard.png" height="15" title="love" alt="heard" /> by <a href="http://www.vorondesign.com/" target="_blank"><img src="/img/voron.png" height="15" title="VoronDesign" alt="Logo - VoronDesign" /></a></span>
         </v-footer>
     </v-app>
 </template>
@@ -89,9 +89,8 @@ export default {
     }),
     created () {
         this.$vuetify.theme.dark = true;
-        this.$socket.onOpen = () => {
-
-        }
+        window.console.log('app created');
+        this.$webSocketsConnect();
     },
     computed: {
         currentPage: function() {
@@ -114,7 +113,7 @@ export default {
     methods: {
         emergencyStop: function() {
             this.$store.commit('setLoadingEmergencyStop', true);
-            this.$socket.sendObj('post_printer_gcode', {script: 'M112'}, 'setLoadingEmergencyStop');
+            //this.$socket.sendObj('post_printer_gcode', {script: 'M112'}, 'setLoadingEmergencyStop');
         },
         drawFavicon(val) {
             let favicon = document.getElementById('favicon');

src/components/panels/ControlPanel.vue

@@ -6,7 +6,7 @@
     <v-card>
         <v-row class="">
             <v-col class="col-12 pb-0 text-center">
-                <div class="d-inline-block mx-2 my-1"><v-btn @click="doHome" :loading="loadingHome" :color="homedAxes.includes('xyz') ? 'primary' : 'warning'" class=""><v-icon class="mr-1">mdi-home</v-icon><span class="d-none d-sm-inline">Home </span>all</v-btn></div>
+                <div class="d-inline-block mx-2 my-1"><v-btn @click="doHome" :loading="loadingHomeAll" :color="homedAxes.includes('xyz') ? 'primary' : 'warning'" class=""><v-icon class="mr-1">mdi-home</v-icon><span class="d-none d-sm-inline">Home </span>all</v-btn></div>
                 <div class="d-inline-block mx-2 my-1" v-if="config.hasOwnProperty('quad_gantry_level')"><v-btn @click="doQGL" :loading="loadingQGL" color="primary">QGL</v-btn></div>
             </v-col>
         </v-row>
@@ -61,31 +61,28 @@
 
 <script>
     import { mapState, mapGetters, mapMutations } from 'vuex'
+    import Vue from "vue";
 
     export default {
         components: {
 
         },
         data: function() {
             return {
-
+                loadingHomeAll: false,
+                loadingHomeX: false,
+                loadingHomeY: false,
+                loadingHomeZ: false,
             }
         },
         computed: {
             ...mapState({
-                loadingHome: state => state.socket.loadingHome,
-                loadingHomeX: state => state.socket.loadingHomeX,
-                loadingHomeY: state => state.socket.loadingHomeY,
-                loadingHomeZ: state => state.socket.loadingHomeZ,
                 loadingQGL: state => state.socket.loadingQGL,
                 homedAxes: state => state.printer.toolhead.homed_axes,
                 config: state => state.config,
+                loadings: state => state.loadings,
             }),
             ...mapMutations([
-                'setLoadingHome',
-                'setLoadingHomeX',
-                'setLoadingHomeY',
-                'setLoadingHomeZ',
                 'setLoadingQGL',
             ]),
             ...mapGetters([
@@ -94,19 +91,19 @@
         },
         methods: {
             doHome() {
-                this.$store.commit('setLoadingHome', true);
+                this.$store.commit('setLoading', { name: 'controlHomeAll' });
                 this.$socket.sendObj('post_printer_gcode', { script: "G28" }, "responseHome");
             },
             doHomeX() {
-                this.$store.commit('setLoadingHomeX', true);
+                this.$store.commit('setLoading', { name: 'controlHomeX' });
                 this.$socket.sendObj('post_printer_gcode', { script: "G28 X" }, "responseHomeX");
             },
             doHomeY() {
-                this.$store.commit('setLoadingHomeY', true);
+                this.$store.commit('setLoading', { name: 'controlHomeY' });
                 this.$socket.sendObj('post_printer_gcode', { script: "G28 Y" }, "responseHomeY");
             },
             doHomeZ() {
-                this.$store.commit('setLoadingHomeZ', true);
+                this.$store.commit('setLoading', { name: 'controlHomeZ' });
                 this.$socket.sendObj('post_printer_gcode', { script: "G28 Z" }, "responseHomeZ");
             },
             doQGL() {
@@ -121,8 +118,16 @@
                 this.doSend(gcode);
             },
             doSend(gcode) {
-                this.$socket.sendObj('post_printer_gcode', { script: gcode }, "sendGcode");
+                Vue.prototype.$webSocketsSendObj('post_printer_gcode', { script: gcode }, "sendGcode");
             },
+        },
+        watch: {
+            loadings: function(loadings) {
+                this.loadingHomeAll = loadings.includes('controlHomeAll');
+                this.loadingHomeX = loadings.includes('controlHomeX');
+                this.loadingHomeY = loadings.includes('controlHomeY');
+                this.loadingHomeZ = loadings.includes('controlHomeZ');
+            }
         }
     }
 </script>

src/components/panels/Settings/SystemPanel.vue

@@ -11,6 +11,8 @@
             <div><v-btn :href="'http://'+hostname+':'+port+'/printer/log'" color="primary"><v-icon class="mr-sm-2">mdi-download</v-icon>Download Log</v-btn></div>
             <div><v-btn @click="doRestart" :loading="loadingRestart" color="error" class="mt-3"><v-icon class="mr-sm-2">mdi-cached</v-icon>Restart</v-btn></div>
             <div><v-btn @click="doRestartFirmware" :loading="loadingRestartFirmware" class="mt-3" color="error"><v-icon class="mr-sm-2">mdi-cached</v-icon><span class="d-none d-sm-block">FW Restart</span></v-btn></div>
+            <div><v-btn @click="doRebootHost" :loading="loadingRebootHost" class="mt-3" color="error"><v-icon class="mr-sm-2">mdi-cached</v-icon><span class="d-none d-sm-block">Host Restart</span></v-btn></div>
+            <div><v-btn @click="doShutdownHost" :loading="loadingShutdownHost" class="mt-3" color="error"><v-icon class="mr-sm-2">mdi-power</v-icon><span class="d-none d-sm-block">Host Shutdown</span></v-btn></div>
         </v-card-text>
     </v-card>
 </template>
@@ -33,6 +35,8 @@
                 port: state => state.socket.port,
                 loadingRestart: state => state.socket.loadingRestart,
                 loadingRestartFirmware: state => state.socket.loadingRestartFirmware,
+                loadingRebootHost: state => state.socket.loadingRebootHost,
+                loadingShutdownHost: state => state.socket.loadingShutdownHost,
             }),
             ...mapMutations([
                 'setLoadingRestart',
@@ -48,6 +52,14 @@
                 this.$store.commit('setLoadingRestartFirmware', true);
                 this.$socket.sendObj('post_printer_firmware_restart', { }, "responseRestartFirmware");
             },
+            doRebootHost() {
+                this.$store.commit('setLoadingRebootHost', true);
+                this.$socket.sendObj('post_machine_reboot', { });
+            },
+            doShutdownHost() {
+                this.$store.commit('setLoadingShutdownHost', true);
+                this.$socket.sendObj('post_machine_shutdown', { });
+            },
         }
     }
 </script>

src/components/panels/StatusPanel.vue

@@ -43,7 +43,7 @@
                 <v-flex grow class="equal-width">
                     <v-layout column>
                         <v-flex tag="strong">Filament used</v-flex>
-                        <v-flex tag="span">{{ filament_used.toFixed(2) }}mm</v-flex>
+                        <v-flex tag="span">{{ filament_total.toFixed(2) }}mm</v-flex>
                     </v-layout>
                 </v-flex>
                 <v-flex grow class="equal-width">
@@ -73,13 +73,13 @@
                 <v-flex grow class="equal-width">
                     <v-layout column>
                         <v-flex tag="strong">Filament</v-flex>
-                        <v-flex tag="span">{{ filament_used > 0 && current_file_filament_used > 0 ? formatTime(print_time / (filament_used / current_file_filament_used) - print_time) : '--' }}</v-flex>
+                        <v-flex tag="span">{{ (filament_used > 0 && current_file_filament_total > filament_used) ? formatTime(print_time / (filament_used / current_file_filament_total) - print_time) : '--' }}</v-flex>
                     </v-layout>
                 </v-flex>
                 <v-flex grow class="equal-width">
                     <v-layout column>
                         <v-flex tag="strong">Slicer</v-flex>
-                        <v-flex tag="span">{{ current_file_estimated_time > print_time ? formatTime(current_file_estimated_time - print_time) : formatTime(0) }}</v-flex>
+                        <v-flex tag="span">{{ current_file_estimated_time > print_time ? formatTime(current_file_estimated_time - print_time) : '--'}}</v-flex>
                     </v-layout>
                 </v-flex>
             </v-layout>
@@ -132,7 +132,7 @@
                 'current_file_size',
                 'current_file_metadata',
                 'current_file_estimated_time',
-                'current_file_filament_used',
+                'current_file_filament_total',
                 'is_printing',
             ]),
         },

src/main.js

@@ -1,5 +1,6 @@
 import Vue from 'vue'
-import JRPCWS from './plugins/json-rpc-websocket'
+//import WebSocketClient from './plugins/wsClient'
+import webSocketService from './services/websocket'
 import App from './App.vue'
 import vuetify from './plugins/vuetify'
 import VueResource from 'vue-resource'
@@ -22,12 +23,19 @@ Vue.component('vue-headful', vueHeadful);
 fetch('/config.json').then(res => res.json())
   .then(file => {
     store.commit('setSettings', file);
-    Vue.use(JRPCWS, 'ws://' + store.state.socket.hostname + ':' + store.state.socket.port + '/websocket', {
-      store: store,
-      reconnectEnabled: true,
-      reconnectInterval: store.state.socket.reconnectInterval,
-      reconnectAttempts: store.state.socket.reconnectAttempts,
+
+    /*const socketClient = new WebSocketClient('ws://' + store.state.socket.hostname + ':' + store.state.socket.port + '/websocket', {
+        store: store,
+        reconnectEnabled: true,
+        reconnectInterval: store.state.socket.reconnectInterval,
     });
+    socketClient.connect()
+    Vue.prototype.$socket = socketClient*/
+
+    Vue.use(webSocketService, {
+      store,
+      url: 'ws://' + store.state.socket.hostname + ':' + store.state.socket.port + '/websocket'
+    })
 
     new Vue({
       vuetify,

src/pages/Console.vue

@@ -82,6 +82,7 @@
 </template>
 <script>
     import { mapState, mapGetters } from 'vuex';
+    import Vue from "vue";
 
     export default {
         data () {
@@ -131,8 +132,9 @@
         },
         methods: {
             doSend() {
+                window.console.log('send gcode: '+this.gcode);
                 this.loadingSendGcode = true;
-                this.$socket.sendObj('post_printer_gcode', { script: this.gcode }, "sendGcode");
+                Vue.prototype.$webSocketsSendObj('post_printer_gcode', { script: this.gcode }, "sendGcode");
                 this.lastCommands.push(this.gcode);
                 this.gcode = "";
                 this.lastCommandNumber = null;