• 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.

Develop module with API

Scheduled Pinned Locked Moved Development
42 Posts 6 Posters 14.2k Views 6 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.
  • M Offline
    Mykle1 Project Sponsor Module Developer @htilburgs
    last edited by Mar 19, 2019, 11:49 AM

    @htilburgs

    Have a look at this. It is a very simple module meant to teach someone to do exactly what you described in your post.

    https://github.com/mykle1/MMM-UFO

    Create a working config
    How to add modules

    H 1 Reply Last reply Mar 19, 2019, 12:18 PM Reply Quote 0
    • H Offline
      htilburgs
      last edited by Mar 19, 2019, 11:54 AM

      Thanks for the reply.
      I’ve an api for getting the Prayer Times.

      http://api.aladhan.com/v1/timings/19-03-2019?latitude=51.508515&longitude=-0.1254872&method=2

      In this case there a 4 parameters: date, latitude, longitude and method.
      The result is a json file

      {"code":200,"status":"OK","data":{"timings":{"Fajr":"04:34","Sunrise":"06:06","Dhuhr":"12:08","Asr":"15:23","Sunset":"18:11","Maghrib":"18:11","Isha":"19:44","Imsak":"04:24","Midnight":"00:09"},"date":{"readable":"19 Mar 2019","timestamp":"1552953600","hijri":{"date":"12-07-1440","format":"DD-MM-YYYY","day":"12","weekday":{"en":"Al Thalaata","ar":"\u0627\u0644\u062b\u0644\u0627\u062b\u0627\u0621"},"month":{"number":7,"en":"Rajab","ar":"\u0631\u064e\u062c\u064e\u0628"},"year":"1440","designation":{"abbreviated":"AH","expanded":"Anno Hegirae"},"holidays":[]},"gregorian":{"date":"19-03-2019","format":"DD-MM-YYYY","day":"19","weekday":{"en":"Tuesday"},"month":{"number":3,"en":"March"},"year":"2019","designation":{"abbreviated":"AD","expanded":"Anno Domini"}}},"meta":{"latitude":51.508515,"longitude":-0.1254872,"timezone":"Europe\/London","method":{"id":2,"name":"Islamic Society of North America (ISNA)","params":{"Fajr":15,"Isha":15}},"latitudeAdjustmentMethod":"ANGLE_BASED","midnightMode":"STANDARD","school":"STANDARD","offset":{"Imsak":0,"Fajr":0,"Sunrise":0,"Dhuhr":0,"Asr":0,"Maghrib":0,"Sunset":0,"Isha":0,"Midnight":0}}}}
      

      I like to filter on the first object “timings” (Fajr until Midnight) and present this information in a table on the Mirror (HTML layout comes later)

      I’ve been looking in other modules and trying to learn, but some use node_helper, some don’t and I’m a littlebit stuck right now.

      (still trying to learn JS, but not afraid to ask) ☺

      ? 2 Replies Last reply Mar 19, 2019, 11:59 AM Reply Quote 0
      • ? Offline
        A Former User @htilburgs
        last edited by A Former User Mar 19, 2019, 12:14 PM Mar 19, 2019, 11:59 AM

        @htilburgs
        If your API can be reached simply (without authentification, or any other dependencies), You can use xmlHttpRequest to get contents of specific URL in your main module js.
        When you need that result of API, Use this logic. (It’s better to make function. but here is just example)

        var url = "http://api.aladhan.com/......"
        var req = new XMLHttpRequest()
        req.overrideMimeType("application/json")
        req.open('GET', url, true)
        req.onload  = () => {
           var jsonResult = JSON.parse(req.responseText)
           // do your job with jsonResult
           console.log(jsonResult)
        }
        req.send()
        

        See https://www.w3schools.com/xml/xml_http.asp to learn about XMLHttpRequest

        1 Reply Last reply Reply Quote 0
        • ? Offline
          A Former User @htilburgs
          last edited by A Former User Mar 19, 2019, 12:12 PM Mar 19, 2019, 12:07 PM

          @htilburgs
          Then, you can access the jsonData like this; (This will be your main job)

          ...
          var Fajr = jsonResult.data.timings.Fajr
          console.log(Fajr)
          

          last, you can print it MM screen with .getDom()(You should call .updateDom() to update screen) or DOM manipulation.

          ...
          this.dataToShow.Fajr = jsonResult.data.timings.Fajr
          ...
          
          
          getDom : function() {
            var dom = document.createElement("div")
            if (this.dataToShow) dom.innerHTML = this.dataToShow.Fajr
            return dom
          },
          
          

          I’m skipping many things. This is just hint or sample. Remains will be your homework. :D

          1 Reply Last reply Reply Quote 0
          • H Offline
            htilburgs @Mykle1
            last edited by Mar 19, 2019, 12:18 PM

            @Mykle1 @Sean
            Both thanks for the quick reply.
            For now I’ve information that I can use to start.
            If there are any questions, I know where to be ;-)

            (still trying to learn JS, but not afraid to ask) ☺

            1 Reply Last reply Reply Quote 0
            • H Offline
              htilburgs
              last edited by Mar 19, 2019, 4:46 PM

              I used the example from MMM-UFO, and started the module.
              How can I check if there is data from the API URL?

              (still trying to learn JS, but not afraid to ask) ☺

              H 1 Reply Last reply Mar 19, 2019, 6:59 PM Reply Quote 0
              • H Offline
                htilburgs @htilburgs
                last edited by Mar 19, 2019, 6:59 PM

                Oke, got it. I had to add some console.log settings…:flushed_face:

                (still trying to learn JS, but not afraid to ask) ☺

                1 Reply Last reply Reply Quote 0
                • H Offline
                  htilburgs
                  last edited by Mar 19, 2019, 9:23 PM

                  @Mykle1 I’m using MMM-UFO as example and trying to figure out. I’m getting somewhere but… The data is retrieved through the api and this is the result:

                  Asr: "16:01"
                  Dhuhr: "12:46"
                  Fajr: "05:12"
                  Imsak: "05:02"
                  Isha: "20:21"
                  Maghrib: "18:49"
                  Midnight: "00:46"
                  Sunrise: "06:44"
                  Sunset: "18:49"
                  

                  The module is generated on the MM

                  alt text

                  But as you can see, it cannot read or display the data in the correct way.
                  This is the code that I use to get the data from the resultset.

                  // Fajr from data
                  var mptFajr = document.createElement("div");
                  mptFajr.classList.add("small", "bright", "fajr");
                  mptFajr.innerHTML = "Fajr : " + MPT.Fajr;
                  wrapper.appendChild(mptFajr);
                  

                  I can’t figure out what the problem is. It seems have something to do with the time-string that is returned. But whatever I try, no luck. Any idea?

                  (still trying to learn JS, but not afraid to ask) ☺

                  M 1 Reply Last reply Mar 19, 2019, 11:27 PM Reply Quote 0
                  • M Offline
                    Mykle1 Project Sponsor Module Developer @htilburgs
                    last edited by Mar 19, 2019, 11:27 PM

                    @htilburgs said in Develop module with API:

                    mptFajr.innerHTML = "Fajr : " + MPT.Fajr;

                    Is this correct? MPT.Fajr above? Not mpt.Fajr?

                    Create a working config
                    How to add modules

                    S 1 Reply Last reply Mar 19, 2019, 11:47 PM Reply Quote 0
                    • S Online
                      sdetweil @Mykle1
                      last edited by Mar 19, 2019, 11:47 PM

                      @Mykle1 it’s not json format. Same problem as your PC stats

                      Sam

                      How to add modules

                      learning how to use browser developers window for css changes

                      1 Reply Last reply Reply Quote 0
                      • 1
                      • 2
                      • 3
                      • 4
                      • 5
                      • 1 / 5
                      1 / 5
                      • First post
                        7/42
                        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