feat: show controller / hot end fan status

fluidd-core · Dec 1, 2020 · e47faa9 · e47faa9
1 parent 0bd6d4d
commit e47faa9
Show file tree

Hide file tree

Showing 15 changed files with 201 additions and 222 deletions.
diff --git a/src/components/cards/configuration/EndStopsCard.vue b/src/components/cards/configuration/EndStopsCard.vue
@@ -17,7 +17,7 @@
         class="py-1"
         v-for="(item, name) in endStops"
         :key="name">
-        <span class="grey--text text--lighten-1 text-h5 mr-5">{{ name }}</span>
+        <span class="grey--text focus--text mr-5">{{ name }}</span>
         <v-chip
           :color="(item === 'open') ? 'secondary' : 'warning'"
           class="ml-2"

diff --git a/src/components/cards/settings/TemperaturePresetSettingsCard.vue b/src/components/cards/settings/TemperaturePresetSettingsCard.vue
@@ -7,7 +7,7 @@
 
       <div v-for="(preset, i) in presets" :key="i">
         <v-layout align-center >
-          <div class="grey--text text--lighten-1 text-h5 mr-4">{{ preset.name }}</div>
+          <div class="grey--text focus--text mr-4">{{ preset.name }}</div>
           <v-chip
             label
             class="mx-1 my-2"

diff --git a/src/components/inputs/InputSlider.vue b/src/components/inputs/InputSlider.vue
@@ -1,10 +1,11 @@
 <template>
 <div>
-  <div class="d-flex justify-start">
-    <div class="grey--text text--darken-1 align-self-end">{{ label }}</div>
-    <div class="grey--text text-h5 ml-auto" :class="{ 'text--darken-2': disabled, 'text--lighten-1': !disabled }">{{ newValue.toFixed() }}<small>{{valueSuffix}}</small></div>
-  </div>
+  <v-layout align-end>
+    <div class="grey--text text--darken-1 font-weight-regular">{{ label }}</div>
+    <div class="grey--text focus--text ml-auto" :class="{ 'text--darken-2': disabled, 'text--lighten-1': !disabled }">{{ newValue.toFixed() }}<small>{{valueSuffix}}</small></div>
+  </v-layout>
   <v-slider
+    v-if="!readonly"
     @end="emitChange(newValue)"
     @input="updateValue"
     @update:error="updateError"
@@ -20,34 +21,21 @@
     hide-details
   >
     <template v-slot:prepend>
-      <v-btn
-        :disabled="
-          readonly ||
-          disabled ||
-          newValue === 0"
+      <v-icon
+        :disabled="readonly || disabled || newValue === 0"
         @click="clickChange(newValue - 1)"
-        :min-width="40"
-        class="pa-0"
-        small
-        color="secondary">
-        <v-icon color="grey lighten-2">
-          $minus
-        </v-icon>
-      </v-btn>
+        color="grey lighten-2">
+        $minus
+      </v-icon>
     </template>
 
     <template v-slot:append>
-      <v-btn
+      <v-icon
         :disabled="readonly || disabled || newValue === max"
         @click="clickChange(newValue + 1)"
-        :min-width="40"
-        class="pa-0"
-        small
-        color="secondary">
-        <v-icon color="grey lighten-2">
-          $plus
-        </v-icon>
-      </v-btn>
+        color="grey lighten-2">
+        $plus
+      </v-icon>
     </template>
   </v-slider>
 </div>

diff --git a/src/components/widgets/FansWidget.vue b/src/components/widgets/FansWidget.vue
@@ -2,14 +2,18 @@
   <!-- Fans -->
   <v-row no-gutters class="mb-4">
     <v-col class="">
-      <input-slider
-        label="Part Fan"
-        value-suffix="%"
-        :value="partFanSpeed"
-        :rules="rules"
-        :disabled="!klippyConnected"
-        @input="setPartFanSpeed($event)">
-      </input-slider>
+      <div v-for="(fan, i) in fans" :key="i">
+        <input-slider
+          :label="fan.prettyName"
+          value-suffix="%"
+          :value="fan.speed * 100"
+          :rules="rules"
+          :disabled="!klippyConnected"
+          :readonly="!fan.controllable"
+          @input="setFanSpeed(fan, $event)">
+        </input-slider>
+        <v-divider class="my-2" v-if="i < fans.length - 1"></v-divider>
+      </div>
     </v-col>
   </v-row>
 </template>
@@ -19,13 +23,18 @@ import { Component, Mixins } from 'vue-property-decorator'
 import InputSlider from '@/components/inputs/InputSlider.vue'
 import UtilsMixin from '@/mixins/utils'
 import { Waits } from '@/globals'
+import { Fan } from '@/store/socket/types'
 
 @Component({
   components: {
     InputSlider
   }
 })
 export default class FansWidget extends Mixins(UtilsMixin) {
+  get fans () {
+    return this.$store.getters['socket/getFans']
+  }
+
   get partFanSpeed () {
     return this.$store.state.socket.printer.fan.speed * 100
   }
@@ -42,9 +51,16 @@ export default class FansWidget extends Mixins(UtilsMixin) {
     }
   ]
 
-  setPartFanSpeed (target: number) {
-    target = Math.ceil(target * 2.55)
-    this.sendGcode(`M106 S${target}`, Waits.onSetFanSpeed)
+  setFanSpeed (fan: Fan, target: number) {
+    // If this is a controllable fan, it's either the part fan [fan] or a generic fan [fan_generic].
+    if (fan.type === 'fan') {
+      target = Math.ceil(target * 2.55)
+      this.sendGcode(`M106 S${target}`, Waits.onSetFanSpeed)
+    }
+    if (fan.type === 'fan_generic') {
+      target = target / 100
+      this.sendGcode(`SET_FAN_SPEED FAN=${fan.name} SPEED=${target}`, Waits.onSetFanSpeed)
+    }
   }
 }
 </script>

diff --git a/src/components/widgets/PrintStatusWidget.vue b/src/components/widgets/PrintStatusWidget.vue
@@ -9,7 +9,7 @@
             :value="timeEstimates.progress"
             color="primary"
           >
-          <span class="percentComplete grey--text text-h5 font-weight-normal">{{ timeEstimates.progress }}%</span>
+          <span class="percentComplete grey--text focus--text">{{ timeEstimates.progress }}%</span>
         </v-progress-circular>
       </v-col>
       <v-col class="d-flex flex-column" style="overflow: hidden;" align="start">

diff --git a/src/components/widgets/SpeedAndFlowAdjustWidget.vue b/src/components/widgets/SpeedAndFlowAdjustWidget.vue
@@ -1,31 +1,30 @@
 <template>
-  <v-row class="my-0">
+  <div>
     <!-- Speed and Flow Adjust -->
-    <v-col cols="12" sm="6" class="py-0">
-      <input-slider
-        label="Speed"
-        :value="speed"
-        value-suffix="%"
-        :disabled="!klippyConnected"
-        :loading="hasWait(waits.onSetSpeed)"
-        :min="0"
-        :max="200"
-        @input="setSpeed($event, waits.onSetSpeed)">
-      </input-slider>
-    </v-col>
-    <v-col cols="12" sm="6" class="py-0">
-      <input-slider
-        label="Flow"
-        :value="flow"
-        value-suffix="%"
-        :disabled="!klippyConnected"
-        :loading="hasWait(waits.onSetFlow)"
-        :min="0"
-        :max="200"
-        @input="setFlow($event, waits.onSetFlow)">
-      </input-slider>
-    </v-col>
-  </v-row>
+    <input-slider
+      label="Speed"
+      value-suffix="%"
+      :value="speed"
+      :disabled="!klippyConnected"
+      :loading="hasWait(waits.onSetSpeed)"
+      :min="0"
+      :max="200"
+      @input="setSpeed($event, waits.onSetSpeed)">
+    </input-slider>
+
+    <v-divider class="my-2"></v-divider>
+
+    <input-slider
+      label="Flow"
+      value-suffix="%"
+      :value="flow"
+      :disabled="!klippyConnected"
+      :loading="hasWait(waits.onSetFlow)"
+      :min="0"
+      :max="200"
+      @input="setFlow($event, waits.onSetFlow)">
+    </input-slider>
+  </div>
 </template>
 
 <script lang="ts">

diff --git a/src/components/widgets/TemperatureTargetsWidget.vue b/src/components/widgets/TemperatureTargetsWidget.vue
@@ -52,7 +52,7 @@
           {{ item.name }}
           <small class="ml-3" v-if="item.target === 0">off</small>
         </v-col>
-        <v-col cols="6" sm="4" class="py-1 px-2 grey--text text--lighten-1 text-h5">
+        <v-col cols="6" sm="4" class="py-1 px-2 grey--text focus--text">
           {{ item.temperature.toFixed(1) }}<small>°C</small>
         </v-col>
         <v-col cols="6" sm="4" class="py-1 px-2">
@@ -65,54 +65,56 @@
         </v-col>
       </v-row>
 
-      <v-row v-for="item in fans" :key="item.name">
-        <v-col cols="12" sm="4" class="py-1 px-2 text-subtitle-1 grey--text text--darken-1">
-          {{ item.name }}
-          <v-icon
-            v-if="item.speed > 0 && item.target > 0"
-            color="grey darken-1"
-            class="ml-2 spin"
-            small>
-            $fan
-          </v-icon>
-          <small v-if="item.speed > 0 && item.target > 0">
-            {{ (item.speed * 100).toFixed(0) }}%
-          </small>
+      <template v-for="item in fans">
+        <v-row :key="item.name" v-if="item.type === 'temperature_fan'">
+          <v-col cols="12" sm="4" class="py-1 px-2 text-subtitle-1 grey--text text--darken-1">
+            {{ item.name }}
+            <v-icon
+              v-if="item.speed > 0 && item.target > 0"
+              color="grey darken-1"
+              class="ml-2 spin"
+              small>
+              $fan
+            </v-icon>
+            <small v-if="item.speed > 0 && item.target > 0">
+              {{ (item.speed * 100).toFixed(0) }}%
+            </small>
 
-          <small class="ml-2" v-if="item.speed <= 0 && item.target > 0">
-            standby
-          </small>
-          <small class="ml-2" v-if="item.speed <=0 && item.target <= 0">off</small>
-        </v-col>
-        <v-col cols="6" sm="4" class="py-1 px-2 grey--text text--lighten-1 text-h5">
-          {{ item.temperature.toFixed(1) }}<small>°C</small>
-        </v-col>
-        <v-col cols="6" sm="4" class="py-1 px-2 grey--text text--lighten-1 text-h5">
-          <input-temperature
-            :value="item.target"
-            @input="setFanTargetTemp(item.name, $event)"
-            :max="item.maxTemp"
-            :min="item.minTemp"
-          ></input-temperature>
-        </v-col>
-      </v-row>
+            <small class="ml-2" v-if="item.speed <= 0 && item.target > 0">
+              standby
+            </small>
+            <small class="ml-2" v-if="item.speed <=0 && item.target <= 0">off</small>
+          </v-col>
+          <v-col cols="6" sm="4" class="py-1 px-2 grey--text focus--text">
+            {{ item.temperature.toFixed(1) }}<small>°C</small>
+          </v-col>
+          <v-col cols="6" sm="4" class="py-1 px-2 grey--text focus--text">
+            <input-temperature
+              :value="item.target"
+              @input="setFanTargetTemp(item.name, $event)"
+              :max="item.maxTemp"
+              :min="item.minTemp"
+            ></input-temperature>
+          </v-col>
+        </v-row>
+      </template>
 
       <v-row v-for="item in sensors" :key="item.name">
         <v-col cols="12" sm="4" class="py-1 px-2 text-subtitle-1 grey--text text--darken-1">
           {{ item.name }}
         </v-col>
-        <v-col cols="6" sm="4" class="py-1 px-2 grey--text text--lighten-1 text-h5">
+        <v-col cols="6" sm="4" class="py-1 px-2 grey--text focus--text">
           <v-tooltip right>
             <template v-slot:activator="{ on, attrs }">
               <span v-bind="attrs" v-on="on">{{ item.temperature.toFixed(1) }}<small>°C</small></span>
             </template>
             <span>
-              <span class="amber--text text--lighten-1">high {{ item.maxMeasuredTemp.toFixed(1) }}°C</span><br />
-              <span class="cyan--text">low {{ item.minMeasuredTemp.toFixed(1) }}°C</span>
+              <span class="amber--text text--lighten-1">high {{ item.measured_max_temp.toFixed(1) }}°C</span><br />
+              <span class="cyan--text">low {{ item.measured_min_temp.toFixed(1) }}°C</span>
             </span>
           </v-tooltip>
         </v-col>
-        <v-col cols="6" sm="4" class="py-1 px-2 grey--text text--lighten-1 text-h5">
+        <v-col cols="6" sm="4" class="py-1 px-2 grey--text focus--text">
         </v-col>
       </v-row>
 

diff --git a/src/components/widgets/ToolheadPositionWidget.vue b/src/components/widgets/ToolheadPositionWidget.vue
@@ -3,19 +3,19 @@
     <v-row no-gutters>
       <v-col cols="12" lg="4" class="d-flex flex-row justify-start justify-lg-space-around flex-lg-column align-center">
         <div class="text-subtitle-1 grey--text text--darken-1 mx-2">X</div>
-        <div class="grey--text text--lighten-1 text-h5">
+        <div class="grey--text focus--text">
           {{ toolheadPosition[0].toFixed(2) }}
         </div>
       </v-col>
       <v-col cols="12" lg="4" class="d-flex flex-row justify-start justify-lg-space-around flex-lg-column align-center">
         <div class="text-subtitle-1 grey--text text--darken-1 mx-2">Y</div>
-        <div class="grey--text text--lighten-1 text-h5">
+        <div class="grey--text focus--text">
           {{ toolheadPosition[1].toFixed(2) }}
         </div>
       </v-col>
       <v-col cols="12" lg="4" class="d-flex flex-row justify-start justify-lg-space-around flex-lg-column align-center">
         <div class="text-subtitle-1 grey--text text--darken-1 mx-2">Z</div>
-        <div class="grey--text text--lighten-1 text-h5">
+        <div class="grey--text focus--text">
           {{ toolheadPosition[2].toFixed(2) }}
         </div>
       </v-col>

diff --git a/src/components/widgets/ToolheadWidget.vue b/src/components/widgets/ToolheadWidget.vue
@@ -13,11 +13,12 @@
       </v-col>
     </v-row>
 
-    <v-row no-gutters>
-      <v-col cols="12">
+    <v-row>
+      <v-col cols="12" sm="6">
         <!-- Part cooling -->
         <fans-widget></fans-widget>
-
+      </v-col>
+      <v-col cols="12" sm="6">
         <!-- Speed and Flow Adjustments  -->
         <speed-and-flow-adjust-widget></speed-and-flow-adjust-widget>
       </v-col>

diff --git a/src/scss/global.scss b/src/scss/global.scss
@@ -10,6 +10,14 @@
   // padding: 0 0.4rem;
 }
 
+// Focused text
+.focus--text {
+  font-size: 1.25rem !important;
+  font-weight: 300 !important;
+  letter-spacing: 0.0125em !important;
+  line-height: auto;
+}
+
 /* Add a class to help us spin an icon if we need.. */
 .spin {
   animation-name: spin;