Attribution Tag for Default Compliments Model

[raspberrypi9]

I would like to have multiple people write compliments to be displayed on my mirror and when each of these compliments gets displayed, I’d like there to be a little graphical tag in the upper left or right of the compliment that says the name of the person who wrote the compliment. I figure I could store the compliments like:

{ “You are the best kid in the world.”, “Mom” }

and “Mom” will be displayed along with the compliment.

I’m not a front end programmer and I am not familar with Javascript and HTML, so I was wondering if someone could orient me as to how I would go about implementing this. Would I have to modify the getDom funciton of the default complients module and add some code to draw an attribution tag when then compliment gets rendered? What would that code look like?

I’m not sure of the details of how to do this, and I’d really appreciate some pointers.

Thanks so much for your help!

[raspberrypi9]

Sorry, the title should say “Default Compliments Module”

[sdetweil]

@raspberrypi9

a google search like this
‘how to add an author attribution to a web element in html’
give a bunch of info on how to do the citation

and you might luck out w the existing code not detecting your structure vs the string it uses today

so in getdom() it gets all the ‘strings’ that might apply
and then randomly picks one from that list

now you could test if that thing is an object or string, and if object add the html elements needed first your citation

in this latest release we added the ability to reload the remote compliments file on done timed cycle

so your authors could update it

a great way to learn what to do is make a small html file and load that via a browser til you get the display like you want, and take that knowledge for the small change you want to make

[raspberrypi9]

@sdetweil Thanks so much for replying to my post. Just want to confirm that I understand the approach…

So what you are saying is that I should make an .html file and google what html tags to put in it so that I can load it with File…Open in my browser and once it displays correctly, I can take those tags and google how to write javascript code in the getDom function in MagicMirror/modules/default/compliments that will implement those same html tags. Is the correct? Thanks.

[sdetweil]

@raspberrypi9 yes.

you may be able to see how to create html elements in the existing code, but knowing what you want to have will be the most important thing

as you have little experience w this, the html file will be a clean way to gain some of that knowledge.

[raspberrypi9]

@sdetweil I think I know what I want to do for the visual/presentation aspect. I’m going to just print the attribution name in smaller font at the end of the compliment.

I’d like to change the config schema from:

compliments: {
anytime: [ “compliment 1”,
“compliment 2”]
}

to

compliments: {
anytime: [ {“compliment from Bob”, “Bob”},
{“compliment from Lucy”, “Lucy”}]
}

but when I just make that change in the config file, it tells me that I have syntax errors. How can I change things so that my new scheme for compliments will be accepted and I can access both the compliment and name field in the compliments.js file where I assume I can modify how it is rendered?

Thanks so much for your help.

[sdetweil]

@raspberrypi9 js objects {} must contain

name: value

pairs
for example

{text:"........",author:"mom"}

[sdetweil]

@raspberrypi9 did you figure this out?