From 3051c9a033ce2a846f80875943df8d6b0deb43ab Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Mon, 9 Mar 2020 00:46:36 +0100
Subject: [PATCH] add control-buttons to dashboard. add temperature_fans to
 heaters, add restart buttons, reconnect api

---
 src/App.vue                              |  14 ++-
 src/components/panels/ControlPanel.vue   | 109 +++++++++++++++++++++++
 src/components/panels/StatusPanel.vue    |   6 +-
 src/components/panels/TempchartPanel.vue |   9 +-
 src/components/panels/ToolsPanel.vue     |  25 +++++-
 src/components/panels/index.js           |   2 +
 src/inputs/ToolInput.vue                 |   4 +-
 src/main.js                              |   5 +-
 src/pages/Dashboard.vue                  |   9 +-
 src/store/index.js                       | 103 +++++++++++++++++++--
 src/store/variables.js                   |   4 +-
 11 files changed, 263 insertions(+), 27 deletions(-)
 create mode 100644 src/components/panels/ControlPanel.vue

diff --git a/src/App.vue b/src/App.vue
index 9b99f4a84..740141dfa 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -46,6 +46,15 @@
             </v-scroll-y-transition>
         </v-content>
 
+        <v-dialog v-model="isConnecting"  persistent width="300">
+            <v-card color="primary" dark >
+                <v-card-text class="pt-2">
+                    Connecting to Klipper
+                    <v-progress-linear indeterminate color="white" class="mb-0"></v-progress-linear>
+                </v-card-text>
+            </v-card>
+        </v-dialog>
+
         <v-footer app class="d-block">
             <span v-if="version">{{ version }}</span>
             <span class="float-right">&copy; 2019</span>
@@ -76,10 +85,10 @@ export default {
             this.$socket.sendObj('get_printer_objects', {}, 'getObjectInfo');
             this.$socket.sendObj('get_printer_status', { heater: [] }, 'getObjectInfo');
             this.$socket.sendObj('post_printer_subscriptions', {
-                gcode: ["gcode_position", "speed", "speed_factor", "extrude_factor", "busy", "abs_extrude"],
+                gcode: [],
                 toolhead: [],
                 virtual_sdcard: [],
-                header: [],
+                heater: [],
                 heater_bed: [],
                 extruder: ["temperature", "target"],
                 fan: [],
@@ -100,6 +109,7 @@ export default {
             version: state => state.printer.version,
             loadingEmergencyStop: state => state.socket.loadingEmergencyStop,
             isConnected: state => state.socket.isConnected,
+            isConnecting: state => !state.socket.isConnected,
         }),
     },
     methods: {
diff --git a/src/components/panels/ControlPanel.vue b/src/components/panels/ControlPanel.vue
new file mode 100644
index 000000000..e75490b6b
--- /dev/null
+++ b/src/components/panels/ControlPanel.vue
@@ -0,0 +1,109 @@
+<style>
+
+</style>
+
+<template>
+    <v-card>
+        <v-col xs12 md12>
+            <v-row class="pl-3 pr-3 text-center">
+                <v-btn-toggle borderless no-gutters style="flex-wrap: nowrap; width: 100%;" >
+                    <v-btn @click="doSend('X-100')" cols="1" class="flex-grow-1 flex-shrink-0"><v-icon left>mdi-chevron-left</v-icon><span>X-100</span></v-btn>
+                    <v-btn @click="doSend('X-10')" cols="1" class="flex-grow-1 flex-shrink-0"><v-icon left>mdi-chevron-left</v-icon><span>X-10</span></v-btn>
+                    <v-btn @click="doSend('X-1')" cols="1" class="flex-grow-1 flex-shrink-0"><v-icon left>mdi-chevron-left</v-icon><span>X-1</span></v-btn>
+                    <v-btn @click="doHomeX" :color="homedAxes.includes('x') ? 'primary' : 'warning'" :loading="loadingHomeX"><span>Home X</span></v-btn>
+                    <v-btn @click="doSend('X+1')" cols="1" class="flex-grow-1 flex-shrink-0"><span>X+1</span><v-icon right>mdi-chevron-right</v-icon></v-btn>
+                    <v-btn @click="doSend('X+10')" cols="1" class="flex-grow-1 flex-shrink-0"><span>X+10</span><v-icon right>mdi-chevron-right</v-icon></v-btn>
+                    <v-btn @click="doSend('X+100')" cols="1" class="flex-grow-1 flex-shrink-0"><span>X+100</span><v-icon right>mdi-chevron-right</v-icon></v-btn>
+                </v-btn-toggle>
+            </v-row>
+            <v-row class="pl-3 pr-3 mt-3 text-center">
+                <v-btn-toggle borderless no-gutters style="flex-wrap: nowrap; width: 100%;" >
+                    <v-btn @click="doSend('Y-100')" cols="1" class="flex-grow-1 flex-shrink-0"><v-icon left>mdi-chevron-left</v-icon><span>Y-100</span></v-btn>
+                    <v-btn @click="doSend('Y-10')" cols="1" class="flex-grow-1 flex-shrink-0"><v-icon left>mdi-chevron-left</v-icon><span>Y-10</span></v-btn>
+                    <v-btn @click="doSend('Y-1')" cols="1" class="flex-grow-1 flex-shrink-0"><v-icon left>mdi-chevron-left</v-icon><span>Y-1</span></v-btn>
+                    <v-btn @click="doHomeY" :color="homedAxes.includes('y') ? 'primary' : 'warning'" :loading="loadingHomeY"><span>Home Y</span></v-btn>
+                    <v-btn @click="doSend('Y+1')" cols="1" class="flex-grow-1 flex-shrink-0"><span>Y+1</span><v-icon right>mdi-chevron-right</v-icon></v-btn>
+                    <v-btn @click="doSend('Y+10')" cols="1" class="flex-grow-1 flex-shrink-0"><span>Y+10</span><v-icon right>mdi-chevron-right</v-icon></v-btn>
+                    <v-btn @click="doSend('Y+100')" cols="1" class="flex-grow-1 flex-shrink-0"><span>Y+100</span><v-icon right>mdi-chevron-right</v-icon></v-btn>
+                </v-btn-toggle>
+            </v-row>
+            <v-row class="pl-3 pr-3 mt-3 text-center">
+                <v-btn-toggle borderless no-gutters style="flex-wrap: nowrap; width: 100%;" >
+                    <v-btn @click="doSend('Z-25')" cols="1" class="flex-grow-1 flex-shrink-0"><v-icon left>mdi-chevron-left</v-icon><span>Z-25</span></v-btn>
+                    <v-btn @click="doSend('Z-1')" cols="1" class="flex-grow-1 flex-shrink-0"><v-icon left>mdi-chevron-left</v-icon><span>Z-1</span></v-btn>
+                    <v-btn @click="doSend('Z-0.1')" cols="1" class="flex-grow-1 flex-shrink-0"><v-icon left>mdi-chevron-left</v-icon><span>Z-0.1</span></v-btn>
+                    <v-btn @click="doHomeZ" :color="homedAxes.includes('z') ? 'primary' : 'warning'" :loading="loadingHomeZ"><span>Home Z</span></v-btn>
+                    <v-btn @click="doSend('Z+0.1')" cols="1" class="flex-grow-1 flex-shrink-0"><span>Z+0.1</span><v-icon right>mdi-chevron-right</v-icon></v-btn>
+                    <v-btn @click="doSend('Z+1')" cols="1" class="flex-grow-1 flex-shrink-0"><span>Z+1</span><v-icon right>mdi-chevron-right</v-icon></v-btn>
+                    <v-btn @click="doSend('Z+25')" cols="1" class="flex-grow-1 flex-shrink-0"><span>Z+25</span><v-icon right>mdi-chevron-right</v-icon></v-btn>
+                </v-btn-toggle>
+            </v-row>
+            <v-row class="px-3 mt-3">
+                <v-spacer></v-spacer>
+                <v-btn @click="doRestart" :loading="loadingRestart" color="error"><v-icon left>mdi-cached</v-icon>Restart</v-btn>
+                <v-btn @click="doRestartFirmware" :loading="loadingRestartFirmware" color="error" class="ml-3"><v-icon left>mdi-cached</v-icon>Firmware Restart</v-btn>
+            </v-row>
+        </v-col>
+    </v-card>
+</template>
+
+<script>
+    import { mapState, mapMutations } from 'vuex'
+
+    export default {
+        components: {
+
+        },
+        data: function() {
+            return {
+
+            }
+        },
+        computed: {
+            ...mapState({
+                loadingHomeX: state => state.socket.loadingHomeX,
+                loadingHomeY: state => state.socket.loadingHomeY,
+                loadingHomeZ: state => state.socket.loadingHomeZ,
+                loadingRestart: state => state.socket.loadingRestart,
+                loadingRestartFirmware: state => state.socket.loadingRestartFirmware,
+                homedAxes: state => state.printer.toolhead.homed_axes,
+            }),
+            ...mapMutations([
+                'setLoadingHomeX',
+                'setLoadingHomeY',
+                'setLoadingHomeZ',
+                'setLoadingRestart',
+                'setLoadingRestartFirmware',
+            ])
+        },
+        methods: {
+            doHomeX() {
+                this.$store.commit('setLoadingHomeX', true);
+                this.$socket.sendObj('post_printer_gcode', { script: "G28 X" }, "responseHomeX");
+            },
+            doHomeY() {
+                this.$store.commit('setLoadingHomeY', true);
+                this.$socket.sendObj('post_printer_gcode', { script: "G28 Y" }, "responseHomeY");
+            },
+            doHomeZ() {
+                this.$store.commit('setLoadingHomeZ', true);
+                this.$socket.sendObj('post_printer_gcode', { script: "G28 Z" }, "responseHomeZ");
+            },
+            doSend(gcode) {
+                gcode = "G91" + "\n" +
+                    "G1 " + gcode + " F6000" + "\n" +
+                    "G90";
+
+                this.$socket.sendObj('post_printer_gcode', { script: gcode }, "sendGcode");
+            },
+            doRestart() {
+                this.$store.commit('setLoadingRestart', true);
+                this.$socket.sendObj('post_printer_restart', { }, "responseRestart");
+            },
+            doRestartFirmware() {
+                this.$store.commit('setLoadingRestartFirmware', true);
+                this.$socket.sendObj('post_printer_firmware_restart', { }, "responseRestartFirmware");
+            },
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/src/components/panels/StatusPanel.vue b/src/components/panels/StatusPanel.vue
index 28ee04ac6..0fa46dae8 100644
--- a/src/components/panels/StatusPanel.vue
+++ b/src/components/panels/StatusPanel.vue
@@ -35,8 +35,8 @@
                     </v-layout>
                 </v-flex>
             </v-layout>
-            <v-divider class="my-2" v-if="(toolhead && toolhead.status === 'Printing') || is_paused"></v-divider>
-            <v-layout wrap class=" text-center" v-if="(toolhead && toolhead.status === 'Printing') || is_paused">
+            <v-divider class="my-2" v-if="(toolhead && toolhead.status === 'Printing' && printProgress > 0) || is_paused"></v-divider>
+            <v-layout wrap class=" text-center" v-if="(toolhead && toolhead.status === 'Printing' && printProgress > 0) || is_paused">
                 <v-flex col tag="strong" class="category-header">
                     Printstatus
                 </v-flex>
@@ -59,7 +59,7 @@
                     </v-layout>
                 </v-flex>
             </v-layout>
-            <v-layout wrap class=" text-center" v-if="(toolhead && toolhead.status === 'Printing') || is_paused">
+            <v-layout wrap class=" text-center" v-if="(toolhead && toolhead.status === 'Printing' && printProgress > 0) || is_paused">
                 <v-layout column class="mt-2" >
                     <v-progress-linear
                         :value="printProgress * 100"
diff --git a/src/components/panels/TempchartPanel.vue b/src/components/panels/TempchartPanel.vue
index 3666f29d1..aa6292f79 100644
--- a/src/components/panels/TempchartPanel.vue
+++ b/src/components/panels/TempchartPanel.vue
@@ -4,7 +4,11 @@
             <v-list-item-avatar color="grey"><v-icon dark>fa-thermometer-three-quarters</v-icon></v-list-item-avatar>
             <v-list-item-content>
                 <v-list-item-title class="headline">Temperature Chart</v-list-item-title>
-                <v-list-item-subtitle>{{ heatersCount }} heaters</v-list-item-subtitle>
+                <v-list-item-subtitle>
+                    <span>{{ heatersCount }} heaters</span>
+                    <span v-if="temperature_fans.length === 1">, {{ temperature_fans.length }} fan</span>
+                    <span v-if="temperature_fans.length > 1">, {{ temperature_fans.length }} fans</span>
+                </v-list-item-subtitle>
             </v-list-item-content>
         </v-list-item>
         <v-divider class="my-2"></v-divider>
@@ -37,7 +41,8 @@
                 datasets: state => state.temperaturChart.datasets,
             }),
             ...mapGetters([
-                'heatersCount'
+                'heatersCount',
+                'temperature_fans'
             ])
         },
         methods: {
diff --git a/src/components/panels/ToolsPanel.vue b/src/components/panels/ToolsPanel.vue
index fed9c6721..66c7e8e24 100644
--- a/src/components/panels/ToolsPanel.vue
+++ b/src/components/panels/ToolsPanel.vue
@@ -10,7 +10,11 @@
             <v-list-item-avatar color="grey"><v-icon dark>fa-thermometer-three-quarters</v-icon></v-list-item-avatar>
             <v-list-item-content>
                 <v-list-item-title class="headline">Heaters</v-list-item-title>
-                <v-list-item-subtitle>{{ heatersCount }} heaters</v-list-item-subtitle>
+                <v-list-item-subtitle>
+                    {{ heatersCount }} heaters
+                    <span v-if="temperature_fans.length === 1">, {{ temperature_fans.length }} fan</span>
+                    <span v-if="temperature_fans.length > 1">, {{ temperature_fans.length }} fans</span>
+                </v-list-item-subtitle>
             </v-list-item-content>
         </v-list-item>
         <v-divider class="my-2"></v-divider>
@@ -29,7 +33,20 @@
                     </v-col>
                     <v-col class="text-center py-0 vertical_align_center"><span>{{ heater.temperature.toFixed(1) }}°C</span></v-col>
                     <v-col class="text-center py-0 vertical_align_center">
-                        <toolInput :name="heater.name" :target="heater.target" ></toolInput>
+                        <toolInput :name="heater.name" :target="heater.target" command="SET_HEATER_TEMPERATURE" attribute-name="HEATER" ></toolInput>
+                    </v-col>
+                </v-row>
+            </div>
+            <div v-for="(fan, index) in temperature_fans" v-bind:key="index+99" >
+                <v-divider class="my-2"></v-divider>
+                <v-row class="pl-3 pr-3 heater-row">
+                    <v-col class="text-center py-0">
+                        <b>{{ fan.name }}</b><br />
+                        <small>{{ fan.target > 0 && fan.speed > 0 ? (fan.speed * 100).toFixed(0)+"%" : (fan.target > 0 ? "standby" : "off") }}</small>
+                    </v-col>
+                    <v-col class="text-center py-0 vertical_align_center"><span>{{ fan.temperature.toFixed(1) }}°C</span></v-col>
+                    <v-col class="text-center py-0 vertical_align_center">
+                        <toolInput :name="fan.name" :target="fan.target" command="SET_TEMPERATURE_FAN_TARGET" attribute-name="temperature_fan" ></toolInput>
                     </v-col>
                 </v-row>
             </div>
@@ -41,7 +58,6 @@
     import { mapGetters } from 'vuex'
     import toolInput from '../../inputs/ToolInput'
 
-
     export default {
         components: {
             toolInput
@@ -54,7 +70,8 @@
         computed: {
             ...mapGetters([
                 'heaters',
-                'heatersCount'
+                'heatersCount',
+                'temperature_fans'
             ])
         },
         methods: {
diff --git a/src/components/panels/index.js b/src/components/panels/index.js
index 429bbe83b..676e3aa80 100644
--- a/src/components/panels/index.js
+++ b/src/components/panels/index.js
@@ -3,10 +3,12 @@ import Vue from 'vue'
 import StatusPanel from './StatusPanel.vue'
 import ToolsPanel from './ToolsPanel.vue'
 import TempchartPanel from './TempchartPanel.vue'
+import ControlPanel from "./ControlPanel";
 
 Vue.component('status-panel', StatusPanel);
 Vue.component('tools-panel', ToolsPanel);
 Vue.component('tempchart-panel', TempchartPanel);
+Vue.component('control-panel', ControlPanel);
 
 export default {
     StatusPanel,
diff --git a/src/inputs/ToolInput.vue b/src/inputs/ToolInput.vue
index 021e596d1..2d6bfabf0 100644
--- a/src/inputs/ToolInput.vue
+++ b/src/inputs/ToolInput.vue
@@ -25,13 +25,15 @@
         props: {
             name: String,
             target: Number,
+            command: String,
+            attributeName: String,
         },
         computed: {
 
         },
         methods: {
             setTemps() {
-                this.$socket.sendObj('post_printer_gcode', {script: 'SET_HEATER_TEMPERATURE HEATER='+this.name+' TARGET='+this.value});
+                this.$socket.sendObj('post_printer_gcode', {script: this.command+' '+this.attributeName+'='+this.name+' TARGET='+this.value});
             }
         },
         watch: {
diff --git a/src/main.js b/src/main.js
index 29ef1c25e..b8692a3e0 100644
--- a/src/main.js
+++ b/src/main.js
@@ -10,7 +10,10 @@ import { hostname } from './store/variables'
 import 'vue-toast-notification/dist/index.css';
 
 Vue.use(JRPCWS, 'ws://' + hostname + '/websocket', {
-  store: store
+  store: store,
+  reconnectEnabled: true,
+  reconnectInterval: 3000,
+  recconectAttempts: 1000,
 });
 
 Vue.config.productionTip = false;
diff --git a/src/pages/Dashboard.vue b/src/pages/Dashboard.vue
index 0f1e7c414..c99acc58e 100644
--- a/src/pages/Dashboard.vue
+++ b/src/pages/Dashboard.vue
@@ -1,12 +1,11 @@
 <template>
     <v-row>
-        <v-col xs12 sm6 md4>
+        <v-col class="col-sm-12 col-md-7">
             <status-panel></status-panel>
-            <div class="mt-6">
-                <tools-panel></tools-panel>
-            </div>
+            <tools-panel class="mt-6"></tools-panel>
+            <control-panel class="mt-6"></control-panel>
         </v-col>
-        <v-col xs12 sm6 md8>
+        <v-col class="col-sm-12 col-md-5">
             <tempchart-panel></tempchart-panel>
         </v-col>
     </v-row>
diff --git a/src/store/index.js b/src/store/index.js
index 78b450bde..e62ed3cfc 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -30,12 +30,18 @@ export default new Vuex.Store({
             loadingEmergencyStop: false,
             loadingPrintPause: false,
             loadingPrintResume: false,
+            loadingHomeX: false,
+            loadingHomeY: false,
+            loadingHomeZ: false,
+            loadingRestart: false,
+            loadingRestartFirmware: false,
         },
         printer: {
             hostname: '',
             version: '',
             toolhead: {
                 position: [],
+                homed_axes: [],
                 status: "",
                 print_time: 0,
                 printing_time: 0,
@@ -97,7 +103,34 @@ export default new Vuex.Store({
 
         heatersCount: (state, getters) => {
             return getters.heaters.length;
-        }
+        },
+
+        temperature_fans: state => {
+            let fans = [];
+
+            for (let [key, value] of Object.entries(state.printer)) {
+                let nameSplit = key.split(" ");
+
+                if (nameSplit[0] === "temperature_fan") {
+                    fans.push({
+                        name: nameSplit[1],
+                        target: value.target,
+                        temperature: value.temperature,
+                        speed: value.speed,
+                    });
+                }
+            }
+
+            return fans.sort((a, b) => {
+                let nameA = a.name.toUpperCase();
+                let nameB = b.name.toUpperCase();
+
+                if (nameA < nameB) return -1;
+                if (nameA > nameB) return 1;
+
+                return 0;
+            });
+        },
     },
 
     mutations: {
@@ -107,18 +140,23 @@ export default new Vuex.Store({
 
         setDisconnected (state) {
             state.socket.isConnected = false
+            Vue.prototype.$socket.reconnect();
         },
 
         setPrinterData(state, data) {
             Object.assign(state.printer, data);
 
-            if (state.object.heater.available_heaters.length) {
+            if (Array.isArray(state.object.heater.available_heaters) && state.object.heater.available_heaters.length) {
                 let boolAddValues = false;
                 let now = new Date();
 
                 if (state.temperaturChart.labels.length === 0 || now - state.temperaturChart.labels[state.temperaturChart.labels.length - 1] > temperaturChartSampleInterval) {
                     for (let [key, value] of Object.entries(data)) {
-                        if (state.object.heater.available_heaters.includes(key)) {
+                        let keySplit = key.split(" ");
+
+                        if (state.object.heater.available_heaters.includes(key) || keySplit[0] === "temperature_fan") {
+                            if (keySplit[0] === "temperature_fan") key = keySplit[1];
+
                             let index =  state.temperaturChart.datasets.findIndex(element => element.label === key);
 
                             if (index >= 0) state.temperaturChart.datasets[index].data.push(value.temperature.toFixed(1));
@@ -169,6 +207,14 @@ export default new Vuex.Store({
 
         setObjectData(state, data) {
             Object.assign(state.object, data);
+
+            for (let key of Object.keys(data)) {
+                let nameSplit = key.split(" ");
+
+                if (nameSplit[0] === "temperature_fan") {
+                    Vue.prototype.$socket.sendObj('post_printer_subscriptions', { [key]: [] });
+                }
+            }
         },
 
         setFileList(state, data) {
@@ -226,8 +272,29 @@ export default new Vuex.Store({
             state.socket.loadingPrintCancel = value;
         },
 
+        setLoadingHomeX(state, value) {
+            state.socket.loadingHomeX = value;
+        },
+
+        setLoadingHomeY(state, value) {
+            state.socket.loadingHomeY = value;
+        },
+
+        setLoadingHomeZ(state, value) {
+            state.socket.loadingHomeZ = value;
+        },
+
+        setLoadingRestart(state, value) {
+            state.socket.loadingRestart = value;
+        },
+
+        setLoadingRestartFirmware(state, value) {
+            state.socket.loadingRestartFirmware = value;
+        },
+
         reportError(state, data) {
-            Vue.$toast.error(data.message);
+            //Vue.$toast.error(data.message);
+            window.console.log(data);
         },
 
         setPausedState(state, data) {
@@ -302,9 +369,11 @@ export default new Vuex.Store({
                     break;
 
                 default:
-                    window.console.log("Default return");
-                    if (data.error) window.console.error("JSON-RPC: " + data.error.message);
-                    else window.console.log(data);
+                    if (data.result !== "ok") {
+                        window.console.log("Default return");
+                        if (data.error) window.console.error("JSON-RPC: " + data.error.message);
+                        else window.console.log(data);
+                    }
             }
         },
 
@@ -364,6 +433,26 @@ export default new Vuex.Store({
             commit('sendGcode', data);
         },
 
+        responseHomeX({commit}) {
+            commit('setLoadingHomeX', false);
+        },
+
+        responseHomeY({commit}) {
+            commit('setLoadingHomeY', false);
+        },
+
+        responseHomeZ({commit}) {
+            commit('setLoadingHomeZ', false);
+        },
+
+        responseRestart({commit}) {
+            commit('setLoadingRestart', false);
+        },
+
+        responseRestartFirmware({commit}) {
+            commit('setLoadingRestartFirmware', false);
+        },
+
         switchToDashboard() {
             router.push("/");
         }
diff --git a/src/store/variables.js b/src/store/variables.js
index 53de1f1a4..00301764b 100644
--- a/src/store/variables.js
+++ b/src/store/variables.js
@@ -1,2 +1,2 @@
-export const hostname = window.location.host;
-//export const hostname = "kossel.local:8080";
\ No newline at end of file
+//export const hostname = window.location.host;
+export const hostname = "voron250.local:8080";
\ No newline at end of file