• 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
  1. Home
  2. Perlchamp
  3. Posts
A New Chapter for MagicMirror: The Community Takes the Lead
Read the statement by Michael Teeuw here.
Offline
  • Profile
  • Following 0
  • Followers 0
  • Topics 6
  • Posts 171
  • Groups 0

Posts

Recent Best Controversial
  • RE: read csv-data and put it in an array

    hi sam,
    right row 2 cols day name + age < br > … < br > name+age < br >
    the image below displays that:
    image

    look at my code, it’s all implemated but not the users in one cell :

        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
    		var table_header = this.createTableHeader(table, null, [" "," "]);
    
    		// create TBODY section with day names
    		var tBody = this.createEl('tBody', "birthday-tbody", "TBODY" , table, null);
    
    		var day_month_now = moment().format("DD.MM");
    		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);
    
    			// delete leading 0 and month
    			var bd = "";
    			if(birthdays_seen[birthday] == undefined) {
    			    bd =(birthday.startsWith("0")? birthday.substring(1): birthday).split('.')[0];
                 		    birthdays_seen[birthday] = true;
    			}
    
    			if (this.compareDate(now,birthday,"DD.MM") === 1) {
    			    if(this.config.dimmEntries) {
    				var imageTD = this.createEl('td', "birthday-td-image", "TD-IMAGE_DIMMED" , bodyTR, bd);
    				var nameTD = this.createEl('td', "birthday-td-body", "TD-BODY_DIMMED" , bodyTR, person.name);
    				var spanTD = this.createEl("span", "birthday-span-body", "TD-AGE_DIMMED", nameTD, person.age);
    				var spacerTR = this.createEl('tr', null, null , tBody, null);
    				var spacerTD = this.createEl('td', null, "SPACER" , spacerTR, spacer);
    				spacerTD.colSpan = "2";
    			    }
    			    else {
    			    }
    			}
    			else {
    			    var imageTD = this.createEl('td', "birthday-td-image", "TD-IMAGE" , bodyTR, bd);
    			    var nameTD = this.createEl('td', "birthday-td-body", "TD-BODY" , bodyTR, person.name);
    			    var spanTD = this.createEl("span", "birthday-span-body", "TD-AGE", nameTD, person.age);
    			    var spacerTR = this.createEl('tr', null, null , tBody, null);
    			    var spacerTD = this.createEl('td', null, "SPACER" , spacerTR, spacer);
    			    spacerTD.colSpan = "2";
    			}
    		    }
    		}
    
    		// 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;
    
        },
    
    posted in Utilities
    P
    Perlchamp
    May 3, 2020, 8:02 PM
  • RE: read csv-data and put it in an array

    i’m a step foward (did write two functions for smarter code) :

       // creates a tablefooter with columns
        createTableFooter: function(parent, className, column) {
    	var footer = document.createElement("tr");
    	for(colContent of column) {
    	    this.createEl("td", null, className, footer, colContent);
    	}
    	parent.appendChild(footer);
    	return footer;
        },
        
        // compares two dates, requires moment.js :
        // output "1"  : date1 > date2
        // output "-1" : date1 < date2
        // output "0"  : fault
        compareDate: function(now, entrie, format) {
    	let date_1 = moment(now,format).valueOf();
    	let date_2 = moment(entrie,format).valueOf();
    	if (date_1 > date_2) {
    	    return 1;
    	}
    	else if (date_1 < date_2) {
    	    return -1;
    	}
    	else {
    	    return 0;
    	}
        }, 
    

    the lastone is used here:

    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);
    
    			// delete leading 0 and month
    			var bd = "";
    			if(birthdays_seen[birthday] == undefined) {
    			    bd =(birthday.startsWith("0")? birthday.substring(1): birthday).split('.')[0];
                 		    birthdays_seen[birthday] = true;
    			}
    
    			if (this.compareDate(now,birthday,"DD.MM") === 1) {
    			    if(this.config.dimmEntries) {
    				var imageTD = this.createEl('td', "birthday-td-image", "TD-IMAGE_DIMMED" , bodyTR, bd);
    				var nameTD = this.createEl('td', "birthday-td-body", "TD-BODY_DIMMED" , bodyTR, person.name);
    				var spanTD = this.createEl("span", "birthday-span-body", "TD-AGE_DIMMED", nameTD, person.age);
    				var spacerTR = this.createEl('tr', null, null , tBody, null);
    				var spacerTD = this.createEl('td', null, "SPACER" , spacerTR, spacer);
    				spacerTD.colSpan = "2";
    			    }
    			    else {
    			    }
    			}
    			else {
    			    var imageTD = this.createEl('td', "birthday-td-image", "TD-IMAGE" , bodyTR, bd);
    			    var nameTD = this.createEl('td', "birthday-td-body", "TD-BODY" , bodyTR, person.name);
    			    var spanTD = this.createEl("span", "birthday-span-body", "TD-AGE", nameTD, person.age);
    			    var spacerTR = this.createEl('tr', null, null , tBody, null);
    			    var spacerTD = this.createEl('td', null, "SPACER" , spacerTR, spacer);
    			    spacerTD.colSpan = "2";
    			}
    		    }
    		}
    

    it works fine for me :-). for the last step (people with the same birthday in one cell, separeted via < /br >) i have momently no ideas…

    posted in Utilities
    P
    Perlchamp
    May 3, 2020, 7:23 PM
  • RE: read csv-data and put it in an array

    ok, doesn’t matter. enjoy your meal with your family.

    posted in Utilities
    P
    Perlchamp
    May 3, 2020, 6:35 PM
  • RE: read csv-data and put it in an array

    the next working step:

    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);
    
    			// delete leading 0 and month
    			var bd = "";
    			if(birthdays_seen[birthday] == undefined) {
    			    bd =(birthday.startsWith("0")? birthday.substring(1): birthday).split('.')[0];
                 		    birthdays_seen[birthday] = true;
    			}
    			let entrie = moment(birthday,'DD.MM').valueOf();
    			let now = moment(now_day_month,'DD.MM').valueOf();
    			if (entrie < now) {
    			    if(this.config.dimmEntries) {
    				var imageTD = this.createEl('td', "birthday-td-image", "TD-IMAGE_DIMMED" , bodyTR, bd);
    				var nameTD = this.createEl('td', "birthday-td-body", "TD-BODY_DIMMED" , bodyTR, person.name);
    				var spanTD = this.createEl("span", "birthday-span-body", "TD-AGE_DIMMED", nameTD, person.age);
    				var spacerTR = this.createEl('tr', null, null , tBody, null);
    				var spacerTD = this.createEl('td', null, "SPACER" , spacerTR, spacer);
    				spacerTD.colSpan = "2";
    			    }
    			    else {
    			    }
    			}
    			else {
    			    var imageTD = this.createEl('td', "birthday-td-image", "TD-IMAGE" , bodyTR, bd);
    			    var nameTD = this.createEl('td', "birthday-td-body", "TD-BODY" , bodyTR, person.name);
    			    var spanTD = this.createEl("span", "birthday-span-body", "TD-AGE", nameTD, person.age);
    			    var spacerTR = this.createEl('tr', null, null , tBody, null);
    			    var spacerTD = this.createEl('td', null, "SPACER" , spacerTR, spacer);
    			    spacerTD.colSpan = "2";
    			}
    		    }
    		}
    

    now should be the last step:
    people who are their birthday at the same day in one cell separated by < /br > … that’s (maybe) too difficult for me, but just figuring out …

    posted in Utilities
    P
    Perlchamp
    May 3, 2020, 4:56 PM
  • RE: read csv-data and put it in an array

    hi sam, for me it’s a milestone :

        // type: td, id: id of element, className: classname of element
        // parent: parent of element, value: value
        createEl : function (type, id, className, parent, value) {
    	var el= document.createElement(type);
    	if(id)
    	    el.id = id;
    	if(className)
    	    el.className = className;
    	if(parent)
    	    parent.appendChild(el);
    	if(value)
    	    el.appendChild(document.createTextNode(value));
    	return el;
        },
        
        // creates a tableheader with columnnaes
        createTableHeader: function(parent, className, columnlabels) {
    	var header = document.createElement("tr");
    	for(columnName of columnlabels) {
    	    this.createEl("th", null, className, header, columnName);
    	}
    	parent.appendChild(header);
    	return header;
        },
    
        // creates a tablefooter with columns
        createTableFooter: function(parent, className, column) {
    	var footer = document.createElement("tr");
    	for(colContent of column) {
    	    this.createEl("td", null, className, footer, colContent);
    	}
    	parent.appendChild(footer);
    	return footer;
        },
    
        // this is the major worker of the module, it provides the 
        // 	   displayable content for this module
        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_day_month = moment().format("DD.MM");
    
    	    if(Object.keys(this.active_birthdays).length > 0) {
    
    		// create table
    		var table = this.createEl("table", "birthday-table", "TABLE" , wrapper,null)
    
    		// create tableheader here
    		var table_header = this.createTableHeader(table, null, [" "," "]);
    
    		// create TBODY section with day names
    		var tBody = this.createEl('tBody', "birthday-tbody", "TBODY" , table, null);
    
    		var day_month_now = moment().format("DD.MM");
    		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);
    
    			// delete leading 0 and month
    			var bd = "";
    			if(birthdays_seen[birthday] == undefined) {
    			    bd =(birthday.startsWith("0")? birthday.substring(1): birthday).split('.')[0];
                 		    birthdays_seen[birthday] = true;
    			}
    			let date1 = moment(birthday,'DD.MM').valueOf();
    			let date2 = moment(now_day_month,'DD.MM').valueOf();
    			if (date1 < date2) {
    			    var imageTD = this.createEl('td', "birthday-td-image", "TD-IMAGE_DIMMED" , bodyTR, bd);
    			    var nameTD = this.createEl('td', "birthday-td-body", "TD-BODY_DIMMED" , bodyTR, person.name);
    			    var spanTD = this.createEl("span", "birthday-span-body", "TD-AGE_DIMMED", nameTD, person.age);
    			}
    			else {
    			    var imageTD = this.createEl('td', "birthday-td-image", "TD-IMAGE" , bodyTR, bd);
    			    var nameTD = this.createEl('td', "birthday-td-body", "TD-BODY" , bodyTR, person.name);
    			    var spanTD = this.createEl("span", "birthday-span-body", "TD-AGE", nameTD, person.age);
    			}
    			var spacerTR = this.createEl('tr', null, null , tBody, null);
    			var spacerTD = this.createEl('td', null, "SPACER" , spacerTR, spacer);
    			spacerTD.colSpan = "2";
    		    }
    		}
    
    		// 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;
    
        },
    
    

    css-file via email

    posted in Utilities
    P
    Perlchamp
    May 3, 2020, 4:41 PM
  • RE: read csv-data and put it in an array

    bloody nice dreams, sam

    posted in Utilities
    P
    Perlchamp
    May 3, 2020, 3:48 AM
  • RE: read csv-data and put it in an array

    yes black on black, why not ? because of the mirrors lucidity … better safe than sorry ;-)

    posted in Utilities
    P
    Perlchamp
    May 3, 2020, 3:39 AM
  • RE: read csv-data and put it in an array

    IT WORKS !!, Sam, it WORKS !
    had a wrong image-name. that is UNPARDONABLE !!
    now, this background-image will shown, if two people tzhe same day… problems, problems, problems …
    SOLUTION: these people (same day) should be in ONE cell, separated by < /br > therefor i don’t need a third cell ;-)

    @Perlchamp no images email or text => i would like sending emails (with attached images, too)
    this is the homerun, touchdown and goal !

    posted in Utilities
    P
    Perlchamp
    May 3, 2020, 3:23 AM
  • RE: read csv-data and put it in an array
    .birthdaylist .TD-IMAGE {
      width: 27px;
      font-size: 20px;
      color: #000000;
      background-repeat: no-repeat;
      background-position: top left;
      background-image: url("/modules/birthdaylist/images/kalenderblatt.png");
      font-weight: 400;
      line-height: 26px;
      vertical-align: top;
      text-align: center;
      margin: 0px;
      padding: 10px 0px 0px 0px;
    }
    
    posted in Utilities
    P
    Perlchamp
    May 3, 2020, 3:18 AM
  • RE: read csv-data and put it in an array

    back again. WITHOUT a class reference (third element = null) i see the days.
    WITH class-reference (“TD-IMAGE”) i see NO days.
    the rest is working very good, thank you for that :-)

    posted in Utilities
    P
    Perlchamp
    May 3, 2020, 3:16 AM
  • 1
  • 2
  • 3
  • 4
  • 5
  • 17
  • 18
  • 3 / 18
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