A different take on designing a Lovelace UI

Share your Projects!
491

me too :joy:

492

Hello buddy! Great job!

I’m trying to play a sound when I click a button but I haven’t found much information. Could you show me the way?

494

I’m in the final tweaking phase :slight_smile:
Just wondering, what are these “prefix” header cards about? Can’t find any reference about them. And can I add an icon to it?

Thanks!

495

@DekiEE You’ll have to provide more info

@gabrielmiranda Search ui-lovelace.yaml or automation.yaml for ui_sound

@spudje a-different-take-on-designing-a-lovelace-ui/162594/224

496

I can’t get the Popup backdrop filter to work anymore. I can’t find that they changed anything, anyone got it to work in full kiosk browser?

497
498

Thanks, @Mattias_Persson, I will take a look at card-mod then

499

The popup is squeezed to the center of the screen as you see in the Screenshot. I don’t know what configuration to change. I tried to change the width but it seems like any change to the style block has any effect on the popup.

500
501

I have changed the block already but it doesn’t matter what numbers I use, nothing seems to change.

502

Do you have the latest hass, browser_mod and card-mod…

503

Hass is still running 112.4, the others are up to date.

504

That’s probably why

505

@Mattias_Persson well done. I get inspiration for my desktop. I have a question, I would like to have info and update icons in the sidebar in different colors. How can I get this effect?

506

Hi fastender,
Your work looks pretty great specially your light popup,
Can you please share your code for the light popup,
I’m interested how you manage to add the icon to it.
Thanks.

507

Gladly, here you will find everything:

At the moment I’m trying to invest my time more in automations with NodeRed in order to operate the house without a cell phone or switch with the help of automatic questions via Alexa.

508

I noticed you have succeeded to send two actions from Lovelace directly form tap_action, I didn’t think that was possible. I tried to change so it instead of restarting hass it turns on a light or does something else but I can’t get it to work, is there anything I am missing?

Found it here,
https://github.com/matt8707/hass-config/blob/790e39657c6809684c598e23294431d3920af8bb/popup/sidebar_information.yaml#L85

This is my try to just turn on a light, the toast msg works but not the the light.turn_on

type: 'custom:button-card'
name: 'Tänd lampan'
tap_action:
  services: |
    [[[ hass.callService('browser_mod', 'toast', {message: 'Tänder lampan...'});
    hass.callService('light.turn_on', 'light.kontor_fatolj'); ]]]
509 
hass.callService('light', 'turn_on', {entity_id: 'light.kontor_fatolj'});
510

Of course…thanks @Mattias_Persson, I have been searching for this for a while

Tack som fan! :slight_smile:

511

You’ve got a point. It’s the main picture-elements style blocking your attempt at changing the colors. Change hui-icon-element {color: rgba(255, 255, 255, 0.1) !important; to opacity instead, like this:

- type: picture-elements
  image: /local/background.png
  style:
    .: |
      /* Global */

      #root > hui-icon-element {opacity: 0.1 !important; transition: 0.4s;}
      #root > hui-icon-element:hover {opacity: 0.25 !important; transition: none;}
      #root > hui-icon-element:active {opacity: 0.35 !important; transition: none;}

and then remove alpha and insert initial opacity for all three icons

- type: icon
  icon: mdi:arrow-up-bold-circle-outline
  title: Uppdateringar
  style:
    top: 87.41%
    left: 16.55%
    color: rgb(255, 255, 255)   # <-
    opacity: 0.1                # <-
    padding: 0.8vw
    --mdc-icon-size: 4vw
  tap_action: !include popup/sidebar_update.yaml

…

If you’re using the special color if there’s an update that needs opacity too

  #root > hui-icon-element:nth-child(10) {
    {% if states('sensor.hass_version_installed') != states('sensor.hass_version_latest') and 
    not is_state('sensor.hass_version_latest', 'unknown') or 
    not is_state('sensor.hacs', '0') and not is_state('sensor.hacs', 'unknown') %}
      color: rgb(35,78,106) !important; opacity: 1 !important;
    {% endif %}
    }