UI Template Button: ng-mousedown=start, ng-mouseup=stop

Dashboard
1

I am trying to make a bit of a dynamic dashboard. So far everything is working just fine...

I pull some data from a sqlite database (device name, device IP), generate buttons through the UI-Template using ng-repeat. When someone clicks on one of the buttons, it sends the correct device name and device IP address.

The ONLY part I can't figure out is how to add an additional value when ng-mousedown and ng-mouseup.

Right now... the payload is:

msg.payload = null
msg.devicename = device name
msg.ipaddress = device ipaddress

I need to set msg.payload to string "start" on ng-mousedown, and "stop" on mouseup. Here is the code in my UI Template:

<md-list>
    <md-list-item ng-repeat="payload in msg.payload">
        <md-button class="md-ink-ripple" ng-mousedown="send(payload)" ng-mouseup="send(payload)">{{payload.devicename}}</md-button>
    </md-list-item>
</md-list>

What do I need to add to this to set the msg.payload to start/stop on mousedown/mouseup without losing/overwriting my other data?

Thanks in advance!

2

Look at the following thread for tips on how to do that: Momentary button on Dashboard

3

Awesome, ty! This looks like it gives me exactly what I was looking for! :slight_smile:

1 Like
4

Got this to work using your suggestion.... just wanted to post the code for anyone else looking for it.

I updated the original payload to include the "start" and then mouseup to just send the "stop":

<md-list class="momentary">
    <md-list-item ng-repeat="payload in msg.payload">
        <md-button class="md-ink-ripple" ng-mousedown="send(payload)">{{payload.devicename}}</md-button>
    </md-list-item>
</md-list>

<script>

(function($scope) {
    
$('.momentary').on('touchend mouseup', function(e) {
    e.preventDefault(); //prevent default behavior
    $scope.send({"payload": "stop"});
});
    
})(scope);
</script>

Thanks again!

1 Like