module develop help!



  • I want to develop bus arrival information module.

    The following code is sample code

    /* Javascript 샘플 코드 */
    
    
    var xhr = new XMLHttpRequest();
    var url = 'http://openapi.tago.go.kr/openapi/service/ArvlInfoInqireService/getSttnAcctoArvlPrearngeInfoList; /*URL*/
    var queryParams = '?' + encodeURIComponent('ServiceKey') + '='+'서비스키'; /*Service Key*/
    queryParams += '&' + encodeURIComponent('cityCode') + '=' + encodeURIComponent('25); /*도시코드*/
    queryParams += '&' + encodeURIComponent('nodeId') + '=' + encodeURIComponent('DJB8001793ND); /*정류소ID*/
    xhr.open('GET', url + queryParams);
    xhr.onreadystatechange = function () {
        if (this.readyState == 4) {
            alert('Status: '+this.status+' Headers: '+JSON.stringify(this.getAllResponseHeaders())+' Body: '+this.responseText);
        }
    };
    
    xhr.send('');
    

    I fixed this for my api.
    The following code

    var xhr = new XMLHttpRequest();
    var url = 'http://openapi.tago.go.kr/openapi/service/ArvlInfoInqireService/getSttnAcctoArvlPrearngeInfoList';
    var queryParams = '?' + encodeURIComponent('ServiceKey') + '='+'A2C6WKuZwdEx08OODGH2clmfQCkFMypGQMfr5pt4M1EXiVfgzdi1Ek%2Ff4Uu1026jycb2MSyg9LEyCxrfhbENvg%3D%3D';
    queryParams += '&' + encodeURIComponent('cityCode') + '=' + encodeURIComponent('22');
    queryParams += '&' + encodeURIComponent('nodeId') + '=' + encodeURIComponent('DGB7011005300');
    xhr.open('GET', url + queryParams);
    xhr.onreadystatechange = function () {
        if (this.readyState == 4) {
            alert('Status: '+this.status+' Headers: '+JSON.stringify(this.getAllResponseHeaders())+' Body: '+this.responseText);
        }
    };
    xhr.send('');
    

    And I added a module.

    0_1511788848625_20171127_221953.png
    0_1511788854050_20171127_222039.png

    But it does not work in the mirror.
    What’s wrong?


  • Module Developer

    @wireshark
    You have not understood the structure of MagicMirror module and basic javascript syntax.
    I suggest you study more with other modules.


  • Module Developer

    Usually, a MagicMirror module should have several method implementations.

    .start() : called when module is loaded on bootup. (and after all modules are loaded.) You could use this function for initialization.
    .getDom() : called when view of modules is needed to refresh You could use this function to draw your content on Mirror.

    And there are many points to study.
    See this. https://github.com/MichMich/MagicMirror/tree/develop/modules



  • @Sean

    Thank you!!

    I’ve been through a lot of modifications
    I concluded.

    Module.register("MMM-bus",{
    
    	defaults: {
    		
    	},
    
    
    start: function() {
        Log.info("Starting module: " + this.name);
    },
    
    getDom: function() {
       var xhr = new XMLHttpRequest();
       var url = 'http://openapi.tago.go.kr/openapi/service/ArvlInfoInqireService/getSttnAcctoArvlPrearngeInfoList; /*URL*/
       var queryParams = '?' + encodeURIComponent('ServiceKey') + '='+'A2C6WKuZwdEx08OODGH2clmfQCkFMypGQMfr5pt4M1EXiVfgzdi1Ek%2Ff4Uu1026jycb2MSyg9LEyCxrfhbENvg%3D%3D'; /*Service Key*/
       queryParams += '&' + encodeURIComponent('cityCode') + '=' + encodeURIComponent('25); /*도시코드*/
       queryParams += '&' + encodeURIComponent('nodeId') + '=' + encodeURIComponent('DJB8001793ND); /*정류소ID*/
       xhr.open('GET', url + queryParams);
       xhr.onreadystatechange = function () {
           if (this.readyState == 4) {
               alert('Status: '+this.status+' Headers: '+JSON.stringify(this.getAllResponseHeaders())+' Body: '+this.responseText);
           }
    };
    
    xhr.send('');
        
    return xhr;
    }
    
    });
    

    But it still does not work.
    What’s more lacking?


  • Module Developer

    @wireshark I didn’t look inside deeply.
    But in getDom() didn’t you draw anything. You just try to alert something on success.
    Ok, maybe you are just in developing stage. It’s ok.
    So, You should invoke getDom() with updateDom() when it is needed.
    By example, in your start(), you can update your dom like this.

    start: function() {
      var self = this
      setInterval(function(){
        self.updateDom()
      }, 60*1000)
    },
    

    After loaded, this module function start() would set interval timer to execute updateDom() for refreshing view. every time when updateDom() is called, getDom() will be executed. So, your getDom() will be executed every 60*1000 milsec.


  • Module Developer

    But this is not so good, because, start() could be executed before DOM created. This could give your module unintended errors. My recommendation is starting your job after DOM_OBJECTS_CREATED notification received. This notification would be fired when all modules are loaded and draw their first DOM view.

    notificationReceived: function(noti, payload, sender) {
      if (noti == "DOM_OBJECTS_CREATED") {
        //do your job
        // e.g) set Timer to refreshing data and update view with updateDom()
      }
    },
    

  • Module Developer

    And the last, you SHOULD DRAW YOUR DOM for real rendering.

    getDom: function() {
      // do your job...
      yourDOM = document.createElement("div")
      yourDOM.innerHTML = "Something"
      return yourDOM // DOM which has your content inside, should be returned.
    },
    
    
    


  • @Sean

    Module.register("MMM-bus",{
    	
    		defaults: {
    			
    		},
    	
    	
    	start: function() {
    		var self = this
    		setInterval(function(){
    			self.updateDom()
    		}, 6*1000)
    	},
    	
    	getDom: function() {
    		
    		var wrapper = document.createElement("div");
    	var xhr = new XMLHttpRequest();
    	   var url = 'http://openapi.tago.go.kr/openapi/service/ArvlInfoInqireService/getSttnAcctoArvlPrearngeInfoList';
    	   var queryParams = '?ServiceKey=A2C6WKuZwdEx08OODGH2clmfQCkFMypGQMfr5pt4M1EXiVfgzdi1Ek%2Ff4Uu1026jycb2MSyg9LEyCxrfhbENvg%3D%3D';
    	   queryParams += '&cityCode=25';
    	   queryParams += '&nodeId=DJB8001793ND';
    	   xhr.open('GET', url + queryParams, true);
    	   xhr.onreadystatechange = function () {
    		   if (this.readyState == 4) {
    			   alert('Status: '+this.status+' Headers: '+JSON.stringify(this.getAllResponseHeaders())+' Body: '+this.responseText);
    				   
    		}
    	}
    
    	wrapper.innerHTML = xhr.send();   
    	return wrapper;
    	}
    	});
    

    I think it’s the best I’ve done.
    I do not think there is a problem.
    But it does not work :(


  • Module Developer

    @wireshark
    Run with npm start dev. And see the logs and errors. They tell you what are real problems. And even for us, without exact information, we couldn’t help.
    Anyway, what it means ‘doesn’t work’? It has errors? Black screen?
    I think if it works, just alert window would be popped up. (Return value of xhr.send() might be not what you really want.) You’d better to investigate codes around alert().



  • @Sean

    Module.register("MMM-bus",{
    	
    		defaults: {
    			
    		},
    	
    	
    	start: function() {
    		var self = this
    		setInterval(function(){
    			self.updateDom()
    		}, 60*1000)
    	},
    	
    	getDom: function() {
    		
    		var wrapper = document.createElement("div");
    
    		var xhr = new XMLHttpRequest();
    

    0_1511961323176_20171129_221456.png

                        qureyParams +='&cityCode=22';
    
                        qureyParams +='&nodeId=DGB7011005300';
    
                        xhr.open('GET', url+qureyParams, false);
    
                        xhr.onreadystatechange = function () {
    
                            if (this.readyState == 4 && this.status == 200) {
    
                                parser= new DOMParser();
    
                                xmlDoc=parser.parseFromString(xhr.response,"text/xml");
    
    
                                var xml = xmlDoc.getElementsByTagName('items');
    
                                
    
                                var busno = xml[0].getElementsByTagName('item')[0].getElementsByTagName('routeno')[0].childNodes[0].nodeValue;
    
                                var buscnt = xml[0].getElementsByTagName('item')[0].getElementsByTagName('arrprevstationcnt')[0].childNodes[0].nodeValue;
    
                                var time = xml[0].getElementsByTagName('item')[0].getElementsByTagName('arrtime')[0].childNodes[0].nodeValue;
    
                                var min = time/60;
    
    
    
                                wrapper.innerHTML = busno + "   " + buscnt + "정류장 전   " + Math.ceil(min)+ "분 전";
    
                            }else {
    
                            wrapper.innerHTML = "버스 정보가 없거나 불러올 수 없습니다."
    
                        }
    
                    }
    
                    xhr.send();
    
                }
      
    	return wrapper;
    	}
    
    
    });
    

    It worked fine in html, but it does not work in mirrors (modules do not appear in the mirror).
    maybe related to access-control-allow-origin?


Log in to reply
 

Looks like your connection to MagicMirror Forum was lost, please wait while we try to reconnect.