card for cover.

[madmicio]

hello, I took the liberty of modifying your card to make it work with the covers.
everything works perfectly, I just want to call Home Assistant scripts with the left buttons.
can you help me?

[DBuit]

Hello @madmicio very nice!

How far are you with the scripts and what is not working right now?
You got the buttons and you want onclick to start a script i think?

For the click action on the button in the html you can do something like this:

<button @click="${this._callScriptApri()}">apri</button

So when you click the button in calls a js function with the name _callScriptApri
than in the js we wanna make the function and call the script you can do something like this:

_callScriptApri() {
  this.hass.callService("homeassistant", "script.script_ name");
}

hope it helps you a bit if you need more help let me know and maybe share your code than i can look at it :)

[madmicio]

Hi!
thanks for your help.
with your code I have solved the problem of the scripts
although I had to make the following changes:

<button @click="${this._callScriptApri()}">apri</button

to

<button class="script-btn" @click=${e => this._callScriptApri()}>Apri</button>

with your code, as soon as I loaded the page the scripts started, adding e => the code starts only when I click
then I had another problem. if I configure it as a button, when I click it remains the appearance of the button. so I did some tests and the only solution I found is to use the button link, but so I lost the "click" effect.

the code:

_callScriptApri() { this.hass.callService("homeassistant", "script.script_ name"); }

to

_callScriptApri() { this.hass.callService("homeassistant", "turn_on", { "entity_id": "script.script_name" }); }

---

now I have another desire: to activate and deactivate an automation with a button toggle.
with the same idea I used this function:

_calltoggleAutomationAlba() { this.hass.callService("homeassistant", "toggle", { "entity_id": "automation.automation_name" }); }

but I have difficulty with the appearance of the button.
in your original project you use a checkbox with reference to

?checked=${stateObj.state == "on"}

but how do I understand the status of my specific automation?

[madmicio]

how can I change the name of the card in order to use your original with the lights and mine with the covers?

[DBuit]

You have to change 2 parts

first
class CustomSmartHomePanelCard extends LitElement {

Rename the class to a new name, so CustomSmartHomePanelCard can be CustomSmartCoversPanelCard or something

second
customElements.define('custom-smart-home-panel-card', CustomSmartHomePanelCard);

use the class you just renamed and change the custom-smart-home-panel-card to something like custom-smart-covers-panel-card

[madmicio]

ok. work perfectly

the most complicated question remains.
how to get the status of a specific entity for a toggle button?

it might be useful to insert the buttons on the left as different entities than the entities present in the main page, directly from the lovelace configuration, but honestly I wouldn't know how to do it

[DBuit]

He man

don't know how your lovelace configuration for the card looks like now but if you look at the config of the card i made you can add something like buttons with an array off entities and configuration for the buttons which can be used in the card to create the buttons with the right entity

for example:

- type: "custom:custom-smart-home-panel-card"
  title: Test
  icon: mdi:floor-lamp
  showButton: "show"
  buttonText: "Test"
  buttonPath: "/lovelace/0"
  background: "#1c1d1f"
  entities:
    - entity: light.beganegrond
    - entity: light.voordeurlicht
  buttons:
    - entity: button.test
       name: button name
       icon: button icon?
    - entity: button.test2
       name: button name
       icon: button icon?

So we got buttons in the configuration.
In the code of the card this information is in the variable this.config so we can render the buttons with something like this (used the html from my original button in the sidebar):

${this.config.buttons.map(button => {
<button class="back-btn" @click=${e => this._someActionOnClick(button.entity)>${button.icon ? '<ha-icon icon="'+button.icon+'" /> ' : ''}${button.name}</button>
})}

This code will generate a button for each row in buttons with the right name and icon and the given entity will be used in the click function on the button.

hope this helps you a bit.

[madmicio]

where is the error?
the card is loaded but nothing appears in the section dedicated to the buttons

return html

        </div>
        <div class="center">
          <div class="icon">
            <ha-icon icon="${this.config.icon}" />
          </div>
          <h1>${this.config.title}</h1>
          <h3>${this._stateCount()} ${countText}</h3>
        </div>
        <div class="bottom">
          ${this.config.buttons.map(button => {
            html`<button class="back-btn" @click=${e => this._switch(button.entity)}>${button.icon ? '<ha-icon icon="'+button.icon+'" /> ' : ''}${button.name}</button>` })}

        </div>
      </div>
      
      <div class="main">
        <div class="inner-main" style="width:${this.config.entities.length * 150}px;">
        ${this.config.entities.map(ent => {
            entityCounter++;
            var switchValue = 0;
            const stateObj = this.hass.states[ent.entity];
            switch(stateObj.state) {
                case 'on':
                    switchValue = 1;
                    break;
                case 'off':
                    switchValue = 0;
                    break;
                default:
                    switchValue = 0;
            }`

[DBuit]

hard to say. any console errors in browser?
or can you share full code and lovelace yaml than i can test it myself?

[dfgas]

any updates on the extra buttons?