@jared-wiltshire said in Styling a Custom Component in userModule:

Like I said above, pass the whole points array through to the component and then find the point you want inside the component using the name attribute.

How does one pass the whole points array to the component?

That is because the behavior is up to you as the implementer to define. There are literally infinite possibilities.

I am aware that I must write code to implement behavior. How it fits into the framework of angular is less obvious.

If you search the forum I promise you will find lots of examples!

Believe it or not, I did indeed search before asking for assistance. Perhaps you might share some search terms or links to the examples you say exist?

There is more than one way to skin a cat.

Way #47: Use an electric sander 8^)

Thank you both for your help.

I might need just a little more.

Specifying a data point by xid, as both of your examples do, is a bit less than optimal for a couple of reasons.

For one thing, there are multiple data points with which the component needs to interact.

Also, specifying one or more data points by xid is less than user friendly. My preferred approach is to just name the component instance in such a way that queries can be constructed from the instance name, removing the need to specify an xid for each data point.

...and additionally...

This may be asking a lot, but ideally adding this component to a dashboard would also create a few data sources, likely from a template. That would make the drag and drop addition of the component and definition of element-specific details pretty much all that is necessary to add a machine to the system.

@mattfox Thanks!

It's quitting time. so I'll play with it tomorrow.

When the image is clicked, ng-click set which device's details are shown on a card.

@mattfox said in Styling a Custom Component in userModule:

From what it looks like, you want a generic solution to provide users a drag and drop component I'll give you the bones of a component to fill in. The html should probably be in a separate template file.

Yes, I need to build a drag and drop component. I have already figured out how to use a separate template file. Beyond that, the code is little changed from the example code.

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

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

userModule.component('stickGun', {
    bindings: {
        name: '@?',
        face: '@?'
    },
    templateUrl: '/rest/v2/file-stores/public/userModule.html',
    styleUrls: ['/rest/v2/file-stores/public/userModule.css']
});

return userModule;

}); // define

Is your userModule in the mango file store or on disk?

It is in the public folder in the file store. That also appears to be on disk at /opt/mango/filestore/public

This code sets the ng-class for the image based on a variable.

First, some code to get the value of the variable:

<ma-get-point-value id="a5ed9ee7-925f-4950-a46a-e4b02113c062" point="sequence1" point-xid="DP_6122694c-e93e-48d0-a423-2b23d88b45f9"></ma-get-point-value>

Now, an image that happens to have a transparent background, and uses ng-class:

<img id="ed3362f5-9f30-47f8-877b-6eb1fa0f3f19" style="position: absolute; left: 125px; top: 170px; width: 30px; height: 28px;" src="/rest/v2/file-stores/default/HKDStickL.png" ng-class="{0:'idle', 1:'heat', 2:'air', 3:'heatair', 4:'a0', 5:'s1', 6:'s2', 7:'s3', 8:'manual'} [sequence1.value]">

Based on the value of sequnce1, ng-class gets set to idle, heat, air, heatair, a0,s1, s2, s3, or manual.

CSS defines what the background of the image looks like for each class.

That covers changing the image based on a variable.

You have three desired conditions - green, red, and flashing. For discussion purposes, let's assign them values 0, 1, and 2. I would suggest a scripting data source that looks at x and y, and then sets a virtual data point according to the desired behavior. If x and y are limited to values 1 and 0, you can simplify the logic a bit.

//compute state of image

if( x == y ) {
  //flash
  result = 2;
}
else if( x == 1 ) {
  //green
  result = 1;
}
else {
  //red
  result = 0;
}
// set virtual data point

var query = "eq(deviceName,YourDeviceName)&eq(name,YourDataPointName)";
var dataPoints = DataPointQuery.query( query );
if( dataPoints.size() ){
    dataPoints[0].runtime.set( result );
}

I hope this helps.

I am in a similar spot.

While the information Jared linked to is sufficient to instantiate an object and define element specific values for the instance, it doesn't say much about implementing behavior.

Could that example be expanded a bit, perhaps to do something like implement a behavior based on a data point?

@mattfox I'm brand new to angular. Where does the code you provided go?

I have gotten the depiction of a machine in a dashboard to work as desired, but I am having trouble wrapping my head around how to make it component.

Here is what I am doing right now:

Some css to style the background of the image to indicate status:

.idle { background-color: rgba( 255, 255, 255, 0.5); }
.heat { background-color: rgba( 255, 255, 0, 0.5 ); }
.air { background-color: rgba( 3, 186, 252, 0.5 ); }
.heatair { background-image: url("/rest/v2/file-stores/default/HeatAir.png"); }
.a0 { background-image: url("/rest/v2/file-stores/default/A0.png"); }
.s1 { background-image: url("/rest/v2/file-stores/default/Stage1.png"); }
.s2 { background-image: url("/rest/v2/file-stores/default/Stage2.png"); }
.s3 { background-image: url("/rest/v2/file-stores/default/Stage3.png"); }
.manual { background-color: rgba( 0, 0, 0, 0.5); }

A call to ma-get-point-value to get the status of the machine:

<ma-get-point-value id="a5ed9ee7-925f-4950-a46a-e4b02113c062" style="position: absolute; left: 610px; top: 530px;" point="sequence1" point-xid="DP_6122694c-e93e-48d0-a423-2b23d88b45f9"></ma-get-point-value>

And ng-class to set the class based on the status of the machine:

<img id="ed3362f5-9f30-47f8-877b-6eb1fa0f3f19" style="position: absolute; left: 125px; top: 170px; width: 30px; height: 28px;" src="/rest/v2/file-stores/default/HKDStickL.png" ng-click="designer.parameters = {dn: 'sg-lsb-01v'}" ng-class="{0:'idle', 1:'heat', 2:'air', 3:'heatair', 4:'a0', 5:'s1', 6:'s2', 7:'s3', 8:'manual'} [sequence1.value]">

This works perfectly, except for one thing. Adding machines is more work than I expect my users to do acccurately. The obvious answer seems to be a custom component.

I have built a userModule and started to write the code to implement it, but I am having trouble figuring out how to style the component based on a data point.

I notice there are quite a few modules that are part of a basic installation that I am not using and don't see a future need for in my current application. For example:

BACnet
dnp3
egauge
envcands
Haystack
mbus
onewire
pakbus
pop3
twilio

It seems as if removing them would reduce the Mango resource "footprint", i.e. memory and disk space usage. Is this true?

@MattFox

Does the code above not work inside a module?

Johana:

You might find this helpful. It is an example of a technique that I use in global scripts and scripting data sources.

var query = "eq(deviceName," + source.name + ")&eq(name,Auto Limit)";
var dataPoint = DataPointQuery.query( query );
if( dataPoint.size() )
{
    limit = dataPoint[0].runtime.value;
}
else
{
    LOG.info( source.name + ": Auto Throttle: Auto Limit data point not found ");
    return;
}

I am not sure whether this works in your context, but perhaps it might be helpful.

Phil:

I discovered something that might be helpful with locating the cause of the issue with multistate data points in virtual data sources.

It only seems to fail to properly save the state values and start value when the change type is set to "no change".

@johana-crisbany-gamez

Don't feel bad. It took me a while to figure this out.

If you define a multistate data point in a virtual data source, you need to define values for the states. On the Virtual data point dialog shown above, when you mouse over the area under Values, up and down arrows will appear at the right side of that field. You can use those arrows to adjust to your first value, or just enter a number directly.

Once the correct number shows for your first value, hit enter. Your first value will now appear on a white background, like this:

You will note that the dialog is now helpfully suggesting 2 as the next value. If that works for you, just hit enter, and you will see this:

Repeat this process until you have defined all your values for the multistate data point.

Now when you click in the Start value field, you should see a list of the values you just defined appear over the field. Select the desired value.

The above is what is working for me. However, there is a known bug with this dialog.

Once you define your multistate data point and save it, if the change type is "no change", when you try to edit it you will not see the state values or the start value you defined. The dialog will not let you save changes until you again enter state values and a start value. This again is a known bug that I expect will be fixed in a future release.

If I define a virtual data point with a sinusoidal change, the dialog requires that I enter a value for phase shift. If I define a phase shift and save the settings for that data point, the next time I open that dialog the phase shift is gone, and I have to enter it again before the save button works.

Also, while entering a value for phase shift does appear to have the desired effect, it does not persist across Mango lifecycles - when Mango shuts down and is subsequently restarted, the phase shift is no longer apparent.

Edit: Possibly related problem

If I define a multistate virtual data point, there is a field in which the values and start value can be defined.

After doing so, if I open that dialog again, the values and start value are not shown.

@phildunlap said in Why doesn't changing a device name update the data points?:

How have you been copying it? There are a ton of simple ways and it is categorically irrational to disregard however easy it is.

It is irrational to claim that I am disregarding anything. Did I claim that it was not simple to copy data sources?

It is quite simple to copy data sources using the legacy web interface. I don't think I need to explain to you how is is done. Indeed, if the copy is given a new name before saving, all of the data points have the correct data source name.

The point of my original question deals with renaming data sources appearing unnecessarily difficult, not copying data sources.

I can write you a scripting data source that will ensure all data points are always named with the data source name as their device name if you'd like.

I am quite capable of writing such a script myself, thank you. It just seems like something that should not be necessary,

@phildunlap said in Why doesn't changing a device name update the data points?:

Have you seen the bulk data point editor in the new UI? It makes changing all the device names for the points on a data source quite simple.
In the old UI, you could simply export the JSON for the points from the data sources page and do a simple find / replace. So, simple solutions exist if you wish to rename all the points' device names.

No matter how easy it is, it makes no sense to have to do it each time a Modbus I/P or virtual data source is copied. Bear in mind that I have to train others to do this.

@iperry said in Why doesn't changing a device name update the data points?:

For me, it seemed the data source should be a group of points related by their physical source. The naming was arbitrary.

That is precisely what I am trying to maintain - data points related by their physical source.

The physical source is a Modbus I/P device at a unique IP address. Maintaining a relationship between the data points and the data source is desirable.

The problem comes when I rename the physical data source. The name of the data source recorded in each data point doesn't change. This breaks queries by data source name and data point name.

One might say "well then, don't rename anything". That might be convenient for the developers, but no so much for this user.

There are multiple "machines" in our system (around 100 for full implementation). For each machine, there is a Modbus I/P data source that controls the machine, and a virtual data source that keeps track of process variables that don't live on the Modbus I/P device. Scripts access the two data sources and their respective data points by name.

To create a new machine, it is quite convenient to simply copy the data sources and rename them. Requiring that all the data points be edited seems a unnecessary waste of effort. If data sources are copied and renamed, and the data points are not edited, queries by data source name and data point name now return two results - one for the original data source an done for the copy.

I makes sense to me that, at least in the case of Modbus I/P and virtual data sources, renaming a data source should update the data source name saved in the data point. I can't imagine an advantage to that not happening.