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.

    read csv-data and put it in an array

    Scheduled Pinned Locked Moved Utilities
    313 Posts 3 Posters 446.0k Views 4 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.
    • PerlchampP Offline
      Perlchamp
      last edited by

      thanks a lot. i will study this …

      S 1 Reply Last reply Reply Quote 0
      • S Offline
        sdetweil @Perlchamp
        last edited by

        @Perlchamp make that one fix and then my code will work too

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        1 Reply Last reply Reply Quote 0
        • PerlchampP Offline
          Perlchamp
          last edited by Perlchamp

          update !
          i tried, but how should i do this ?
          i was in the dev. didn’t helped me. it’s , how said, the part

          .concat(entrie.isBefore(now)?"_DIMMED":''
          

          with => blackScreen
          without => working (formatted => css).

          S 1 Reply Last reply Reply Quote 0
          • S Offline
            sdetweil @Perlchamp
            last edited by

            @Perlchamp have to edit the source code, then reload the browser page, cannot edit in debugger

            let now = moment()		
            					let entrie=now   // <-- this line was not included in yours..   i commented 
            				    if(this.config.dimmEntries) {				
            						entrie = moment(birthday,'DD.MM')
            					}
            

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            1 Reply Last reply Reply Quote 0
            • PerlchampP Offline
              Perlchamp
              last edited by

              this code => blackScreen:

                  getDom: function() {
              	var wrapper = this.createEl("div", null, null, null, null);
              	
              	// tell MM to call and get our content
              	Log.log(JSON.stringify(this.active_birthdays));
              
              	if ((moment() > this.midnight) || (!this.loaded)) {
              	    var month = moment().month();
              	    var year = moment().year();
              	    var monthName = moment().format("MMMM");
              	    var monthLength = moment().daysInMonth();
              	    var now = moment();
              
              	    if(Object.keys(this.active_birthdays).length > 0) {
              	    
              		// create your table here
              		var table = this.createEl("table", "birthday-table", "TABLE", wrapper, null);
              
              		// create tableheader here, array of column names
              		var table_header = this.createTableHeader(table, "THEAD", [" "," "]);
              		//var table_header = this.createTableHeader(table, null, [" "," "," "]);
              		
              		// create TBODY section with day names
              		var tBody = this.createEl('tBody', "birthday-tbody", "TBODY", table, null);
              
              		var birthdays_seen = {};		
              		var spacer = " ";
              		for(var birthday of Object.keys(this.active_birthdays)) {
              		    for(var person of this.active_birthdays[birthday]) {
              		    				
              			// create looped row section
              			var bodyTR = this.createEl("tr", "birthday-tr-body", "TR-BODY", tBody, null);
              
              			let now = moment();
              			let entrie = moment(birthday,"DD.MM");
              			
              			if(this.config.dimmEntries) {				
              			    entrie = moment(birthday,"DD.MM");
              			}
              			
              			// delete leading 0 and month
              			var bd = "";
              			
              			if(birthdays_seen[birthday] == undefined) {
              			    bd = (birthday.startsWith("0")? birthday.substring(1): birthday).split(".")[0];
              			    var imageTD = this.createEl("td", null, "TD-IMAGE".concat(entrie.isBefore(now)?"_DIMMED":'', bodyTR, bd);
              			    //var imageTD = this.createEl("td", null, "TD-IMAGE", bodyTR, bd);
              			    var nameTD = this.createEl("td", null, "TD-BODY".concat(entrie.isBefore(now)?"_DIMMED":'', bodyTR, person.name);
              			    //var nameTD = this.createEl("td", null, "TD-BODY", bodyTR, person.name);
              			    this.createEl("span", null, "TD-AGE", nameTD, " ");						
              			    
              			    // needs class for width
              			    var spanTDo = this.createEl("span", null, "TD-AGE".concat(entrie.isBefore(now)?"_DIMMED":'', nameTD, person.age);
              			    //var spanTDo = this.createEl("span", null, "TD-AGE", nameTD, person.age);
              			}
              			else{
              			    // add a break
              			    this.createEl("br", null , null , spanTDo, null);
              			    // add a span with name
              			    var nameTD = this.createEl("span", null, "TD-BODY".concat(entrie.isBefore(now)?"_DIMMED":'',spanTDo, person.name);
              			    //var nameTD = this.createEl("span", null, "TD-BODY", spanTDo, person.name);
              			    // add a span with age
              			    var spanTD = this.createEl("span", null, "TD-AGE".concat(entrie.isBefore(now)?"_DIMMED":'', spanTDo, person.age);
              			    //var spanTD = this.createEl("span", null, "TD-AGE", spanTDo, person.age);
              			}					
              
              			birthdays_seen[birthday] = true;
              		    }
              		}
              
              		// Create TFOOT section -- currently used for debugging only
              		if (this.config.debugging) {
              		    var table_footer = this.createTableFooter(tBody, null, [" "," "]);
              		    //footerTD.innerHTML = "Birthdaylist is currently in DEBUG mode!<br />Please see console log.";
              		}
              		else {
              		    var table_footer = this.createTableFooter(tBody, null, [" "," "]);
              		}
              
              	    }
              
              	    // pass the created content back to MM to add to DOM.
              	    return wrapper;
              
              	}
              	// Dom is loaded
              	this.loaded = true;
              
                  },
              

              this code works but no css:

               getDom: function() {
              	var wrapper = this.createEl("div",null,null,null,null);
              	
              	// tell MM to call and get our content
              	Log.log(JSON.stringify(this.active_birthdays));
              
              	if ((moment() > this.midnight) || (!this.loaded)) {
              	    var month = moment().month();
              	    var year = moment().year();
              	    var monthName = moment().format("MMMM");
              	    var monthLength = moment().daysInMonth();
              	    var now = moment();
              
              	    if(Object.keys(this.active_birthdays).length > 0) {
              	    
              		// create table
              		var table = this.createEl("table", "birthday-table", "TABLE" , wrapper,null)
              
              		// create tableheader here, array of column names
              		var table_header = this.createTableHeader(table, null, [" "," "]);
              		
              		// create TBODY section with day names
              		var tBody = this.createEl('tBody', "birthday-tbody", "TBODY" , table, null);
              
              		var birthdays_seen= {}
              		var spacer = " ";
              		for(var birthday of Object.keys(this.active_birthdays)) {
              		    for(var person of this.active_birthdays[birthday]) {
              
              		    				
              			// create looped row section
              			var bodyTR = this.createEl('tr', "birthday-tr-body", "TR-BODY" , tBody, null);
              
              			let now = moment().format('DD.MM').valueOf();				
              			let entrie=now;
              			if(this.config.dimmEntries) {				
              			    entrie = moment(birthday,'DD.MM').valueOf();
              			}
              			
              			// delete leading 0 and month
              			var bd = "";
              			
              			if(birthdays_seen[birthday] == undefined) {
              			    bd = (birthday.startsWith("0")? birthday.substring(1): birthday).split('.')[0];
              
              			    var imageTD = this.createEl('td', null, "TD-IMAGE" + (entrie < now)?"_DIMMED":'' , bodyTR, bd);		
              			    var nameTD = this.createEl('td', null, "TD-BODY" + (entrie < now)?"_DIMMED":'' , bodyTR, person.name);
              			    this.createEl("span", null, null, nameTD, " ");						
              			    
              			    // needs class for width
              			    var spanTDo = this.createEl("span", null, "TD-AGE" + (entrie < now)?"_DIMMED":'', nameTD, person.age);
              			}
              			else{
              			    // add a break
              			    this.createEl('br', null , null , spanTDo,null);
              			    // add a span with name
              			    var nameTD = this.createEl('span', null, "TD-BODY" + (entrie < now)?"_DIMMED":'' ,spanTDo, person.name);
              			    // add a span with age
              			    var spanTD = this.createEl("span", null, "TD-AGE" + (entrie < now)?"_DIMMED":'', spanTDo, person.age);						
              			}					
              			
              			var spacerTR = this.createEl('tr', null, null , tBody, null);
              			var spacerTD = this.createEl('td', null, "SPACER" , spacerTR, " ");
              			spacerTD.colSpan = "2";
              			birthdays_seen[birthday] = true;
              			
              		    }
              		}
              
              		// Create TFOOT section -- currently used for debugging only
              		if (this.config.debugging) {
              		    var table_footer = this.createTableFooter(tBody, null, [" "," "]);
              		    //footerTD.innerHTML = "Birthdaylist is currently in DEBUG mode!<br />Please see console log.";
              		}
              		else {
              		    var table_footer = this.createTableFooter(tBody, null, [" "," "]);
              		}
              
              	    }
              
              	    // pass the created content back to MM to add to DOM.
              	    return wrapper;
              
              	}
              	// Dom is loaded
              	this.loaded = true;
              
                  },
               
              
              S 1 Reply Last reply Reply Quote 0
              • S Offline
                sdetweil @Perlchamp
                last edited by sdetweil

                @Perlchamp you need to learn the debugger, code fixed

                	getDom: function(){
                		var wrapper = this.createEl("div",null,null,null);
                
                		if(Object.keys(this.active_birthdays).length>0){
                
                			// create your table  here
                			var table = this.createEl("table", "birthday-table", null, wrapper );
                
                			// table header here, array of column names
                			var table_header=this.createTableHeader(table,null, ["date","Name","age"])		
                
                			// create looped row section
                			var tBody = this.createEl('tbody', "birthday-t-body", "tbody", table, null);		
                
                			var birthdays_seen= {}
                			for(var birthday of Object.keys(this.active_birthdays)) {
                			    for(var person of this.active_birthdays[birthday]) {			    				
                
                					// create looped row section
                					var bodyTR = this.createEl('tr', null, "TR-BODY" ,tBody, null);	
                
                					let now = moment()		
                					let entrie=now
                				    if(this.config.dimmEntries) {				
                						entrie = moment(birthday,'DD.MM')
                					}
                					var bd = "";					
                			    	if(birthdays_seen[birthday]==undefined){
                						bd =(birthday.startsWith("0")? birthday.substring(1): birthday).split('.')[0];
                						var imageTD = this.createEl('td', null, "TD-IMAGE".concat(entrie.isBefore(now)?"_DIMMED":'') , bodyTR, bd);		
                						var nameTD = this.createEl('td', null, "TD-BODY".concat(entrie.isBefore(now)?"_DIMMED":'') , bodyTR, person.name);
                									 this.createEl("span", null, null, nameTD, " ");						// needs class for width
                						var spanTDo = this.createEl("span", null, "TD-AGE".concat(entrie.isBefore(now)?"_DIMMED":''), nameTD, person.age);
                					}	
                					else{
                						// add a break
                						this.createEl('br', null , null , spanTDo,null);
                						// add a span with name
                						var nameTD = this.createEl('span', null, "TD-BODY".concat(entrie.isBefore(now)?"_DIMMED":'') ,spanTDo, person.name);
                						// add a span with age
                						var spanTD = this.createEl("span", null, "TD-AGE".concat(entrie.isBefore(now)?"_DIMMED":''), spanTDo, person.age);						
                					}					
                
                
                					var spacerTR = this.createEl('tr', null, null , tBody, null);
                					var spacerTD = this.createEl('td', null, "SPACER" , spacerTR, " ");
                					spacerTD.colSpan = "2";
                					birthdays_seen[birthday] = true;
                
                				}
                		    }
                		}
                		return wrapper;
                	},
                

                see the last line of the console

                Screenshot at 2020-05-03 20-27-54.png
                black screen means syntax error in some modulename.js, click on the line number and it will take you to that line in the code … note the concat(… is missing its right paren ‘)’

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                1 Reply Last reply Reply Quote 0
                • PerlchampP Offline
                  Perlchamp
                  last edited by

                  thank you very much. yes i need more expirience of debugging. it’s my second day i use it, sorry sam. AND MANY THANKS.

                  S 1 Reply Last reply Reply Quote 0
                  • S Offline
                    sdetweil @Perlchamp
                    last edited by

                    @Perlchamp Make an error, take out a comma, or ’

                    reload the page, f5

                    put part of ht module name in the filter field of the console

                    find the error message
                    click the filename/line to the right

                    Sam

                    How to add modules

                    learning how to use browser developers window for css changes

                    1 Reply Last reply Reply Quote 0
                    • PerlchampP Offline
                      Perlchamp
                      last edited by

                      ok, will collect some experience …

                      1 Reply Last reply Reply Quote 0
                      • PerlchampP Offline
                        Perlchamp
                        last edited by

                        ok, the blacksreen is gone, works, but no css

                        S 1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 28
                        • 29
                        • 30
                        • 31
                        • 32
                        • 31 / 32
                        • First post
                          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