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

    Custom widget

    Scheduled Pinned Locked Moved Dashboard
    custom widgetguagedashboard
    43 Posts 5 Posters 27.4k Views 3 Watching
    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.
    • T Offline
      Tag MOD
      last edited by

      YEAY!! victory, clearing all cache and refresh worked on the chrome book

      thanks!

      1 Reply Last reply Reply Quote 1
      • T Offline
        Tag MOD
        last edited by jkandasa

        This HTML script will give you a gauge that will change color based on the value of the scale in percentage.
        The script below has a scale range 0-5000. (I use it to measure my KWH usage)....

        Here is the trick i experimented with

        limitMax: 'false', 
          percentColors: [[0.0, "#a9d70b" ], [0.80, "#f9c802"], [1.0, "#ff0000"]], // !!!!
          strokeColor: '#b0b0b0',
            generateGradient: true
        

        From 0% - 80% the scale is green to yellow at the 80%, the from 80%-100% it will rapidly change to red....

        Green: #a9d70b
        Orange #f9c802
        Red #ff0000
        

        I also made the value font, bold by adding this ; font-weight:bold

        And with this line you can set the maximum value of the gauge gauge.maxValue = 5000; lower it to something that comes close to the max value you want to measure.

        Really nice effect!

        -------------- Cut ----------------

        <div id="wrapper" style="text-align: center">    
          <canvas id="my-gauge-${uuid}" style="display: inline-block;"></canvas>
          <div style="font-size:21px ; font-weight:bold" id="textfield--${uuid}"></div>
        </div>
        <script>
          var opts = {
              lines: 12,
          angle: 0.05,
          lineWidth: 0.44,
          pointer: {
            length: 0.9,
            strokeWidth: 0.035,
            color: '#303030'
            },
        limitMax: 'false', 
          percentColors: [[0.0, "#a9d70b" ], [0.80, "#f9c802"], [1.0, "#ff0000"]], // !!!!
          strokeColor: '#b0b0b0',
            generateGradient: true
          };
          var target = document.getElementById('my-gauge-${uuid}'); // your canvas element
          var gauge = new Gauge(target).setOptions(opts); // create sexy gauge!
          gauge.animationSpeed = 3; // set animation speed (32 is default value)
          gauge.maxValue = 5000; //Maximum value
          gauge.setTextField(document.getElementById("textfield--${uuid}"));
          gauge.set(${temperatureSen.value}); // set actual value
        </script>
        
        <!--see http://jsfiddle.net/berni/Yb4d7/ for example-->
        

        -------------- Cut ----------------

        1 Reply Last reply Reply Quote 1
        • R Offline
          Redferne @jkandasa
          last edited by

          @jkandasa

          Thanks for showing this. It makes it very versatile. However for the Temperature example above, how do I get all decimals? I'd like the Temperature to show for example "23.45°C"

          ///Redferne

          jkandasaJ 1 Reply Last reply Reply Quote 0
          • jkandasaJ Offline
            jkandasa @Redferne
            last edited by

            @Redferne

            how do I get all decimals? I'd like the Temperature to show for example "23.45°C"

            I guess it is limitation of http://bernii.github.io/gauge.js/dist/gauge.min.js or we may have some option to show decimal points. Kindly refer http://bernii.github.io/gauge.js

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

              @jkandasa

              Nope, Gauge handles decimals and negative values just fine. See here:
              http://jsfiddle.net/berni/smNjl/

              jkandasaJ 1 Reply Last reply Reply Quote 0
              • jkandasaJ Offline
                jkandasa @Redferne
                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
                
                1 Reply Last reply Reply Quote 0
                • R Offline
                  Redferne
                  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>
                  
                  1 Reply Last reply Reply Quote 1
                  • E Offline
                    esawyja
                    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

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

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

                      jkandasaJ 1 Reply Last reply Reply Quote 0
                      • jkandasaJ Offline
                        jkandasa @esawyja
                        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.

                        1 Reply Last reply Reply Quote 0
                        • E Offline
                          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

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

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

                            1 Reply Last reply Reply Quote 0
                            • E Offline
                              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>
                              
                              jkandasaJ 1 Reply Last reply Reply Quote 0
                              • jkandasaJ Offline
                                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 Offline
                                  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 Offline
                                    esawyja
                                    last edited by

                                    This is how I clear the cache

                                    0_1483441886704_image.png

                                    jkandasaJ 1 Reply Last reply Reply Quote 0
                                    • jkandasaJ Offline
                                      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 Offline
                                        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

                                        jkandasaJ 1 Reply Last reply Reply Quote 0
                                        • jkandasaJ Offline
                                          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 Offline
                                            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
                                            • First post
                                              Last post

                                            0

                                            Online

                                            599

                                            Users

                                            530

                                            Topics

                                            3.4k

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