add control-buttons to dashboard. add temperature_fans to heaters, ad…

…d restart buttons, reconnect api

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

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>

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"

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

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

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,

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

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;

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>