Floorplans plus cards

Configuration Frontend
1

Finally tried out the picture-element thingie with a floorplan of the homestead. This is soooo kool. Now, if I could somehow figure out how to call up a Card tied to on-tap of an icon, it would replace almost all of my other tabs…
Doable?

2

You should be able to put your floorplan cards in pop-up cards:

You’ll need an Icon to click on to open this “it’s not a card” card though.

2 Likes
3

Brilliant!!! Now… time to get to work on this one.

4

Installed the popup-card stuff (actually the card-tools.js in my /www directory). Configured my ui-lovelace.yaml at the beginning with this:

resources:
  - url: /local/mini-media-player-bundle.js?v=1.0.3
    type: module
  - url: /customcards/github/thomasloven/card-tools.js?track=true
    type: js
  - url: /customcards/github/thomasloven/popup-card.js?track=true
    type: js

and later on in my floorplan like this (edited for loss of verbosity):

  - title: Hickory
    id: hickory
    panel: true
    popup_cards:
      livingroom-echo:
        title: Livingroom Echo
        card:
          type: custom:mini-media-player
          name: Echo Dot
          entity: media_player.406_living_room_echo_dot
          icon: mdi:amazon-alexa
          artwork: full-cover-fit
          source: full
          tts:
            platform: alexa
          hide:
            power_state: false
            source: true
          shortcuts:
            columns: 3
            buttons:
              - name: ABC (Jazz)
                type: TUNEIN
                id: 'ABC Jazz'
              - name: Cafe I (Jazz)
                type: TUNEIN
                id: 'CAFÉ I Soulside Radio Paris'
            

    cards:
      - type: picture-elements
        image: /local/hickory-floorplan.png
        elements:

and set up an icon on my floorplan like this:

# Livingroom echo
          - type: icon
            title: Livingroom Echo
            icon: mdi:amazon-alexa
            entity: livingroom-echo
            style:
              top: 47%
              left: 60%

It’s doesn’t puke on me but when I click on that icon… nothing.
I’m sure it’s something simple I’m overlooking…

5

It works! I guess I missed it but… by downloading the popup-card.js in addition to the card-tools.js and modifying my ui-lovelace.yaml beginning to read:

resources:
  - url: /local/mini-media-player-bundle.js?v=1.0.3
    type: module
  - url: /local/card-tools.js
    type: js
  - url: /local/popup-card.js
    type: js

got it working.

6

YEAH! Everything moving along peachy. Except… now all of the sudden, everything is double vision on me when I click on an icon… any icon.

Screenshot%20from%202019-04-17%2015-11-08
Screenshot%20from%202019-04-17%2015-11-081344×766 216 KB

7

And a deleting of /config/.storage/core.entity_registry with a hard reboot solved that one also. Life is good.

1 Like