MagicMirror² v2.12.0 is available! For more information about this release, check out this topic.

Compliments - Multi Line not working?



  • Platform: Raspberry Pi 3
    MagicMirror Version [ V1 / V2-Beta ]: 2.9.0

    I have the following in my .json file for the compliments module:
    {
    “anytime” : [
    “line 1\nline 2”
    ]
    }

    on the screen I see:
    line 1 line 2

    not what I expect:
    line 1
    line 2

    I wanted to see if this is known issue. I don’t see any issue raised in github. The documentation (https://github.com/MichMich/MagicMirror/tree/master/modules/default/compliments) says the \n syntax should work for multi-line compliements.

    This is external json file if that matters.


  • Project Sponsor

    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)



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


  • Project Sponsor

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



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



  • 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!"
    			]
    		},
    


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



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



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


  • Project Sponsor

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


Log in to reply