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

Compliments - Multi Line not working?

Scheduled Pinned Locked Moved Bug Hunt
13 Posts 4 Posters 4.5k 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.
  • B Offline
    broberg Project Sponsor @noisedoctor
    last edited by Nov 24, 2019, 12:11 PM

    @noisedoctor Okey, so thats not the issue.

    Is the json-file saved in utf8 (and not in ascii)?
    Are you running on the mirrors electron browser or are you viewing it on a different browser?

    N 1 Reply Last reply Dec 7, 2019, 2:42 AM Reply Quote 0
    • N Offline
      noisedoctor @broberg
      last edited by Dec 7, 2019, 2:42 AM

      @broberg – sorry for the lag… I did save a file as utf8 (it was ANSI before). I am simply viewing the MM on the display connected to my Raspberry Pi. Any other guess what I could be doing wrong?

      1 Reply Last reply Reply Quote 0
      • S Offline
        sdetweil
        last edited by sdetweil Dec 7, 2019, 5:44 AM Dec 7, 2019, 5:32 AM

        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 Dec 12, 2019, 8:09 PM

          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 Dec 12, 2019, 8:34 PM Reply Quote 0
          • S Offline
            sdetweil @noisedoctor
            last edited by Dec 12, 2019, 8:34 PM

            @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 B 2 Replies Last reply Dec 13, 2019, 1:23 AM Reply Quote 0
            • N Offline
              noisedoctor @sdetweil
              last edited by Dec 13, 2019, 1:23 AM

              @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
              • B Offline
                broberg Project Sponsor @sdetweil
                last edited by Dec 13, 2019, 6:21 AM

                @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 Dec 13, 2019, 12:41 PM Reply Quote 0
                • S Offline
                  sdetweil @broberg
                  last edited by sdetweil Sep 4, 2020, 2:32 AM Dec 13, 2019, 12:41 PM

                  @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

                  K 1 Reply Last reply Sep 4, 2020, 1:50 AM Reply Quote 0
                  • K Offline
                    kayakbabe @sdetweil
                    last edited by kayakbabe Sep 4, 2020, 1:52 AM Sep 4, 2020, 1:50 AM

                    @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 Sep 4, 2020, 2:30 AM Reply Quote 0
                    • S Offline
                      sdetweil @kayakbabe
                      last edited by sdetweil Sep 4, 2020, 2:34 AM Sep 4, 2020, 2:30 AM

                      @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