• header.categories
    • header.recent
    • header.tags
    • header.popular
    • register
    • login

    Custom widget

    scheduled pinned locked moved Dashboard
    custom widgetguagedashboard
    43 posts 5 posters 35.8k views 3 watching
    loading-more-posts
    • oldest-to-newest
    • newest-to-oldest
    • most-votes
    reply
    • reply-as-topic
    guest-login-reply
    deleted-message
    • R offline
      Redferne
      global:last-edited-by, jkandasa

      @jkandasa said:

      gauge.set(parseFloat(${temperatureSen.value}));

      Solution was little more complicated:

      <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>
      
      one-reply-to-this-post last-reply-time reply quote 1
      • E offline
        esawyja
        global:last-edited-by,

        Hi all,
        Brilliant program @jkandasa , I'm having some issues with the gauge display, I don't see the gauge when I test the template. I'm using Firefox, cleared the history and cache. even tried it with Microsoft Edge, but my gauge does not display. Rebooted the RaspBerry PI as well, I don't see any errors in the logs etc, could someone point me in the right direction please, see screenshots below
        Regards

        0_1483438450608_image.png

        0_1483438485395_image.png

        0_1483438519652_image.png

        0_1483438562379_image.png

        0_1483438603778_image.png

        one-reply-to-this-post last-reply-time reply quote 0
        • E offline
          esawyja
          global:last-edited-by,

          The location of the gauge.min.js
          0_1483438777925_image.png

          jkandasaJ one-reply-to-this-post last-reply-time reply quote 0
          • jkandasaJ offline
            jkandasa @esawyja
            global:last-edited-by,

            @esawyja You have to add gauge.min.js as mentioned here,
            0_1470030993827_upload-7a773b78-c825-47f5-9784-c8a9a830a015.

            Once done, reload your browser.

            one-reply-to-this-post last-reply-time reply quote 0
            • E offline
              esawyja
              global: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

              jkandasaJ one-reply-to-this-post last-reply-time reply quote 0
              • jkandasaJ offline
                jkandasa @esawyja
                global:last-edited-by,

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

                one-reply-to-this-post last-reply-time reply quote 0
                • E offline
                  esawyja
                  global: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>
                  
                  jkandasaJ one-reply-to-this-post last-reply-time reply quote 0
                  • jkandasaJ offline
                    jkandasa @esawyja
                    global: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 one-reply-to-this-post last-reply-time reply quote 0
                    • E offline
                      esawyja @jkandasa
                      global: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

                      one-reply-to-this-post last-reply-time reply quote 0
                      • E offline
                        esawyja
                        global:last-edited-by,

                        This is how I clear the cache

                        0_1483441886704_image.png

                        jkandasaJ one-reply-to-this-post last-reply-time reply quote 0
                        • jkandasaJ offline
                          jkandasa @esawyja
                          global: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.

                          one-reply-to-this-post last-reply-time reply quote 0
                          • E offline
                            esawyja
                            global: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

                            jkandasaJ one-reply-to-this-post last-reply-time reply quote 0
                            • jkandasaJ offline
                              jkandasa @esawyja
                              global: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.

                              one-reply-to-this-post last-reply-time reply quote 0
                              • E offline
                                esawyja
                                global:last-edited-by,

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

                                one-reply-to-this-post last-reply-time reply quote 1
                                • E offline
                                  esawyja
                                  global:last-edited-by,

                                  Ok confirmed, issue is with FF, works with Chrome

                                  0_1483442927485_image.png

                                  jkandasaJ one-reply-to-this-post last-reply-time reply quote 1
                                  • jkandasaJ offline
                                    jkandasa @esawyja
                                    global:last-edited-by,

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

                                    one-reply-to-this-post last-reply-time reply quote 0
                                    • E offline
                                      esawyja
                                      global:last-edited-by,

                                      Thank you!!!

                                      one-reply-to-this-post last-reply-time reply quote 0
                                      • E offline
                                        esawyja
                                        global: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

                                        jkandasaJ one-reply-to-this-post last-reply-time reply quote 0
                                        • jkandasaJ offline
                                          jkandasa @esawyja
                                          global:last-edited-by,

                                          @esawyja What is the issue are you seeing?

                                          one-reply-to-this-post last-reply-time reply quote 0
                                          • E offline
                                            esawyja
                                            global: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

                                            jkandasaJ one-reply-to-this-post last-reply-time reply quote 0
                                            • first-post
                                              last-post

                                            0

                                            online

                                            644

                                            users

                                            532

                                            topics

                                            3.4k

                                            posts
                                            Copyright © 2015-2025 MyController.org | Contributors | Localization