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

    Custom widget

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

      @Redferne

      Can you try this line

        gauge.set(${temperatureSen.value}); // set actual value
      
      

      with this,

        gauge.set(parseFloat(${temperatureSen.value})); // set actual value
      
      one-reply-to-this-post last-reply-time reply quote 0
      • 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
                                            • first-post
                                              last-post

                                            0

                                            online

                                            644

                                            users

                                            532

                                            topics

                                            3.4k

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