Thanks for this great component, and you helping me improve my home announcement widget. It allows us to send messages to the dashboard to each individual room or to all rooms at once, using tts to Google Home devices:
I also used UIX to make a foundry, which wraps this in a component I can reuse.
Which buttons are shown can be set by parameters, so I can put one in each room dashboard with only the appropriate button. This is the code for the uix foundry:
uix_foundries:
message-editbox:
forge:
mold: card
billets:
edwin: false
fleur: false
rianne: false
jasper: false
allen: false
hide_label: true
element:
type: custom:uix-forge
forge:
mold: card
element:
type: horizontal-stack
square: false
cards: |
[
{{ {
"type": "custom:super-text-input",
"entity": "input_text.tts_tekst",
"placeholder": "Omroeptekst",
"hide_label": hide_label,
"update_mode": "realtime",
"debounce_time": 300,
"style": {
"card": {
"height": "32px",
"border-radius": "0px",
"padding": "0px",
"margin": "0px"
},
"editor": {
"vertical-align": "center"
}
}
} }}
{% if jasper %}
, {{ {
"type": "custom:button-card",
"entity": "input_button.tts_jasper",
"show_entity_picture": true,
"show_name": false,
"entity_picture": "[[[ return states['person.jasper_delsman'].attributes.entity_picture ]]]",
"styles": {
"card": [
{
"border-radius": "50%",
"height": "32px",
"width": "32px",
"padding": "0"
}
],
"icon": [
{
"border-radius": "50%",
"width": "100%"
}
]
},
"tap_action": {
"action": "toggle"
},
"hold_action": {
"action": "toggle"
}
} }}
{% endif %}
{% if rianne %}
, {{ {
"type": "custom:button-card",
"entity": "input_button.tts_rianne",
"show_entity_picture": true,
"show_name": false,
"entity_picture": "[[[ return states['person.rianne_delsman'].attributes.entity_picture ]]]",
"styles": {
"card": [
{
"border-radius": "50%",
"height": "32px",
"width": "32px",
"padding": "0"
}
],
"icon": [
{
"border-radius": "50%",
"width": "100%"
}
]
},
"tap_action": {
"action": "toggle"
},
"hold_action": {
"action": "toggle"
}
} }}
{% endif %}
{% if edwin %}
, {{ {
"type": "custom:button-card",
"entity": "input_button.tts_edwin",
"show_entity_picture": true,
"show_name": false,
"entity_picture": "[[[ return states['person.edwin'].attributes.entity_picture ]]]",
"styles": {
"card": [
{
"border-radius": "50%",
"height": "32px",
"width": "32px",
"padding": "0"
}
],
"icon": [
{
"border-radius": "50%",
"width": "100%"
}
]
},
"tap_action": {
"action": "toggle"
},
"hold_action": {
"action": "toggle"
}
} }}
{% endif %}
{% if fleur %}
, {{ {
"type": "custom:button-card",
"entity": "input_button.tts_fleur",
"show_entity_picture": true,
"show_name": false,
"entity_picture": "[[[ return states['person.fleur_delsman'].attributes.entity_picture ]]]",
"styles": {
"card": [
{
"border-radius": "50%",
"height": "32px",
"width": "32px",
"padding": "0"
}
],
"icon": [
{
"border-radius": "50%",
"width": "100%"
}
]
},
"tap_action": {
"action": "toggle"
},
"hold_action": {
"action": "toggle"
}
} }}
{% endif %}
{% if allen %}
, {{ {
"type": "custom:button-card",
"entity": "input_button.tts_allen",
"icon": "mdi:account-group",
"show_icon": true,
"show_name": false,
"styles": {
"card": [
{
"border-radius": "50%",
"height": "32px",
"width": "32px",
"padding": "0"
}
],
"icon": [
{
"border-radius": "50%",
}
]
},
"tap_action": {
"action": "toggle"
},
"hold_action": {
"action": "toggle"
}
} }}
{% endif %}
]
}