• P
    pyeager

    @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?

    posted in Dashboard Designer & Custom AngularJS Pages read more
  • P
    pyeager

    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?

    posted in Wishlist read more
  • P
    pyeager

    There is more than one way to skin a cat.

    Way #47: Use an electric sander 8^)

    posted in User help read more
  • P
    pyeager

    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.

    posted in Dashboard Designer & Custom AngularJS Pages read more
  • P
    pyeager

    @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.

    posted in Dashboard Designer & Custom AngularJS Pages read more
  • P
    pyeager

    @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

    posted in Dashboard Designer & Custom AngularJS Pages read more
  • P
    pyeager

    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.

    posted in User help read more
  • P
    pyeager

    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?

    posted in Wishlist read more
  • P
    pyeager

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

    posted in Dashboard Designer & Custom AngularJS Pages read more