• 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 13.9k 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.
  • S Offline
    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
    • H Offline
      htilburgs
      last edited by htilburgs Mar 20, 2019, 6:24 AM Mar 20, 2019, 6:23 AM

      @Mykle1, @sdetweil ,
      Looking at the website from the API Prayer Times API, the result are all displayed in JSON

      The API has several endpoints to assist developers. Note that all the endpoints return JSON and are available over http and https.
      

      I’ve looked at the code again and it should be MPT.Fajr.
      I’ve made the module public on github, so you can take a look if you like.
      MMM-MyPrayerTime

      Meanwhile I’m trying to solve it…

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

      ? 1 Reply Last reply Mar 20, 2019, 7:43 AM Reply Quote 0
      • ? Offline
        A Former User @htilburgs
        last edited by Mar 20, 2019, 7:43 AM

        @htilburgs
        0_1553067641516_tt.png

        I don’t know what you exactly want,
        but ,
        Instead

        var MPT = this.MPT[Keys[this.activeItem]];
        

        Use this;

        var MPT = this.MPT
        

        You can get above picture.

        1 Reply Last reply Reply Quote 0
        • H Offline
          htilburgs
          last edited by Mar 20, 2019, 8:08 AM

          @Sean,
          This is what I want. Thanx for the quick reply!

          Can you tell me what is the difference in the code?

          This was an example from the MMM-UFO where information is rotated.
          Because I don’t need it, I’m going to cleanup.

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

          ? 1 Reply Last reply Mar 20, 2019, 8:15 AM Reply Quote 0
          • ? Offline
            A Former User @htilburgs
            last edited by A Former User Mar 20, 2019, 8:16 AM Mar 20, 2019, 8:15 AM

            @htilburgs
            Well, I don’t know what exactly you’ve tried, so difficult to tell what was wrong.
            But,
            You’ve already gotten timings from response of API in node_helper.js, and transfered it to your main module.

            var result = JSON.parse(body).data.timings;   
            

            So your this.MPT might have this object structure;

            {
                  "Fajr":"04:06",
                  "Sunrise":"05:35",
                  "Dhuhr":"11:39",
                  ...
            }
            

            So, All you need is just refer it like this.MPT.Fajr.

            1 Reply Last reply Reply Quote 0
            • H Offline
              htilburgs
              last edited by Mar 20, 2019, 9:28 AM

              @Sean,
              Thank you for explaining and pointing me out.
              I understand what was the issue. I’ve cleaned up the code and removed the caroussel part (and unneeded variables), because I don’t use that.

              Added the possibility for showing or not showing some items.
              Up to the next part… HTML Markup

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

              1 Reply Last reply Reply Quote 0
              • H Offline
                htilburgs
                last edited by Mar 20, 2019, 8:47 PM

                Strugling with formatting. When I use the basic code, I got the result I like but it’s not displayed nice. I like to have 3 columns.

                		var MPT = this.MPT;
                		
                		// Creating the div's for your data items
                		var top = document.createElement("div");
                		top.classList.add("list-row");
                
                		// Fajr from data
                		var mptFajr = document.createElement("div");
                		mptFajr.classList.add("small", "bright", "Fajr");
                		mptFajr.innerHTML = "Fajr : " + MPT.Fajr + " الفجر";
                		wrapper.appendChild(mptFajr);			
                			
                		// Sunrise from data
                		if (this.config.showSunrise != false) {
                		    var mptSunrise = document.createElement("div");
                		    mptSunrise.classList.add("small", "bright", "Sunrise");
                		    mptSunrise.innerHTML = "Sunrise : " + MPT.Sunrise + " شروق الشمس";
                		    wrapper.appendChild(mptSunrise);
                		}
                		// Dhuhr from data
                		var mptDhuhr = document.createElement("div");
                		mptDhuhr.classList.add("small", "bright", "Dhuhr");
                		mptDhuhr.innerHTML = "Duhr : " + MPT.Dhuhr + " الظهر";
                		wrapper.appendChild(mptDhuhr);
                
                		// Asr from data
                		var mptAsr = document.createElement("div");
                		mptAsr.classList.add("small", "bright", "Asr");
                		mptAsr.innerHTML = "Asr : " + MPT.Asr + " العصر";
                		wrapper.appendChild(mptAsr);
                			
                		// Sunset from data
                		if (this.config.showSunset != false) {
                		    var mptSunset = document.createElement("div");
                		    mptSunset.classList.add("small", "bright", "Sunset");
                		    mptSunset.innerHTML = "Sunset : " + MPT.Sunset + " غروب الشمس";
                		    wrapper.appendChild(mptSunset);
                		}
                			
                		// Maghrib from data
                		var mptMaghrib = document.createElement("div");
                		mptMaghrib.classList.add("small", "bright", "Maghrib");
                		mptMaghrib.innerHTML = "Maghrib : " + MPT.Maghrib + " المغرب";
                		wrapper.appendChild(mptMaghrib);
                		
                		// Isha from data
                		var mptIsha = document.createElement("div");
                		mptIsha.classList.add("small", "bright", "Isha");
                		mptIsha.innerHTML = "Isha : " + MPT.Isha + " العشاء";
                		wrapper.appendChild(mptIsha);
                			
                		// Midnight from data
                		if (this.config.showMidnight != false) {
                		    var mptMidnight = document.createElement("div");
                		    mptMidnight.classList.add("small", "bright", "Midnight");
                		    mptMidnigh
                

                alt text

                Now I trying for several hours to figure out how to create table, columns, rows…
                I’ve changed the code part to

                		var MPT = this.MPT;
                
                		var logs = document.createElement("table");
                		var callWrapper = document.createElement("tr");
                		callWrapper.classList.add("small");
                		
                		// Fajr
                		var FajrTextCell = document.createElement("td");
                		FajrTextCell.className.add = "xsmall bright fajrtext";
                		FajrTextCell.innerHTML = "Fajr";
                		callWrapper.appendChild(FajrTextCell);
                		
                		var FajrTimeCell = document.createElement("td");
                		FajrTimeCell.className = "xsmall bright fajrtime";
                		FajrTimeCell.innerHTML = MPT.Fajr;
                		callWrapper.appendChild(FajrTimeCell);
                		
                		var FajrArabCell = document.createElement("td");
                		FajrArabCell.className = "xsmall bright fajrarab";
                		FajrArabCell.innerHTML = "الفجر";
                		callWrapper.appendChild(FajrArabCell);
                
                		logs.appendChild(callWrapper);
                		wrapper.appendChild(logs);
                		return wrapper;
                

                The result for 1 item is nice

                alt text

                But when I repeat this for the other items, no rows are created and everything is on the same row.

                		var MPT = this.MPT;
                
                //Table Test
                
                		var logs = document.createElement("table");
                		var callWrapper = document.createElement("tr");
                		callWrapper.classList.add("small");
                		
                		// Fajr
                		var FajrTextCell = document.createElement("td");
                		FajrTextCell.className.add = "xsmall bright fajrtext";
                		FajrTextCell.innerHTML = "Fajr";
                		callWrapper.appendChild(FajrTextCell);
                		
                		var FajrTimeCell = document.createElement("td");
                		FajrTimeCell.className = "xsmall bright fajrtime";
                		FajrTimeCell.innerHTML = MPT.Fajr;
                		callWrapper.appendChild(FajrTimeCell);
                		
                		var FajrArabCell = document.createElement("td");
                		FajrArabCell.className = "xsmall bright fajrarab";
                		FajrArabCell.innerHTML = "الفجر";
                		callWrapper.appendChild(FajrArabCell);
                		
                		// Sunrise
                		var SunriseTextCell = document.createElement("td");
                		SunriseTextCell.className.add = "xsmall bright sunrisetext";
                		SunriseTextCell.innerHTML = "Sunrise";
                		callWrapper.appendChild(FajrTextCell);
                		
                		var SunriseTimeCell = document.createElement("td");
                		SunriseTimeCell.className = "xsmall bright fajrtime";
                		SunriseTimeCell.innerHTML = MPT.Sunrise;
                		callWrapper.appendChild(SunriseTimeCell);
                		
                		var SunriseArabCell = document.createElement("td");
                		SunriseArabCell.className = "xsmall bright sunrisearab";
                		SunriseArabCell.innerHTML = "شروق الشمس";
                		callWrapper.appendChild(SunriseArabCell);		
                
                		logs.appendChild(callWrapper);
                		wrapper.appendChild(logs);
                		return wrapper;
                

                alt text

                Any help to get me on the right track again?

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

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

                  @htilburgs
                  Insert “tr” element after each row.

                  1 Reply Last reply Reply Quote 0
                  • htilburgsH Offline
                    htilburgs
                    last edited by Mar 20, 2019, 9:26 PM

                    Don’t I do this with this?

                    var callWrapper = document.createElement("tr");
                    callWrapper.appendChild(FajrTextCell);
                    

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

                    S ? 2 Replies Last reply Mar 20, 2019, 9:29 PM Reply Quote 0
                    • S Offline
                      sdetweil @htilburgs
                      last edited by Mar 20, 2019, 9:29 PM

                      @htilburgs yes, for each row, and the columns added to the row

                      Sam

                      How to add modules

                      learning how to use browser developers window for css changes

                      htilburgsH 1 Reply Last reply Mar 20, 2019, 9:44 PM Reply Quote 0
                      • 1
                      • 2
                      • 3
                      • 4
                      • 5
                      • 2 / 5
                      2 / 5
                      • First post
                        16/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