The modules usually have fixed pixel widths and heights, so when two modules in one row both have 300 px width and the screen is 800 px wide, there’s 200 px space in between or left and right but when the screen is only 500 px wide, you’ll have at least 100 px overlap (if there’s no space left and right).

A bigger screen might not help if it has the same resolution (compare 1024 px 15" and 1024 px 19").

What you’ll probably need to do is (manually) scale down all modules’ sizes in your custom.css. In theory, if all settings were done in rem, you could just change the default font size and be done, but … that’d be too easy. ;)

What do you mean, they won’t let you use the API?
Did you apply for access to the Geofox-API and they denied? What did they say? https://www.hvv.de/fahrplaene/abruf-fahrplaninfos/datenabruf/

The only other module I know of is this one:
https://forum.magicmirror.builders/topic/369/hamburg-hvv-public-transportation-module-using-realtime-data/8
(where we both already posted. ;) )

Hi,

I just saw that you already opened an issue on GitHub and answered there so that the developer get’s a notification, too.

Meanwhile, you can edit the module yourself like this:

Change line 103 in MMM-MQTT.js from
valueWrapper.className = "align-right bright medium";
to
valueWrapper.className = "align-right bright medium " + sub.value.toLowerCase();

provided the value is just one word, not more, the cell with the value now has a class name added that’s the same as the value, in your case ‘closed’ and you can add the following to the CSS file or your custom.css:
.MMM-MQTT .closed { color: green; } .MMM-MQTT .open{ color: red; }

Regards,
Torben

I’ll look into that. What position do you use the Nixie clock on? Have you checked what happens if you move it?

Ein bisschen Eigeninitiative wäre schön und ist eigentlich auch Grundvoraussetzung für Programmierer allgemein.

Open Source bedeutet, dass der Quellcode für jeden frei zugänglich ist. Jeder kann ihn einsehen, kopieren, verändern und Vorschläge zur Verbesserung machen.

Bisschen googlen und recherchieren - führt auch meist schneller zu Ergebnissen. Und bitte beim Thema bleiben, idealerweise auf Englisch.

Es gibt hier mehrere Threads dazu, wie man anfängt. Das hängt auch ein bisschen von der Hardware ab und was du vorhast.

https://forum.magicmirror.builders/category/28/tutorials

@E3V3A said in Why are people doing this: var self = this?:

var self = this

this can change. When it’s called first, it’s one thing and when you think you need the same thing again, this might be something else already. So you temporarily store the first this in the var self. That way it’s the same thing when you need it later again.

Looks like it’s divided in two parts with 50% 50% each but a set max-height for the image. So when the container is widened by the headline, the two areas get wider aswell.
You can check the width in the developer tools and set it as max-width or width in custom.css

My advice is to check both files in MagicMirror/css/: main.css and custom.css.
In main.css you can see all default css, don’t change anything but you can learn a lot. When you identify what you want to change, copy it in main.css, paste it into custom.css and make the changes.

For css, it’s relevant when something is loaded. If an identifier with a style is mentioned two times in a file, the second one overwrites the first one. And custom.css is loaded after main.css, so styles there override main.css.

Here’s how to get started with css: https://www.w3schools.com/css/

Also, you might want to check out the browsers developer tools. Start the mirror with npm start dev and you can select the elements, learn about their identifiers, classes, IDs and you can test changes directly in these developer tools (non permanent).

getDom: function() is called initially to set up the content. Usually you have something like div.innerHTML = variable; but at the beginning, varibable might be empty. To make the variable usable globally (in the scope of your module), you set it up and call it as this.variable.

When your function that fills this variable updates that variable content, you call updateDom();
That makes the dom reload and this time, this.variable has content to show.

There’s other ways to fill the element with the content of a variable without totally rebuilding the DOM:
In the function that handles the variable, you could say document.getElementbyId(elementId).innerHTML = variable;

Edit: To complete this. If you want to pass a value from one function to another (but this is not working for the Dom, because that has to be set up initially):

firstFunction: function () {
    var greeting: "Hello";
    secondFunction(greeting);
}
secondFunction: function (word) {
    var greeting: word;
    Log.info(greeting); // "Hello"
}

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