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

read csv-data and put it in an array

Scheduled Pinned Locked Moved Utilities
313 Posts 3 Posters 410.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.
  • P Offline
    Perlchamp
    last edited by May 3, 2020, 12:03 AM

    ok, i will try

    1 Reply Last reply Reply Quote 0
    • P Offline
      Perlchamp
      last edited by May 3, 2020, 12:07 AM

      doesn’t work either

      S 1 Reply Last reply May 3, 2020, 12:07 AM Reply Quote 0
      • S Offline
        sdetweil @Perlchamp
        last edited by May 3, 2020, 12:07 AM

        @Perlchamp bummer

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        1 Reply Last reply Reply Quote 0
        • P Offline
          Perlchamp
          last edited by Perlchamp May 3, 2020, 12:11 AM May 3, 2020, 12:09 AM

          when I had a big pile of html objects to create I wrote a little routine to hide the 4 lines per object

          where i have to place it ?

          sam, take my going code and see by yourself. here is the css:

          /*
          .birthdaylist .app {
              width: 200px;
              padding: 0px;
          }
          */
          
          .birthdaylist .table {
            padding: 0px;
            margin: 0px;
          /*
            border: 1px solid white;
            width: 200px;
          */
          }
          
          .birthdaylist .thead {
          
          }
          
          .birthdaylist .tr-head {
          
          }
          
          .birthdaylist header {
            letter-spacing: 0.1em;
            text-transform: uppercase;
            font-size: 20px;
            font-family: "Roboto Condensed", Arial, Helvetica, sans-serif;
            font-weight: 400;
            border-bottom: 1px solid #444444;
            line-height: 20px;
            padding-bottom: 5px;
            color: #ffffff;
          /*
            font-variant: small-caps;
          */
          }
          
          .birthdaylist .tfoot {
          
          /*
            height: 10px;
            padding: 0px;
            margin: 0px;
          */
          }
          
          .birthdaylist .tr-foot {
          
          /*
            height: 10px;
            padding: 0px;
            margin: 0px;
          */
          }
          
          .birthdaylist .td-foot {
            line-height: 16px;
            font-size: 16px;
            font-family: "Roboto Condensed", Arial, Helvetica, sans-serif;
            padding: 0px;
            margin: 0px;
          /*
            border: 1px solid #444444;
          */
          }
          
          .birthdaylist .tbody {
          
          }
          
          .birthdaylist .tr-body {
          
          }
          
          .birthdaylist .td-image {
            width: 27px;
            background-repeat: no-repeat;
            background-position: top left;
            background-image: url("/modules/birthdaylist/images/kalenderblatt.png");
            font-size: 20px;
            color: #000000;
            font-weight: 400;
            line-height: 26px;
            vertical-align: top;
            text-align: center;
            margin: 0px;
            padding: 10px 0px 0px 0px;
          /*
            border: 1px solid orange;
            height: 28px;
          */
          }
          
          .birthdaylist .td-body {
            font-size: 18px;
            text-transform: uppercase;
            color: #888888;
            letter-spacing: 0.1em;
            vertical-align: top;
            line-height: 22px;
            padding: 0px 0px 8px 8px;
            margin: 0px;
          /*
            border: 1px solid orange;
            height: 28px;
            font-variant: small-caps;
            width: 160px;
          */
          }
          
          .birthdaylist span {
            color: orange;
            font-weight: bold;
          }
          
          
          S 1 Reply Last reply May 3, 2020, 12:10 AM Reply Quote 0
          • S Offline
            sdetweil @Perlchamp
            last edited by May 3, 2020, 12:10 AM

            @Perlchamp said in read csv-data and put it in an array:

            where i have to place it ?
            its just another routine like getDom()

            I put it right in front of getDom

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            1 Reply Last reply Reply Quote 0
            • P Offline
              Perlchamp
              last edited by May 3, 2020, 12:18 AM

              and the parent-element itselfs get a 0 (null) as parent ?

              S 1 Reply Last reply May 3, 2020, 12:22 AM Reply Quote 0
              • S Offline
                sdetweil @Perlchamp
                last edited by May 3, 2020, 12:22 AM

                @Perlchamp i usually don’t use it for wrapper, but yes… the routine would have to check and not set if parent null, same for id

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                1 Reply Last reply Reply Quote 0
                • P Offline
                  Perlchamp
                  last edited by May 3, 2020, 12:45 AM

                  doesn’t work (black screen) yet, BUT:

                  1. the classes set in “” ?
                  2. no use of appendchild ?
                  3. the wrapper set in “” ?

                  i did :

                  1. no
                  2. correct
                  3. no

                  question:
                  get i problems with this.create… because of “var self = this” ?

                  1 Reply Last reply Reply Quote 0
                  • P Offline
                    Perlchamp
                    last edited by May 3, 2020, 12:49 AM

                    my code (only table):

                    	    // create table
                    	    var wrapper = this.createEl('table', "birthday-table", table , 0)
                    	    //var wrapper = document.createElement("table");
                    	    //wrapper.className = 'table'; 
                    	    //wrapper.id = 'birthday-table';
                    
                    	    // create header
                    	    var tHeader = this.createEl('thead', "birthday-thead", thead , wrapper)
                    	    //var tHeader = document.createElement("thead");
                    	    //tHeader.className = "thead";
                    	    //tHeader.id = "birthday-thead";
                    
                    	    var headerTR = this.createEl('tr', "birthday-tr-head", tr-head , tHeader)
                    	    //var headerTR = document.createElement("tr");
                    	    //headerTR.className = "tr-head";
                    	    //headerTR.id = "birthday-tr-head";			    
                    
                    	    var headerTH = document.createElement("th");
                    	    //var headerTH = this.createEl('th', "birthday-th-head", th-head , headerTR)
                    	    headerTH.colSpan = "2";
                    	    headerTH.scope = "col";
                    	    headerTH.innerHTML = " ";
                    	    //headerTH.className = "th-head";
                    	    //headerTH.id = "birthday-th-head";
                    	    
                    	    //headerTR.appendChild(headerTH);
                    	    //tHeader.appendChild(headerTR);
                    	    //wrapper.appendChild(tHeader);
                    		    
                    	    // Create TFOOT section -- currently used for debugging only
                    	    var tFooter = this.createEl('tfoot', "birthday-tfood", tfoot , wrapper)
                    	    //var tFooter = document.createElement('tfoot');
                    	    //tFooter.className = "tfoot";
                    	    //tFooter.id = "birthday-tfoot";
                    
                    	    //var footerTR = document.createElement("tr");
                    	    var footerTR = this.createEl('tr', "birthday-tf-foot", tr-foot , tFooter)
                    	    //footerTR.className = "tr-foot";
                    	    //footerTR.id = "birthday-tr-foot";
                    
                    	    //var footerTD = document.createElement("td");
                    	    var footerTD = this.createEl('td', "birthday-td-foot", td-foot , footerTR)
                    	    footerTD.colSpan ="2";
                    	    //footerTD.className = "td-foot";
                    	    //footerTD.id = "birthday-td-foot";
                    	    if (this.config.debugging) {
                    		footerTD.innerHTML = "Birthdaylist is currently in DEBUG mode! < br / > Please see console log.";
                    	    }
                    	    else {
                    		footerTD.innerHTML = "&nbsp;";
                    	    }
                    
                    	    //footerTR.appendChild(footerTD);
                    	    //tFooter.appendChild(footerTR);
                    	    //wrapper.appendChild(tFooter);
                    
                    	    // create TBODY section with day names
                    	    var tBody = this.createEl('tBody', "birthday-tbody", tbody , wrapper)
                    	    //var tBody = document.createElement("tBody");
                    	    //tBody.className = "tbody";
                    	    //tBody.id = "birthday-tbody";
                    	    
                    	    for(var birthday of Object.keys(this.active_birthdays)) {
                    		for(var person of this.active_birthdays[birthday]) {
                    				
                    		    //var m = document.createElement('div');
                    				
                    		    // create looped row section
                    		    var bodyTR = this.createEl('tr', "birthday-tr-body", tr-body , tBody)
                    		    //var bodyTR = document.createElement("tr");
                    		    //bodyTR.className = "tr-body";
                    		    //bodyTR.id = "birthday-tr-body";
                    
                    		    var bodyTDimage = this.createEl('td', "birthday-td-image", td-image , bodyTR)
                    		    //var bodyTDimage = document.createElement("td");
                    		    //bodyTDimage.className = "td-image";
                    		    //bodyTDimage.id = "birthday-td-image";
                    		    if (birthday.charAt(0) === "0") {
                    			birthday = birthday.replace("0","");
                    			birthday = birthday.substring(0,1);
                    		    }
                    		    bodyTDimage.innerHTML = birthday.substring(0,2);
                    
                    		    var bodyTD = this.createEl('td', "birthday-td-body", td-body , bodyTDimage)
                    		    //var bodyTD = document.createElement("td");
                    		    //bodyTD.className = "td-body";
                    		    //bodyTD.id = "birthday-td-body";
                    		    bodyTD.innerHTML = person.name + "&nbsp;&nbsp;&nbsp; < span class=\"age-span\" > " + person.age + " < /span > ";
                    		    				
                    		    //m.innerText = birthday + ' ' + person.name + ' age=' + person.age;
                    		    //wrapper.appendChild(m);
                    		    
                    		    //bodyTR.appendChild(bodyTDimage);
                    		    //bodyTR.appendChild(bodyTD);
                    		    //tBody.appendChild(bodyTR);
                    		    //wrapper.appendChild(tBody);
                    		    
                    		}
                    	    }
                    
                    
                    S 1 Reply Last reply May 3, 2020, 12:50 AM Reply Quote 0
                    • S Offline
                      sdetweil @Perlchamp
                      last edited by sdetweil May 3, 2020, 12:51 AM May 3, 2020, 12:50 AM

                      @Perlchamp all except parent in quotes

                      tables parent is wrapper, wrappers parent is null/0

                      Sam

                      How to add modules

                      learning how to use browser developers window for css changes

                      S 1 Reply Last reply May 3, 2020, 12:52 AM Reply Quote 0
                      • 1
                      • 2
                      • 22
                      • 23
                      • 24
                      • 25
                      • 26
                      • 31
                      • 32
                      • 24 / 32
                      24 / 32
                      • First post
                        231/313
                        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