Dynamic picture-elements (introducing group-element)

I love picture-elements and have used it to show a clickable image to control devices. Now I’ve created a group element that lets you create dynamic UIs for much smarter use of screen real-estate.

New version - 0.3 with even more capabilities

Using the element

There are many possibe usages to the group element (samples follow below)

  1. Build a cleaner user interface by showing relevant controls only when a hot spot is tapped. For example: tap your cover/blinds and show the controls; tap your dimmer and show its controls;
    No more clogged UIs or living without full control due to space contraints.
  2. Easier positioining - all group children elements position and size are based on % of the group element itself. So if you have a certain element or a set of elements that you reuse you can position them once relative to each other and then move the entire group.
  3. Build a dynamic UI - for example a universal remote control (TV/Receiver/STB) taking up very little space. You can combine group-element with group-toggle-button (coming soon).
  4. Eliminates the need to define input_boolean entities just to toggle visibility of UI items. Also gives you freedom to use the interactive interface by multiple users without conflicts of a shared input_boolean entity.

Element options

Name Type Default Since Description
type string required v0.1 custom:group-element
elements list required v0.1 Elements contained in the group. Any valid element hierarchy of picture-elements.
toggle_tap boolean false v0.1 Enable toggling visibility of children elements when tapped.
toggle_area_elements list v0.3 Elements to be shown within the group container even if elements_pos is defined (and so the elements under elements will render there).
visible boolean true v0.1 Sets initial visibility.
visible_style list v0.3 Styles to apply when group is visible (applied with !important).
grouping_code numeric -1 v0.1 When using multiple group-elements this allows to specify that only a single group with the same grouping code should be shown. All other groups sharing the same grouping_code are automatically hidden. (only works within the same level)
no_toggle_hide boolean false v0.3 Should the group only toggle to visible when clicked and not toggle to hide if clicked again. Useful for us with grouping_code when grouping will hide the other groups anyway.
fully_hide_other_groups_on_show boolean false v0.3 Fully hides all other groups sharing the same grouping_code when this group is shown. This includes also the elements under the toggle_area_elements if specified.

Elements position options (elements_pos)

If you want to separate the toggle area from the area that hosts the elements, use this object to set the position for the elements.
Note: All coordinates in this object are relative to the group parent and not to the group.

Name Type Default Since Description
left/right string v0.1 Sets the left/right position of the element container.
top string v0.1 Sets the top position of the element container.
width string v0.1 Sets the width position of the element container.
height string Sets the height position of the element container.
any other style string v0.1 Sets additional style properties on the element container.

Close_button object (close_button)

Optional button that hides the group on click in addition to tapping the group itself if toggle_tap is on

Name Type Default Since Description
show boolean false v0.1 Show the close button to enable closing the group (regardless of toggle_tap).
icon string hass:close v0.1 Sets the icon to show on the close button.

Style object (style)

Optional styles for the close button

You should position (and otherwise manipulate) the close button

Name Type Default Since Description
left/right string v0.1 Sets the left position of the close button (CSS).
top string v0.1 Sets the top position of the close button (CSS).
any other style string v0.1 Sets additional style properties on the close button.

Example usage

Basic setup

Group controls in a group that is initially hidden and shows when tapped. All elements are within the group.

- type: picture-elements
  image: /local/living-room.jpg
  elements:
    type: 'custom:group-element'
    toggle_tap: true
    visible: false
    style:
      height: 40%
      left: 67%
      top: 30%
      width: 25%
    - elements:
      # your elements go here - their size/position is relative to the group

Elements shown outside of hot spot (toggle area)

To show elements outside of the group area use the elements_pos object. This allows you to define a hot spot (in the group’s location) separate to the elements shown when the hot spot is tapped.

- type: picture-elements
  image: /local/living-room.jpg
  elements:
    - type: 'custom:group-element'
      visible: false
      toggle_tap: true
      style:
        # the group style determines the hotspot
        height: 40%
        left: 41%
        top: 30%
        width: 25%
      elements:
        # your elements go here - their size/position is relative to the group
      elements_pos:
        # the elements_pos style determine the location of the elements
        left: 10%
        top: 65%
        width: 80%
        height: 30%
        transform: none
        background-color: 'rgba(255, 255, 255, 0.6)'
        border-radius: 10px

Close button

You can hide the group by clicking a close button you can add and position

- type: picture-elements
  image: /local/living-room.jpg
  elements:
    - type: 'custom:group-element'
      visible: false
      toggle_tap: true
      style:
        # the group style determines the hotspot
        height: 40%
        left: 41%
        top: 30%
        width: 25%
      elements:
        # your elements go here - their size/position is relative to the group
      elements_pos:
        # the elements_pos style determine the location of the elements
        left: 10%
        top: 65%
        width: 80%
        height: 30%
        transform: none
        background-color: 'rgba(255, 255, 255, 0.6)'
        border-radius: 10px
      close_button:
        # the close button determines the location of the close button
        show: true
        style:
          background-color: 'rgba(255, 255, 255, 0.6)'
          border-color: black
          border-radius: 10px
          border-style: solid
          left: 1%
          top: 69%
          transform: none

Grouping

When you have multiple groups (group-element) that may reuse the same real estate it makes sense for one of them to hide all others when it is visible.
To do this, set the grouping_code to the same number on all groups that should share the real estate.

- type: picture-elements
  image: /local/living-room.jpg
  elements:
    # first group - with grouping_code of 1
    - type: 'custom:group-element'
      visible: false
      toggle_tap: true
      grouping_code: 1
      style:
        # the group style determines the hotspot
        height: 40%
        left: 41%
        top: 30%
        width: 25%
      elements:
        # your elements go here - their size/position is relative to the group
      elements_pos:
        # the elements_pos style determine the location of the elements
        left: 10%
        top: 65%
        width: 80%
        height: 30%
        transform: none
        background-color: 'rgba(255, 255, 255, 0.6)'
        border-radius: 10px
      close_button:
        # the close button determines the location of the close button
        show: true
        style:
          background-color: 'rgba(255, 255, 255, 0.6)'
          border-color: black
          border-radius: 10px
          border-style: solid
          left: 1%
          top: 69%
          transform: none

    # second group - also with grouping_code of 1
    # second group's element_pos & close_button is identical to group 1 and they share the 
    # same real-estate so they need to not be shown together
    - type: 'custom:group-element'
      visible: false
      toggle_tap: true
      grouping_code: 1
      style:
        # the group style determines the hotspot
        height: 40%
        left: 68%
        top: 30%
        width: 25%
      elements:
        # your elements go here - their size/position is relative to the group
      elements_pos:
        # the elements_pos style determine the location of the elements
        left: 10%
        top: 65%
        width: 80%
        height: 30%
        transform: none
        background-color: 'rgba(255, 255, 255, 0.6)'
        border-radius: 10px
      close_button:
        # the close button determines the location of the close button
        show: true
        style:
          background-color: 'rgba(255, 255, 255, 0.6)'
          border-color: black
          border-radius: 10px
          border-style: solid
          left: 1%
          top: 69%
          transform: none

Installation - go to https://github.com/custom-cards/group-element

13 Likes

Thanks for posting this and the great documentation! Haven’t gotten a chance to try this out yet but it looks promising!

Dear Joseph, thanks for this excellent piece of work. It allows me to create proper popup windows. Especially in combination with Thomas’ Button Card, this gives it a professional look and feel.

I was wondering though if it would be possible to add some behaviour for toggling:

  • Can we make the card hidden (not toggle) if it is visble while clicking on any other part of the picture element? (so outside of this cards area?) I’m using it on a wall mounted tabled and a close button is a bit hard to hit in my case

  • Would also be great if we could close the visble card after clicking on an element in the card (maybe after a definable delay? Case: I use it to click on an icon for my day scheme (day, evening, night, …). A popup with you card shows with 3 buttons where I can select the day scheme. Would be nice if the popup would close after clicking the button,

  • Would be absolutely powerfull if we could control the popups from automation. I don’t even know if that is possible at all.

Lots of questions and maybe not possible at all, but again, thank you for this element!!

Yazz.

Thanks for the feedback. I think the only reliable feature here would be a time based toggle. It’s not suitable for all scenarios but as the element should not interfere with other elements being clicked that is the best approach.
Would that help you?

For the same reason it’s also hard to detect other button taps to automatically close the group. I might try to find some time to see if it can reliably work.

To control popups from automation what you should do is define an input_boolean and then use the conditional element that is now available in HA (look at the picture elements documentation). Then you can create a conditional group already visible… I can maybe add visibility based on conditions later on.

Dear Joseph, thanks for getting back to me. For the automation part, the input_boolean will do the trick. I could also implement an automation to make it disappear after a certain amount of time. That would be a workaround for the ‘tap anywhere to close’ action that I am looking for.

Yazz.

How did you get the slider in the picture elements?
I can’t find a slider, and can’t find searching the forum or google?

@wabil I was looking for a solution myself and I found one, I’ve posted it there: Slider element on Picture Elements card

Hopefully you will find it useful for your need. Cheers!

Great idea and good documentation, but I get the error: d.setConfig is not a function

My HA version is 0.111.2 running with docker on unraid

configuration.yaml:

    - url: /local/group-element-bundle.js?v=0.5.0
      type: module

frontend.yaml:

 
 javascript_version: latest
 

ui-lovelace.yaml:

          - type: picture-elements
            image: /local/bilder/wohnzimmer-BS3.jpg
            elements:
              # first group - with grouping_code of 1
              - type: 'custom:group-element'
                visible: false
                toggle_tap: true
                grouping_code: 1
                style:
                  # the group style determines the hotspot
                  height: 40%
                  left: 41%
                  top: 30%
                  width: 25%
                elements:
                  # your elements go here - their size/position is relative to the group
                  - type: entities
                    style:
                      left: 50%
                      top: 50%
                    entities:
                      - light.feba
                      #- light.wohnzimmerdecke
                      #- light.ecklicht
                elements_pos:
                  # the elements_pos style determine the location of the elements
                  left: 10%
                  top: 65%
                  width: 80%
                  height: 30%
                  transform: none
                  background-color: 'rgba(255, 255, 255, 0.6)'
                  border-radius: 10px
                close_button:
                  # the close button determines the location of the close button
                  show: true
                  style:
                    background-color: 'rgba(255, 255, 255, 0.6)'
                    border-color: grey
                    border-radius: 0px
                    border: 0.5px solid red
                    left: 2%
                    top: 62%
                    transform: none

              # second group - also with grouping_code of 1
              # second group's element_pos & close_button is identical to group 1 and they share the 
              # same real-estate so they need to not be shown together
              - type: 'custom:group-element'
                visible: false
                toggle_tap: true
                grouping_code: 1
                style:
                  # the group style determines the hotspot
                  height: 40%
                  left: 68%
                  top: 30%
                  width: 25%
                elements:
                  # your elements go here - their size/position is relative to the group
                  - type: entities
                    style:
                      left: 80%
                      top: 80%
                    entities:
                      #- light.arbeitszimmerdecke
                      - light.hue_lightstrip_plus_1
                      #- light.wohnflur
                elements_pos:
                  # the elements_pos style determine the location of the elements
                  left: 10%
                  top: 65%
                  width: 80%
                  height: 30%
                  transform: none
                  background-color: 'rgba(255, 255, 255, 0.6)'
                  border-radius: 10px
                close_button:
                  # the close button determines the location of the close button
                  show: true
                  style:
                    background-color: 'rgba(255, 255, 255, 0.6)'
                    border-color: black
                    border-radius: 10px
                    border-style: solid
                    left: 1%
                    top: 69%
                    transform: none

Does someone have an idea what causes the problem?
I’m getting the same error when using the simplest version (without “elements_pos”, “grouping_code”, “close_button”)…

Is Dynamic picture-elements still being actively developed?

No commits in around a year. Commits · custom-cards/group-element · GitHub

This is really sad… Is there anything like Dynamic picture-Elements that is actively developed?

Just had no reason to updated anything. Do you have any issues? It works for me…

look above, I get the error: d.setConfig is not a function when clicking on a “spot”.
see the picture.
Screenshot_20200619_233107

Sorry it took me such a long time to answer (I need to turn on notifications).
The problem is in your config. You can’t put the entities card on picture-elements. The group element is a container for other picture-elements items.
So you should change this:

               elements:
                  # your elements go here - their size/position is relative to the group
                  - type: entities
                    style:
                      left: 50%
                      top: 50%
                    entities:
                      - light.feba
                      #- light.wohnzimmerdecke
                      #- light.ecklicht

to something that’s valid for picture elements, for example:

    elements:
      - type: state-badge
        entity: sun.sun

Great work! I’m trying to integrate your card into my floorplan. And was wondering if it was possible to toggle the card on a double tap or single tap from a different entity?

Not sure if this is active, but how do you get the light to work? what’s the code for getting the light to show up as an overlay when it’s on?