Finally announcing my suite of Lovelace plugins

I have no idea if that can be done.

I’m going to make an educated guess and say no since you tried it and it didn’t work. :laughing:

I tried that before with secondary-info and could never get it to work.

But I’m not sure what you mean by the above?

the plug in itself should show the current state by whichever button is “lit up”.

OK, so I guess the axe has come down.

The issue:

Back when I started making these custom card I wasn’t (and I’m definitely still not) a web developer so I relied heavily on (let’s say :wink:) “borrowing” from an existing card template.

I used that existing template to create all of the variants I have now so I could use the better looking cards and also provide them to others.

now tho the HA dev team has decided to remove the framework that these existing cards use (Polymer) from HA and replace it with a different framework (Lit). I guess it’s been in the works now for a while but, as I’m not a real dev, I don’t follow the dev blog to know about what was coming.

They just finally announced it in the latest HA monthly update release notes and they are going to be removing it in the next release. So there isn’t much warning to learn what I need to keep the cards working.

Here is my point…

Does anyone know what I need to do to update my cards to the new framework so they continue to work after the next HA release.

From my understanding there are two options -

  • either update everything to Lit
  • or manually load polymer

I’d like to do the first to make it future proof but I don’t think I have the knowledge (or the time to get the knowledge) to update things.

And there are no concrete examples of how I need to “load Polymer” myself. I think it just needs an “import Polymer…” statement at the beginning of the card config but I’m not sure that’s all that is needed.

If someone knows what needs to be done to update the cards to Lit then if you could just give me the basic outline of what needs done I think I’m smart enough to use that as a cookie-cutter to update the rest of the cards.

Otherwise I think the cards will need to be removed. Which is a shame as I really have liked the way they looked and worked. Especially for the pre-set setpoint cards. And even more especially since the new “mushroom” style more-info pop-ups seemed to have made it harder to access the setpoints for covers, fans, etc.

thanks for the help in advance.

Love your fan card, now of course it does not work. I am not smart enough myself to convert this over but here are two primer links which may help.

2 Likes

yeah, I know.

I’ve been trying to figure out how to keep them working but not having much success yet. I’m not a real developer and my real life is ridiculously busy right now so I haven’t had a lot of time to put into this.

I’ll keep trying and if I get any success I’ll let everyone know here.

Thanks for your interest in my plugins.

6 Likes

Another user on Github created a PR for the fan-percent-button-row plugin and I’ve released an update via HACS which should be available soon.

Please test it out and let me know either way if it works or not and if it’s good then I can use it as a template to get the others updated.

thanks to user @ben-ty on Github for doing the legwork to get this updated.

2 Likes

I’ve also got the toggle-control-button-row and light-brightness-preset-row plugins updated now too.

I’ll get all the others done over the next day or so and get them released too so you should see those pop up eventually.

All I needed was a template to get me going! :laughing:

5 Likes

Thank you for all your hard work on this finity. I have been playing around with it and the only issue I came across was in the iOS app. Because I like bigger buttons mine were set to 60px. By doing this in the new code the row of buttons would wrap. So here is the fix for others if they experience the same issue.

It looks like the old code used iron-flex which is no longer needed with modern css. But this was what kept the box from text wrapping.

<style is="custom-style" include="iron-flex iron-flex-alignment"></style>

The fix is to use a css flexbox CSS Flexbox. Here is the updated code below.

	static get styles() {
		return css`
			:host {
				line-height: inherit;
			}
      .box {
        display: flex;
        flex-direction: row;
      }
			.mode {
				margin-left: 2px;
				margin-right: 2px;
				background-color: #759aaa;
				border: 1px solid lightgrey; 
				border-radius: 4px;
				font-size: 10px !important;
				color: inherit;
				text-align: center;
				float: left !important;
				padding: 1px;
				cursor: pointer;
			}
		`;
	}

Then in your html section. Also, I don’t think the class='horizontal justified layout' with the <div> is needed as there is no class setup with that name.

<div id='button-container' class='box'>
1 Like

Thanks.

I just had someone else mention they had wrapping issues.

I’ll get the plugins updated with the new code.

EDIT:

updated code incoming. :slightly_smiling_face:

1 Like

Is there a way to include the option to wrap the entity name under the icon? I’m using buttons in a horizontal grid to achieve such a look I want, but that set up doesn’t highlight the button with the current light level like your plugin does. But your plugin is cutting off the entity name on mobile with larger width preset buttons.

The look I want:

What yours currently looks like on mobile with 75px width:

I don’t think so. Or if you can I don’t know how.

Mine just uses the existing entity row but changes the controls to use mine instead.

Maybe you can use card-mod (another custom plugin) or something similar to accomplish it but again I wouldn’t know how.