MMM-whoshome A way to know who is home based on cellular phones

rewie85

@yedidia Hi, now it works! Thanks a lot! :-)

DarrenHill

@yedidia - one more quick question.

As mentioned above, I’m trying to tweak the css to show the names for people who are present and away in different colours.
What I’ve done so far via custom.css is :

.whoshome {
    color: lime;
}
.person-away {
    color: red;
}

Which works, except it changes the title (the “Who’s Home”) as well.
Is there any way to do this and keep the title the original colour to match the rest of the mirror modules?

I tried changing .person rather than .whoshome, but then both the title and people who are home revert to the white that is defined in the css of the module itself.

sdetweil

@DarrenHill I don’t know the direct answer, but you can use the developers window element tab to see and test how to adjust the css changes

See the second link in my signature below for an explanation how to use the dev window

in css, the part before the { is called the selector clause

It selects the elements the stuff inside the {} will be applied to

I use this cheatsheet to help me remember, you can combine them

. Means class
# means id
No prefix means tag name

https://www.w3schools.com/cssref/css_selectors.php

The selector ALWAYS selects ALL elements that match. So you may have to get very specific

I had to hide an element created by a form library

.possibly-hidden-tab div:nth-child(2)  > div > div >div >ul >li:only-child >a[rel*="Item%201"] {
  display: none;
}

DarrenHill

@sdetweil - Thanks Sam. Looks like a job for the weekend.

DarrenHill

OK, I think I have it.
Using the window I confirm that the home people are using the same class (whoishome) as the title window.

To get that to work properly, I changed the MMM-whoishome.js line 34 from

html = html + '<img class="person" src="' + this.config.TRACK[this.peopleArray[i][0]].image + '"> ' + this.peopleArray[i][0] + '<BR>';

to

html = html + '<img class="person" src="' + this.config.TRACK[this.peopleArray[i][0]].image + '"> <span class="person">' + this.peopleArray[i][0] + '</span><BR>';

and then the people who are home use class person, which can then be used to configure the colour separately to the header title.

@yedidia - is this something worth adding into the module for better flexibility?
Sorry I’m not good at GH, so have no idea how to submit a PR for it.

tintinmaster

This modules looks very similar to https://github.com/ianperrin/MMM-NetworkScanner

Also be aware that MAC-Adresses could change on modern devices through MAC-Adress Randomization

sdetweil

@tintinmaster yes, they change at least every hour… SO much fun

rewie85

@tintinmaster if you read description you can find this topic. You can deactivate it separate for every Network. At least i have no issues to keep my mac address in my home wifi.