• Recent
    • Tags
    • Popular
    • Register
    • Login

    Please Note This forum exists for community support for the Mango product family and the Radix IoT Platform. Although Radix IoT employees participate in this forum from time to time, there is no guarantee of a response to anything posted here, nor can Radix IoT, LLC guarantee the accuracy of any information expressed or conveyed. Specific project questions from customers with active support contracts are asked to send requests to support@radixiot.com.

    Radix IoT Website Mango 3 Documentation Website Mango 4 Documentation Website Mango 5 Documentation Website

    Advice on moving components / controllers / services out of userModule

    User help
    3
    37
    17.9k
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • MattFoxM
      MattFox
      last edited by MattFox

      If you've stored your userModule.js in /opt/mango/overrides/web/modules/mangoUI/web
      your usermodule under UI Settings will be

      modules/mangoUI/web/userModule.js
      

      base directory is stated in the app.js and /ui/index.html for mango which is compressed into the webpack that Jared compiled.

      Can you show me what you have now and I can likely assist with helping you getting one component working.

      Fox

      Do not follow where the path may lead; go instead where there is no path.
      And leave a trail - Muriel Strode

      1 Reply Last reply Reply Quote 0
      • B
        BobDay
        last edited by 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?

        1 Reply Last reply Reply Quote 0
        • MattFoxM
          MattFox
          last edited by MattFox

          Cool, if you're copying my structure, this is my advice:

          /opt/mango/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(e);
          }
          });
          

          /opt/mango/overrides/web/modules/mangoUI/web/dev/components/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.' );
                 }
              };
            }
           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...)
          return {
                template: template,
                bindings: {
                  points: '<',
                  target: '@'
                },
                controller: pushCtrl
              };
          
          });
          

          If you use try-catches you can identify errors that don't result in your usermodule breaking and thus losing all components in it.

          Do not follow where the path may lead; go instead where there is no path.
          And leave a trail - Muriel Strode

          1 Reply Last reply Reply Quote 0
          • B
            BobDay
            last edited by

            ok - do I need to change the base directory?

            1 Reply Last reply Reply Quote 0
            • MattFoxM
              MattFox
              last edited by

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

              ok - do I need to change the base directory?

              Nope, userModule extends the mangoUI

              Do not follow where the path may lead; go instead where there is no path.
              And leave a trail - Muriel Strode

              1 Reply Last reply Reply Quote 0
              • B
                BobDay
                last edited by 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);
                    }
                
                });
                
                1 Reply Last reply Reply Quote 0
                • MattFoxM
                  MattFox
                  last edited by

                  You've got the right idea, the first thing I suggest is to see if you can even manually load the userModule from your web browser

                  [mangoURL]/modules/mangoUI/web/dev/userModule.js

                  if you can pull that, then try with the components directory

                  Do not follow where the path may lead; go instead where there is no path.
                  And leave a trail - Muriel Strode

                  1 Reply Last reply Reply Quote 0
                  • MattFoxM
                    MattFox
                    last edited by

                    Hang on, your mango install is in /opt/mango36 ?
                    Not in /opt/mango ?

                    Do not follow where the path may lead; go instead where there is no path.
                    And leave a trail - Muriel Strode

                    1 Reply Last reply Reply Quote 0
                    • B
                      BobDay
                      last edited by 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?

                      1 Reply Last reply Reply Quote 0
                      • MattFoxM
                        MattFox
                        last edited by MattFox

                        nope, just wanted to make sure you did have the files inside the mango's installation directory regardless of how it is named.

                        Did the http requests from your browser work?

                        If the mango is on localhost it'd be localhost/modules/mangoUI/web/dev/userModule.js

                        Do not follow where the path may lead; go instead where there is no path.
                        And leave a trail - Muriel Strode

                        1 Reply Last reply Reply Quote 0
                        • B
                          BobDay
                          last edited by

                          nope. clearly have a path issue here...

                          1 Reply Last reply Reply Quote 0
                          • MattFoxM
                            MattFox
                            last edited by

                            if you're in linux, can you navigate to the directory where your usermodule is and enter

                            pwd
                            

                            otherwise if in windows, open a command prompt in the location and enter

                            DIR
                            

                            to print the path

                            Do not follow where the path may lead; go instead where there is no path.
                            And leave a trail - Muriel Strode

                            1 Reply Last reply Reply Quote 0
                            • B
                              BobDay
                              last edited by

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

                              1 Reply Last reply Reply Quote 0
                              • MattFoxM
                                MattFox
                                last edited by MattFox

                                nope that's definitely correct, check your directory permissions and the owner.
                                I'll wager mango itself may not have access to the file.
                                Whatever the user runs as in mango set that as your modules etc directories for a start.
                                up to web. everything inside that shouldn't matter.

                                We'll start with that and work our way up from there...

                                sudo chown [user]:[user] /opt/mango36/overrides -R
                                
                                sudo find /opt/mango36/overrides -type d -exec chmod 755 {} \;

                                Do not follow where the path may lead; go instead where there is no path.
                                And leave a trail - Muriel Strode

                                1 Reply Last reply Reply Quote 0
                                • B
                                  BobDay
                                  last edited by

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

                                  1 Reply Last reply Reply Quote 0
                                  • MattFoxM
                                    MattFox
                                    last edited by MattFox

                                    ps aux | grep java
                                    
                                    

                                    This will tell us what mango runs as. Also can you also print

                                    ls -la /opt/mango36/overrides/web/modules/mangoUI/web/dev
                                    

                                    Do not follow where the path may lead; go instead where there is no path.
                                    And leave a trail - Muriel Strode

                                    1 Reply Last reply Reply Quote 0
                                    • B
                                      BobDay
                                      last edited by

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

                                      1 Reply Last reply Reply Quote 0
                                      • B
                                        BobDay
                                        last edited by 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

                                        1 Reply Last reply Reply Quote 0
                                        • MattFoxM
                                          MattFox
                                          last edited by MattFox

                                          I know what i've done wrong....

                                          I didn't return the user module!
                                          So sorry man!

                                          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);
                                              }
                                           return userModule; //MISSING THIS!!! aerghhh I hate mondays...
                                          });
                                          

                                          Man I need a swift kick...

                                          Do not follow where the path may lead; go instead where there is no path.
                                          And leave a trail - Muriel Strode

                                          1 Reply Last reply Reply Quote 1
                                          • B
                                            BobDay
                                            last edited by

                                            so WE did! same problem tho.

                                            lets take this back to chat...

                                            1 Reply Last reply Reply Quote 1
                                            • First post
                                              Last post