My display so far...

cowboysdude

@j.e.f.f You know if it’s css there has to be a way to include more than one css file in a module… something I think I’ll look into…

j.e.f.f

@cowboysdude In my case, I’ve also changed the HTML markup. It’s difficult to move things around in the CSS when the visual elements are marked up with tables. So in many cases the markup has been changed significantly – especially in the sports modules – so that I was free to position things as I wished.

In some case using tables makes sense. For example the weather forecast is tabular data, so using a table to present the information is appropriate. But when you use tables, your layout is pretty much fixed to be in a table format, and the information will always be presented in the order that it is marked up. For example, for the sports modules, I wanted the visiting team’s scores first (i.e. on the left) and the home team’s score second (on the right). The NHL module had this reversed. I also wanted to hide the scores when the game hadn’t yet started. So the logos are marked up first, then the game status. Based on the status, I decide whether to markup the scores. So the markup looks like this:

<div>
  <img src="modules/MMM-NHL/icons/NSH.svg" class="team-logo home" />
  <img src="modules/MMM-NHL/icons/STL.svg" class="team-logo visitor" />
  < span class="status in-progress">
    < span class="live time">13:45< /span>
    < span class="period">3< sup>RD< /span>
  < /span>
  < span class="score home">2< /span>
  < span class="score visitor">1< /span>
</div>

Elements are written in this order:

Home Team’s logo
Visiting Team’s logo
Game status
Home Team’s score
Visiting Team’s score

But with the CSS, I’m able to position them in this order:

Visiting Team’s logo
Visiting Team’s score
Game status
Home Team’s score
Home Team’s logo

Scores and logos are positioned relative the their respective left and right edges, while the status is centered. So this layout will adapt to changing container widths. And if I wanted to swap the display to have home team on the left, and visitor on the right, it’s a simple CSS change, with no need to touch the markup.

So it works out better to render each piece as its own HTML element (e.g.: div, span, p, img, etc), and then position them using CSS. This gives you WAY more flexibility. Maybe the way forward here is to work with the module devs to change their markup to something that lends itself to more flexible CSS styling.

P.S. Does anyone know how to make span elements show up in markdown? I had to put spaces between the < character and span>, otherwise they don’t show up in the code block. Also have the same problem with the class name on the outer div. There should class="box-score" on that element.

strawberry 3.141

@j.e.f.f you can create a fork of the module and push your changes to it then everyone can clone your fork

j.e.f.f

@strawberry-3.141 Thanks! I’ll see if I can figure that out.

j.e.f.f

OK Here’s my first crack at this. I’ve forked mrx-work-traffic to make MMM-MyCommute.

[card:jclarke0000/MMM-MyCommute]

https://github.com/jclarke0000/MMM-MyCommute

Will work on the others soon.

j.e.f.f

…and MMM-MyWeather:

[card:jclarke0000/MMM-MyWeather]

https://github.com/jclarke0000/MMM-MyWeather

ring23

Awesome! Do you plan on making a module for the Sports Scores? If not, can you PM me the files?

j.e.f.f

@ring23 I actually plan on making a new sports module that combines all the sports into one.

cowboysdude

@ring23 There are already several…

j.e.f.f

Here’s my calendar app. Configuration is identical to the default calendar app. if you clone this, then change your calendar config to MMM-MyCalendar, it should just work.

[card:jclarke0000/MMM-MyCalendar]

https://github.com/jclarke0000/MMM-MyCalendar.git

j.e.f.f

I should mention that I have a few rules in my custom CSS that apply to all modules. You won’t get my exact same visual style with just these modules alone. Add whichever rules you want from those below into your custom.css file:

/* Limit the width of the left and right columns to 300px */
.region.right .module-content,
.region.left .module-content {
  max-width: 300px;
}

/* Increase vertical spacing of text in table cells */
table td {
  line-height: 1.75;
}

/* Allows styling of row elements in tables.  You need this for the next rule */
table.small {
  border-collapse:collapse;
}

/* Add an underline to table rows - also requires the rule above this one */
table tr {
  border-bottom: solid 1px #222;
}

/* blue colour styling for module headers */
.module-header {
  color: #82bae5;
  border-bottom-color: #82bae5;
  font-size: 15.5px;
  font-family: "Roboto";
}

j.e.f.f

Here’s my Nest module

[card:jclarke0000/MMM-MyNest]

https://github.com/jclarke0000/MMM-MyNest

Note that I have no idea what this looks like with multiple thermostats, as I only have one in my home. Nor have I tested list mode. Kind of defeats the purpose of why I modified this module.

j.e.f.f

The last two – Sonos and Scoreboard – need a bit more work before I can release them. Will work on those over the next week or so. Meanwhile, enjoy, and let me know if something doesn’t seem quite right.

Chiumanfu

I’m using your MMM-MyWeather module and it’s great. My problem is that I want to add another module to display the weather from two different cities. If I duplicate the entry in the config file, it does show two modules but the data is identical in both even though I changed the PWS ID. I even tried a different apikey for each but that didn’t work either. Is there any fix for this? Thanks.

j.e.f.f

@Chiumanfu I haven’t tried to do that. This is a fork of MMM-WunderGround, and the data pull mechanism is unchanged. My changes are only in the formatting. I suspect that the two instances are sharing a single node-helper module, and as such, you’ll see the same data for both.

Can you try a test for me? Configure one instance using MMM-MyWeather, and the second using MMM-WunderGround. If you get different data sets for the two, then there’s likely a way to address this. Otherwise, what might be happening is the API recognizes two requests from the same machine, and isn’t allowing multiple locations. Might be a limitation of the free API.

Chiumanfu

@j.e.f.f Yes, it works as expected when using MMM-Wunderground to display the second location. It would be nice to have them display both in MMM-MyWeather but if the fix is difficult, I can live with it this way. Thanks.

j.e.f.f

@Chiumanfu I took a look at the way node_helper.js behaves for this module. It will take a considerable amount of re-engineering to get it to support multiple instances, and given that I am in the middle of a couple of other modules, I don’t think I’ll try to address this any time soon.

What you can do is instead of specifying two instances of the MMM-MyWeather module, make a copy of the module folder, name it, say, MMM-MyWeather2. rename MMM-MyWeather.js to MMM-MyWeather2.js. Then modify MMM-MyWeather2.js and change the first line of code from

Module.register("MMM-MyWeather", {

to

Module.register("MMM-MyWeather2", {

Now you have two distinct modules that do exactly the same thing. Make a second entry in your config.js file for MMM-MyWeather2. That should give you exactly what you are looking for.

The downside here is that you’ll need to redo the above steps if you ever update the module source code. I don’t see it changing all that much in the near future unless something breaks, so you should be good for a while.

RamblingGeekUk

This looks really nice… is the temp read out from Nest?

j.e.f.f

@RamblingGeekUk yeah. It logs in to your nest account via the API to get the current temp and state of the Nest.

RamblingGeekUk

@j.e.f.f Awesome… I was going to write all of this myself until I found this site yesterday, this is amazing. :-)