@strawberry-3.141 Thanks! I’ll see if I can figure that out.
Read the statement by Michael Teeuw here.
Posts made by j.e.f.f
-
RE: My display so far...
-
RE: My display so far...
@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 shouldclass="box-score"
on that element. -
RE: My display so far...
@cohron well that’s up to the original authors of the respective modules. I don’t want to step on their toes – they’ve built their modules to suit their vision. My changes were tweaks I wanted for me. So I’m thinking keeping it separate is the better course of action here.
That said, I’m not an expert with Github, so maybe there’s a way to do what you suggest without changing the original modules?
-
RE: My display so far...
Wow! I did not expect so much interest! So I’m going to put all of my stuff on Github and you’ll be able to pick and choose what you want to use.
Just know that the changes I made to the modules were just supposed to be for my use, and are in no way complete as far as a robust code base goes. For example I haven’t put anything in place for translations and any time functions just assume Eastern time. They may or may not work perfectly for you out of the box.
In any case, thanks for the interest!
-Jeff -
RE: MMM-NHL - NHL Score and Schedule module
@reflektor Sure. I’ve done more or less the same for MLB and NBA too. Basically in each case it is a rewrite of the getDom() portion of the module, along with styles to support the new markup. Also I changed the logos to use SVG files so they would scale to whatever size I needed. Spent quite a bit of time playing around with proportions before I settled on this. PM me and I can send you the files.
-
RE: Mirror twice as tall as screen. How to build the frame?
@yawns Thanks! Yeah that second link seems more or less exactly the same as what I’m trying to do. Looks like it has validated my approach.
-
RE: My display so far...
@twosix For traffic I used mrx-work-traffic, but I made some js modifications, both to get it working, and to add the travel mode options (e.g.: biking, driving, transit, walking). For music, I’m using MMM-Sonos. I modified the JS to comment out much of the information being supplied to the display, and to reformat the remaining HTML such that it could be styled like you see in my photo.
-
Mirror twice as tall as screen. How to build the frame?
My wife has mandated that my smart mirror needs to be a full length mirror. So I’m planning on using a 32" TV mounted behind a piece of glass 1500mm (~59") tall. The “smart” portion of the mirror would be the top half, while the bottom half is just a regular mirror. The glass and the TV will be the same width
Here’s what I’m thinking is a good approach:
I build the basic box the size of the mirror glass, and attach the visible frame to the front of the box as we’ve seen on many tutorials. With the box face down, I place the glass in the frame. The screen then gets placed inside the frame pushed all the way to the top. Then I would put some black paper behind the glass for the bottom half of the screen. Then I place a cross beam in the middle of the frame behind the glass that supports the TV from underneath. Finally, I would finish the empty space below the screen with some triangle-shaped pieces of wood in all four corners of the empty space to both secure the glass inside the frame, and add support to the cross beam.
I plan on mounting the mirror using the VESA holes in the back of the TV, potentially on an articulating mount so that I can swivel the mirror out from the wall when I need access, but otherwise it will lie flush to the wall. Or am I better off creating a cross beam at the top of the frame and mounting using that?
Does this sound like a good approach? Do I need to do anything more with the empty space below the TV? Any worries about the mirror being top heavy? The TV weighs 3.8kg (~8.3 lbs), no idea what the glass will weigh, but it will be a 1/4" piece 435mm x 1500mm (about 17" x 59").
Any insight here is greatly appreciated!
Thanks!
-Jeff -
RE: My display so far...
@pjkoeleman I actually modified the HTML markup in the js file in addition to writing custom CSS. I can share what I did in order to make it work. PM me.
-
RE: Facial Recognition - customize your mirror for every user!
@bhepler Thanks for your insight! This helps a lot.