Ive instaled button card by lovelace but when im try to use show me this error
Visual editor not supported
The visual editor is not available for this element type.
You can still edit your configuration using YAML.
Hi, the button card is a default card so it doesnāt have to be installed.
When you add it to your dashboard, itās possible that you get that message when creating ānon-standardā buttons OR when you make a mistake in setting it up.
If youāre using a simple button, you might have to refresh your browser to make that message go away.
Itās a lot easier to help you when you show what you have. (preferable the yaml code, pasted as code by using the <> button at the top of the message window)
I installed it to get a custom button, but this always appears, even without having put the button code and when I try to add it manually it says that the icon was not found even though it was already installed by HACS. I have already created and deleted the ui folder, the www folder exists and any external button that I try to use appears this
So you are talking about the custom button, not the standard one!?
Your picture is not showing.
The custom button has to be configured through yaml and doesnāt show the visual editor by design.
All the info: GitHub - custom-cards/button-card: āļø Lovelace button-card for home assistant
The HA thread with a lot of examples as well: Fun with custom:button-card
1 Like
thanks, now I have another problem
Ā“Ā“Ā“
type: custom:button-card
color_type: label-card
color: rgb(200, 255, 124)
name: Morning
badges:
- type: entity
entity: switch.kitchen_scene_1 - type: entity
entity: weather.casa - type: entity
entity: switch.living_room_light
styles:
card:- padding: 10px
grid: - grid-template-areas: ā"e n"ā
- grid-template-columns: auto 1fr
- align-items: center
name: - font-size: 20px
- justify-self: start
- margin-left: 10px
custom_fields:
entity_field:- align-self: center
- justify-self: start
custom_fields:
entity_field: |
[[[
const tempEntity = states[āsensor.casa_realfeel_temperatureā];
if (tempEntity) {
return<ha-icon icon='mdi:thermometer' style='width: 24px; height: 24px; margin-right: 5px;'></ha-icon> <span style='font-size: 18px;'>${tempEntity.state}Ā°C</span>;
} else {
return<ha-icon icon='mdi:alert' style='width: 24px; height: 24px; margin-right: 5px;'></ha-icon> <span style='font-size: 18px;'>Entidade nĆ£o encontrada</span>;
}
]]]
lock:
enabled: false
duration: 5
unlock: tap
Ā“Ā“Ā“
- padding: 10px
I need in the same line morning and 3 entity i made em comum button but in the button card dont work
type: vertical-stack
cards:
Ā“Ā“Ā“
- type: heading
heading: Bem-vindo
heading_style: title
badges:- type: entity
show_state: true
show_icon: true
entity: sensor.casa_realfeel_temperature - type: entity
entity: weather.casa - type: entity
entity: sensor.time
Ā“Ā“Ā“
I need this code in an button for me change de color
- type: entity
Just a heads up, we can copy and edit your code much faster if itās posted using the following format. See #11 for instructions.
type: vertical-stack
cards:
- type: heading
heading: Bem-vindo š
heading_style: title
badges:
- type: entity
show_state: true
show_icon: true
entity: sensor.casa_realfeel_temperature
- type: entity
entity: weather.casa
- type: entity
entity: sensor.time
The vertical stack seems to be OK, except for that space in the first line (but that could be a copy/paste error)
Just try yourself to create a card with only that vertical stack and you will see if/what works and doesnāt.
Also, your other post is not properly formatted: this is necessary to be able to help you.
TIP: when you are creating more complex cards where you embed one card in another, just break it down in (or create it) step-by-step to see where you are wrong.
1 Like
I worked on your card a bit was confused on what you were trying to achieve. @Nick4 has provided sound advice.
type: vertical-stack
cards:
- type: custom:button-card
color_type: label-card
color: rgb(200, 255, 124)
name: Morning
badges:
- type: heading
heading: Bem-vindo š
heading_style: title
badges:
- type: entity
show_state: true
show_icon: true
entity: sensor.casa_realfeel_temperature
- type: entity
entity: weather.casa
- type: entity
entity: sensor.time
styles:
card:
- padding: 10px
grid:
- grid-template-areas: ā"e n"ā
- grid-template-columns: auto 1fr
- align-items: center
name:
- font-size: 20px
- justify-self: start
- margin-left: 10px
- type: heading
heading: Bem-vindo š
heading_style: title
badges:
- type: entity
show_state: true
show_icon: true
entity: sensor.casa_realfeel_temperature
- type: entity
entity: weather.casa
- type: entity
entity: sensor.time
1 Like
I try put de seconde code inside of the first code, but i dont know how, cause on the first code show icon and not entity
type: custom:button-card
color_type: label-card
color: rgb(200, 255, 124)
name: Bem Vindo
badges:
- type: entity
entity: switch.kitchen_scene_1
- type: entity
entity: weather.casa
- type: entity
entity: switch.living_room_light
styles:
card:
- padding: 10px
grid:
- grid-template-areas: "\"n e1 e2 e3\""
- grid-template-columns: 1fr fr 1fr 1f
- align-items: end
name:
- font-size: 28px
- justify-self: start
- margin-right: 0px
- margin-left: 15px
custom_fields:
custom_fields:
e1: |
[[[
return `<ha-icon icon="mdi:light-switch" style="width: 40px; height: 40px;"></ha-icon>`;
]]]
e2: |
[[[
return `<ha-icon icon="mdi:weather-partly-cloudy" style="width: 40px; height: 40px;"></ha-icon>`;
]]]
e3: |
[[[
return `<ha-icon icon="mdi:ceiling-light" style="width: 40px; height: 40px;"></ha-icon>`;
]]]
type: vertical-stack
cards:
- type: heading
heading: Bem-vindo š
heading_style: title
badges:
- type: entity
show_state: true
show_icon: true
entity: sensor.casa_realfeel_temperature
- type: entity
entity: weather.casa
- type: entity
entity: sensor.time