Lovelace Voice Card: Text-to-Speech from Dashboard

Share your Projects! Dashboards & Frontend
1

I’ve just reworked my code for announcing messages, and I thought I’d share it. There are blueprints available for this functionality, but I find my approach much cleaner and more streamlined. Let me know if you have any thoughts!

Screenshot 2024-12-11 at 2.23.23 PM
Screenshot 2024-12-11 at 2.23.23 PM802×220 8.17 KB

Home Assistant: Announce Messages with Google Home

This guide helps you set up a feature in Home Assistant where:

  1. A user types a message into a text input field.
  2. The message is announced on a Google Home speaker when the “Send” button is pressed.
  3. After the message is announced, the input field resets to blank.

Step 1: Configure the Input Field

Create a text input for users to enter messages.

  1. Open your configuration.yaml file or use the Helpers UI in Home Assistant.

  2. Add the following configuration:

    input_text:
  message_to_bedroom:
    name: What You Got to Say?
    initial: ""
    max: 255

  3. Restart Home Assistant to apply the changes.

Step 2: Create the Script

The script will:

  • Announce the entered message using TTS.
  • Reset the input field after sending.

  1. Go to Settings > Automations & Scenes > Scripts.

  2. Create a new script and paste the following YAML:

    alias: Announce TTS Message
description: Announce a typed message to the bedroom Google Home speaker
mode: single
sequence:
  - service: tts.cloud_say
    data:
      entity_id: media_player.YOURS
      message: "{{ states('input_text.message_to_bedroom') }}"
  - service: input_text.set_value
    target:
      entity_id: input_text.message_to_bedroom
    data:
      value: ""

  3. Save the script.

Step 3: Add the Lovelace Card

Create a card with:

  • A text input field for entering the message.
  • A “Send” button to trigger the script.

  1. Edit your Lovelace dashboard.

  2. Add a Manual Card and use the following configuration:

    type: horizontal-stack
cards:
  - type: entities
    entities:
      - entity: input_text.message_to_bedroom
        name: What You Got to Say?
        icon: mdi:chat
  - type: custom:button-card
    icon: hass:send
    show_icon: true
    show_name: false
    styles:
      card:
        - height: 90px
        - width: 90px
    tap_action:
      action: call-service
      service: script.turn_on
      service_data:
        entity_id: script.announce_tts_message

  3. Save the card.

Step 4: Test the Setup

  1. Open your dashboard.
  2. Enter a message in the text field (e.g., “Wake Up Time!”).
  3. Press the Send button.
  4. The message should:
    • Be announced on the Google Home speaker.
    • Reset the text field to blank.
1 Like