fix: LED controls behavior (#723)

Signed-off-by: Mathis Mensing <[email protected]> Signed-off-by: Pedro Lamas <[email protected]> Co-authored-by: Pedro Lamas <[email protected]>
fluidd-core · Jun 19, 2022 · 0cbf650 · 0cbf650
1 parent 9de473e
commit 0cbf650
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 48 deletions.
diff --git a/src/components/ui/AppColorPicker.vue b/src/components/ui/AppColorPicker.vue
@@ -48,7 +48,7 @@
         </v-icon>
 
         <v-icon
-          v-if="white"
+          v-if="supportedChannels.includes('W')"
           :color="whiteColor.hexString"
           large
         >
@@ -62,15 +62,14 @@
           <!-- <pre>{{primaryColor.hexString}}</pre> -->
           <!-- standard full color picker -->
           <app-iro-color-picker
-            v-if="primaryColor"
             :color="primaryColor.hexString"
             :options="primaryOptions"
             @color:change="handleColorChange('primary', $event)"
           />
 
           <!-- white channel color picker -->
           <app-iro-color-picker
-            v-if="white"
+            v-if="supportedChannels.includes('W')"
             class="mt-4"
             :color="whiteColor.hexString"
             :options="whiteOptions"
@@ -112,7 +111,7 @@
             <div>B</div>
           </div>
           <div
-            v-if="white"
+            v-if="supportedChannels.includes('W')"
             class="color-input"
           >
             <v-text-field
@@ -168,6 +167,9 @@ export default class AppColorPicker extends Vue {
   @Prop({ type: Boolean, default: false })
   dot!: boolean
 
+  @Prop({ type: String, default: 'RGB' })
+  supportedChannels!: string
+
   menu = false
 
   @Ref('card')
@@ -251,7 +253,7 @@ export default class AppColorPicker extends Vue {
 
   created () {
     this.primaryColor = this.getColor(this.primary)
-    if (this.whiteColor) this.whiteColor = this.getColor(this.white)
+    if (this.supportedChannels.includes('W')) this.whiteColor = this.getColor(this.white)
   }
 
   getColor (color: string) {

diff --git a/src/components/widgets/outputs/OutputItem.vue b/src/components/widgets/outputs/OutputItem.vue
@@ -13,7 +13,7 @@
     />
 
     <output-led
-      v-if="item.type === 'neopixel' || item.type === 'dotstar'"
+      v-if="ledTypes.includes(item.type)"
       :key="item.key"
       :led="item"
     />
@@ -25,7 +25,7 @@ import { Component, Vue, Prop } from 'vue-property-decorator'
 import OutputFan from '@/components/widgets/outputs/OutputFan.vue'
 import OutputPin from '@/components/widgets/outputs/OutputPin.vue'
 import OutputLed from '@/components/widgets/outputs/OutputLed.vue'
-// import { Fan, OutputPin } from '@/store/printer/types'
+import { Fan, Led, OutputPin as IOutputPin } from '@/store/printer/types'
 
 @Component({
   components: {
@@ -36,7 +36,7 @@ import OutputLed from '@/components/widgets/outputs/OutputLed.vue'
 })
 export default class Outputs extends Vue {
   @Prop({ type: Object, required: true })
-  item!: object
+  item!: Fan | Led | IOutputPin
 
   get fanTypes () {
     return [
@@ -47,5 +47,13 @@ export default class Outputs extends Vue {
       'fan'
     ]
   }
+
+  get ledTypes () {
+    return [
+      'led',
+      'neopixel',
+      'dotstar'
+    ]
+  }
 }
 </script>
diff --git a/src/components/widgets/outputs/OutputLed.vue b/src/components/widgets/outputs/OutputLed.vue
@@ -15,6 +15,7 @@
         :primary="primaryColor"
         :white="whiteColor"
         :title="led.prettyName"
+        :supported-channels="supportedChannels"
         dot
         @change="handleColorChange"
       />
@@ -26,11 +27,25 @@
 import { Component, Mixins, Prop } from 'vue-property-decorator'
 import { IroColor } from '@irojs/iro-core'
 import StateMixin from '@/mixins/state'
+import { Led } from '@/store/printer/types'
+
+interface RgbwColor {
+  r: number;
+  g: number;
+  b: number;
+  w: number;
+}
 
 @Component({})
 export default class OutputLed extends Mixins(StateMixin) {
   @Prop({ type: Object, required: true })
-  led!: any
+  led!: Led
+
+  channelLookup: {[key: string]: string} = { r: 'RED', g: 'GREEN', b: 'BLUE', w: 'WHITE' }
+
+  get supportedChannels () {
+    return this.led.config.color_order[0]
+  }
 
   get primaryColor () {
     const vals = this.convertTo(this.led.color_data[0])
@@ -52,39 +67,34 @@ export default class OutputLed extends Mixins(StateMixin) {
   handleColorChange (value: { channel: string; color: IroColor }) {
     // Will return an update to either the primary or white channel.
     // Gather the existing values..
-    const currentVals = this.led.color_data[0]
+    const channels = this.supportedChannels.toLowerCase()
+    let currentVals = Object.fromEntries(this.led.color_data[0].map((value: number, idx: number) => [channels[idx], value]))
     const newVals = this.convertFrom(value.color.rgb)
 
     if (value.channel === 'primary') {
-      if (this.whiteColor) newVals.w = currentVals.W
+      // RGB picker update
+      currentVals = { ...currentVals, ...newVals }
     } else {
-      if (this.whiteColor) newVals.w = newVals.r
-      newVals.r = currentVals.R
-      newVals.g = currentVals.G
-      newVals.b = currentVals.B
+      // White channel update
+      currentVals.w = newVals.r
     }
 
-    const map: { [index: string]: string } = { r: 'RED', g: 'GREEN', b: 'BLUE', w: 'WHITE' }
-    let s = `SET_LED LED=${this.led.name}`
-
-    Object.keys(newVals).forEach((key) => {
-      s += ` ${map[key]}=${newVals[key]}`
-    })
-    this.sendGcode(s)
+    this.sendGcode(`SET_LED LED=${this.led.name} ${Object.entries(currentVals).map(([key, val]) => `${this.channelLookup[key]}=${val}`).join(' ')}`)
   }
 
-  convertTo (o: any) {
+  convertTo (o: any): RgbwColor {
     const r: any = {}
+    const channels = this.supportedChannels.toLowerCase()
     Object.keys(o).forEach((key) => {
-      r[key.toLowerCase()] = Math.round(o[key] * 255)
+      r[channels[key]] = Math.round(o[key] * 255)
     })
     return r
   }
 
-  convertFrom (o: any) {
+  convertFrom (o: any): RgbwColor {
     const r: any = {}
     Object.keys(o).forEach((key) => {
-      r[key.toLowerCase()] = Number.parseFloat((o[key] / 255).toPrecision(2))
+      r[key] = Number.parseFloat((o[key] / 255).toPrecision(2))
     })
     return r
   }

diff --git a/src/components/widgets/outputs/Outputs.vue b/src/components/widgets/outputs/Outputs.vue
@@ -47,7 +47,7 @@
 import { Component, Mixins } from 'vue-property-decorator'
 import OutputItem from '@/components/widgets/outputs/OutputItem.vue'
 import StateMixin from '@/mixins/state'
-import { Fan, OutputPin } from '@/store/printer/types'
+import { Fan, Led, OutputPin } from '@/store/printer/types'
 
 @Component({
   components: {
@@ -56,13 +56,13 @@ import { Fan, OutputPin } from '@/store/printer/types'
 })
 export default class Outputs extends Mixins(StateMixin) {
   get all () {
-    const items: Array<Fan | OutputPin> = [
+    const items: Array<Fan | Led | OutputPin> = [
       ...this.$store.getters['printer/getAllFans'],
       ...this.$store.getters['printer/getPins'],
       ...this.$store.getters['printer/getAllLeds']
     ]
-    let col1: Array<Fan | OutputPin> = []
-    let col2: Array<Fan | OutputPin> = []
+    let col1: Array<Fan | Led | OutputPin> = []
+    let col2: Array<Fan | Led | OutputPin> = []
     if (items.length > 1) {
       const half = Math.ceil(items.length / 2)
       col1 = items.splice(0, half)

diff --git a/src/store/printer/getters.ts b/src/store/printer/getters.ts
@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import { GetterTree } from 'vuex'
 import { RootState } from '../types'
-import { PrinterState, Heater, Fan, OutputPin, Sensor, RunoutSensor, Extruder, MCU } from './types'
+import { PrinterState, Heater, Fan, Led, OutputPin, Sensor, RunoutSensor, Extruder, MCU } from './types'
 import { get } from 'lodash-es'
 import getKlipperType from '@/util/get-klipper-type'
 
@@ -340,6 +340,7 @@ export const getters: GetterTree<PrinterState, RootState> = {
 
   getAllLeds: (_, getters) => {
     return getters.getOutputs([
+      'led',
       'neopixel',
       'dotstar'
     ])
@@ -391,7 +392,7 @@ export const getters: GetterTree<PrinterState, RootState> = {
   /**
   * Return available fans and output pins
   */
-  getOutputs: (state, getters) => (filter?: string[]): Array<Fan | OutputPin> => {
+  getOutputs: (state, getters) => (filter?: string[]): Array<Fan | Led | OutputPin> => {
     // Fans..
     const fans = [
       'temperature_fan',
@@ -408,6 +409,7 @@ export const getters: GetterTree<PrinterState, RootState> = {
 
     // LEDs...
     const leds = [
+      'led',
       'neopixel',
       'dotstar'
     ]
@@ -417,6 +419,7 @@ export const getters: GetterTree<PrinterState, RootState> = {
       'fan',
       'fan_generic',
       'output_pin',
+      'led',
       'neopixel',
       'dotstar'
     ]
@@ -433,6 +436,7 @@ export const getters: GetterTree<PrinterState, RootState> = {
       'controller_fan',
       'heater_fan',
       'fan_generic',
+      'led',
       'neopixel',
       'dotstar'
     ]
@@ -441,7 +445,7 @@ export const getters: GetterTree<PrinterState, RootState> = {
       ? filter
       : [...fans, ...outputPins, ...leds]
 
-    const pins: Array<Fan | OutputPin> = []
+    const pins: Array<Fan | Led | OutputPin> = []
 
     for (const pin in state.printer) {
       const split = pin.split(' ')
@@ -464,7 +468,7 @@ export const getters: GetterTree<PrinterState, RootState> = {
 
         const config = getters.getPrinterSettings(pin)
 
-        let output: Fan | OutputPin = {
+        let output: Fan | Led | OutputPin = {
           ...state.printer[pin],
           config: { ...config },
           name,

diff --git a/src/store/printer/types.ts b/src/store/printer/types.ts
@@ -23,25 +23,23 @@ export interface MCUData {
   [index: string]: string | number;
 }
 
-export interface Heater {
+export type OutputType<T = Record<string, any>> = {
+  config: T
   name: string;
   prettyName: string;
   key: string;
   color?: string;
+  type: string;
+}
+export interface Heater extends OutputType {
   temperature: number;
   target: number;
   power: number;
   minTemp?: number;
   maxTemp?: number;
 }
 
-export interface Fan {
-  config: FanConfig;
-  name: string;
-  prettyName: string;
-  key: string;
-  color?: string;
-  type: string;
+export interface Fan extends OutputType<FanConfig> {
   controllable: boolean;
   speed?: number;
   rpm?: number | null;
@@ -52,22 +50,23 @@ export interface Fan {
 }
 
 export interface FanConfig {
-  [index: string]: string | number | undefined;
+  [key: string]: string | number | undefined;
   pin: string;
   max_power: number;
   off_below: number;
 }
 
-export interface OutputPin {
-  name: string;
-  prettyName: string;
-  key: string;
+export interface Led extends OutputType {
   color?: string;
-  type: string;
+  color_data: number[][]
+}
+
+export interface OutputPin extends OutputType<OutputPinConfig> {
   controllable: boolean;
   pwm: boolean;
   scale: number;
   static: number;
+  value: number;
 }
 
 export interface OutputPinConfig {