A different take on designing a Lovelace UI

jompa68 · August 5, 2020, 6:57am

Need some SVG help.
Trying to set the “black” area to "yellow"when state == on

  icon_lamp: >
    [[[ const state = entity.state === 'on' ? 'animate' : null;  return `<svg
    viewBox="0 0 50 50"><style>@keyframes animate{0%{transform:
    scale(0.85);}20%{transform: scale(1.1);}40%{transform:
    scale(0.95);}60%{transform: scale(1.03);}80%{transform:
    scale(0.97);}}.animate{animation: animate 0.8s; transform-origin:
    center;}</style> <g fill="#9da0a2""><path d="M32.6 50H17.5c-.4
    0-.8-.2-1-.5-.5-.4-10.3-10.3-2.7-26.7a1.6 1.6 0 012.9 1.3c-5.9 12.6-.1 20.8
    1.5 22.8h13.7c1.6-2 7.4-10 1.5-22.8a1.6 1.6 0 012.8-1.3C44 39.2 34.1 49 33.7
    49.5c-.3.3-.7.5-1.1.5zm0 0M45.3 37.5c-.9 0-1.6-.7-1.6-1.6V23.4a1.6 1.6 0
    113.2 0V36c0 .9-.7 1.6-1.6 1.6zm0 0"/> </g> <g path class="${state}"><g
    fill="var(--button-card-light-color-no-temperature)"> <path d="M49.9
    22.8L40.5 1c-.3-.5-.8-.9-1.4-.9H10.9c-.6 0-1.1.4-1.4 1L.1 22.7A1.6 1.6 0
    001.6 25h46.8a1.6 1.6 0 001.5-2.2zm0 0"/> </g> </g></svg>`;]]]

Skärmavbild 2020-08-05 kl. 08.56.14

Mattias_Persson · August 5, 2020, 7:24am

remove fill="var(--button-card-light-color-no-temperature)" and add something like this to styles. It will only color paths without fill.

styles:
  custom_fields:
    icon_lamp:
      [top: 10.5%, left: 10.1%, width: 2.9vw, position: absolute,
      fill: "[[[ return entity.state === 'on' ? '#c7983e' : '#9da0a2'; ]]]"]

jompa68 · August 5, 2020, 7:48am

Thanks Mattias, i will try.

lucibuz · August 5, 2020, 7:48pm

Hi George,
I’m interested how you manage to root with vanilla android your old kindle fire tablet.
Can you point me to a tutorial?
thanks

larsiey · August 6, 2020, 8:31am

Somehow, I don’t have an icon/color RGB at the popup card.
The icon shows the “light-popup-card” but it doesn’t have any color. Do you know how to fix this?

Mattias_Persson · August 6, 2020, 11:34am

First off, do you have card-mod installed? I’m asking because yours looks like the default light-popup-card.

Regarding the rgb icon, your actions at the bottom are in a different order, it’s relevant because the selector targets the second div in the second div, the last action if you have two by two actions. You have three and then one.

#popup > div.action-holder > div:nth-child(2) > div:nth-child(2) > span

I guess you could also do this that would work in any configuration.

#popup > div.action-holder > div:last-child > div:last-child > span

larsiey · August 6, 2020, 12:52pm

First, thanks for your reply!

I have installed the card-mod. I do not use your fully setup with picture-elements, but only using the buttons etc. That is why it looks different to your setup.

I tried both, however
‘#popup > div.action-holder > div:nth-child(2) > div:nth-child(2) > span’
gives me the following result on my iPhone:

I don’t see any rgb gradient on my browser (firefox, latest. Also tried it on edge).

On the following screenshot, you see the css of what I tried.

. Firefox does not recognize the background (second yellow marked text.
I think I should use the selected element background-color for the rgb color picker (first yellow marked text). But in what way do I put this in the button_card_templates.yaml?
The selected element is called “div.action-row:nth-child(2) > div:nth-child(2) > span:nth-child(1)”.

Mattias_Persson · August 6, 2020, 1:17pm

https://caniuse.com/#feat=css-conic-gradients

In firefox go to url about:config and set layout.css.conic-gradient.enabled flag to true

I didn’t have names on my actions so the correct selector should be

#popup > div.action-holder > div:last-child > div:last-child > .color

larsiey · August 7, 2020, 8:57am

Thanks, that works!
I really appreciate your help!

tc23 · August 7, 2020, 7:15pm

@george_b could you share your config for your speaker cards? Looking to do something similar

jompa68 · August 9, 2020, 7:03pm

Trying to make a mobile friendly version of @Mattias_Persson great design.

AlexGardner · August 9, 2020, 8:19pm

Hi,

First off amazing work.

Hopefully an easy one, I’m pretty new to this so apologies if this is a stupid question, tried searching and couldn’t find anything of relevance.

A few months back I started implementing this and I’ve just come back to it and the sensor.time font in the sidebar markdown is showing the same font size as all the other sensors (it’s no longer larger).

I’m just wondering how to change this back so that it is large again.

Thanks

Mattias_Persson · August 9, 2020, 8:45pm

old custom:hui-markdown-card, needs lovelace-card-preloader, with class from themes.yaml.

          - type: custom:hui-markdown-card
            class: sidebar
            style:
              {top: 9%, left: 11.1%}
            content: >
              <span>{{ states('sensor.time') }}</span>

main picture-elements style with card-mod

      - type: picture-elements
        image: /local/background.png
        style:
          "#root > hui-markdown-card, #key1":
            $: |
              ha-card > ha-markdown {padding: 0 !important;}

          "#root > hui-markdown-card, #key2":
            $:
              "ha-card > ha-markdown":
                $: |
                  ha-markdown-element > p > span {font-family: SF Text; font-size: 5vw; 
                  font-weight: 200; margin-left: -0.3vw; letter-spacing: -0.05vw;}

custom:hui-element placed anywhere to fix load problem

          - type: custom:hui-element
            card_type: markdown
            style: {opacity: 0}
            content: preload

reference ui-lovelace.yaml

AlexGardner · August 9, 2020, 9:11pm

Amazing, thank you so much.

caiosweet · August 10, 2020, 4:29pm

Thanks for sharing…
Mattias Persson … worse than covid!
(worse than a virus. You are contagious!)
Me too like everyone here … i’m learning basic swedish

spudje · August 12, 2020, 7:50am

So I’m getting somewhere, after quite some weeks of work. My main layout is sort of done. Tweaking of alignment will follow when I debug on my tablet. I do need to work on the pop-ups now and update some code I fear, since I started with the older code where styles became broken due to home-assistant updates.

I still have an issue with markdown cards, that give errors the first time I load the page. After a refresh all is fine. I assume it has something to do with the preload stuff. So according to Mattias’ post a few posts above, should I change the custom:hui-markdown-card to custom:hui-element & card_type: markdown? That means reworking those cards I fear? And I still see both types of these cards in Mattias’ code.

ASNNetworks · August 12, 2020, 9:33am

Yes, that’s exactly what you need to do. You should get rid of the custom:hui-markdown-card method, it’s very hacky and chances are you’ll run into issues with later HA versions.

I tried it myself and simply rewritten one by replacing custom:hui-markdown-card with:

type: 'custom:hui-element'
card_type: markdown

Strangely, I only changed one of the multiple custom:hui-markdown-card I have (to test if it works), but the errors disappeared all together of all markdowns.

Mattias_Persson · August 12, 2020, 3:44pm

No

github.com/thomasloven/lovelace-hui-element

card-mod on picture-elements to style inside a hui-element markdown card.

opened 06:52PM - 12 Jul 20 UTC

closed 07:59PM - 01 Mar 21 UTC

matt8707

I'm having issues with styling inside a hui-element markdown card. Since it work…s sporadically maybe it's a timing issue, the markdown card loads before card-mod. Would love to have you look into it when you have time. ``` title: Hemma views: - panel: true path: default_view cards: - type: picture-elements image: /local/background.png style: "#root > hui-element > hui-markdown-card": $: "ha-card > ha-markdown": $: | ha-markdown-element > p > span {font-size: 2vw; color: red;} elements: - type: custom:hui-element card_type: markdown style: {top: 50%, left: 50%, width: 20vw} content: > <span>css styled text</span> other text ``` ### Editing lovelace and updating dashboard works ![style](https://user-images.githubusercontent.com/36163594/87253894-22165100-c47f-11ea-8fe3-6085d0c234fe.png) ### Refreshing the page after that seems to only load the style sometimes ![no](https://user-images.githubusercontent.com/36163594/87253897-26db0500-c47f-11ea-8419-b7028ac25f6a.png) I'm currently using [lovelace-card-preloader](https://github.com/gadgetchnnel/lovelace-card-preloader/) which has the reverse issue. Doesn't work on first refresh after editing lovelace, but works after that so the styling is correct.

Mattias_Persson:

old custom:hui-markdown-card, needs lovelace-card-preloader, with class from themes.yaml.

          - type: custom:hui-markdown-card
            class: sidebar
            style:
              {top: 9%, left: 11.1%}
            content: >
              <span>{{ states('sensor.time') }}</span>

main picture-elements style with card-mod

      - type: picture-elements
        image: /local/background.png
        style:
          "#root > hui-markdown-card, #key1":
            $: |
              ha-card > ha-markdown {padding: 0 !important;}

          "#root > hui-markdown-card, #key2":
            $:
              "ha-card > ha-markdown":
                $: |
                  ha-markdown-element > p > span {font-family: SF Text; font-size: 5vw; 
                  font-weight: 200; margin-left: -0.3vw; letter-spacing: -0.05vw;}

custom:hui-element placed anywhere to fix load problem

          - type: custom:hui-element
            card_type: markdown
            style: {opacity: 0}
            content: preload

reference ui-lovelace.yaml

lucibuz · August 16, 2020, 9:36am

@Mattias_Persson

Hello again,
after updating browser_mod, popups start looking different.
Is there a quick fix beside reverting browser_mode to older version?
Thanks

before

Mattias_Persson · August 16, 2020, 5:12pm

style it from themes.yaml, search mine for card-mod-more-info-yaml