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