A different take on designing a Lovelace UI

Share your Projects!
3866

I’m trying to replace an SVG path of a button using card mod…

The full xpath shows to be:
/html/body/home-assistant//home-assistant-main//app-drawer-layout/partial-panel-resolver/ha-panel-lovelace//hui-root//ha-app-layout/div/hui-view/hui-masonry-view//div/div[1]/hui-card-options/hui-vertical-stack-card//div/hui-horizontal-stack-card//div/mod-card//ha-card/hui-button-card//ha-card/ha-state-icon//ha-svg-icon//svg/g/path

What am I doing wrong??

type: custom:mod-card
card-mod:
  style: |
    "ha-svg-icon":
      $: |
        svg > g > path {
            d: path('M10.896 13.837c.013.002.016.002.029.004.216.029.429.068.591.141.151.067.239.151.32.301.123.228.131.546.02.788-.083.18-.264.33-.43.41-.172.084-.342.123-.537.146-.34.037-.708-.033-1.015-.181-.181-.089-.403-.241-.514-.437-.082-.144-.079-.331.02-.468.159-.218.5-.266.757-.257.196.008.548.068.734.134.052.019.242.093.275.127.023.024.038.058.028.09-.042.13-.358.198-.449.212-.244.037-.371-.055-.648-.165-.069-.027-.161-.057-.231-.063-.126-.012-.278.023-.302.161-.012.071.071.137.135.165.149.064.27.087.416.089.433.007.919-.064 1.273-.315.048-.035.096-.085.097-.149.002-.129-.224-.208-.224-.208-.238-.099-.679-.148-.906-.166-.238-.021-.613-.051-.703-.065-.093-.013-.193-.032-.274-.068-.081-.036-.159-.118-.183-.208-.041-.163.011-.362.102-.492.237-.34.791-.469 1.204-.52.401-.05 1.048-.049 1.442.16.061.033.092.063.079.128-.026.122-.117.2-.228.235-.117.037-.358.052-.463.058-.474.027-1.048.013-1.499.136-.035.01-.097.027-.116.049-.071.077.131.099.175.107.013.003.015.004.029.005L10.896 13.837M8.074 11.722c0 0 .077-.116.142-.204.118-.16.331-.382.491-.519.049-.042.107-.089.107-.089s-.091.009-.142.02c-.122.024-.3.142-.389.219-.147.126-.309.331-.236.513C8.057 11.688 8.074 11.722 8.074 11.722M8.892 11.941c.232-.016.45-.083.653-.195.199-.111.491-.328.461-.583-.009-.083-.063-.145-.131-.174-.089-.038-.135-.032-.248.001-.082.024-.119.039-.197.083-.228.133-.551.416-.727.642-.041.053-.082.113-.114.154-.02.025-.036.048-.034.055C8.561 11.95 8.801 11.947 8.892 11.941M8.3 12.376c-.024.025-.049.087-.076.131-.014.024-.04.054-.057.066-.061.044-.112.047-.17-.005-.082-.072-.129-.185-.133-.294-.002-.048.006-.1-.003-.14-.015-.068-.083-.137-.119-.202-.043-.076-.078-.209-.082-.295-.015-.268.126-.514.31-.709.185-.197.426-.36.689-.471.248-.105.612-.176.885-.081.089.03.212.106.275.185.013.016.024.034.037.043.012.008.044.011.069.015.087.015.212.081.263.125.103.089.159.173.185.296.052.247-.09.519-.253.684-.278.284-.552.484-.908.623-.156.061-.399.118-.576.102-.055-.005-.112-.019-.165-.023-.027-.002-.127-.028-.138-.035C8.32 12.381 8.303 12.372 8.3 12.376M8.617 12.924c.011.002.028.007.042.012.125.047.176.163.207.289.071.294.101.945.113 1.2C8.988 14.617 8.992 14.805 9 14.994c.007.16.02.373-.014.523-.012.054-.048.117-.1.149-.059.038-.194.041-.268.025-.182-.038-.242-.155-.268-.335-.062-.431-.032-1.276.004-1.632.012-.118.056-.495.118-.653C8.495 13.017 8.539 12.909 8.617 12.924M3.067 13.641c0 0-.272.019-.458.04-.238.026-.685.103-.942.195-.077.028-.234.093-.248.173-.014.082.037.147.094.214.033.039.219.218.271.261.219.183.663.465.99.601.112.046.298.113.298.113s-.014-.529-.011-1.05C3.061 13.913 3.067 13.641 3.067 13.641M8.046 13.851c.016.142-.021.411-.027.446-.012.082-.073.27-.083.293-.05.115-.099.208-.151.302-.089.16-.301.414-.426.523-.467.404-1.191.634-1.812.71-.421.051-.905.043-1.351-.039-.154-.028-.382-.081-.382-.081s.001.091-.007.156c-.004.029-.026.107-.038.132-.032.067-.086.102-.163.116-.094.017-.193.023-.279-.014-.142-.06-.193-.192-.218-.345-.02-.122-.041-.335-.041-.335s-.106-.05-.195-.094c-.272-.134-.53-.296-.756-.463-.063-.047-.331-.272-.391-.328-.166-.158-.316-.315-.43-.517-.089-.158-.114-.297-.047-.464.093-.233.426-.408.655-.508.168-.074.689-.244.905-.276.102-.015.261-.043.271-.049.004-.003.007-.006.01-.009C3.094 13 3.103 12.77 3.101 12.686c-.002-.083.061-.627.082-.742.011-.062.058-.302.106-.365.031-.042.087-.039.132-.011.248.154.324.69.342.962.011.166.017.416.017.416s.285-.008.46-.003c.17.004.358.031.534.059.226.036.667.132.92.261.208.106.403.283.466.472.059.173.05.292-.039.448-.1.176-.29.307-.483.317-.057.003-.273-.025-.34-.077-.026-.02-.025-.057-.006-.083C5.299 14.33 5.4 14.277 5.46 14.245c.03-.016.055-.034.078-.055.049-.044.094-.092.089-.148-.007-.073-.084-.118-.158-.147-.345-.137-1.035-.251-1.368-.271-.13-.008-.316-.014-.316-.014l.039 1.839c0 0 .153.029.274.049.069.011.363.037.441.039.594.016 1.258-.038 1.803-.295C6.583 15.13 6.802 14.99 6.969 14.8c.219-.251.334-.595.304-.955-.033-.392-.309-.858-.53-1.142-.583-.749-1.582-1.366-2.46-1.727-.897-.369-1.784-.581-2.736-.616-.245-.009-.781.003-1.051.078-.039.011-.078.024-.113.032-.028.007-.073.026-.085.036-.007.005-.014.013-.014.013s.017.009.033.016c.029.013.149.02.212.031.056.011.114.04.137.081.022.039.025.07-.002.102-.061.075-.292.062-.394.046-.106-.017-.237-.049-.261-.141-.028-.108.023-.214.079-.313.112-.196.272-.298.506-.362.333-.092.752-.155 1.067-.167.711-.027 1.384.097 2.072.307.394.119.91.319 1.288.501.271.131.698.371.938.528.076.05.518.375.587.433.143.117.331.286.467.421.263.261.59.66.749.977.038.076.068.151.117.239.017.03.09.21.102.263.012.052.029.127.032.13C8.015 13.637 8.048 13.791 8.046 13.851M16.982 13.444c-.333.077-1.208.119-1.208.119l-.11.346c0 0 .437-.037.756-.004 0 0 .103-.012.115.117.004.12-.01.249-.01.249s-.007.078-.117.098c-.12.02-.943.052-.943.052l-.133.451c0 0-.05.104.061.074.103-.028.965-.189 1.078-.166.12.03.254.19.215.337-.046.181-.906.73-1.43.692 0 0-.275.018-.508-.354-.217-.354.082-1.025.082-1.025s-.137-.313-.038-.419c0 0 .059-.054.231-.066l.211-.436c0 0-.24.017-.383-.16-.133-.168-.144-.245-.042-.291.109-.054 1.11-.236 1.798-.213 0 0 .239-.023.447.392C17.052 13.236 17.152 13.404 16.982 13.444M14.392 15.122c-.088.208-.321.429-.611.291-.286-.138-.741-1.07-.741-1.07s-.173-.347-.206-.338c0 0-.037-.068-.06.312-.024.378.005 1.115-.146 1.231-.143.116-.316.07-.406-.066-.082-.134-.115-.452-.071-1.011.052-.56.182-1.156.349-1.341.166-.184.299-.05.351-.002 0 0 .222.201.588.792l.065.109c0 0 .333.558.367.557 0 0 .027.026.051.007.035-.01.021-.189.021-.189s-.069-.608-.373-1.638c0 0-.046-.128-.015-.249.031-.122.153-.065.153-.065s.47.237.699 1.002C14.634 14.222 14.482 14.913 14.392 15.122M19.455 14.664c-.214.374-.819 1.156-1.622.971-.265.643-.488 1.294-.616 2.268 0 0-.028.189-.185.124-.156-.055-.413-.314-.465-.672-.056-.471.154-1.267.582-2.18-.125-.203-.21-.493-.137-.907 0 0 .108-.767.878-1.459 0 0 .092-.08.146-.055.059.025.032.274-.015.396-.049.121-.392.715-.392.715s-.214.401-.154.718c.404-.622 1.323-1.875 1.893-1.48.191.137.28.435.28.756C19.648 14.139 19.581 14.439 19.455 14.664M19.289 13.679c0 0-.032-.247-.273.025-.208.23-.583.66-.884 1.245.317-.036.622-.207.714-.295C18.995 14.521 19.345 14.16 19.289 13.679M23.88 13.623h-1.472c-.029-.5-.09-.988-.185-1.49-.01-.052-.055-.09-.108-.09h-.339c-.03 0-.058.013-.077.036-.019.024-.027.053-.021.083.096.486.158.964.188 1.461H20.45c-.066 0-.12.053-.12.119v.306c0 .066.054.12.12.12h1.437c.001.076.002.143.002.207 0 .441-.019.805-.064 1.215-.004.032.007.063.028.087.021.023.051.037.082.037h.315c.061 0 .112-.046.119-.107.043-.413.061-.781.061-1.231 0-.063-.001-.131-.002-.207h1.452c.066 0 .12-.054.12-.12v-.306C24 13.677 23.946 13.623 23.88 13.623M4.193 9.521C4.172 9.552 4.167 9.59 4.179 9.625 4.192 9.661 4.219 9.688 4.254 9.7l.264.089C4.534 9.794 4.55 9.797 4.565 9.797c.049 0 .095-.024.122-.065.865-1.27 2.035-2.328 3.384-3.058 1.393-.754 2.971-1.153 4.565-1.153 1.925 0 3.781.568 5.37 1.642 1.55 1.048 2.754 2.509 3.481 4.226.022.051.072.085.128.085h.315c.036 0 .07-.018.091-.049.021-.03.025-.069.011-.103-.75-1.847-2.019-3.421-3.669-4.552C16.674 5.612 14.693 5 12.636 5 9.234 5 6.078 6.69 4.193 9.521') !important;
        }
card:
  tap_action:
    action: call-service
    service: androidtv.adb_command
    data:
      command: >-
        am start -a android.intent.action.VIEW -n
        com.disney.disneyplus/com.bamtechmedia.dominguez.main.MainActivity
    target:
      entity_id: media_player.fire_tv_192_168_2_27
  show_name: false
  show_icon: true
  entity: media_player.fire_tv_192_168_2_27
  show_state: false
  type: button

I also tried:

card-mod:
  style: |
    ha-state-icon$ha-svg-icon$: |
        svg > g > path {
          d: path('') !important;
        }

and

card-mod:
  style:
    ha-state-icon$:
      ha-svg-icon$svg$:
        g path {
          d: path('');
        }

and

card-mod:
  style:
    ha-state-icon$:
      ha-svg-icon$:
        svg g path {
          d: path('');
        }
3867

I’ve added them via the UI since I am using this version as a second page while i develop. So I am fairly certain the resources are included… Otherwise I would think I would see 404s

3869

I may be being stupid, but I’m seeing 404 errors and invalid entity errors in the error message you posted?

Uncaught ButtonCardJSTemplateError: TypeError: entity is undefined in 'return entity.state.length > 0 ? "block" : "none"

Source map error: Error: request failed with status 404
Resource URL: https://xxxxxx.xxxxxxx.com/hacsfiles/Homekit-panel-card/homekit-panel-card.js
Source Map URL: lit-element.js.map
Source map error: Error: request failed with status 404
Resource URL: https://xxxxxx.xxxxxxx.com/local/community/swiss-army-knife-card/SVGInjector.min.js?module
Source Map URL: ./dist/svg-injector.map.js
Source map error: Error: request failed with status 404
Resource URL: https://xxxxxx.xxxxxxx.com/hacsfiles/cover-popup-card/cover-popup-card.js?hacstag=235106875026
Source Map URL: index.m.js.map
3870

You could also try changing the checked state from off to not_home?

variables:
  notify: >
    [[[
      let id = states['binary_sensor.aqualinkd_alive'];
      if (id) {
        return id.state === 'not_home';
      }
    ]]]
template: footer

EDIT: Looks like your formatting on the if statement could be off?

3871

Alfie,

I’m not sure what you’re seeing… this is what I have

          - type: custom:button-card
            name: >
              <ha-icon icon="mdi:swim"></ha-icon> Pool
            tap_action: !include popup/footer_pool.yaml
            variables:
              notify: >
                [[[
                  let id = states['binary_sensor.aqualinkd_alive'];
                  if (id) return id.state === 'off';
                ]]]
            template: footer
3872

if (id) return id.state === 'off';

if (id) {
  return id.state === 'off';
}
3873

So those 404’s are for other modules that I am not using them. I’ve since removed them and it didnt make a change .

3874

Why not_home?

3875

Typically from my experience with HomeAssistant, if an entity is on it’s state is home. When off it’s state is not_home. However after re-looking at your terminal screenshot on looks correct, so I have updated my example.

It could be that the formatting for your if statement is incorrect as mentioned above.

3876

Hello @Mattias_Persson . Can you hide the sidebar in mobile view?

3877

yes, using browser mod 2

3878

Thanks. I explainned wrong. It said to be able to hide the sidebar card that @Mattias_Persson created

For example, show some cards on a tablet and hide some on a phone

3879

ok, yes you can

find this section is ui-lovelace, NOTE: look for the #phone

mediaquery:
        #phone
        "(max-width: 800px)":
          grid-gap: calc(var(--custom-layout-card-padding) * 1.7)
          grid-template-columns: 0 repeat(2, 1fr) 0
          grid-template-rows: 0 repeat(5, fit-content(100%)) 0fr
          grid-template-areas: |
            ".  .           .        ."
            ".  sidebar     sidebar  ."
            ".  vardagsrum  sovrum   ."
            ".  studio      övrigt   ."
            ".  media       hemma    ."
            ".  footer      footer   ."
            ".  .           .        ."

replace with this

mediaquery:
        #phone
        "(max-width: 800px)":
          grid-gap: calc(var(--custom-layout-card-padding) * 1.7)
          grid-template-columns: 0 repeat(2, 1fr) 0
          grid-template-rows: 0 repeat(4, fit-content(100%)) 0fr
          grid-template-areas: |
            ".  .           .        ."
            ".  vardagsrum  sovrum   ."
            ".  studio      övrigt   ."
            ".  media       hemma    ."
            ".  footer      footer   ."
            ".  .           .        ."

this should work

3880

Thanks friend.I tried it but I can’t get it to show in a single column. Still don’t hide those cards that are seen on the right side and below

Sin título
Sin título427×697 46.9 KB 

views:
  - type: custom:grid-layout
    path: 0
    title: celulares
    layout:
      #default
      grid-gap: var(--custom-layout-card-padding)
      grid-template-columns: repeat(4, 1fr) 0
      grid-template-rows: 0 repeat(2, fit-content(100%)) 0fr
      grid-template-areas: |
        "sidebar  .           .                .        ."
        "sidebar  clima       comedor          extras  ."
        "sidebar  media       entretenimiento  encasa   ."
        "sidebar  footer      footer           footer   ."
        "sidebar  . . .  ."
      mediaquery:
        #phone
        "(max-width: 800px)":
          grid-gap: calc(var(--custom-layout-card-padding) * 1.7)
          grid-template-columns: 0fr 
          grid-template-rows: repeat(8, fit-content(100%)) 0fr        
          grid-template-areas: |
            ".  .               ."
            ".  cuartos         ."
            ".  comedor         ."
            ".  extras          ."
            ".  encasa          ."
            ".  media           ."
            ".  entretenimiento ."
            ".  .               ."
    cards:
      - type: custom:button-card
        view_layout:
          grid-area: 1 / 2 / 2 / 5
3881

Alright, I have really tried to get the plex_recently_added integration to work, but haven’t been successful.
The integration / sensor shows Plex is “online” but doesn’t retrieve any recently added information, not the image.

I have searched the github page for the integration, I have created an issue there (which has gone un-responded for 5 days thus far)
And I have searched through this thread, where I have tried some proposed solutions without success.

Does anyone have a working “plex_recently_added” integration and config they wouldn’t mind sharing?

Currently my manifest.json for the integration looks like:

{
    "domain": "plex_recently_added",
    "name": "Plex Recently Added",
    "version": "0.3.8",
    "documentation": "https://github.com/NemesisRE/sensor.plex_recently_added",
    "issue_tracker": "https://github.com/NemesisRE/sensor.plex_recently_added",
    "dependencies": [],
    "codeowners": ["@maykar", "@NemesisRE"],
    "requirements": [],
    "iot_class": "local_polling"
  }
3882

Config:

---
platform: plex_recently_added
token: !secret plex_token
host: !secret plex_host
port: !secret plex_port
max: 1
img_dir: /
image_resolution: 500

Used on Plex Recently Added version 0.3.8

3883

Could you PM me the complete (zipped) plex_recently_added folder from the /config/custom_components?

3884

https://github.com/NemesisRE/sensor.plex_recently_added/archive/refs/heads/master.zip

3885

Hmm, I’m already using that, with the exact same config you use
(and of course with the secrets file set per my environment)

3886

is your Plex server up to date?