• Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular

    custom widget: send command to node

    Dashboard
    4
    21
    1203
    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.
    • jkandasa
      jkandasa @elgarfo last edited by jkandasa

      @elgarfo I do not know how to do with HTML 5. however I made a two-way widget with the angular slider.

      Steps:

      • create HTML template with sensor variable id
      • create dummy javascript to supply buildings
      • add custom css and js files.
      • add custom controller
      • add dependency module in angular (workaround, I do not find a way to include new modules into the controller creation)

      HTML template:

      <div ng-controller="myCustomWidgetController" ng-init="sVariable.id=${sId};loadVariable();">
        <rzslider rz-slider-model="sVariable.value" rz-slider-options="slider.options"></rzslider>
      </div>
      

      Dummy JavaScript:

      // dummy script
      

      9de831a0-816c-4f94-8285-6e427c01b480-image.png

      CSS and JS file:

      https://cdnjs.cloudflare.com/ajax/libs/angularjs-slider/6.6.0/rzslider.min.css
      https://cdnjs.cloudflare.com/ajax/libs/angularjs-slider/6.6.0/rzslider.min.js
      

      52843ff4-392c-4de7-8132-887af7ae6b13-image.png

      Custom controller:

      myControllerModule.controller('myCustomWidgetController', function($scope, SensorsFactory){
          $scope.sVariable = {
            id: null,
            value:null
          };
        
          $scope.loadVariable = function(){
            SensorsFactory.getVariable({id:$scope.sVariable.id}, function(response){
              if(response.value != undefined){
                $scope.sVariable.value = parseInt(response.value);
              }
            });
          }
      
          $scope.slider = {
            options: {
              floor: 0,
              ceil: 100,
              step: 1,
              minLimit: 0,
              maxLimit: 90,
              onEnd: function() {
                  $scope.sendPayload($scope.sVariable);
              },
            }
        };
      
          // send payload
          $scope.sendPayload = function(sVariable){
            SensorsFactory.updateVariable(sVariable, function(){
              //update Success
            },function(error){
              displayRestError.display(error);
            });
          };
        });
      

      Workaround, add a module on the app level

      File: mycontroller/www/app.js

      rzModule
      

      f53f954f-e081-49d1-a8de-f127ec382950-image.png

      Widget in dashboard

      d933f59c-b34b-4b55-9800-2bfabfbe07a6-image.png

      d67fa588-62c3-415b-ad8b-b3984d9b882b-image.png

      1 Reply Last reply Reply Quote 1
      • E
        elgarfo last edited by elgarfo

        @jkandasa your support is outstanding 👍
        your example works good and i can use it to build a dashboard to my needs. thank you very very much.

        the reason it took me so long to respond is, that i needed to trace a startup error on my end:
        [$injector:nomod] Module 'rzModule' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

        symptoms:

        • dashboard not loading correctly ({{ variable }} everywhere, nothing works)
        • angular throwing error about undefined module
        • testing with dev-console on firefox angular.module('rzModule'); yielded no error.
        • rzslider.js was actually loaded

        cause:

        • firefox does not support <link rel="import">
        • the polyfill i pushed to github fb3d0d96 is working but:
        • too late.

        so the polyfill for the import-feature is working, as i am able to load the rzModule after the dashboard html loaded completely and angular tried to load.
        but it is not working fast enough.

        i am currently trying to find a way to either delay angular startup until all imports are handled or to find a better way to include the /_configurations/additional-headers.html

        current workaround: put <script src="https://cdnjs.cloudflare.com/ajax/libs/angularjs-slider/6.6.1/rzslider.js"></script> directly into index.html for firefox 😕

        EDIT:
        html imports are also deprecated in chrome since v70 and will be removed with v73 which is only two versions from now (v71 as of this writing). see: chrome platform status

        jkandasa 2 Replies Last reply Reply Quote 1
        • jkandasa
          jkandasa @elgarfo last edited by

          @elgarfo If we change anything in our current implementation, can fix the issue in both firefox and chrome? Any idea?

          1 Reply Last reply Reply Quote 0
          • jkandasa
            jkandasa @elgarfo last edited by

            @elgarfo Thank you for the PR https://github.com/mycontroller-org/mycontroller/pull/486

            1 Reply Last reply Reply Quote 0
            • W
              wanvo last edited by

              How can I download the latest SNAPSHOT with this PR?
              Is this it? Https: //travis-ci.org/mycontroller-org/mycontroller/builds/472109919

              jkandasa 1 Reply Last reply Reply Quote 0
              • jkandasa
                jkandasa @wanvo last edited by

                @wanvo Compiled and uploaded in SNAPSHOT location.

                1 Reply Last reply Reply Quote 1
                • W
                  wanvo last edited by wanvo

                  @jkandasa Thanx!
                  I checked this widget in Chrome and Firefox, it works great.

                  1 Reply Last reply Reply Quote 1
                  • R
                    RMF69 last edited by RMF69

                    I'm just testing out various examples to understand how things work, I'm getting

                    Failed at: ${sId}  [in template "unknown" at line 1, column 69]
                    
                    

                    which I assume is from the first line of the html template, its not finding the angularjs custom controller ? I did modify app.js.

                    I'm pretty sure I've done all of the above to get the slider to appear on dashboard, but I must of missed something. I pasted the angularjs custom controller into the text field in HTML additional headers.

                    Any help 🙂 thanks

                    R 1 Reply Last reply Reply Quote 0
                    • R
                      RMF69 @RMF69 last edited by RMF69

                      @RMF69 To myself... the script binding id mistyped {sId:2}... got the camel case wrong. Slider is now visible but I get 400 error... as I don't have the variable set up correctly which will get updated ? I've created a global variable "sVariable" but I don't think this is right. How do I get the value out of the slider when its value changes ?

                      R 1 Reply Last reply Reply Quote 0
                      • R
                        RMF69 @RMF69 last edited by

                        @RMF69 Ok looking through code, I understand that its updating a sensor.variabel and that this id is passed in via the script binding {sId:31}... 31 is the id of a sensor S_LIGHT_LEVEL![alt text](Screenshot from 2019-12-28 13-05-08.png
                        I still get 400 bad requests... and

                        ERROR [Acme.Utils.ThreadPool(0)-PooledThread: Acme.Serve.Serve$ServeConnection@1415568e] [org.mycontroller.standalone.api.jaxrs.exception.mappers.ApplicationExceptionMapper:42] ApplicationException,
                        org.jboss.resteasy.spi.ApplicationException: java.lang.NullPointerException
                        

                        I'd love to understand what I've done wrong:)

                        jkandasa 1 Reply Last reply Reply Quote 0
                        • jkandasa
                          jkandasa @RMF69 last edited by

                          @RMF69 Can you report your MyController version? and if you modified the script please report your script.

                          R 1 Reply Last reply Reply Quote 0
                          • R
                            RMF69 @jkandasa last edited by

                            @jkandasa

                            Thanks, I've got the latest, Version 1.5.0. And I've not changed anything, just the script binding {sId:31} where 31 is the id of a light dimmer virtual sensor... see picture. I took the ID from the url of that page in the picture below.Screenshot_2020-01-02_18-31-18.png

                            jkandasa 1 Reply Last reply Reply Quote 0
                            • jkandasa
                              jkandasa @RMF69 last edited by jkandasa

                              @RMF69 Click on the Edit icon on the Level variable and use the id from the URL.

                              in version 1.5, you no need to hardcode rzModule on mycontroller/www/app.js. We have an option on UI to update angular modules.
                              3482e3a0-d2f2-4189-9f3f-2f4ae7750d72-image.png

                              R 1 Reply Last reply Reply Quote 0
                              • R
                                RMF69 @jkandasa last edited by

                                @jkandasa Thanks for confirming that in 1.5, the hardcoding of rzModule in mycontroller/www/app.js isn't required. However if I remove rzModule then the slider widget isn't displayed.

                                Still I can't get the example to work...I've got the id from the place you mention, mine is still 31... I've also noticed that the intial value of the sensor->variable isn't populated. I created simple script to update the value

                                var myImports = new JavaImporter(java.lang, java.util, org.mycontroller.standalone.utils.McUtils);
                                
                                with(myImports) {
                                    dimSensor = mcApi.uidTag().getByUid("dimSensor").getResource();
                                    var v = dimSensor.value; //value2/3 etc
                                    dimSensor.setValue(parseInt(v) + 1);
                                    mcApi.sensor().sendPayload(dimSensor);
                                }
                                

                                I insert the following code into "AngularJs custom controllers"

                                myControllerModule.controller('myCustomWidgetController', function($scope, SensorsFactory){
                                    $scope.sVariable = {
                                      id: null,
                                      value:null
                                    };
                                  
                                    $scope.loadVariable = function(){
                                      SensorsFactory.getVariable({id:$scope.sVariable.id}, function(response){
                                        if(response.value != undefined){
                                          $scope.sVariable.value = parseInt(response.value);
                                        } 
                                      });
                                    }
                                
                                    $scope.slider = {
                                      options: {
                                        floor: 0,
                                        ceil: 100,
                                        step: 1,
                                        minLimit: 0,
                                        maxLimit: 90,
                                        onEnd: function() {
                                            $scope.sendPayload($scope.sVariable);
                                        },
                                      }
                                  };
                                
                                    // send payload
                                    $scope.sendPayload = function(sVariable){
                                      SensorsFactory.updateVariable(sVariable, function(){
                                        //update Success
                                      },function(error){
                                        displayRestError.display(error);
                                      });
                                    };
                                  });
                                

                                Which is just the original example above, no changes... it seems to me that the pointer/reference to the variable I want to have connected to the slider is correct or working, both when the value is initialized on the loadVariable and when updated. But I just can't see what I've done wrong.

                                jkandasa 1 Reply Last reply Reply Quote 0
                                • jkandasa
                                  jkandasa @RMF69 last edited by

                                  @RMF69 Do you see any error on the browser console and/or in MyController log file?

                                  R 1 Reply Last reply Reply Quote 0
                                  • R
                                    RMF69 @jkandasa last edited by

                                    @jkandasa Sorry... I thought I'd edited or deleted that reply saying it didn't work. It now works... I'd taken the sensor ID from the summary page and not the edit page as you pointed me to in your last reply.

                                    So its working now... my mistake, thanks for your patience.

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

                                    2
                                    Online

                                    638
                                    Users

                                    495
                                    Topics

                                    3.2k
                                    Posts

                                    Copyright © 2015-2022 MyController.org | Contributors | Localization