Add speed config for custom effect

It seems we cannot adjust the effect speed after-the-fact, so need to
include it here (for use amongst the service call)

This commit also introduced a small `default` config data structure (as
existing uses won't have this value by default)

cypress/e2e/card.cy.js

@@ -59,6 +59,7 @@ describe('magic home party', () => {
           expect(hass.callService).to.be.calledWith('flux_led', 'set_custom_effect', {
             entity_id: cardConfig.entities,
             colors: cardConfig.colours,
+            speed_pct: 20,
             transition: 'gradual',
           });
         });

src/const.ts

@@ -1,5 +1,9 @@
 import { css } from 'lit';
-import { Colours } from './types';
+import { Colours, MagicHomePartyConfig } from './types';
+
+export const DEFAULT_CONFIG: Partial<MagicHomePartyConfig> = {
+  speed: 20,
+}
 
 export const CARD_VERSION = '0.0.1';
 

src/editor.ts

@@ -1,7 +1,7 @@
 import { fireEvent, HomeAssistant } from 'custom-card-helpers';
 import { css, html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
-import { colours } from './const';
+import { colours, DEFAULT_CONFIG } from './const';
 import './elements/chip';
 import './elements/entities-picker';
 import './elements/palette';
@@ -16,16 +16,19 @@ export class MagicHomePartyEditor extends LitElement {
   @state() private config!: MagicHomePartyConfig;
   @state() private selectedColours: Colour[] = [];
   @state() private selectedEntities: string[] = [];
+  @state() private speed: number = 50;
 
   public setConfig(config: MagicHomePartyConfig) {
     this.config = {
+      ...DEFAULT_CONFIG,
       ...config,
       colours: config.colours || [],
       entities: config.entities || [],
     };
 
     this.selectedColours = this.config.colours;
     this.selectedEntities = this.config.entities;
+    this.speed = this.config.speed;
   }
 
   public render() {
@@ -62,6 +65,14 @@ export class MagicHomePartyEditor extends LitElement {
         @value-changed=${this._entitiesChanged}
       >
       </magic-home-party-entities-picker>
+
+      <h3>Transition speed</h3>
+      <ha-selector
+        .label="Speed"
+        .selector=${{number: {min: 1, max: 100, step: 1, mode: "slider", unit_of_measurement: "%"}}}
+        .value=${this.speed}
+        @value-changed=${this._speedChanged}
+      ></ha-selector>
     `;
   }
 
@@ -92,11 +103,18 @@ export class MagicHomePartyEditor extends LitElement {
     this._updateConfig();
   };
 
+  private _speedChanged(event: any) {
+    event.stopPropagation();
+    this.speed = event.detail.value;
+    this._updateConfig();
+  }
+
   private _updateConfig() {
     const newConfig = {
       ...this.config,
       colours: this.selectedColours,
       entities: this.selectedEntities,
+      speed: this.speed,
     };
 
     this.config = newConfig;

src/magic-home-party-card.ts

@@ -1,7 +1,7 @@
 import { HomeAssistant, LovelaceCardEditor } from 'custom-card-helpers';
 import { css, html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
-import { CARD_VERSION, RADIUS } from './const';
+import { CARD_VERSION, DEFAULT_CONFIG, RADIUS } from './const';
 import './elements/palette';
 import { MagicHomePartyConfig } from './types';
 import { labelColour, linearGradient } from './util';
@@ -28,6 +28,7 @@ export class MagicHomeParty extends LitElement {
 
   setConfig(config: MagicHomePartyConfig) {
     this.config = {
+      ...DEFAULT_CONFIG,
       ...config,
       title: '',
       entities: config.entities || [],
@@ -82,6 +83,7 @@ export class MagicHomeParty extends LitElement {
     this.hass.callService('flux_led', 'set_custom_effect', {
       entity_id: this.config.entities,
       colors: this.config.colours,
+      speed_pct: this.config.speed,
       transition: 'gradual',
     });
 

src/types.ts

@@ -7,6 +7,7 @@ export interface MagicHomePartyConfig extends LovelaceCardConfig {
   title?: string
   entities: string[]
   colours: Colour[]
+  speed: number
 }
 
 export type EntityFilter = (entity: {entity_id: string}) => boolean