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.
    • brobergB Offline
      broberg Project Sponsor
      last edited by

      It works as intended on my setup, so I don’t think it’s a issue for everyone.

      Can you check so you are not missing

      .pre-line {
        white-space: pre-line;
      }
      

      in your main.css file (or if you have overwritten it in your custom.css file)

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

        I do have that in the CSS. I haven’t made any CSS customizations. I installed everything two days ago, so I expect I have the latest code installed.

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

          @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 Reply Quote 0
          • N Offline
            noisedoctor @broberg
            last edited by

            @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

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