search

nervetattoo / banner-card

A fluffy banner card for Home Assistant 🥰
MIT License
609 stars 57 forks source link

buttons dissapered after latest HA update 2022.3 #139

Closed bucky2076 closed 2 years ago

bucky2076 commented 2 years ago

I have a page with banner cards. The text caption shows, the icon shows, but all buttons are invisible.

RamiRihawi commented 2 years ago

I have the same issue, this part is not working anymore!

        map_state:
          'on':
            icon: mdi:toggle-switch
          'off':
            icon: mdi:toggle-switch-off-outline
bucky2076 commented 2 years ago

seems to me to be an artefact of the upgrade to material.

bucky2076 commented 2 years ago

not working either.

ajghor commented 2 years ago

not working for me neither... Tried installing 1.0.0-beta.3, doesn't work either

psleutel commented 2 years ago

Same issue here

swampylee commented 2 years ago

Exactly the same issue here.

swampylee commented 2 years ago

This is not an ideal solution and hopefully @nervetattoo takes pity on us and fixes this but for now I added this to each switch entity in a card so I can at least see if something is on or off. When you click the switch it opens the standard entity card and then you can turn the entity on or off so an extra few mouse clicks but at least you can see the status of switches.

  - entity: switch.thing
    name: Thing
    domain: sensor
    map_state:
      'on':
        color: green
        value: mdi:toggle-switch-outline
      'off':
        color: white
        value: mdi:toggle-switch-off-outline
matteocorti commented 2 years ago

Same here.

l4r53n commented 2 years ago

Same issue here :-(

mbergdal commented 2 years ago

This is probably due to the update from Paper to Material Web Components that has been done in 2022.3 version. The problem seems to be related to the use of the in this code. (Ref: https://www.home-assistant.io/blog/2022/03/02/release-20223/#ui-upgrades)

My solution for now was to edit the /config/www/community/banner-card/banner-card.js and replace all instances of mwc-switch with ha-switch. (I also commented out the CSS-part related to ) Then save the file. (I did all this in the VSCode add-on)

To make the modified file to be served to Lovelace, you then will have to delete the .gz-file in the same folder (as it is served first if it is present). Then clear the browser cache (not only Ctrl+F5), but clear cached files. (Ref: https://hacs.xyz/docs/categories/plugins#special-notes-about-downloaded-lovelace-plugins)

Then refresh the Lovelace frontend and your switches should be present again.

Spookster commented 2 years ago

"replace all instances of with . "? Maybe the formatting from your message is missing, but what are you replacing what with what?

mbergdal commented 2 years ago

Sorry, didn't catch that my html-tag was removed. Thanks for pointing that out :) Updated my previous post.

swampylee commented 2 years ago

Sorry, didn't catch that my html-tag was removed. Thanks for pointing that out :) Updated my previous post.

Thanks very much, this is a much better solution than mine and works great.

ajghor commented 2 years ago

@swampylee Many Thanks! It is alive!

l4r53n commented 2 years ago

Working great, thanks!

bcmitri commented 2 years ago

That seemed to do the trick. Now, does anyone have a similar fix for #133 (Covers no longer shows after HA update)?

swampylee commented 2 years ago

That seemed to do the trick. Now, does anyone have a similar fix for #133 (Covers no longer shows after HA update)?

I don't have that issue as I don't use Covers but why not try the fix listed in that thread which is to use a custom repository from here: https://github.com/rosskyl/banner-card/releases/tag/0.13.0 and then manually make the modifications above?

swampylee commented 2 years ago

@swampylee Many Thanks! It is alive!

All thanks should go to @mbergdal

bcmitri commented 2 years ago

That seemed to do the trick. Now, does anyone have a similar fix for #133 (Covers no longer shows after HA update)?

I don't have that issue as I don't use Covers but why not try the fix listed in that thread which is to use a custom repository from here: https://github.com/rosskyl/banner-card/releases/tag/0.13.0 and then manually make the modifications above?

I can try again, but I seem to recall that was just an earlier fork of the code which is either missing other fixes, including mapping attributes.

ahbrims commented 2 years ago

I installed HA version 2022.3 yesterday and got the same problem, but today have installed again and now it works ok chrome on my Mac without @[mbergdal] changes. It still is not working in the HA app. I do note that the ha version is 2022.3.1 today, unsure if this is a change from yesterday? Anyway, the issue seems to have gone away?

nogueirasa commented 2 years ago

Same here.

image

Back to version 2022.2

tchellomello commented 2 years ago

Same here but with the comment from @mbergdal (https://github.com/nervetattoo/banner-card/issues/139#issuecomment-1058692053) worked like a charm. Thank you!!!

image

Soyde commented 2 years ago

Could you help me? I'm trying to apply solution from @mbergdal (https://github.com/nervetattoo/banner-card/issues/139#issuecomment-1058692053), I replaced 3 coincidences at /config/www/community/banner-card/banner-card.js. Also deleted gz file, cleared browser cache (indeed I also installed another plugin via HACS in order to do a forced clear cache when it is requested after installing other plugin) and also restarted Homeassistant but my buttons are still missing.

Maybe I'm missing this part, but I don’t know what to do "I also commented out the CSS-part related to"

Maybe someone can pass me the whole edited js file?

Please, help! Thanks

swampylee commented 2 years ago

Could you help me? I'm trying to apply solution from @mbergdal (#139 (comment)), I replaced 3 coincidences at /config/www/community/banner-card/banner-card.js. Also deleted gz file, cleared browser cache (indeed I also installed another plugin via HACS in order to do a forced clear cache when it is requested after installing other plugin) and also restarted Homeassistant but my buttons are still missing.

Maybe I'm missing this part, but I don’t know what to do "I also commented out the CSS-part related to"

Maybe someone can pass me the whole edited js file?

Please, help! Thanks

All I can suggest is that you go into Chrome settings and clear cache there, close browser and try again. If that doesn't work then you can try removing the CSS part you refer to which I think is this line highlighted with style.... below.

`    `}renderCustomElement(t,e,i=""){if(customElements.get(t))return this._renderCustomElement(t,e,i);console.error(t+" doesn't exist")}renderAsToggle({onClick:t,size:e,name:i,state:s,domain:n,entity:r,color:o}){return o=o||"var(--switch-checked-color)",j`
      <div class="entity-state" style="${this.grid(e)}">
        ${ot(i,t)}
        <span class="entity-value">
          <ha-switch
            **style="--mdc-theme-secondary: ${o};"**
            ?checked=${"on"===s}
            @click=${this._service(n,"toggle",r)}
          >
          </ha-switch>
        </span>
      </div>`
matteocorti commented 2 years ago

This is probably due to the update from Paper to Material Web Components that has been done in 2022.3 version. The problem seems to be related to the use of the in this code. (Ref: https://www.home-assistant.io/blog/2022/03/02/release-20223/#ui-upgrades)

My solution for now was to edit the /config/www/community/banner-card/banner-card.js and replace all instances of mwc-switch with ha-switch. (I also commented out the CSS-part related to ) Then save the file. (I did all this in the VSCode add-on)

To make the modified file to be served to Lovelace, you then will have to delete the .gz-file in the same folder (as it is served first if it is present). Then clear the browser cache (not only Ctrl+F5), but clear cached files. (Ref: https://hacs.xyz/docs/categories/plugins#special-notes-about-downloaded-lovelace-plugins)

Then refresh the Lovelace frontend and your switches should be present again.

It works like a charm. No need to comment out the CSS part.

Neu-Bob commented 2 years ago

https://hacs.xyz/docs/categories/plugins#special-notes-about-downloaded-lovelace-plugins

I'm having issues clearing the cache... any tips for that?

l4r53n commented 2 years ago

If you are using chrome: Shift + CTRL + DEL

moelloman commented 2 years ago

Hi, the workaround from @mbergdal in comment #139 works on the computer but not on the mobile phone. I use iOS Safari and the light switches are not shown. Any idea how to fix? Will be available an update of the frontend soon?

mbergdal commented 2 years ago

Hi, the workaround from @mbergdal in comment #139 works on the computer but not on the mobile phone. I use iOS Safari and the light switches are not shown. Any idea how to fix? Will be available an update of the frontend soon?

Works on my phone iPhone and iPad. Could this be a caching problem? Not sure how to force a cache update in iOS...

matteocorti commented 2 years ago

Hi, the workaround from @mbergdal in comment #139 works on the computer but not on the mobile phone. I use iOS Safari and the light switches are not shown. Any idea how to fix? Will be available an update of the frontend soon?

Works on my phone iPhone and iPad. Could this be a caching problem? Not sure how to force a cache update in iOS...

Device Settings (I don't have the English version) and then debug. You should have an option to clear the caches.

moelloman commented 2 years ago

Thanks @mbergdal and @matteocorti . It works in the browser but what I ment originally (sorry for my missleading post) is the mobile App. Any proposal to fix it there?

matteocorti commented 2 years ago

Thanks @mbergdal and @matteocorti .

It works in the browser but what I ment originally (sorry for my missleading post) is the mobile App. Any proposal to fix it there?

Device Settings (I don't have the English version) and then debug. You should have an option to clear the caches.

moelloman commented 2 years ago

Thanks @mbergdal and @matteocorti . It works in the browser but what I ment originally (sorry for my missleading post) is the mobile App. Any proposal to fix it there?

Device Settings (I don't have the English version) and then debug. You should have an option to clear the caches.

Found it, It's in App Settings- Debug - Clear local app cache. Thanks đź‘Ť

crempp commented 2 years ago

It appears upkeep on this plugin has slowed down or stopped. I use this card very extensively in my setup so it's important for me to keep it working. For that reason I have forked the repo and I have been merging in PRs submitted to @nervetattoo to fix many of the issues encountered over the past few months. I don't intend to take over development of this card but I realized that many issues are quickly fixed with PRs submitted only to sit unmerged. I figured it would be easy to just fork and pull the PRs over and publish releases.

If you would like to use my fork please feel free but keep in mind I don't guarantee anything. I will probably fix any catastrophic errors I will merge in bug fix PRs from the parent repo. I really hope @nervetattoo has time to get back to this because I love this card.

  1. Remove the old Banner Card from HACS
  2. Go to HACS, select "Frontend" and then click the three dots in the upper right and select "Custom Repositories"
  3. Enter Repository: https://github.com/crempp/banner-card and Category: Lovelace
  4. Click add

After the custom repository is added you'll see a new card available on the HACS Frontend page. Click "Download". You'll have to reload the frontend but you shouldn't have to change any usages of the card. It should just work.

I hope this helps.

bcmitri commented 2 years ago

It appears upkeep on this plugin has slowed down or stopped. I use this card very extensively in my setup so it's important for me to keep it working. For that reason I have forked the repo and I have been merging in PRs submitted to @nervetattoo to fix many of the issues encountered over the past few months. I don't intend to take over development of this card but I realized that many issues are quickly fixed with PRs submitted only to sit unmerged. I figured it would be easy to just fork and pull the PRs over and publish releases.

If you would like to use my fork please feel free but keep in mind I don't guarantee anything. I will probably fix any catastrophic errors I will merge in bug fix PRs from the parent repo. I really hope @nervetattoo has time to get back to this because I love this card.

  1. Remove the old Banner Card from HACS
  2. Go to HACS, select "Frontend" and then click the three dots in the upper right and select "Custom Repositories"
  3. Enter Repository: https://github.com/crempp/banner-card and Category: Lovelace
  4. Click add

After the custom repository is added you'll see a new card available on the HACS Frontend page. Click "Download". You'll have to reload the frontend but you shouldn't have to change any usages of the card. It should just work.

I hope this helps.

Doing the Lord's work. Unfortunately, you seem to be missing some fixes that were added in the following releases:

Any chances of getting those pulled in?

crempp commented 2 years ago

@bcmitri Thanks!

I didn't look at changes in the beta branch because I was uncertain how much had changed and what level of effort would be required to merge them in. I took a quick look and it doesn't look too crazy. I'll try it out later when I get some time.

crempp commented 2 years ago

@bcmitri, I cherry picked the three major fixes from those beta releases. Most of the changes in beta are for Github automations, switching the test runner and looks like an attempt to move to typescript. I'm not going to mess with that.

I didn't merge in anything from beta.1 since the only meaningful fix was Support row_size: auto which was already included in the master branch. I merged in the fixes in beta.2 and beta.3 for

There's a new release (0.13.3) you should be able to update to in HACS. I tested that the card still functions but I don't use those features so I didn't test the features themselves.

Enjoy!

bcmitri commented 2 years ago

@crempp Those were the ones! And, at a glance, it seems like everything is working properly. Thanks so much!

bucky2076 commented 2 years ago

working now for me too... can't thank you enough....

psleutel commented 2 years ago

@bcmitri Thanks so much!

Works as designed again

swampylee commented 2 years ago

@crempp Thanks very much - all working great!

maiconguelere commented 2 years ago

I have another workaround I just added "domain: sensor", an icon and an action to every "toggle" that dissapeared

It was like this:

  - entity: switch.light_1
    name: Light 1
    color: black
    map_state:
      'on':
        color: yellow

And now it is like this

  - entity: switch.light_1
    name: Light 1
    domain: sensor
    action:
      service: switch.toggle
    value: mdi:lightbulb
    color: black
    map_state:
      'on':
        color: yellow
wehrstedt commented 2 years ago

That seemed to do the trick. Now, does anyone have a similar fix for #133 (Covers no longer shows after HA update)?

https://github.com/wehrstedt/banner-card/commit/f4e634e9b70bb159740fd82f26a661e5a9953279

crempp commented 2 years ago

@wehrstedt I included your fix (thank you for that) in my forked release so you or others can point HACS at the forked repo.

wehrstedt commented 2 years ago

@wehrstedt I included your fix (thank you for that) in my forked release so you or others can point HACS at the forked repo.

Thanks, but im currently maintain my own fork (once it stops working due to HA updates) because I'm still waiting that https://github.com/nervetattoo/banner-card/pull/114 will be merged someday ... Are you actively maintain your fork?

clwolf75 commented 2 years ago

Now I'm confused at which fork to get! lol. But this worked great. And I prefer the icons versus the toggles.

I have another workaround I just added "domain: sensor", an icon and an action to every "toggle" that dissapeared

It was like this:

  - entity: switch.light_1
    name: Light 1
    color: black
    map_state:
      'on':
        color: yellow

And now it is like this

  - entity: switch.light_1
    name: Light 1
    domain: sensor
    action:
      service: switch.toggle
    value: mdi:lightbulb
    color: black
    map_state:
      'on':
        color: yellow
wehrstedt commented 2 years ago

I do not recommend to use mine. I only update my fork if something does not work in my setup. But it is also not useful to maintain different forks. Thats why i asked. I dont think that this project will be maintained anymore.

clwolf75 commented 2 years ago

That's unfortunate. I just created my dashboard about a week ago. I was going to use area cards, but they are very limited, so I found this card.

nogueirasa commented 2 years ago

It appears upkeep on this plugin has slowed down or stopped. I use this card very extensively in my setup so it's important for me to keep it working. For that reason I have forked the repo and I have been merging in PRs submitted to @nervetattoo to fix many of the issues encountered over the past few months. I don't intend to take over development of this card but I realized that many issues are quickly fixed with PRs submitted only to sit unmerged. I figured it would be easy to just fork and pull the PRs over and publish releases.

If you would like to use my fork please feel free but keep in mind I don't guarantee anything. I will probably fix any catastrophic errors I will merge in bug fix PRs from the parent repo. I really hope @nervetattoo has time to get back to this because I love this card.

  1. Remove the old Banner Card from HACS
  2. Go to HACS, select "Frontend" and then click the three dots in the upper right and select "Custom Repositories"
  3. Enter Repository: https://github.com/crempp/banner-card and Category: Lovelace
  4. Click add

After the custom repository is added you'll see a new card available on the HACS Frontend page. Click "Download". You'll have to reload the frontend but you shouldn't have to change any usages of the card. It should just work.

I hope this helps.

Thanks @crempp , back to home assistant updated

crempp commented 2 years ago

@wehrstedt I included your fix (thank you for that) in my forked release so you or others can point HACS at the forked repo.

Thanks, but im currently maintain my own fork (once it stops working due to HA updates) because I'm still waiting that #114 will be merged someday ... Are you actively maintain your fork?

@wehrstedt let's say I'm actively pulling in fixes submitted to this repo and other forks and I'm preparing releases in a way that HA can accept. As issues arise I'm watching this repo and other forks and I just pull the PRs into mine and create a release. At least that's my plan. If you have more fixes in the future please tag me and I'll pull them into my fork. So, in summary, I'm going to try to keep up but I really don't want to take over development of this project.