New More-Info dialogs are including adding entity row

[mvanlijden]

It seems like all the new style More Info dialogs introduced create a card where first there is a simple entity row and only then followed by the actual more-info dialog. Especially the climate card gives a strange layout because of this.

Also when looking at the Sensor example, the more-info card only shows the top section, no longer showing any History or Logbook. Probably since this has been placed in a new section, not read in the current way this card has been set up.

[u8915055]

I have found this as well.. i was able to remove it with embedding a card-mod configuration.
I cant remember what part of this actually turned off the entity row but one them did :) My example here was part of a custom button card config.

          tap_action: 
            #action: more-info
            action: fire-dom-event
            browser_mod:
              service: browser_mod.popup
              title: " "
              data:
                card_mod:
                  style:  
                    .: |
                      div.content {
                        outline: none;
                      }
                    ha-dialog-header$: |
                      div.header-bar {
                        padding: 30px;
                      }
                    more-info-card$:
                      ha-card.type-custom-more-info-card$: |
                        h1.card-header {
                          display: none;
                        }
                      ha-card.type-custom-more-info-card:
                        .: |
                          state-card-content {
                            display: none;
                          }
                        more-info-light$: |
                          div ha-attributes{
                            display: none;
                          }                        
                    ha-header-bar$: |
                      .mdc-top-app-bar {
                        display: none !important;
                      }
                title: " "
                content:
                  type: custom:more-info-card
                  entity: >
                    [[[ return variables.entity_id; ]]]

[tigers75]

As per my other answer it should be this: style: | state-card-content { display: none }

[itkama]

@tigers75 How would I change that if I also wanted to get rid of the title?

[tigers75]

Adding just this works for me: title: ' '

[itkama]

Sometimes it's the easy things ;)

[bkbartk]

thnx for the card-mod solution, does anyone know how to bring the history and settings buttons on the right top corner back? I use history to check the temperature of the last 24 hours

[tigers75]

History cannot be "bring back" because this is now a card, not a more-info card, so I think it's not possible in an easy way. What I did was adding an history card in a vertical-stack:

This could be put inside a conditional card so it shows only when clicked if you don't want to see everytime.

[bkbartk]

I use them in a popup, just like @u8915055 his example, but I can't figure out how to get multiple cards in there, except from vertical stack, but that messes up the style

[RichieGP]

u8915055, are you able to share an image of the card that your code produces? I am trying to find a way to remove components of the more-info-light card to use it in permanently in a dashboard but am struggling. i have removed the title and on/off toggle/name but also want to remove the more attributes drop down and the absolute and relative times - however, I cannot see how easily to do this using the chrome HTML inspector and card mod. i was wondering how your sliders looked with the code you have posted. Thanks

[u8915055]

So things have changed on my end since i made that post. First off, i have removed all card-mod usage in my dashboards. I love the work and idea behind card-mod, but unfortunately it seems to have an issue with the browser cache maybe? Every time i load a dashboard for the first time it glitches.. i read somewhere in the issues for that card that this is a known issue. So given that ive removed all those references, this is what my pop up looks like for a light as an example:

That entity row is not there but i cant see where ive done anything specifically to remove it.. are you saying in the latest release of HA that you still have that entity row? Ill keep looking to see what i can find in my code to see if i still have something there that is removing that entity row.

Secondly i did create some custom popups to give the same look and feel for media player volume and irrigation system zone duration... that used a popup card i found in HACS for reference and i just modified from there>

This is the volume one:

This is the zone duration one:

They still need some tweaking but they're getting there.

So please confirm that with vanilla lastest install of HA that you still get the entity row in your more info popups and ill see what i can figure out in my own code because i dont see it in any of my setup now.. not in a camera card, climate, lights, etc

[RichieGP]

Hi u8915055

Thanks for getting back to me so fast. I am trying to use the more-info-light cards within a standard dashboard (using the latest version of HA 2024.8.3). I am not using them as a popup.

I have it almost the way I want it but not totally. I have got rid of the title and the on/off toggle. If I put light entities into a group then the 'effects' and 'attributes' drop-downs also disappear. I cannot seem to remove the relative/absolute time despite spending hours looking through the HTML code. Nothing I add as a card mod works.

your custom sliders look really good. I do really like the more-info-card light card but it is tricky to resize or change any of the elements. Shame as it clearly has great potential and it manages light groups well. Some other sliders have strange behaviour when controlling more than one light in that you set them to certain percentage and they go up and down around the midpoint for a second or two before finally settling the 'thumb' where you set the percentage brightness.

Would be really good to see how you modified the sliders in code if you get a moment,

Thanks again

[u8915055]

Hey @RichieGP, i just found one other thing i forgot about that i had added some time ago. Its a javascript add-in that i manually added to make some sort of modification on the more-info dialogs.. i have to be honest i dont fully remember what i did here and why i did it but ill see if i can figure it out.

So this is the javascript module i created and added:

  customElements.whenDefined('ha-attributes').then(() => {
    const AttributesBadge = customElements.get('ha-attributes');
    const { html, css } = AttributesBadge.prototype;

    // defined added style
    const newStyle = css`
    ha-expansion-panel {display:none;}`;

    const newStyles = [].concat(AttributesBadge.styles, newStyle);
    Object.defineProperty(AttributesBadge, 'styles',        {value: newStyles, configurable: true, enumerable: false});
    Object.defineProperty(AttributesBadge, 'elementStyles', {value: newStyles, configurable: true, enumerable: false});
  });

and then i just added that in to my configuration.yaml file like this:

frontend:
  extra_module_url:
    - /local/my-resources/fix-more-info.js

Maybe give that a try.

So ive been working on a mobile interface for HA for years.. this is what mine looks like. I have a dashboard like this per room:

So this is just a snippet of a much bigger system, and im trying to get this to github and document it, but those slider icons on each button pull up more-info dialogs that i showed above. In doing so i had to create one for volume and for irrigation as i had above. So thats how i use the more-info.. but try that javascript thing i posted above.. that might do what you're looking for.. again i need to remember what i did there but i can say that thats the only thing code-wise ive added to HA to achieve my more-info dialogs.. So again for example this is the more info for one of those lights in that dashboard above:

OR

I have done extensive development on custom:button-card templates to achieve my dashboard buttons.

Anyway hope this helps. let me know how it goes.

[RichieGP]

hey @u8915055 , thanks so much for your help. I had gone down the rabbit hole of producing my own custom .js files to filter out contents. Looks like I have managed that now finally thanks to you! I have adapted the .js you posted slightly to remove the state header also, as I don't need to know when i pressed the switch last :). I have some way to go on a lighting dashboard for my kitchen but thought I would post the progress to show you how much you have helped.

I now just need to copy my button cards/picture entity cards from my previous dash and I will place them above the sliders. The hue scenes and the other scenes I have built for lighting/mood lighting will become conditional horizontal stacks along the bottom of the image when the associated button card is pressed. So far very pleased and thank you again.

WRT mobile, I have been trying HaCasa. Its all manual YAML and no UI so it has made me learn a lot.

Thanks again!

[u8915055]

Wow thats a beautiful looking dashboard! Very clean and visually appealing.. Im a stickler for that sort of thing.. i sit and spend hours nudging elements a pixel here and there to get things perfectly lined up.. really nicely done. As mentioned ive been focused on a mobile interface so far so that everything fits on say an iphone screen with no scrolling and ive built quick action buttons and a status bar for various sensors etc. This is what my home screen looks like.. however i want to build a nice tablet interface so i can mount a tablet on the wall.. youve given me some interesting ideas.. thank you!

Glad i could help.. By the way are you finding issues with card-mod? Here's a reiteration of my issue and why i removed it. If i were to complete refresh my dashboard (clear cache for example).. every time i hit a room button on this following dialog, the screen would jump before loading the proper room dashboard.. if i went back to the home screen and hit the room button again, no jump. When i removed card-mod from that particular dashboard, no more jumping.. Love the idea of the module but just couldnt get it to not do the jumping/refresh thing.

Anyway, happy developing!

[mtjoernelund]

@RichieGP

I have adapted the .js you posted slightly to remove the state header also, as I don't need to know when i pressed the switch last :).

Can you share what you did with this. I have been struggling to achieve the same so far without luck. I have about the same use case as you. I have a dashboard where I want to have these controls, but just like you I do not really need the information about when these where last changed.

[RichieGP]

@u8915055, your mobile dashboard is beautiful! Looks like a lot of work has gone into it! Nice to see you have a boat too!

I am slowly getting there with mine. Custom button cards taking longer than I thought.

Here is where I am at with the kitchen one:

The aim is to have custom buttons that change background colour and icon based on entity state or input-select state. Sort of works in principle but taking a while. input-select is so that when I press the HUE SCENE, it conditionally brings in the hue scene horizontal stack at the bottom, when I press SCENE, the stack is replaced by a standard scene stack (movie night, bright, dim, dinner, etc.). Then I think I will be done. The other bits are working well.

@mtjoernelund, I used @u8915055 javascript and then did day's worth of checking dev console to find which items I could pull from the HTML code. It looked simple at first but I am no coding expert by any means and trying to build code that could find the items with so many different DOM nodes was tricky.

This is what I ended up with and thanks to @u8915055, it ended up not being as hard as I thought!

// This script customizes the more-info-light dialog by hiding specific elements
// Created on: 03/09/2024
// Last modified: 

customElements.whenDefined('more-info-light').then(() => {
  const MoreInfoLight = customElements.get('more-info-light');
  const { html, css } = MoreInfoLight.prototype;

  // Define added styles
  const newStyle = css`
    ha-attributes {
      display: none;
    }
    ha-more-info-state-header {
      display: none !important;
    }
  `;

  const newStyles = [].concat(MoreInfoLight.styles || [], newStyle);
  Object.defineProperty(MoreInfoLight, 'styles', {value: newStyles, configurable: true, enumerable: true});
  Object.defineProperty(MoreInfoLight, 'elementStyles', {value: newStyles, configurable: true, enumerable: true});

  console.log('more-info-light styles customized');
});

Hope this helps!

[mtjoernelund]

This is awesome. Did the trick in relation to the last updated at least. Only thing that I still cannot find (I have been trawling chrome console output as well), is the effects button. Did you find that as well - seems you have it removed from your great looking dash….

[RichieGP]

@mtjoernelund, I haven't looked for it yet. I am using light groups and think the effect dropdown doesn't come in for those. One possibility is to have single lights set into a group (I read someone had some luck with that); however, I am not sure that works with newer HA instances as I didn't have much luck trying that method.

If I get this panel working properly, I will bite the bullet and move away from Lutron to Philips lighting fully. Then will be buying more lights. If I have the same issue, I'll do some more digging into Effects.

[mtjoernelund]

@RichieGP Thanks. I might try the group thing and see if it works. I am also going to dig through developer tools once more and see if I cannot find something there.