Hi all,
back in early 2015 I wanted to build a one way mirror with a screen behind it that showed a website from my server. I googled around and found Michael’s MagicMirror so I just went along with this, as it was the perfect solution.

I still think this is one of the best uses for a RasbPi and this project absolutely deserved to win the award (number 1 in the MagPi Top 50).

I had developed some apps for my version, like a fuel price monitor and a football board with results and tables.

When some people asked me to set up mirrors for them I started to tinker with a small and easy backend for configuration and soon found out about MagicMirror². Now I’m here and I’ll use this new version and I’ll try to translate my apps into modules for this project.

My mirror:

Just stome minor style changes and I added an indoor temperature sensor at the bottom of the frame (see below).

Aral Ultimate 102 price monitor from the closest station.

PIR:

Be careful when playing with 220V … I nearly killed myself after switching off the wrong circuit …

On the backside.

Setup:

The PIR is below the mirror, nearly unnoticeable. Here you can also see a DS18B20 temperature sensor.

The inside.

I’m looking forward to setting up MM² on this setup in the next few days.

Thanks

Who doesn’t like Nixie tubes?

Description:

This module adds a Nixie tube clock to your MagicMirror. It cannot do much more than show the time, but it’s looking cool doing it. I’m considering a switch to hide all other modules during night time so at night only the soothing glow of the ticking Nixie tube clock fills the dark room.

It’s working like the real thing with 10 layers/digits in each “tube”. You can turn of the fake glass tubes, the wires and also the inactive digits.

Note:

If some of the digits seem brighter than others, that’s because the higher the digit, the further back it sits in the tube and so the inactive digits sit in front of it, blocking some of its brightness (not much). You can set inactive to dimm to reduce this or turn it off completely (but then it’s not a real Nixie tube anymore …).

Screenshot:

Download:

[card:TTigges/MMM-Nixie]

Version: 1.00

Planned features:

• Configurable sizes and colors.
• Nightswitch (turn off everything else between time A and time B).

Have fun, let me know if you have any questions, ideas, comments. Thank you.

@cruunnerr said in Changing the length of the line under the header:

Was just hoping there is an amazing trick to use the custom.css for exactly my problem XD

There are a lot of amazing tricks. You can do this in custom.css:

header {
    border-bottom: none; /* instead of 1px solid #666; to remove all lines from all the headers */
    width: 50%;          /* add this to change the width of all module headers */
}
.middle header {
    /* addressing the header like this will only influence headers within the middle region */
}
#module_3_calendar header {
    /* only addresses the calendar header (find out the modules id before) */
}
.shoppinglist header {
    /* or use the class, which should be the module's name */
}

@valid8r

The reason “.clock.time” doesn’t work is because it’s looking for an object with both classes “clock” AND “time”.

“.clock div.time” would be correct but only to address a div with the class “time” (within an object with the class “clock” ).
“.clock .time” would be the same, but the object doesn’t have to be a div - it could be a p (paragraph) with the class “time”
“.clock.time” would address only objects that have both classes, not regarding their parents.

So in your case it would be correct to write “.clock .time, .clock .date” to address both “.time” and “date” within “.clock”. Your example would address all objects with the class “date” regardless of their parents class being “clock” or not.

Edit:
Not to confuse you, but just to make this complete, there is another way to make sure you get the right child of a parent:
“.clock > .time” would address “.time” only if the direct parent is “.clock”. So if it’s

< div class=“clock” >
   < div class=“time” >

“.time” will be addressed, but if it is

< div class=“clock” >
   < div >
      < div class=“time” >

“.time” is not addressed. (Just in this instance with > in between.)

@dherl0623

Here are some mockups how such a module might look:

• All/selected prices from one station:
  
  (Note: The boxes have classes that identify the fuel and can be highlighted, if wanted.)

• Prices from several stations:
  

The reason behind this differentiation: Instead of four calls, like in the second mode, there’s only one call in the first mode. Why is this important? Load time, traffic, …

At the bottom of each box we see the last time the price was updated. I’m not quite satisfied with the mockup, yet.

One thing I’m trying to work out in the design at the moment is adding some sort of “advice” that lets you know if the price is good. What I had in mind was an arrow element that would show if the current price is higher or lower (or same) than the last one.
And similar to that how about adding the highest and the lowest price of the last 7 days so you can make a decission based on that? That’d mean a redesign of the whole thing.

Is there anything you’d like to see in a module like that, that I didn’t mention? Would you like the address/place of the station somewhere? Let me know what you think.

I don’t have a PIR to test, but looking at the code, I’d suggest trying something like this:

You need a DOM element to show the message in. You can borrow it from the default module helloworld and modify it:

getDom: function() {
    var wrapper = document.createElement("div");
    wrapper.setAttribute("id", "welcome-message");
    wrapper.innerHTML = "";
    return wrapper;
}

And then, based on self.sendSocketNotification("USER_PRESENCE", true); in the node_helper.js you add
this to the MMM-PIR-Sensor.js :

socketNotificationReceived: function(notification, payload) {
    if (notification === "USER_PRESENCE"){
        this.sendNotification(notification, payload)
//  new:
        if (payload === true) {
        document.getElementById("welcome-message").innerHTML = "Welcome back!";
        setTimeout(() => {
            this.removeMessage();
        }, (1*60*1000); // = 60 seconds
    }
},
removeMessage: function(payload) {
    document.getElementById("welcome-message").innerHTML = "";
}

If you use it like this, the message is only shown for 1 * 60 * 1000 miliseconds = 60 seconds (set as desired) and then removed.

This is all untested but hopefully gives you some clues where to look and work on the code.

@AliAS
Compliments are included via document.createTextNode(complimentText); which doesn’t allow HTML inside.

But you can change the line within getDom: function() {} that includes the compliment from
wrapper.appendChild(compliment);
to
wrapper.innerHTML = complimentText;

and then just add a <br /> to the compliment.

Oh, and there is @cowboysdude’s MMM-History module.

“Today in History” links to the parser that gets the info from Wiki, I’m sure it could parse the Norwegian Wikipedia. I may look into it as I’m also interested in a non-english version of this.

Vertical-align only works in inline elements and table cells.

Two common css hacks are these: https://jsfiddle.net/02vxofa6/1/

The parent (or a wrapper div container filling the parent) is set to display: table-cell; and vertical-align: middle;

If there’s a reason this cannot be done, there’s also another hack:
Set the parent to position: relative; and the text to position: absolute: top: 50%;
But then it’s not exactly in the middle, as the distance to the top is 50%. Give the text a fixed height (maybe even considering a line break there) and set margin-top to - half the text height. height: 20px; margin-top: -10pxfor example.

In this context, yes.

“wrapper” is just a variable that holds the content of the (new) HTML element that you create there and “getDom” grabs the content that is to be put into the DOM (Document Object Model, the raw content/structure), => rendered.

Example 1, basic:

getDom: function() {
    var wrapper = document.createElement("div");
    wrapper.setAttribute"id", "my-content");
//  It's always a good idea to make an element addressable
    wrapper.innerHTML = "Hello World!";
    return wrapper;
}

getDom is called upon starting, grabbing the elements and putting them in place and if you want to change something later on, you need to call “this.updateDom()” to render it again with the new content.

Example 2, updating:

start: function() {
    var self = this;
    Log.info("Starting module: " + this.name);
    this.myContent = "nothing yet"; // global variable, available to all functions
    setTimeout(function() {
        this.buildContent(self);  // this will call the function "buildContent"
    }, 5 * 1000);                 // 5 seconds after the start (5 * 1000 ms)
},
getDom: function() {
    var wrapper = document.createElement("div");
    wrapper.setAttribute"id", "my-content");
    wrapper.innerHTML = this.myContent ; // will show "nothing yet" at the beginning
    return wrapper;
},
buildContent: function(self) { // see above, this will be started after 5 seconds
//  do your content building
    this.myContent = "New content!"; // changes the value of the global variable
    self.updateDom(); // call for the DOM to be updated, thus showing the new content
}

I hope that’s somewhat understandable.

I had trouble using the CSS method and googled a bit more.

in /etc/xdg/lxsession/LXDE-pi/autostart ad this line (with sudo):
@xrandr --output HDMI-1 --rotate right

I had this problem the last two days – out of the blue, the MM2 was running for over a year with no problem. I know the thread is old, but it pops up when searching here or on google for this error, so I wanted to add how I was able to solve it:

I backed up the config, my modules and my custom css.
Then I deleted the MagicMirror-Folder, keeping pm2 and everything unchanged. I cloned MM2, ran “npm install”, brought back the config, modules and custom css and ran “pm2 start mm”.

Seems so easy now, but for two days I tried everything – except deleting the folder.

Remove the “dimmed” in line 38 of the code.

Oh, sorry, “tableElement” – remove the dot. Sorry.

Delete the previous code in custom.css if you added that className line in the module’s js.

In that case the css should work. And the css file is named custom.css? Exactly like that? And you restarted the mirror?

Since we’re already working directly in the code: In the module js there’s a line
var tableElement = document.createElement("table");

You can write a line directly after that:
tableElement.className = "homeassistant-table";

Then you should be able to address the table in the cusom.css like this:

.homeassistant-table tr td:nth-of-type(2) {
    text-align: left;
}
.homeassistant-table tr:nth-of-type(3) td,
.homeassistant-table tr:nth-of-type(6) td {
    border-bottom: 1px solid white;
}
.homeassistant-table {
    border-spacing: 0;
}

Is the text brighter now?

EDIT: tableElement, not table.Element

Oh, I noticed a typo – even though that’s not the reason it’s not working. Change te_s_t-align to text-align, please. ;)

What’s the name of the module in your config file?

Can you show me what your custom.css file looks like now?

Because the creator of that module gave the wrapper the class name “dimmed” in line 38 …

And that worked? :thinking_face: