Momentary Button

[sbaik]

You can set the left and top properties on the right (under dimensions and position) or you can bump it left/right/up/down using the arrow keys.

I would still have to click it to get to the point where I can input dimensions and/or using arrow keys, so it looks like mousedown is not going to be suitable for this instance.

The previous SCADA platform that the system had a button function to accommodate this. We are transferring the entire system to Mango and would like the functionality to follow. I was told changing PLC programming is outside of our scope of work for this project as to not make any changes to a working program to adjust for graphics.

Is the server side script Phil mentioned an alternative without the mentioned bugs? Is it possible for a functional momentary button to be developed as a drop in Mango component?

Thanks,

[Jared Wiltshire]

@sbaik said in Momentary Button:

I would still have to click it to get to the point where I can input dimensions and/or using arrow keys, so it looks like mousedown is not going to be suitable for this instance.

Ah true.

You could use an expression like this to disable the mousedown if it's on the designer page -
ng-mousedown="!$state.includes('ui.settings.dashboardDesigner') && point.setValue(true)"

@sbaik said in Momentary Button:

The previous SCADA platform that the system had a button function to accommodate this. We are transferring the entire system to Mango and would like the functionality to follow. I was told changing PLC programming is outside of our scope of work for this project as to not make any changes to a working program to adjust for graphics.

Yeah fair enough, my point was simply there should be some logic in the PLC to prevent the pumps from running continuously should the "I've lifted the mousebutton" message fail to get back to the PLC for one reason or another. e.g. a 1 second timer that is reset on every positive edge writen in from the SCADA system.

Here's an example that uses ng-mouseleave to set the value back to false when the mouse leaves the button.

<div class="ma-designer-root" id="333825a9-93b9-4ccb-8fd1-0543be62153a" style="width: 1366px; height: 768px; position: relative;">
    <ma-button id="20e716b4-479f-48ee-b294-8398662f7a50" raised="true" style="position: absolute; left: 135px; top: 148px;" label="Jog" ng-mousedown="!$state.includes('ui.settings.dashboardDesigner') && (myValue = true)" ng-mouseup="!$state.includes('ui.settings.dashboardDesigner') && (myValue = false)" ng-mouseleave="!$state.includes('ui.settings.dashboardDesigner') && (myValue = false)"></ma-button>
    <ma-indicator id="a7708f6c-dfe7-4350-b424-ccc6ea80f20d" style="position: absolute; width: 125px; height: 90px; left: 121px; top: 251px;" color-false="#e90606" color-true="#0be909" default-color="#fff700" value="myValue"></ma-indicator>
</div>

@sbaik said in Momentary Button:

Is the server side script Phil mentioned an alternative without the mentioned bugs?

He was talking about the old graphical views, you don't want to use those.

@sbaik said in Momentary Button:

Is it possible for a functional momentary button to be developed as a drop in Mango component?

Definitely. You would use a user module - https://help.infiniteautomation.com/getting-started-with-a-user-module/

[Jared Wiltshire]

I decided to add a directive to the main app for this. Here it is as a user module so you can use it now. It simply executes an expression every x milliseconds while the mouse button is held down on the element.

define(['angular', 'require'], function(angular, require) {
'use strict';

var userModule = angular.module('userModule', ['maUiApp']);

jogDirective.$inject = ['$interval'];
function jogDirective($interval) {

    class JogController {
        static get $$ngIsClass() { return true; }
        static get $inject() { return ['$element', '$scope']; }
        
        constructor($element, $scope) {
            this.$element = $element;
            this.$scope = $scope;
            
            const boundStart = event => {
                $scope.$apply(() => {
                    this.jogStart(event);
                });
            };
            
            const boundEnd = event => {
                $scope.$apply(() => {
                    this.jogEnd(event);
                });
            };
            
            $element.on('mousedown', boundStart);
            $element.on('mouseup', boundEnd);
            $element.on('mouseleave', boundEnd);
            
            this.active = false;
        }
        
        jogStart(event) {
            this.jogEnd(); // cancel existing interval
            this.active = true;

            this.intervalPromise = $interval(() => {
                this.$scope.$apply(() => {
                    this.intervalFired();
                });
            }, this.jogInterval || 500, 0, false);
            
            this.jog({$start: true});
        }
        
        jogEnd(event) {
            this.active = false;
            if (this.intervalPromise) {
                $interval.cancel(this.intervalPromise);
                delete this.intervalPromise;
            }
        }
        
        intervalFired() {
            this.jog({$start: false});
        }
    }
    
    return {
        restrict: 'A',
        require: {},
        scope: false,
        bindToController: {
            jogInterval: '<?',
            jog: '&'
        },
        controller: JogController
    };
}

userModule.directive('jog', jogDirective);

return userModule;

}); // define

Example of use

<div class="ma-designer-root" id="333825a9-93b9-4ccb-8fd1-0543be62153a" style="width: 1366px; height: 768px; position: relative;">
    <ma-button id="20e716b4-479f-48ee-b294-8398662f7a50" raised="true" style="position: absolute; left: 135px; top: 108px;" label="Jog" jog="myValue = !myValue" jog-interval="200"></ma-button>
    <ma-indicator id="a7708f6c-dfe7-4350-b424-ccc6ea80f20d" style="position: absolute; width: 125px; height: 90px; left: 121px; top: 251px;" color-false="#e90606" color-true="#0be909" default-color="#fff700" value="myValue"></ma-indicator>
</div>

[sbaik]

@jared-wiltshire said in Momentary Button:

I decided to add a directive to the main app for this. Here it is as a user module so you can use it now. It simply executes an expression every x milliseconds while the mouse button is held down on the element.

I followed the instructions in the link you provided to add the given user module, but I don't see the module tab on the side of dashboard designer.

Example of use

After doing the above, I copied this example of use to a page to test, and it still functions in the dashboard designer when I click it to move it around and/or to configure.

When do you think the momentary button directive will be added to the main app?

Thanks for all your help Jared. I have been exposed to this platform and coding entirely for that matter for only a couple of months so it is taking me a bit to catch on.

[sbaik]

I changed the interval to what I'm assuming 5 ms because it was not functioning as a momentary without an exaggerated slow click.

It doesn't seem to change it I believe because the "ok" was grayed out.
I opened the choose file window by clicking the paper clip, then pressed edit, changed the number, pressed save at the top right of the window, then had to close window since I couldn't press ok. Then I opened the window again, pressed "ok" then pressed save in the overall UI setting page.

[Jared Wiltshire]

@sbaik said in Momentary Button:

I followed the instructions in the link you provided to add the given user module, but I don't see the module tab on the side of dashboard designer.

The user module I posted does not defined any components, its defines a directive (attribute) that you add to an another element (eg a button).

@sbaik said in Momentary Button:

After doing the above, I copied this example of use to a page to test, and it still functions in the dashboard designer when I click it to move it around and/or to configure.

You will still need to add !$state.includes('ui.settings.dashboardDesigner') && as per the previous example to ensure it doesn't run in the dashboard designer. I will fix this for the next UI module release.

@sbaik said in Momentary Button:

When do you think the momentary button directive will be added to the main app?

I hope to release a UI module early this week. Probably tomorrow.

@sbaik said in Momentary Button:

I changed the interval to what I'm assuming 5 ms because it was not functioning as a momentary without an exaggerated slow click.

You changed the default interval time to 5ms yes. But the code I posted sets it to 200ms via the markup so the change you made probably didn't affect anything.

Perhaps wait until I release the UI module. Do you simply want to execute one expression on mouse down and another on mouse up? Because this has nothing to do with the interval. That was additional functionality for anyone that might need an expression to execute every x ms while the mouse is held down.

[sbaik]

Perhaps wait until I release the UI module. Do you simply want to execute one expression on mouse down and another on mouse up? Because this has nothing to do with the interval. That was additional functionality for anyone that might need an expression to execute every x ms while the mouse is held down.

I will wait til it is ready. I won't get to it til the end of the week, so just this week sometime would be greatly appreciated.

I am wanting a momentary button that writes a value of 1 once to a point that is 0 and go back to a 0 regardless of click duration and no effect of accidentally dragging the cursor during click. Also one that does not function during the dashboard edit.

Thank you,

[Jared Wiltshire]

@sbaik If you update dashboard designer it will no longer run mouse down events.

I have also released UI module v3.4.3 which contains the directive I posed above. I renamed it to ma-momentary though.

This is how you can use it

 <ma-button raised="true" label="Jog" ma-momentary ma-momentary-start="myValue = true" ma-momentary-end="myValue = false"></ma-button>

[sbaik]

@jared-wiltshire said in Momentary Button:

@sbaik If you update dashboard designer it will no longer run mouse down events.

I have also released UI module v3.4.3 which contains the directive I posed above. I renamed it to ma-momentary though.

This is how you can use it

 <ma-button raised="true" label="Jog" ma-momentary ma-momentary-start="myValue = true" ma-momentary-end="myValue = false"></ma-button>

I appreciate all the help!
Having some trouble implementing it. Sent you a chat message.

[Jared Wiltshire]

@sbaik To answer questions sent in your chat message -

ma-momentary is a directive which is added to existing components (e.g. a ma-button) via markup. It is not a component and hence will not be able to be dropped onto the page in the dashboard designer.

You will still need to insert a ma-get-point-value to retrieve the point and its value and use it in a similar fashion to what @phildunlap posted.

e.g.

<ma-get-point-value point="point" point-xid="your-point-xid"></ma-get-point-value>
<ma-button raised="true" label="Jog" ma-momentary ma-momentary-start="point.setValue(true)" ma-momentary-end="point.setValue(false)"></ma-button>

[sbaik]

@jared-wiltshire

Thank you, that is exactly what I was missing. I tried ma-get-point-value, but did not know to put "point.setValue(true)" in the ma-button markup.