Set dashboard template msg.payload on-click

Dashboard
1

On the dashboard template I am able to display a number a font-awesome icons. These will be used to send an instruction to an MQTT node to control a toy car (forward, back, left, right and stop).

I want to be able to click this icon and on-click the msg.payload should output some value or text that I set, how can I do this? So far I only have the icons and I am thinking that ng-click would be a good way forward but I am unsure how to implement it (tried ng-click = “msg.payload =100”). Can anyone assist?

<div ng-bind-html="msg.payload"></div>
<div>
<i ng-click="msg.payload = 100" class="fa fa-chevron-circle-up" style="font-size:48px;color:red"></i>
<br>
<i class="fa fa-chevron-circle-left" style="font-size:48px;color:red"></i>
<i class="fa fa-stop-circle" style="font-size:48px;color:red"></i>
<i class="fa fa-chevron-circle-right" style="font-size:48px;color:red"></i>
<br>
<i class="fa fa-chevron-circle-down" style="font-size:48px;color:red"></i>
</div>
2

why not use the existing button widget set to size 1x1 ?

3

It’s just that an icon is a better UI for the toy car function. BTW I think I have the solution to my own question, the following format for ng-click seems to do what I need

<button ng-click="send({payload: 'Hello World'})">
    Click me to send a hello world
</button>

<i ng-click="send({payload: 100})" class="fa fa-chevron-circle-left" style="font-size:48px;color:red"></i>
2 Likes
4

you mean like this ? :slight_smile:
image

but no matter - glad you have it working

2 Likes