Sachin's Mirror

[KirAsh4]

@Sachin, use 'scrot' to take a screen shot of the display itself. 'scrot /home/pi/screenshot.png' will get you an image of the screen that you can then post here. (if you’re loged in remotely, you need to tell it which display to use: 'DISPLAY=:0 scrot /home/pi/screenshot.png')

As for the source code, you don’t have to post a full image, just the modules folder (assuming everything you have on there is in modules.) You can simply zip it up (you’d have to install zip first if you don’t already have it, 'sudo apt-get install zip'):

$ cd ~/MagicMirror
$ zip -9 -r modules.zip modules

Then you can post that 'modules.zip' file somewhere.

OR, alternatively, you can push your code up to a Github repository so others can download them selectively instead of grabbing the entire modules folder. It’s also easier to maintain your code that way.

[Sachin]

@KirAsh4 Thanks for the tips, I learn something new every day!

[Sachin]

@adamsidelsky

[adamsidelsky]

Sanchin,

Looks great! I’d love a copy of the code please and thank you.

Regards,

-Adam

[Sachin]

@adamsidelsky Thanks Adam, glad you like it. I’ll see if I can follow KirAsh’s directions can get something up on Github. I do need to strip my API key’s from the config files so you can plug in your own, otherwise you will be seeing my info :-)

I’ll post a link later today when I get a chance to pull it all together.

• Sachin

[amanzimdwini]

@Sachin
I’d be interested in your config too - specifically making the compliments a different color / font size. Probably not that difficult, but I always find it easiest to “program by cannibalizing” :) What good is an idea if nobody steals it? Anyway, if you would post at clean-ed up version of your config, I’d appreciate it…

Looks great!

[Wilco89]

@amanzimdwini i think you also need the custom CSS

[Sachin]

Thanks everyone. Per KirAsh4’s suggestion. I’m going to upload a sanitized copy on Github. I’d still encourage everyone to read through the install docs so you know where/how to tweak it to your liking. I’ll try to get to it this weekend.

Have a great 4th!

[KirAsh4]

Changing any of the module’s color settings is done in the '~/MagicMirror/css/custom.css' file. This is assuming the author of the module wrapped the various elements in tags that you can refer to, which all of the default modules are. You can look at the 'main.css' file to get an idea of what the various tags are that you can use. I do not recommend changing anything in 'main.css', but rather override them in 'custom.css' instead.

Alternatively you can also look at the raw HTML generated through your browser’s console (just pulling up the page’s source won’t show the full HTML generated.)

[amanzimdwini]

@KirAsh4
THX. Will spend some happy time fiddling with all the stuff. “Wasted” 2 days on getting MM2 up on a brand-new Pi3, but the ‘wife-acceptance-factor’ is already awfully high :) Now I have to just customize it to the n-th degree…

[KirAsh4]

Nothing’s ever “wasted”. You learned a lot during that time … educational enrichment. :)

[amanzimdwini]

@KirAsh4
Now I have question that is probably painfully obvious to anyone but me (I’m an old physicist and drive around in SQL all day long – don’t ask; I have no idea about hardcoding CSS.)

IF I want to change the font of, say, the compliments,
THEN I poke around and see that part of compliments.js

    var compliment = document.createTextNode(complimentText);
    var wrapper = document.createElement("div");
    wrapper.className = "thin xlarge bright";

Cool: I could redefine, say, xlarge in my custom.css. But that seems a silly hack, and I’d mess up everything else that also uses xlarge. Not good. Much better to change the color of compliments only. How do I do that? Say I want

compliments
.color: #3CF
.font-size: 80px
.line-height: 80px
.font.family: "Ariel"

I suspect that this is very obvious how to change my custom.css, but you guys all seem helpful :)
Hey: I already figured out how to push things around on the screen to where I want them to be. Next, I have to stretch everything, since the fonts seem a bit compressed. Lots of fun. Ultimately I’ll write my own modules, I hope.

Thanks in advance!

[Wilco89]

@amanzimdwini, open Magic Mirror in a browser yourip:8080,

Right click (inspect element) and look for the right class name (that is the one to use).

[amanzimdwini]

@Wilco89
Thanks. Am an old male - need EXPLICIT instructions :)

[Wilco89]

@amanzimdwini
Css should like this:

.compliments{
color: #3CF,
Etc: 80px,
etc: 80px,
fontfamily: Ariel,}

[amanzimdwini]

@Wilco89
WOAH - I was really close. (and I was just guessing!). (looking at inspect elements gave me a headache)
Thanks! I;ll try it right now

[KirAsh4]

You can be very specific which tag you are trying to change, even if it’s one that is used everywhere. For example, let’s say I want to change the CSS for 'bright'. Just about all the modules use that tag, so if I change it, it’s going to affect all of them. But what if I want to only affect the calendar module? You can use the DOM tree to your advantage. If you look at the elements tree you should see something similar to this:

<div class="region top left">
  <div class="container">
    <div id="module_1_clock" class="module clock clock">...</div>   <== this pertains to the clock only
    <div id="module_2_calendar" class="module calendar calendar">   <== this pertains to the calendar only
      <div class="module-content">
        < --some random tag that uses the class 'bright' in here-- >
      </div>
    </div>
  </div>
</div>

Now I can see that the 'bright' tag that I want to change, has several parent tags above it. Since I only want to affect the calendar one, I can then create a CSS rule that says:

.module.calendar .bright {
  color: #ff0000;
}

This says, to specifically look for the element that has the "module calendar" class, then within that, look for anything that uses the class "bright".

Now only my calendar is affected (and shows red text). Now just for grins, remove the first part, and just make it

.bright {
  color: #ff0000;
}

And you’ll notice all of your text is now red. By adding the specific parent class or ID, you can be very specific which class you’re targeting.

Happy hacking!

[Wilco89]

@KirAsh4 thnx, i’m on my phone so really hard to type Long text.

[amanzimdwini]

@KirAsh4 @Wilco89
I really appreciate the help (and it works!)

While I’m at it: just so that I understand: since compliments.js references thin xlarge bright I could have changed any of those three? They were referenced, so I can overwrite them? Ie in my custom.css:

.module.compliments.bright {
  color: #ff0000;
}

or

.module.compliments.xlarge{
  color: #ff0000;
}

would/should both in effect do the same thing?

Or can I just change EVERYTHING in compliments to be color: #ff0000? ie

.module.compliments{
  color: #ff0000;
}

(which I tried, and it did not work :( )

[KirAsh4]

You’re missing the required space. You’re dealing with two separate tags, with multiple CSS rules applied. So when creating a new rule, you have to do the same:

.module.compliments .xlarge  <--- notice the space

Without the space, it’s looking for a single tag that has all three rules applied, so it’s looking for class="module compliments xlarge". When you add the space, it’s now looking for two separate tags, a parent tag that has a class with both "module compliments" as rules, and then a child tag that has a class with "xlarge" for a rule.

Does that make sense?