• 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
    • 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
                                          • jkandasaJ offline
                                            jkandasa @esawyja
                                            global: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(); 
                                            
                                            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