Add support for script domain

README.md

@@ -4,6 +4,17 @@
 
 A button card with integrated slider for `light, switch, fan, cover, input_boolean, media_player, climate, lock` entities.
 
+Fork maintained by [@lizsugar](https://www.github.com/lizsugar) and has the following modifications:
+
+- Automation entities supported
+- Slider moves based on relative position, not absolute
+- Option to show attribute
+
+Also includes fan speed modifications from [@rohankapoorcom](https://github.com/rohankapoorcom).
+
+## TODO:
+- [ ] Add a tap action on the card independent of slider enabled/disabled
+
 ![Preview][preview]
 ![Preview 2][preview-2]
 

hacs.json

@@ -1,5 +1,5 @@
 {
-    "name": "Slider Button Card",
+    "name": "Slider Button Card (Liz Sugar mods)",
     "render_readme": true,
     "filename": "slider-button-card.js",
     "domains": ["light", "fan", "cover", "switch", "input_boolean", "media_player"]

src/controllers/automation-controller.ts

@@ -0,0 +1,39 @@
+import { STATES_OFF } from 'custom-card-helpers';
+import { Controller } from './controller';
+
+export class AutomationController extends Controller {
+  _min = 0;
+  _max = 1;
+  _targetValue;
+  _invert = false;
+  _clickPosition;
+  _clickPositionLock;
+  _originalValue;
+  _originalValueLock;
+
+  get _value(): number {
+    return !STATES_OFF.includes(this.stateObj.state)
+      ? 1
+      : 0;
+  }
+
+  set _value(value) {
+    const service = value > 0 ? 'turn_on' : 'turn_off';
+    this._hass.callService('automation', service, {
+      // eslint-disable-next-line @typescript-eslint/camelcase
+      entity_id: this.stateObj.entity_id
+    });
+  }
+
+  get _step(): number {
+    return 1;
+  }
+
+  get label(): string {
+    if (this.percentage > 0) {
+      return this._hass.localize('component.automation.state._.on');
+    }
+    return this._hass.localize('component.automation.state._.off');
+  }
+
+}

src/controllers/binary-sensor-controller.ts

@@ -0,0 +1,25 @@
+import { STATES_OFF } from 'custom-card-helpers';
+import { Controller } from './controller';
+
+export class BinarySensorController extends Controller {
+  _min = 0;
+  _max = 1;
+  _targetValue;
+  _invert = false;
+  _step = 1;
+  _clickPosition;
+  _clickPositionLock;
+  _originalValue;
+  _originalValueLock;
+
+  get _value(): number {
+    return !STATES_OFF.includes(this.stateObj.state)
+      ? 1
+      : 0;
+  }
+
+  get label(): string {
+    return this.stateObj.state;
+  }
+
+}

src/controllers/climate-controller.ts

@@ -5,6 +5,10 @@ import { Controller } from './controller';
 export class ClimateController extends Controller {
    _targetValue;
   _invert = false;
+  _clickPosition;
+  _clickPositionLock;
+  _originalValue;
+  _originalValueLock;
 
   get _value(): number {
     return this.stateObj.attributes.temperature;

src/controllers/controller.ts

@@ -20,6 +20,10 @@ export abstract class Controller {
   _sliderPrevColor = '';
 
   abstract _value?: number;
+  abstract _originalValue?: number;
+  abstract _originalValueLock?: boolean;
+  abstract _clickPosition?: number;
+  abstract _clickPositionLock?: boolean;
   abstract _targetValue?: number;
   abstract _min?: number;
   abstract _max?: number;
@@ -67,6 +71,58 @@ export abstract class Controller {
     }
   }
 
+  set originalValue(value: number) {
+    this._originalValue = value;
+  }
+
+  get originalValue(): number {
+    //return this.originalValue;
+    if (this._originalValue === 0) {
+      return 0;
+    }
+    if (this._originalValue) {
+      return Math.round(this._originalValue / this.step) * this.step;
+    }
+    return 0;
+  }
+
+  get originalValueLock(): boolean {
+    if (this._originalValueLock == true) {
+      return true;
+    }
+    return false;
+  }
+
+  set originalValueLock(lock: boolean) {
+    this._originalValueLock = lock;
+  }
+
+  set clickPosition(value: number) {
+    this._clickPosition = value;
+  }
+
+  get clickPosition(): number {
+    //return this.clickPosition;
+    if (this._clickPosition === 0) {
+      return 0;
+    }
+    if (this._clickPosition) {
+      return Math.round(this._clickPosition / this.step) * this.step;
+    }
+    return 0;
+  }
+
+  get clickPositionLock(): boolean {
+    if (this._clickPositionLock == true) {
+      return true;
+    }
+    return false;
+  }
+
+  set clickPositionLock(lock: boolean) {
+    this._clickPositionLock = lock;
+  }
+
   get targetValue(): number {
     if (this._targetValue === 0) {
       return 0;
@@ -91,6 +147,13 @@ export abstract class Controller {
     return `${this.targetValue}`;
   }
 
+  get attributeLabel(): string {
+    if (this._config.attribute) {
+      return this.stateObj.attributes[this._config.attribute];
+    }
+    return '';
+  }
+
   get hidden(): boolean {
     return false;
   }
@@ -99,8 +162,8 @@ export abstract class Controller {
     return true;
   }
 
-  get hasToggle(): boolean {
-    return this._config.slider?.toggle_on_click ?? false;
+  get disableSliding(): boolean {
+    return this._config.slider?.disable_sliding ?? false;
   }
 
   get toggleValue(): number {
@@ -120,7 +183,7 @@ export abstract class Controller {
   }
 
   get isSliderDisabled(): boolean {
-    return this.isUnavailable ? this.isUnavailable : this.hasToggle;
+    return this.isUnavailable ? this.isUnavailable : this.disableSliding;
   }
 
   get min(): number {
@@ -236,7 +299,7 @@ export abstract class Controller {
   moveSlider(event: any, {left, top, width, height}): number {
     let percentage = this.calcMovementPercentage(event, {left, top, width, height});
     percentage = this.applyStep(percentage);
-    percentage = normalize(percentage, 0, 100);
+    //percentage = normalize(percentage, 0, 100);
     if (!this.isValuePercentage) {
       percentage = percentageToValue(percentage, this.min, this.max);
     }

src/controllers/cover-controller.ts

@@ -7,6 +7,10 @@ export class CoverController extends Controller {
   _min = 0;
   _targetValue;
   _invert = true;
+  _clickPosition;
+  _clickPositionLock;
+  _originalValue;
+  _originalValueLock;
 
   get attribute(): string {
     if (this._config.slider?.attribute?.length && this.allowedAttributes.includes(this._config.slider?.attribute)) {

src/controllers/fan-controller.ts

@@ -5,6 +5,10 @@ export class FanController extends Controller {
   _min = 0;
   _targetValue;
   _invert = false;
+  _clickPosition;
+  _clickPositionLock;
+  _originalValue;
+  _originalValueLock;
 
   get _value(): number {
     return this.isUnavailable || STATES_OFF.includes(this.state)

src/controllers/get-controller.ts

@@ -1,14 +1,19 @@
 import { computeDomain } from 'custom-card-helpers';
 import { Domain, SliderButtonCardConfig } from '../types';
+import { AutomationController } from './automation-controller';
 import { ClimateController } from './climate-controller';
 import { Controller } from './controller';
 import { CoverController } from './cover-controller';
 import { FanController } from './fan-controller';
 import { InputBooleanController } from './input-boolean-controller';
+import { InputNumberController } from './input-number-controller';
 import { LightController } from './light-controller';
 import { LockController } from './lock-controller';
 import { MediaController } from './media-controller';
 import { SwitchController } from './switch-controller';
+import { SensorController } from './sensor-controller';
+import { BinarySensorController } from './binary-sensor-controller';
+import { ScriptController } from './script-controller';
 
 export class ControllerFactory {
   static getInstance(config: SliderButtonCardConfig): Controller {
@@ -17,11 +22,16 @@ export class ControllerFactory {
       [Domain.LIGHT]: LightController,
       [Domain.FAN]: FanController,
       [Domain.SWITCH]: SwitchController,
+      [Domain.AUTOMATION]: AutomationController,
       [Domain.COVER]: CoverController,
       [Domain.INPUT_BOOLEAN]: InputBooleanController,
+      [Domain.INPUT_NUMBER]: InputNumberController,
       [Domain.MEDIA_PLAYER]: MediaController,
       [Domain.CLIMATE]: ClimateController,
       [Domain.LOCK]: LockController,
+      [Domain.SENSOR]: SensorController,
+      [Domain.BINARY_SENSOR]: BinarySensorController,
+      [Domain.SCRIPT]: ScriptController,
     };
     if (typeof mapping[domain] === 'undefined') {
       throw new Error(`Unsupported entity type: ${domain}`)

src/controllers/input-boolean-controller.ts

@@ -6,6 +6,10 @@ export class InputBooleanController extends Controller {
   _max = 1;
   _targetValue;
   _invert = false;
+  _clickPosition;
+  _clickPositionLock;
+  _originalValue;
+  _originalValueLock;
 
   get _value(): number {
     return !STATES_OFF.includes(this.stateObj.state)

src/controllers/input-number-controller.ts

@@ -0,0 +1,64 @@
+import { Controller } from './controller';
+import { normalize, percentageToValue, toPercentage } from '../utils';
+import { SliderConfig } from '../types';
+
+export class InputNumberController extends Controller {
+  _targetValue;
+  _invert = false;
+  _clickPosition;
+  _clickPositionLock;
+  _originalValue;
+  _originalValueLock;
+  // _min;
+  // _max;
+
+  get _value(): number {
+    return this.stateObj.state;
+  }
+
+  set _value(value) {
+    //value = percentageToValue(value, this._min, this._max);
+    this._hass.callService('input_number', 'set_value', {
+      // eslint-disable-next-line @typescript-eslint/camelcase
+      entity_id: this.stateObj.entity_id,
+      value: value,
+    });
+  }
+
+  get _min(): number {
+    return this.stateObj.attributes.min;
+  }
+
+  get _max(): number {
+    return this.stateObj.attributes.max;
+  }
+
+  // get _targetValue(): number {
+  //   return this._value;
+  // }
+
+  // set _targetValue(value: number) {
+  //   if (value !== this.targetValue) {
+  //     if (value > this._min) {
+  //       value = this._min;
+  //     }
+  //     if (value > this._max) {
+  //       value = this._max;
+  //     }
+  //     this._targetValue = value;
+  //   }
+  // }
+
+  get isValuePercentage(): boolean {
+    return false;
+  }
+
+  get _step(): number {
+    return this.stateObj.attributes.step;
+  }
+
+  get label(): string {
+    return this.stateObj.attributes.unit_of_measurement ? `${this.targetValue} ${this.stateObj.attributes.unit_of_measurement}` : `${this.targetValue}`;
+  }
+
+}

src/controllers/light-controller.ts

@@ -13,6 +13,10 @@ export class LightController extends Controller {
   _step = 1;
   _targetValue;
   _invert = false;
+  _clickPosition;
+  _clickPositionLock;
+  _originalValue;
+  _originalValueLock;
 
   get attribute(): string {
     const attr = this._config.slider?.attribute as LightAttributes;
@@ -210,7 +214,7 @@ export class LightController extends Controller {
     if (supported.length === 1 && supported[0] === LightAttributes.ON_OFF) {
       return true;
     }
-    return this._config.slider?.toggle_on_click ?? false;
+    return this._config.slider?.disable_sliding ?? false;
   }
 
   get hasSlider(): boolean {

src/controllers/lock-controller.ts

@@ -6,6 +6,10 @@ export class LockController extends Controller {
   _max = 1;
   _targetValue;
   _invert = false;
+  _clickPosition;
+  _clickPositionLock;
+  _originalValue;
+  _originalValueLock;
 
   get _value(): number {
     return !STATES_OFF.includes(this.stateObj.state)

src/controllers/media-controller.ts

@@ -7,6 +7,10 @@ export class MediaController extends Controller {
   _step = 1;
   _targetValue;
   _invert = false;
+  _clickPosition;
+  _clickPositionLock;
+  _originalValue;
+  _originalValueLock;
 
   get _value(): number {
     return this.isUnavailable || this.stateObj?.attributes?.is_volume_muted