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

Custom widget

Scheduled Pinned Locked Moved Dashboard
custom widgetguagedashboard
43 Posts 5 Posters 33.0k 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.
  • E Offline
    esawyja
    last edited by 3 Jan 2017, 10:16

    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 3 Jan 2017, 10:19

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

      J 1 Reply Last reply 3 Jan 2017, 10:26 Reply Quote 0
      • J Offline
        jkandasa @esawyja
        last edited by 3 Jan 2017, 10:26

        @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 3 Jan 2017, 10:36

          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

          J 1 Reply Last reply 3 Jan 2017, 10:39 Reply Quote 0
          • J Offline
            jkandasa @esawyja
            last edited by 3 Jan 2017, 10:39

            @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 3 Jan 2017, 10:42

              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>
              
              J 1 Reply Last reply 3 Jan 2017, 10:59 Reply Quote 0
              • J Offline
                jkandasa @esawyja
                last edited by 3 Jan 2017, 10:59

                @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 3 Jan 2017, 11:08 Reply Quote 0
                • E Offline
                  esawyja @jkandasa
                  last edited by 3 Jan 2017, 11:08

                  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 3 Jan 2017, 11:11

                    This is how I clear the cache

                    0_1483441886704_image.png

                    J 1 Reply Last reply 3 Jan 2017, 11:18 Reply Quote 0
                    • J Offline
                      jkandasa @esawyja
                      last edited by jkandasa 1 Mar 2017, 16:51 3 Jan 2017, 11:18

                      @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 3 Jan 2017, 11:21

                        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

                        J 1 Reply Last reply 3 Jan 2017, 11:24 Reply Quote 0
                        • J Offline
                          jkandasa @esawyja
                          last edited by 3 Jan 2017, 11:24

                          @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 3 Jan 2017, 11:27

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

                            1 Reply Last reply Reply Quote 1
                            • E Offline
                              esawyja
                              last edited by 3 Jan 2017, 11:29

                              Ok confirmed, issue is with FF, works with Chrome

                              0_1483442927485_image.png

                              J 1 Reply Last reply 3 Jan 2017, 11:31 Reply Quote 1
                              • J Offline
                                jkandasa @esawyja
                                last edited by 3 Jan 2017, 11:31

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

                                1 Reply Last reply Reply Quote 0
                                • E Offline
                                  esawyja
                                  last edited by 3 Jan 2017, 11:33

                                  Thank you!!!

                                  1 Reply Last reply Reply Quote 0
                                  • E Offline
                                    esawyja
                                    last edited by jkandasa 2 Oct 2017, 23:01 10 Feb 2017, 11:19

                                    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 1 Reply Last reply 10 Feb 2017, 17:31 Reply Quote 0
                                    • jkandasaJ Offline
                                      jkandasa @esawyja
                                      last edited by 10 Feb 2017, 17:31

                                      @esawyja What is the issue are you seeing?

                                      1 Reply Last reply Reply Quote 0
                                      • E Offline
                                        esawyja
                                        last edited by 11 Feb 2017, 11:11

                                        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 1 Reply Last reply 11 Feb 2017, 11:21 Reply Quote 0
                                        • jkandasaJ Offline
                                          jkandasa @esawyja
                                          last edited by 11 Feb 2017, 11:21

                                          @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
                                          • First post
                                            Last post

                                          0

                                          Online

                                          625

                                          Users

                                          532

                                          Topics

                                          3.4k

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