A little help needed with obtaining a text input into Angular

1

Hey,
I integrated my Home Assistant with Google Assistant. I created some scripts so I can send a “broadcast”-command to the Google Home. This is all working great, but I was missing the option in Tileboard to create a Text Input Tile.

I managed to create it, through the custom tile function, but I’m stuck getting the text input and assigning it to a variable.

Since I’m too inexperienced with Angular, I can’t solve it on my own. I’m pretty sure that I’m close to the solution.

{
 position: [0, 0],
 type: TYPES.CUSTOM,
 title: 'Custom Message',
 id:{},
 icon: 'mdi-monitor',
 width: 3,
 customHtml: '<div class="form__group field"><input type="input" class="form__field" placeholder="Message..." name="MSG" ng-model="MSG" required /><label for="MSG" class="form__label">Message...</label><div ng-if="supportsFeature(bericht, item, entity)" class="item-button -bottom-right" ng-click="text()"><i class="mdi mdi-send"></i></div></div>',
 action:function (item, entity){

 console.log(this.$scope.MSG);
 return this.$scope.sendTextString(item, entity);
                            
},

   $scope.sendTextString = function (item, entity) {
       var text = $scope.MSG;
       
        sendItemData(item, {
         type: "call_service",
         domain: "rest_command",
         service: "assistant_broadcast",
         service_data: {
            command: text
         }
      });
       
   };

The $scope.MSG keeps being “undefined”.
Anyone know how I can update this variable (text)?

Thanks in advance

2

Hey @resoai,
Maybe you can help me out a little?

3

Why aren’t you simply passing message as a param to sendTextString?

4

Thnx for the quick reply!
I understand what you’re saying, but I have honestly too little experience to make it work.
Right now, I can’t seem to wrap my head around it.

Could you set me on to right path a little more? :slight_smile:

5

There are a lot of weird leftovers you copy-pasted from other places but to make it work, if

console.log(this.$scope.MSG); actually outputs the message in the browser console,

this.$scope.sendTextString(this.$scope.MSG);

$scope.sendTextString = function (text) {

6

Thank you!

I might’ve been a little unclear;
The this.$scope.MSG isn’t showing the string, only “undefined”.

I tidied up the code a little:
Config.js

position: [0, 0],
type: TYPES.CUSTOM,
title: 'Custom Message',
id:{},
width: 3,
customHtml: '<input type="input" name="MSG" ng-model="MSG" required /></div>',

action:function (item, entity){
console.log(this.$scope.MSG);
return this.$scope.sendTextString(item, entity);
},

main.js

   $scope.sendTextString = function (item, entity) {
       var text = $scope.MSG;
       
        sendItemData(item, {
         type: "call_service",
         domain: "rest_command",
         service: "assistant_broadcast",
         service_data: {
            command: text
         }
      });
       
   };

The main question is:
How do I get the input value as the “text” variable?

7

I figured it out.

Config.js (gave an id to button)

position: [0, 0],
type: TYPES.CUSTOM,
title: 'Custom Message',
id:{},
width: 3,
customHtml: '<input type="input" name="MSG" id="bericht" ng-model="MSG" required /><div id="MsgClick" class="item-button -bottom-right"><i class="mdi mdi-send"></i></div>',

action:function (item){
return this.$scope.sendTextString(item);
},

And main.js

    $scope.sendTextString = function (item) {

        document.getElementById('MsgClick').onclick = function () {
             var text = document.getElementById("MSG");
             console.log(text.value);
             sendItemData(item, {
                type: "call_service",
                domain: "rest_command",
                service: "assistant_broadcast",
                service_data: {
                    command: text.value
                }
            });
        }


    };
8

Just be careful not to have two of them since there can be only one MSG

1 Like