diff --git a/gallery/src/demos/demo-hui-picture-elements-card.ts b/gallery/src/demos/demo-hui-picture-elements-card.ts index aa991d7706..8c01770306 100644 --- a/gallery/src/demos/demo-hui-picture-elements-card.ts +++ b/gallery/src/demos/demo-hui-picture-elements-card.ts @@ -76,6 +76,55 @@ const CONFIGS = [ left: 35% `, }, + { + heading: "Card with header", + config: ` +- type: picture-elements + image: /images/floorplan.png + title: My House + elements: + - type: service-button + title: Lights Off + style: + top: 97% + left: 90% + padding: 0px + service: light.turn_off + service_data: + entity_id: group.all_lights + - type: icon + icon: mdi:cctv + entity: camera.demo_camera + style: + top: 12% + left: 6% + transform: rotate(-60deg) scaleX(-1) + --iron-icon-height: 30px + --iron-icon-width: 30px + --iron-icon-stroke-color: black + --iron-icon-fill-color: rgba(50, 50, 50, .75) + - type: image + entity: light.bed_light + tap_action: + action: toggle + image: /images/light_bulb_off.png + state_image: + 'on': /images/light_bulb_on.png + state_filter: + 'on': brightness(130%) saturate(1.5) drop-shadow(0px 0px 10px gold) + 'off': brightness(80%) saturate(0.8) + style: + top: 35% + left: 65% + width: 7% + padding: 50px 50px 100px 50px + - type: state-icon + entity: binary_sensor.movement_backyard + style: + top: 8% + left: 35% + `, + }, ]; class DemoPicElements extends PolymerElement { diff --git a/src/panels/lovelace/cards/hui-picture-elements-card.ts b/src/panels/lovelace/cards/hui-picture-elements-card.ts index 02f669b612..83114f772e 100644 --- a/src/panels/lovelace/cards/hui-picture-elements-card.ts +++ b/src/panels/lovelace/cards/hui-picture-elements-card.ts @@ -63,15 +63,15 @@ class HuiPictureElementsCard extends LitElement implements LovelaceCard { return html` ${this.renderStyle()} -
+ ${ this._config.elements.map((elementConfig: LovelaceElementConfig) => this._createHuiElement(elementConfig) @@ -85,9 +85,9 @@ class HuiPictureElementsCard extends LitElement implements LovelaceCard { private renderStyle(): TemplateResult { return html`