• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
MagicMirror Forum
  • Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
A New Chapter for MagicMirror: The Community Takes the Lead
Read the statement by Michael Teeuw here.

gauge.js

Scheduled Pinned Locked Moved General Discussion
16 Posts 3 Posters 5.6k 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.
  • S Offline
    sispheor
    last edited by Mar 28, 2018, 7:41 PM

    Hello guys, I’m trying to make working the gauge.js lib on my MM.

    Nothing appears on the screen. No error in logs or the console.

    Here is what I do, I just copied the content of the example available here.

    getScripts: function() {
            return ["http://bernii.github.io/gauge.js/dist/gauge.min.js"];
        },
    
     getDom: function () {
            let wrapper = document.createElement("div");
            // add a gauge
            let opts = {
              angle: 0.15, /// The span of the gauge arc
              lineWidth: 0.44, // The line thickness
              pointer: {
                length: 0.9, // Relative to gauge radius
                strokeWidth: 0.035 // The thickness
              },
              colorStart: '#6FADCF',   // Colors
              colorStop: '#8FC0DA',    // just experiment with them
              strokeColor: '#E0E0E0'   // to see which ones work best for you
            };
            let target = document.createElement("canvas");
            let gauge = new Gauge(target).setOptions(opts); // create sexy gauge!
            gauge.maxValue = 3000; // set max gauge value
            gauge.setMinValue(0);  // set min value
            gauge.set(1250); // set actual value
            wrapper.appendChild(target);
    
           return wrapper;
    }
    

    Any idea of what I’m missing here?

    Thanks a lot !

    E 1 Reply Last reply Mar 29, 2018, 5:15 AM Reply Quote 0
    • E Offline
      E3V3A @sispheor
      last edited by Mar 29, 2018, 5:15 AM

      @sispheor Another wnaker repo talking about “cool looking JavaScript gauge” without a single picture on the page.

      "Everything I do (here) is for free – altruism is the way!"
      MMM-FlightsAbove, MMM-Tabulator, MMM-Assistant (co-maintainer)

      S 1 Reply Last reply Mar 29, 2018, 5:40 AM Reply Quote 0
      • S Offline
        sispheor @E3V3A
        last edited by Mar 29, 2018, 5:40 AM

        @E3V3A demo pictures are on the first link I left.
        But yes, the GitHub repo should also contains some.

        1 Reply Last reply Reply Quote 0
        • C Offline
          Charley Module Developer
          last edited by Charley Mar 29, 2018, 12:51 PM Mar 29, 2018, 12:51 PM

          You may need a start!

          start: function () {
              
          },
          

          MMM-Bose-Soundtouch, MMM-Domoticz, MMM-crypto-portfolio, MMM-Fibaro, MMM-rain-forecast

          S 1 Reply Last reply Mar 29, 2018, 1:44 PM Reply Quote 0
          • S Offline
            sispheor @Charley
            last edited by sispheor Mar 29, 2018, 1:45 PM Mar 29, 2018, 1:44 PM

            @Charley yes, I haven’t shown it but it’s present.

            1 Reply Last reply Reply Quote 0
            • C Offline
              Charley Module Developer
              last edited by Mar 29, 2018, 1:46 PM

              What is the code in your start.
              I expect you don’t add the wrapper to the dom

              MMM-Bose-Soundtouch, MMM-Domoticz, MMM-crypto-portfolio, MMM-Fibaro, MMM-rain-forecast

              S 1 Reply Last reply Mar 29, 2018, 1:51 PM Reply Quote 0
              • S Offline
                sispheor @Charley
                last edited by Mar 29, 2018, 1:51 PM

                @Charley here is the code
                https://github.com/Sispheor/MMM-BMP-sensor/blob/dev/MMM-BMP-sensor.js

                1 Reply Last reply Reply Quote 0
                • C Offline
                  Charley Module Developer
                  last edited by Charley Mar 29, 2018, 2:07 PM Mar 29, 2018, 2:02 PM

                  @sispheor Is everything invisible or just the gauge?
                  Do you see pressure or temperatures?
                  What is in your console.log from

                  console.log('adafruit_python_bpm.py results: %j', results[0]);
                  

                  MMM-Bose-Soundtouch, MMM-Domoticz, MMM-crypto-portfolio, MMM-Fibaro, MMM-rain-forecast

                  S 1 Reply Last reply Mar 29, 2018, 2:40 PM Reply Quote 0
                  • S Offline
                    sispheor @Charley
                    last edited by Mar 29, 2018, 2:40 PM

                    @Charley Yes the table is visible. Only the gauge doesn’t appear.

                    1 Reply Last reply Reply Quote 0
                    • C Offline
                      Charley Module Developer
                      last edited by Charley Mar 29, 2018, 3:06 PM Mar 29, 2018, 3:03 PM

                      Okay I might have an idea

                      Change your createElement part to

                      let mycanvas = document.createElement("div");
                      mycanvas.id=("divcanvas")
                      let target=document.getElementById("divcanvas")
                      
                      

                      MMM-Bose-Soundtouch, MMM-Domoticz, MMM-crypto-portfolio, MMM-Fibaro, MMM-rain-forecast

                      S 2 Replies Last reply Mar 29, 2018, 3:29 PM Reply Quote 0
                      • 1
                      • 2
                      • 1 / 2
                      1 / 2
                      • First post
                        8/16
                        Last post
                      Enjoying MagicMirror? Please consider a donation!
                      MagicMirror created by Michael Teeuw.
                      Forum managed by Sam, technical setup by Karsten.
                      This forum is using NodeBB as its core | Contributors
                      Contact | Privacy Policy