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.

    Compliments - Multi Line not working?

    Scheduled Pinned Locked Moved Bug Hunt
    13 Posts 4 Posters 4.6k Views 3 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
      last edited by sdetweil

      new line has no meaning in a textElement
      replace the getDom function in compliments.js with this

      	// Override dom generator.
      	getDom: function() {
      		var wrapper = document.createElement("div");
      		wrapper.className = this.config.classes ? this.config.classes : "thin xlarge bright pre-line";
      		// get the compliment text 
      		var complimentText = this.randomCompliment();
      		// split it into parts on newline text 
      		var parts= complimentText.split('\n')
      		// create a span to hold it all
      		var compliment=document.createElement('span')
                      // process all the parts of the compliment text
      		for (part of parts){
      			// create a text element for each part
      			compliment.appendChild(document.createTextNode(part))
      			// add a break `
      			compliment.appendChild(document.createElement('BR'))
      		}
      		// remove the last break
      		compliment.lastElementChild.remove();
      		wrapper.appendChild(compliment);
      
      		return wrapper;
      	},
      

      then u can use ‘\n’ in the text to split a line like this

      		compliments: {
      			anytime: [
      				"Hey there\n sexy!"
      			],
      			morning: [
      				"Good morning, handsome!",
      				"Enjoy your day!",
      				"How was your sleep?"
      			],
      			afternoon: [
      				"Hello, \nbeauty!",
      				"You look sexy!",
      				"Looking good today!"
      			],
      			evening: [
      				"Wow, you \nlook hot!",
      				"You look nice!",
      				"Hi,\nsexy!"
      			]
      		},
      

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      1 Reply Last reply Reply Quote 1
      • N Offline
        noisedoctor
        last edited by

        so, is the documentation wrong?
        https://github.com/MichMich/MagicMirror/tree/master/modules/default/compliments

        Multi-line compliments:
        Use \n to split compliment text into multiple lines, e.g. First line.\nSecond line. will be shown as:
        
        First line.
        Second line.
        

        I’m happy making a code change, but the docs state that this should already be working. is it a factor of being an external file?

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

          @noisedoctor I do not know. I don’t see how it ever worked. The field used does not interpolate the text. Just presents it as is.

          I opened an issue, and logged the correction as a regression somewhere along the way

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          N brobergB 2 Replies Last reply Reply Quote 0
          • N Offline
            noisedoctor @sdetweil
            last edited by

            @sdetweil – thanks so much. I wanted to confirm before reporting as a defect, but I guess you did that for me :)

            1 Reply Last reply Reply Quote 0
            • brobergB Offline
              broberg Project Sponsor @sdetweil
              last edited by

              @sdetweil said in Compliments - Multi Line not working?:

              @noisedoctor I do not know. I don’t see how it ever worked. The field used does not interpolate the text. Just presents it as is.

              I opened an issue, and logged the correction as a regression somewhere along the way

              The \n gets converted to a whitespace in the textNode. And then the css pre -code converts every whitespace to a row break. It works on my setup, and probably more. Why it doesn’t on OPs setup is however beyond me.

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

                @broberg said in Compliments - Multi Line not working?:

                The \n gets converted to a whitespace in the textNode

                I see a \n presented on the screen. whenever there is a \n in the compliment string.
                as in “Hey there\n sexy!”

                using the backtics, are supposed to allow line continuation across muiltiple lines AND encode a hex 10 (nl) char. but what a pain.

                var msg=Hey there sexy
                (note that this doesn’t show here on the forum either.)

                it MAY be that the actual newline has to be encoded , NOT the text representation of the newline

                 ('\n')
                

                the default compliment text strings contains whitespace, where are NOT converted to breaks. so I don’t understand

                I don’t see any improvement in using the file approach, as its content rules are javascript source rules. not message by line or anything else.

                to test, I did nothing except install MM and edit the built in messages to add \n (two characters) in various places

                i see the pre-line class, and read the description, but still haven’t figured out which nl they are discussing.

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                kayakbabeK 1 Reply Last reply Reply Quote 0
                • kayakbabeK Offline
                  kayakbabe @sdetweil
                  last edited by kayakbabe

                  @sdetweil I figured out that your suggestions of encoding the new line worked for me.
                  So, instead of using
                  \n
                  which textNode was treating literally, I tried encoding it and using this
                  \u000A

                  so when I tried the following it looked just like I put it into my morecompliments.json

                  "roses are red\nviolets are blue\nand I need a line\nto start here anew "

                  then I tried
                  "roses are red\u000Aviolets are blue\u000Aand I need a line\u000Ato start here anew "

                  and it displayed like I wanted it to like so…

                  roses are red
                  violets are blue
                  and I need a line
                  to start here anew

                  perhaps this will help others.

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

                    @kayakbabe crazy. my code splits the line with

                    "\n"
                    

                    the problem was this forum changing the quote from

                    '\n'
                    

                    to
                    ‘\n’
                    notice the curly quotes, those are bad

                    Sam

                    How to add modules

                    learning how to use browser developers window for css changes

                    1 Reply Last reply Reply Quote 0
                    • 1
                    • 2
                    • 1 / 2
                    • 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