Compliments - Multi Line not working?

[noisedoctor]

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.

[broberg]

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)

[noisedoctor]

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.

[broberg]

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

[noisedoctor]

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

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

[noisedoctor]

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?

[sdetweil]

@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

[noisedoctor]

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

[broberg]

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

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

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

[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