diff --git a/README.md b/README.md index 2b7fe1b..5cc073e 100644 --- a/README.md +++ b/README.md @@ -50,9 +50,34 @@ This card is quite simple so there are only a few options: | Name | Type | Default | Description | | ---- | ---- | ------- | ----------- | | type | string | `custom:media-source-image-card` | **REQUIRED** | -| image | string | | **REQUIRED** The path to the image in media source format. i.e: media-source://media_source/local/my_image.jpg | | +| image | string | | **REQUIRED** The path to the image in media source format. i.e: media-source://media_source/local/my_image.jpg | | entity_id | string | | The entity you want to toggle when card is clicked | | apply_grayscale | boolean | | If `true` applies a grayscale on the image when entity is `off` | +| tap_action | string | `toggle` | Action to perform on click. One of `none`, `toggle` or `call-service`. See actions below | + +## Actions +By default, when the card is clicked, it would toggle the entity. You can customize these action to be one of this: + +- `none`: nothing happens +- `toggle`: the entity is toggled (default behaviour) +- `call-service`: a service is called with a custom configuration + +### Call Service +This is a simple call service example: + +```yaml +type: custom:media-source-image-card +image: media-source://media_source/local/banana.png +entity_id: input_boolean.boolean_test +apply_grayscale: true +tap_action: + action: call-service + service: input_boolean.turn_on + target: + entity_id: input_boolean.boolean_test +``` + +If no `target` is provided, the `entity_id` field is used. ## Examples @@ -85,4 +110,18 @@ entity_id: switch.light_switch apply_grayscale: true ``` -![basic_control_on](./images/basic_control_on.png) ![basic_control_of](./images/basic_control_off.png) \ No newline at end of file +![basic_control_on](./images/basic_control_on.png) ![basic_control_of](./images/basic_control_off.png) + +### Image with switching a boolean input helper using a service call + +```yaml +type: custom:media-source-image-card +image: media-source://media_source/local/banana.png +entity_id: input_boolean.boolean_test +apply_grayscale: true +tap_action: + action: call-service + service: input_boolean.turn_on + target: + entity_id: input_boolean.boolean_test +``` \ No newline at end of file diff --git a/media-source-image-card.js b/media-source-image-card.js index d30fc03..f103a93 100644 --- a/media-source-image-card.js +++ b/media-source-image-card.js @@ -89,13 +89,24 @@ class MediaSourceImageCard extends HTMLElement { } handleClick() { - if (this.config.entity_id) this._hass.callService( - 'homeassistant', - 'toggle', - { - entity_id: this.config.entity_id - } - ); + // actions: toggle, call-service, none, (unsupported -->) more-info, navigate, url + // handle none case: + if (this.config.tap_action == 'none') return; + // default values for toggle case: + let domain = 'homeassistant'; + let service = 'toggle'; + let target = { entity_id: this.config.entity_id }; + let data = {}; + // handle call-service case: + if (this.config.tap_action?.action == 'call-service') { + let _data = this.config.tap_action; + domain = _data.service.split('.')[0]; + service = _data.service.split('.')[1]; + if (_data.target) target = _data.target; + if (_data.data) data = _data.data; + } + // call service: + this._hass.callService(domain, service, target, data); } getCardSize() {