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

    Custom widget

    Dashboard
    custom widget guage dashboard
    5
    43
    23723
    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.
    • E
      esawyja last edited by

      Hi
      Sorry yes I did, I just forgot to include the screenshot, still not seeing the gauge, any other suggestions please

      0_1483439762387_image.png

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

        @esawyja can you post your gauge HTML template and javaScript code?

        1 Reply Last reply Reply Quote 0
        • E
          esawyja last edited by jkandasa

          Sure, see below
          0_1483440109921_image.png

          Below is the template file

          <div id="wrapper" style="text-align: center">    
            <canvas id="my-gauge-${uuid}" style="display: inline-block;"></canvas>
            <div style="font-size:21px" id="textfield--${uuid}"></div>
          </div>
          <script>
            var CustomTextRenderer = function(el){
              this.el = el;
              this.render = function(gauge) {
                this.el.innerHTML = gauge.displayedValue.toPrecision(3);
               }
            }
            CustomTextRenderer.prototype = new TextRenderer();
            var cs = new CustomTextRenderer(document.getElementById("textfield--${uuid}"));
            var opts = {
              lines: 32,
              angle: 0,
              lineWidth: 0.24,
              pointer: {
                length: 0.9,
                strokeWidth: 0.035,
                color: '#000066'
              },
              limitMax: 'false', 
              percentColors: [[0.0, "#2B31CF" ], [0.60, "#37CF32"], [1.0, "#ff0000"]],
              strokeColor: '#E0E0E0',
              generateGradient: true
            };
            var target = document.getElementById('my-gauge-${uuid}');
            var gauge = new Gauge(target).setOptions(opts);
            gauge.animationSpeed = 3;
            gauge.maxValue = 40.0;
            gauge.setMinValue(-30.0);
            gauge.setTextField(new CustomTextRenderer(document.getElementById("textfield--${uuid}")))
            gauge.set(${temperatureSen.value});
          </script>
          
          jkandasa 1 Reply Last reply Reply Quote 0
          • jkandasa
            jkandasa @esawyja last edited by

            @esawyja I use this lib and works as expected for your script, https://cdnjs.cloudflare.com/ajax/libs/gauge.js/1.2.1/gauge.min.js

            0_1483441169722_upload-ea83be23-e0e8-44dd-8622-a64a9d44d960

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

              mmmh ok, then it must be something else
              0_1483441444970_image.png

              Still getting nothing
              0_1483441499925_image.png

              Even using Microsoft edge after clearing browser cache, history etc
              0_1483441642806_image.png

              1 Reply Last reply Reply Quote 0
              • E
                esawyja last edited by

                This is how I clear the cache

                0_1483441886704_image.png

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

                  @esawyja I have updated this script on our demo server too. You can have a look at http://demo.mycontroller.org/#/dashboard, you can see a dashboard named esawyja

                  Steps:

                  1. Create UID tag for your temperature sensor
                  2. Create Javascript to return value to HTML template
                  3. Create HTML template
                  4. Add you javaScript on script files, reload MC server page on your browser
                  5. Create custom widget with template(step#3) and script(step#2), done! 🙂

                  IMPORTANT: I believe you are with latest SNAPSHOT version.

                  1 Reply Last reply Reply Quote 0
                  • E
                    esawyja last edited by

                    aaah ok, so it is something on my computer locally, do you need any external programs etc to display this, I don't see the gauge on the demo server either

                    0_1483442497075_image.png

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

                      @esawyja Yes, I see the issue with firefox. I am most of the time with google chrome, hence did not notice this issue.

                      Thank you for your patience. I will check why this is not happening in FF browser.

                      1 Reply Last reply Reply Quote 0
                      • E
                        esawyja last edited by

                        No thank you for the wonderful support, let me download Chrome and see what happens

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

                          Ok confirmed, issue is with FF, works with Chrome

                          0_1483442927485_image.png

                          jkandasa 1 Reply Last reply Reply Quote 1
                          • jkandasa
                            jkandasa @esawyja last edited by

                            @esawyja Created a ticket to track this issue https://github.com/mycontroller-org/mycontroller/issues/338

                            1 Reply Last reply Reply Quote 0
                            • E
                              esawyja last edited by

                              Thank you!!!

                              1 Reply Last reply Reply Quote 0
                              • E
                                esawyja last edited by jkandasa

                                Hi all
                                Did something change with the build
                                0_1486725393898_image.png

                                As when I run the scripts after I've upgraded I get this

                                {
                                  "uuid": "11d7d0c8-45da-4bc0-988b-40f83bcd7d0e",
                                  "temperatureSen": {
                                    "id": 7,
                                    "uid": "upstairs-temp",
                                    "resourceType": "SENSOR_VARIABLE",
                                    "resourceId": 255,
                                    "resourceName": "[G]:MySensors >> [N]:50:Kiklo Temperature and Hum >> [S]:1:Temperature >> [SV]:Temperature"
                                  }
                                }
                                

                                The UID tag entry seem ok to me
                                0_1486725529297_image.png

                                Regards

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

                                  @esawyja What is the issue are you seeing?

                                  1 Reply Last reply Reply Quote 0
                                  • E
                                    esawyja last edited by

                                    Hi
                                    I don't see the gauges anymore and it does not return a reading for the sensor when I run the script, what I posted above is it, I remember with the previous version, I got the temp reading in the output. Or did that change?
                                    Thanks

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

                                      @esawyja

                                      Yes, there is a change. You have to get resource by calling,

                                      var temperatureSen = mcApi.uidTag().getByUid("my-sensor-1").getResource(); 
                                      
                                      1 Reply Last reply Reply Quote 0
                                      • E
                                        esawyja last edited by esawyja

                                        mmmh now I'm getting a new error....
                                        0_1486892286040_image.png

                                        1 Reply Last reply Reply Quote 0
                                        • E
                                          esawyja last edited by

                                          I do get the readings now, when I run the script, the gauge.min.js is accessible, just the gauge does not want to work, with the error above... Please anyone? I'm out of ideas

                                          1 Reply Last reply Reply Quote 0
                                          • E
                                            esawyja last edited by

                                            Hi all,
                                            This problem is driving me insane, does anyone please have some advice on where to look for this problem?
                                            Regards

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

                                            1
                                            Online

                                            631
                                            Users

                                            493
                                            Topics

                                            3.1k
                                            Posts

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