Lovelace-text-input-row

Share your Projects! Dashboards & Frontend
1

I wanted to use a text_input in an entities card, but found that the textbox displays very small squashed up to the right. So I created:

lovelace-text-input-row

If you use custom_updater you can add this by just having this in your resources:

resources:
  - url: /customcards/github/gadgetchnnel/lovelace-text-input-row.js?track=true
    type: js

Otherwise, you can add it manually by downloading the lovelace-text-input-row.js file from the repo and adding it like this:

resources:
  - url: local/path/to/file/lovelace-text-input-row.js?v=0.0.7
    type: js

You then use it like:

- type: entities
  entities:
    - entity: input_text.my_text
      type: 'custom:text-input-row'

Here is an example of how I use it in my own Lovelace UI:

- type: entities
  entities:
    - entity: input_text.announcement_text
      type: 'custom:text-input-row'
    - type: call-service
      name: ' '
      icon: 'mdi:voice'
      action_name: Announce It...
      service: script.send_annoucement

TextInputRow

8 Likes
2

Just made a slight tweak to this to allow the label to be overridden the same as the standard one. Previously it was just using the friendly name of the input_text entity but now you can use something like this to change it:

- type: entities
  entities:
    - entity: input_text.announcement_text
      name: Text to Announce
      type: 'custom:text-input-row'
3

@Steven_Rollason hi thanks for the lovelace card. is it possible to add padding around input text?

below is how my card looks right now

image

4

Hi Steven,

I wonder if you can help.

Although your card appears, when I edit I get the following message

“Your config is not supported by the UI editor:
Expected a value of type {entity,name,icon} | entity-id for entities.0.type but received "custom:text-input-row".
Falling back to YAML editor.”

Can you advise please?

5

what else needs to be set up to use this? do you have some config.yaml examples? I want to use this to send specific tts messages to specific alexa’s in the house.

6

figured it out. Also using hacs with https://github.com/snarky-snark/home-assistant-variables for stored varibles.

Untitled
lovelace manual card.

entities:
  - entity: input_select.announce_to
  - entity: input_number.alexa_announce_vol
  - entity: input_boolean.alexa_whisper
  - entity: input_text.announcement_text
    type: 'custom:text-input-row'
  - action_name: Announce It...
    icon: 'mdi:bell'
    name: ' '
    service: script.send_announcement
    type: call-service
type: entities

input_boolean.yaml

alexa_whisper:
  name: Whisper?
  initial: off
  icon: mdi:volume-medium

input_text.yaml

announcement_text:
  icon: 'mdi:voice'

input_select.yaml

announce_to:
  name: "Where would you like to send the announcement?"
  options:
  - Everywhere
  - Living room
  - Adrian's room
  - Ben's room
  - Kayla's room
  - Kylee's room
  initial: Everywhere

input_number.yaml

alexa_announce_vol:
  name: "Volume"
  min: 0
  max: 1
  step: 0.1
  initial: 0.5

scripts.yaml

send_announcement:
  alias: "Send announcement"
  sequence:
  - service: var.set
    data:
      entity_id: var.alexa_living_room_volume
      value_template: "{{state_attr('media_player.living_room', 'volume_level')|float}}"
  - service: var.set
    data:
      entity_id: var.alexa_adrian_s_volume
      value_template: "{{state_attr('media_player.adrian_s', 'volume_level')|float}}"
  - service: var.set
    data:
      entity_id: var.alexa_ben_s_volume
      value_template: "{{state_attr('media_player.ben_s', 'volume_level')|float}}"
  - service: var.set
    data:
      entity_id: var.alexa_kayla_s_volume
      value_template: "{{state_attr('media_player.kayla_s', 'volume_level')|float}}"
  - service: var.set
    data:
      entity_id: var.alexa_kylee_s_volume
      value_template: "{{state_attr('media_player.kylee_s', 'volume_level')|float}}"
  - service: media_player.volume_set
    data_template:
      entity_id: >
        {%- if is_state("input_select.announce_to", "Everywhere") -%}
          media_player.living_room, media_player.adrian_s, media_player.ben_s, media_player.kayla_s, media_player.kylee_s
        {%- elif is_state("input_select.announce_to", "Living room") -%}
          media_player.living_room
        {%- elif is_state("input_select.announce_to", "Adrian's room") -%}
          media_player.adrian_s
        {%- elif is_state("input_select.announce_to", "Ben's room") -%}
          media_player.ben_s
        {%- elif is_state("input_select.announce_to", "Kayla's room") -%}
          media_player.kayla_s
        {%- elif is_state("input_select.announce_to", "Kylee's room") -%}
          media_player.kylee_s
        {%- endif -%}
      volume_level: "{{states('input_number.alexa_announce_vol')|float}}"
  - service: notify.alexa_media
    data_template:
      target: >
        {%- if is_state("input_select.announce_to", "Everywhere") -%}
          media_player.everywhere
        {%- elif is_state("input_select.announce_to", "Living room") -%}
          media_player.living_room
        {%- elif is_state("input_select.announce_to", "Adrian's room") -%}
          media_player.adrian_s
        {%- elif is_state("input_select.announce_to", "Ben's room") -%}
          media_player.ben_s
        {%- elif is_state("input_select.announce_to", "Kayla's room") -%}
          media_player.kayla_s
        {%- elif is_state("input_select.announce_to", "Kylee's room") -%}
          media_player.kylee_s
        {%- endif -%}
      data:
        type: announce
      message: >
        {%- if is_state("input_boolean.alexa_whisper", "on") -%}
          "<amazon:effect name='whispered'>{{states('input_text.announcement_text')}}</amazon:effect>"
        {%- else -%}
          {{states('input_text.announcement_text')}}
        {%- endif -%}
  - delay: 00:00:10
  - service: media_player.volume_set
    data_template:
      entity_id: media_player.living_room
      volume_level: "{{states('var.alexa_living_room_volume')|float}}"
  - service: media_player.volume_set
    data_template:
      entity_id: media_player.adrian_s
      volume_level: "{{states('var.alexa_adrian_s_volume')|float}}"
  - service: media_player.volume_set
    data_template:
      entity_id: media_player.ben_s
      volume_level: "{{states('var.alexa_ben_s_volume')|float}}"
  - service: media_player.volume_set
    data_template:
      entity_id: media_player.kayla_s
      volume_level: "{{states('var.alexa_kayla_s_volume')|float}}"
  - service: media_player.volume_set
    data_template:
      entity_id: media_player.kylee_s
      volume_level: "{{states('var.alexa_kylee_s_volume')|float}}"
3 Likes
7

Hi there

Anychance you can tell me your var settings

Thanks

2 Likes
8

I tried replicating your code but hit a will with the ver, any chance you can share your setting for the stored varibles?

9

I would love to hear more about this as well.

10

I really like idea of ​​being able to send a tts from lovelace to a mobile phone. The option to send tts to any mediaplayer for me is easier with mini media player as a not programming expert user.
I would like to know if this could or something similar because it doesn’t work for me:

type : entities 
entities :
- entity: input_text.announcement_text 
  type: 'custom:text-input-row'
- type: call-service
  icon: 'mdi:voice'
  action name: Announce It.. 
  service: notify.mobile_app_pixel_5   
  data:
    message: TTS
    title : {{ states ('input_text.announcement_text') }}

Any help would be very appreciated, thanks in advance

11

I think I don’t quite understand templating or scope, but trying to get the following working and appreciate any insight anyone might have:

entities:
  - entity: input_text.gcode
    type: 'custom:text-input-row'
  - action_name: Send Gcode...
    icon: 'mdi:keyboard'
    name: ' '
    service: mqtt.publish
    service_data:
      topic: octoPrint/hassControl/commands
      payload_template: '{{ states("input_text.gcode") }}'
    type: call-service
type: entities

I’m getting an Unable to find referenced entities input_text.gcode when I execute the above card. All the mqtt info is correct (it executes the command when I hard code it in).

Do I need to somehow export input_text.gcode to make it available to the other entity?

I have lovelace-text-input-row installed via HACS and properly listed in my resources.

Thanks buckets!

12

Got it! Had to add a text_input.yaml file in the HA root and reference it in configuration.yaml with:

input_text: !include input_text.yaml

And it’s working great. Thanks for the awesome plugin

13

Steven, great component, I’m using it in my remote for Android box.

image

Anyway, main intention is to use this from phone, Android companion app, not from PC, but unfortunatelly, in Android app, you have to pres ENTER after text typing to update state of input_text.entity. Only after that, my command from “Send” button will work.

It is different situation from PC browser - state for input_text.entity is updated as soon as I’m typing, but as said, my intention is to use this from phone, not from PC :slight_smile:

Does anybody know some cheat/hack/tweak, which can help to skip pressing keyboard ENTER in Android app?

Thx.

14

I’ve overcome this challenge by setting hold action instead of tap action. So you have to press and hold the send button but it works on Android without having to do anything extra.

15

On the other hand, how did you get that send button to the right side of the input text row?

16

@JOHLC : So sad, this will also be boring, to hold button instead of tap it :slight_smile:

Regarding SEND button on the right end, this was accomplished with custom button-card. I don’t know did you already heard for this custom component (it is pretty famous), but if not - you need to install it firstly from HACS or manually. Afterwards, you can use code below for lovelace, I pulled only the part related with input-text-row and send button:

image

type: horizontal-stack
cards:
    - entity: input_text.orion_box
      type: custom:text-input-row
      name: Type here...
    - entity: media_player.orion_tv
      name: Send
      icon: hass:send
      show_name: false
      show_icon: true
      size: 50%
      color_type: card
      color: rgba(0, 0, 0 ,0)
      styles:
        card:
          - height: 60px
          - width: 60px
      type: custom:button-card
      tap_action:
        haptic: success
        action: call-service
        service: script.send_text_to_orion_box
1 Like
17

It’s better than having to remember to press enter on Android.
Totally familiar with custom button card. Thanks for this!

Adjusted for my needs and for hold action:

image
image544×509 59.6 KB 

            - type: horizontal-stack
              cards:
                - entity: input_text.input_text
                  type: custom:text-input-row
                  name: Keyboard input
                - entity: script.send_input_text
                  name: Send
                  icon: mdi:send
                  show_name: false
                  show_icon: true
                  size: 35%
                  styles:
                    card:
                      - height: 60px
                      - width: 60px
                  type: custom:button-card
                  hold_action:
                    haptic: success
                    action: call-service
                    service: script.send_input_text
                  tap_action:
                    action: null

Couldn’t figure out how to give some padding before ‘Keyboard input’

18

Never used this before, planning to try it in future, but I guess that you can go with lovelace-card-mod.
Alternatively, dirty hack, you can add empty and transparent button-card without action, at the beginning of the line.

19

This custom uses Polymer and Polymer will be deprecated in Home Assistant 2023.5. Version 2023.4 raises a warning about it. It would be great if the below issue would be resolved:

1 Like
20

To be honest, this card is no longer needed. The built input_text row was overhauled at some point and it now takes up a full entities card row.

I was able to ditch this card for the built in card and it looks the same. There is small space to the left that holds an icon, but for the most part the input for it takes up 90% of the width instead of the old 30% that it used to be.

I urge others to just switch to the built in card.

I.e. Change

type: entities
entities:
- type: custom:text-input-row
  name: something
  entity: input_text.xyz

to

type: entities
entities:
- name: something
  entity: input_text.xyz

w/o icon
image

w/ icon
image

@Miguel_Alvarez @Mariusthvdb

1 Like