• B
    BobDay

    Very cool! a man of his word. This will be most helpful.

    posted in Dashboard Designer & Custom AngularJS Pages read more
  • B
    BobDay

    well, on second thought then, that would be super!

    posted in User help read more
  • B
    BobDay

    Thanks, @Jared-Wiltshire. Let me bug you when things appear to be getting out of hand!

    posted in User help read more
  • B
    BobDay

    yes - that occurred to me - might make things a little more straightforward. Thanks - didn't think about the REST rate issue. Is there anything about using Webpack with mango?

    posted in User help read more
  • B
    BobDay

    Since angularjs doesn't have ng2's parsers, we cannot encapsulate css inside a component. Assuming several components on a page, and several custom pages in an app, would it be preferable to include (or link) all css on each page, or combined in custom.css? I'm assuming namespacing the css as necessary to appropriately component-scope it. Thanks for your thoughts.

    posted in User help read more
  • B
    BobDay

    Thanks. I tried that, but obviously suffered pilot error in the process. Good point why bother...

    posted in User help read more
  • B
    BobDay

    ok, @MattFox... I feel like a post (as in dumb as one). Can you refresh me again as to how to now break out (and where to declare) the component's controller in its own file?

    userModule.js

    define(['angular', 'require','./push/pushLamp.js'],
      function (angular, require, pushLamp) {
        var userModule = angular.module('userModule', ['maUiApp']);
    
        userModule.filter('unsafe', ['$sce', function($sce) {
           return $sce.trustAsHtml;
        }]);
    
        try
        {
          userModule.component('pushLamp',pushLamp);
        }
        catch(e)
        {
          console.log('error: ', e);
        }
        return userModule.js;
    
    });
    

    pushLamp.js:

    define(['angular', 'require'], function (angular, require) {
    
      pushCtrl.$inject = ['$scope','$timeout'];
    
      function pushCtrl($scope,$timeout) {
    
        const $ctrl = this;
        $ctrl.$onChanges = function (changes) {
          if (changes.points && Array.isArray($ctrl.points)) {
    
            $ctrl.point = $ctrl.points.find(p => p.xid === 'DP_ind_' + $ctrl.target);
            $ctrl.switchPoint = $ctrl.points.find(p => p.xid === 'DP_sw_' + $ctrl.target);
    
            $ctrl.ptCSS = { // point css values for color and blink; ex, ng-class=""
              get color(){
                if ($ctrl.point.color < 10) {
                  return 0;
                }
                return Math.floor($ctrl.point.value / 10)},
              get blink(){return 'blink' + $ctrl.point.value % 10},
              get colStyle(){return 'color'+this.color}
            };
    
            $timeout(function() {
              console.log('color:', $ctrl.ptCSS.colStyle, 'blink:', $ctrl.ptCSS.blink );
            },1000);
          }
        };
    
        $ctrl.pushed = function() {
          console.log($ctrl.switchPoint.value);
            if ($ctrl.switchPoint) {
                $ctrl.switchPoint.toggleValue();
              console.log('switch ' + $ctrl.target + ' was switched.' );
           }
        };
      }
    
    return {
          templateUrl: '/modules/mangoUI/web/dev/push/push.html',
          bindings: {
            points: '<',
            target: '@'
          },
          controller: pushCtrl
        };
    
    });

    posted in User help read more
  • B
    BobDay

    so WE did! same problem tho.

    lets take this back to chat...

    posted in User help read more
  • B
    BobDay

    mangoUI/web/dev
    ▶ cat /opt/mango36/overrides/web/modules/mangoUI/web/dev/userModule.js
    define(['angular', 'require','./components/pushLamp.js'],
      function (angular, require, pushLamp) {
        var userModule = angular.module('userModule', ['maUiApp']);
    
        userModule.filter('unsafe', ['$sce', function($sce) {
           return $sce.trustAsHtml;
        }]);
    
        try
        {
          userModule.component('pushLamp',pushLamp);
        }
        catch(e)
        {
          console.log('error: ', e);
        }
    
    });
    

    ...just checking

    posted in User help read more
  • B
    BobDay

    @mattfox said in Advice on moving components / controllers / services out of userModule:

    ps aux | grep java

    ▶ ps aux | grep java
    
    root             81841   1.4  5.1  8617284 855636 s000  S     1:51PM   4:13.58 /usr/bin/java -server -cp /opt/mango36/overrides/classes:/opt/mango36/classes:/opt/mango36/overrides/properties:/opt/mango36/overrides/lib/*:/opt/mango36/lib/* -Dma.home=/opt/mango36 -Djava.library.path=/opt/mango36/overrides/lib:/opt/mango36/lib:/usr/lib/jni/:/Users/bullit/.jenv/bin:/Users/bullit/local/n/bin/:/Users/bullit/local/n/bin/node:/opt/local/bin:/opt/local/sbin:/usr/local/bin:/usr/local/sbin:/usr/bin:/bin:/usr/sbin:/sbin:/opt/X11/bin:/usr/local/git/bin:/Users/bullit/bin:/Users/bullit/local/n/bin:/usr/bin/pear:/usr/local/bin/dayone com.serotonin.m2m2.Main
    bullit           87269   0.0  0.0  2424612   1248 s001  R+    3:42PM   0:00.00 grep --color=auto --exclude-dir=.bzr --exclude-dir=CVS --exclude-dir=.git --exclude-dir=.hg --exclude-dir=.svn java
    

    bullit has read/write access...

    posted in User help read more
  • B
    BobDay

    @mattfox said in Advice on moving components / controllers / services out of userModule:

    sudo find /opt/mango36/overrides -type d -exec chmod 755 {} ;

    I assume it runs as root - I have to sudo to start it. In any event, the entire mango36 directory is recursively 755.

    and still no joy.

    posted in User help read more
  • B
    BobDay

    (osx)
    pwd
    /opt/mango36/overrides/web/modules/mangoUI/web/dev

    posted in User help read more
  • B
    BobDay

    nope. clearly have a path issue here...

    posted in User help read more
  • B
    BobDay

    yes, but using Mango36 in the url... as in /opt/mango36/overrides/web/modules/mangoUI/web/dev/userModule.js

    hmmm... does it need to live in /mango?

    posted in User help read more
  • B
    BobDay

    well, doing exactly that, and setting the location to /modules/mangoUI/web/dev/userModule.js,
    left me with:
    "Failed to load AMD module modules/mangoUI/web/dev/userModule.js Error: Script error for "modules/mangoUI/web/dev/userModule.js" in Chrome console - no component error logged.

    and this file is there:

    define(['angular', 'require','./components/pushLamp.js'],
      function (angular, require, pushLamp) {
        var userModule = angular.module('userModule', ['maUiApp']);
    
        userModule.filter('unsafe', ['$sce', function($sce) {
           return $sce.trustAsHtml;
        }]);
    
        try
        {
          userModule.component('pushLamp',pushLamp);
        }
        catch(e)
        {
          console.log('error: ', e);
        }
    
    });
    

    posted in User help read more
  • B
    BobDay

    ok - do I need to change the base directory?

    posted in User help read more
  • B
    BobDay

    sure...
    with my userModule.js stored at opt/Mango36/filestore/public/userModule.js, and its UI location set at /rest/v2/file-stores/public/userModule.js,
    all works well.

    when stored at /opt/mango/overrides/web/modules/mangoUI/web/dev/userModule.js,

    and UI location set at /modules/mangoUI/web/dev/userModule.js,

    the component is not found.

    js:

    define(['angular', 'require'], function (angular, require) {
    
      pushCtrl.$inject = ['$scope','$timeout'];
    
      function pushCtrl($scope,$timeout) {
        const $ctrl = this;
        $ctrl.$onChanges = function (changes) {
          if (changes.points && Array.isArray($ctrl.points)) {
    
            $ctrl.point = $ctrl.points.find(p => p.xid === 'DP_ind_' + $ctrl.target);
            $ctrl.switchPoint = $ctrl.points.find(p => p.xid === 'DP_sw_' + $ctrl.target);
    
            $ctrl.ptCSS = { // point css values for color and blink; ex, ng-class=""
              get color(){
                if ($ctrl.point.color < 10) {
                  return 0;
                }
                return Math.floor($ctrl.point.value / 10)},
              get blink(){return 'blink' + $ctrl.point.value % 10},
              get colStyle(){return 'color'+this.color}
            };
    
            $timeout(function() {
              console.log('color:', $ctrl.ptCSS.colStyle, 'blink:', $ctrl.ptCSS.blink );
            },1000);
          }
        };
    
        $ctrl.pushed = function() {
          console.log($ctrl.switchPoint.value);
            if ($ctrl.switchPoint) {
                $ctrl.switchPoint.toggleValue();
              console.log('switch ' + $ctrl.target + ' was switched.' );
           }
        };
      }
      const template = '<div class="inner-circle" ng-class="[$ctrl.ptCSS.colStyle, $ctrl.ptCSS.blink]" ng-click="$ctrl.pushed()"><span class="buttonText" ng-bind-html="$ctrl.point.tags.indText | unsafe"></span> </div>'; // using $sce here to get pass <br>'s in text; flex-wrap also on
    // (used single quotes instead of backticks for post...)
    
    
      var userModule = angular.module('userModule', ['maUiApp'])
    
        .filter('unsafe', ['$sce', function($sce) {
          return $sce.trustAsHtml;
        }])
    
        .component('pushLamp', {
          template: template,
          bindings: {
            points: '<',
            target: '@'
          },
          controller: pushCtrl
        });
        return userModule;
    
    }); //define
    

    html:

    <style>
    html {
        font-size: 16px;
    }
    @keyframes blink {
        80% {
            background-color: #000;
            color: #000;
            text-shadow: none;
        }
    
        100% {
            background-color: #000;
            color: #000;
            text-shadow: none;
            /*border: 5px solid #6565f2;*/
        }
    }
    * {
        box-sizing:border-box;
    }
    .holder {
        height: 140px;
        width: 250px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        
    }
    
    .ring {
        position: relative;
        width: 104px;
        height: 104px;
        border-radius: 50%;
        /*background: #888;*/
        background: linear-gradient(#dadada, #7a7a7a);
        
    }
    
    .inner-circle {
        position: relative;
        display: flex;
        flex-wrap: wrap;
      justify-content: center;
      align-items: center;
        top: 5px;
        left: 5px;
        width: 94px;
        height: 94px;
        /*background: green;*/
        border-radius: 50%;
        /*border: 5px solid rgba(255,255,255,0.1);*/
        
        
    }
    span.buttonText {
        width: 80%;
        text-align:center; /*flex doesn't center all lines...*/
        overflow:none;
        text-decoration: none;
        font-size: 1.15rem;
        line-height: 1em;
        font-weight: 600;
        letter-spacing: -.065em;
        font-family: "Hammersmith One", sans-serif;
    }
    
    .no-color,
    .color0 {
        background-color: #4a4a4a;
        color: #777;
        border: 4px solid rgba(255, 255, 255, 0.15);
    }
    
    .red,
    .color1 {
        background-color: #ef3932;
        color: #faf9c3;
        text-shadow: 1px 1px 0 rgba(0, 0, 0, .15);
        border: 4px solid rgba(0, 0, 0, 0.15);
    }
    
    .green,
    .color2 {
        background-color: #01c826;
        color: #faf697;
        text-shadow: 1px 1px 0 rgba(0, 0, 0, .15);
        border: 4px solid rgba(0, 0, 0, 0.15);
    }
    
    .yellow,
    .color3 {
        background-color: rgba(252, 227, 1, 2);
        color: #8c1c00;
        text-shadow: 1px 1px 0 rgba(255, 255, 255, .9);
        border: 4px solid rgba(0, 0, 0, 0.15);
    }
    
    .blue,
    .color4 {
        background: #00c8ff;
        color: #faf9c3;
        border: 4px solid rgba(0, 0, 0, 0.15);
        text-shadow: 1px 1px 0 rgba(0, 0, 0, .15);
    }
    
    .white,
    .color5 {
        background: #fafafa;
        color: #8c1c00;
        text-shadow: 1px 1px 0 rgba(0, 0, 0, .1);
        border: 4px solid rgba(0, 0, 0, 0.1);
    
    }
    
    .blink0 {
        animation: none;
    }
    
    .blink1 {
        animation: none;
        /*animation: blink 2s infinite;*/
    }
    
    .blink2 {
        animation: none;
        /*animation: blink 2s step-end infinite;*/
    }
    
    .blink3 {
        animation: none;
        /*animation: blink 2s infinite;*/
    }
    
    
    </style>
    
    <div ng-init="page = {}"></div>
    
    <ma-watch-list-get ng-model="indicatorWl.watchlist" parameters="indicatorWl.parameters" on-points-change="page.points = $points" id="wl-indicator-id" watch-list-xid="WL_Indicator"></ma-watch-list-get>
    <ma-get-point-value points="page.points"></ma-get-point-value>
    
    <div>
        <div class="holder">
            
            <div class="ring">
                <push-lamp points="page.points" target="H2OT1"></push-lamp>
            </div>
            
            <ma-point-value id="bf63d154-4359-4780-8440-e75ab17179c2" enable-popup="hide" point="page.points | filter:{name:'T1-Water-Valve'}:true | maFirst"></ma-point-value>
            
        </div>
        <div class="holder">
    
            <div class="ring">
                <push-lamp points="page.points" target="H2OT2"></push-lamp>
            </div>
            
            <ma-point-value id="bf63d154-4359-4780-8440-e75ab17179c2" enable-popup="hide" point="page.points | filter:{name:'T2-Water-Valve'}:true | maFirst"></ma-point-value> <!-- _sw_ values for toggle testing -->
            
        </div>
        <div class="holder">
            
            <div class="ring">
                <push-lamp points="page.points" target="H2OT3"></push-lamp>
            </div>
            
            <ma-point-value id="bf63d154-4359-4780-8440-e75ab17179c2" enable-popup="hide" point="page.points | filter:{name:'T3-Water-Valve'}:true | maFirst"></ma-point-value>
            
        </div>
        <div class="holder">
            
            <div class="ring">
                <push-lamp points="page.points" target="H2OMX"></push-lamp>
            </div>
            
            <ma-point-value id="bf63d154-4359-4780-8440-e75ab17179c2" enable-popup="hide" point="page.points | filter:{name:'MX-Water-Valve'}:true | maFirst"></ma-point-value>
            
        </div>
    </div>
    

    do you need some points?

    posted in User help read more
  • B
    BobDay

    Thanks. still missing something...

    My userModule.js file is located at:
    '.../modules/mangoUI/web/dev/userModule.js,
    my userModule URL (in UI settings) changed to:
    /modules/mangoUI/web/dev/userModule.js, (from /rest/v2/file-stores/public...)
    and templateUrl at:
    templateUrl: '/modules/mangoUI/web/dev/views/push.html'

    How do I inform my app what my "base directory" is?

    posted in User help read more
  • B
    BobDay

    Hi @MattFox; apparently need a little Mango 101 here. My userModule works fine in the public folder - but isn't even found (no error) in /overrides/web/modules/mangoUI/web. Do I need to add a base path somewhere to tell the app to look somewhere other than public? Couldn't find any mention of such...

    also assume views/components/controllers, etc. directories would be siblings to userModule.js in the last child .../web folder?

    thanks for the amateur questions...

    posted in User help read more