@sdetweil said in Need some CSS help ... looking for the key names:

@ruff-hi see this for how to use the developers window to discover this info

https://forum.magicmirror.builders/topic/14862/help-with-a-couple-css-issues?_=1696694536512

also when there is no space between selector elements .bright.medium.light

it ONLY applies to AN element that MUST contain all three classes at the same time

Thanks - just what I was looking for.

Evening All … I can change the size and color of my date and time with …

.clock .time {
font-size: 9rem;
}

.clock .date {
 color: #F2F3F4;
 font-size: 5rem;
}

but I need to know that .time and .date are the ‘magic words’. It is pretty obvious for the clock module but I am struggling with the Newsfeed module.

So far I have …

/* this is the provider of the news feed (eg NPR) */
.newsfeed .light.small.dimmed {
  color: #F2F3F4;
  font-size: 3rem;
}

/* this is the heading of the news feed */
.newsfeed .bright.medium.light {
  font-size: 3rem;
  color: #88C29B;
}

… but I can’t find the magic words for the first line of the story. How do I work out what those should be?

I put in an order for a piece of ‘smart mirror’ after ordering a number of samples. The Smart Mirror option is really cool. Much better than the other options. The issue … it is expensive.

It is being delivered today. I am planning on having everything wrapped up, installed, additional border added, location for momentary switch, etc, etc finalized by the weekend.

Momentary switch arrived from Amazon. It is a lovely little piece of kit. And it works just like the rocker switch so my code is good to go.

Now I just need to install it, wire it up and find a place to hang it.

I set it up in the study and just left it on. PIR is disconnected so the screen doesn’t blank. Wife walks in and …

“um … is that your magic mirror?”

Yes.

“It is very nice, I like the wood border, and, as usual, you have done a very nice work on making it look professional”

Thanks.

“But … it doesn’t appear to be a mirror. And that is a very busy screen”.

Oh oh. Now I will need to seriously rethink things.

Several days later … I have decided to ditch the PIR (I couldn’t get it to work to my satisfaction anyway). I am going to install a slightly hidden momentary switch. Press the button, screen comes on, release the button, screen turns off / Mirror returns.

That should get me my vision (ability to look at all the key stuff on my display) as well as getting my wife what she is after (nice mirror without the cluttered screen). It should be fairly easy to let people see the cool stuff, if they want to.

This will mean expanding my walnut border (I was probably going to do that anyway) and installing the switch.

The python code is much easier than with the PIR …

#!/usr/bin/env python
from gpiozero import Button
from time import sleep

def turnscreen_on():
    print('BUTTON PRESSED')
    ### subprocess.call("sh PIR/monitor_on.sh", shell=True)
 
def turnscreen_off():
    print('BUTTON RELEASED')
    ### subprocess.call("sh PIR/monitor_off.sh", shell=True)

button = Button(2)

while True:
    button.when_pressed = turnscreen_on
    button.when_released = turnscreen_off

    sleep(0.5)
    

I only had a rocker switch to test with and a momentary switch might be triggering the turnscreen_off part all of the time. I might need a boolean variable to hold the screen state (ON / OFF). Momentary switch is coming tomorrow … I will test it and see.

Still undecided where the MM is going … but it is up and running (sans PIR - disabled the code that responds to the sensor as I am finding it more, and more, AND MORE annoying). More sensors on their way … I must have something to tinker with.

So … it is up, in the study, on the dog creates. Wife hasn’t seen it up and on yet … as such, results are PENDING :).

@sdetweil said in Magic Mirror Build Log ... Oak and Walnut Frame:

@ruff-hi yes, if the hole is small for the pir, you might have difficulty.

True. I did run some tests on various size holes and they all pretty much said ‘yes - I see you’. Anyway, current hole is small but I can make it bigger (if needed).

Good Morning. I have been working away at this project off and on through the summer. It is almost ready to go on a wall (assuming I can find one). I’ve finished up the Oak and walnut frame (although I might be adding a touch more walnut at some point), I have carved out recesses in the Oak for the power board, the power block for the monitor and for a PIR sensor.

That sensor is annoying me a little bit … the screen takes a good 15 seconds to come back after I wave my hand in front of the sensor. I am pretty sure that I have to tweak one of the sensor dials to change that (I will post more on that later).

The whole mirror weights a ton. But it is relatively thin and I am happy with that.

Here is the empty frame. Notice the carve outs - top for power block, left for monitor block, right for PIR sensor.
I have also installed a bunch of threaded inserts to hold in the monitor.

Front with very small hold drilled for PIR (masking tape). It can see motion through that small hole but I think my trigger states are not right as of yet.

Back.

@thorn2910 - excellent suggestion … but …

I added various colors to my calendar option a week or two ago. I also like the ability to add some text because then I don’t have to remember what icon mean which calendar … or which color meant which calendar. I can see the different entries … then check the text to know the calendar.

Very nice! I will file this away for consideration.

And the build of the electronics behind the mirror has started. First cab off the rank is the long, long screen power cable. It is just too long. I was thinking of running it throw a hot wash cycle to see if it would shrink … but I decided against that. Instead I just cut it down to size.

Now I just need to solder the wires back together. I wasn’t going to do that by hand … instead I picked up some of Solder Seal Wire Connectors, fished them onto the wires and applied a heat gun …

Good enough. How just to slip some heat sink over that ugly mess and more heat gun …

Bingo … a shorter power cord.

My MMM-GoogleTasks output stopped showing tasks. Is it the v2.18 impacting google tasks? I dropped into the code, added a bunch of logging information and checked the debugging chrome console (Ctrl-Sht-J) to find that it wasn’t picking up a valid package.

Re-reading the install instructions led me to look at the token.json file … and in contains a expire token …

"expiry_date":1642896917968

What sort of weird date is that? I big of googling let me to stackoverflow (I love this site … so many answers!) and this …

I know it is kind of old, but I was just asking myself the same question. Right now I’m almost certain, that it’s just Unix timestamp with milliseconds.

… and to this site - a millisecond calculator. Put in 1.64 trillion and you get ‘Sun Jan 23 2022 00:15:17’.

Yep … that is an expired token. Can I just change that number to 1.8 trillion?

You can! Just don’t put in an extra 0 … it didn’t like that.

Anyway, 1.8 trillion comes out as ‘Fri Jan 15 2027 08:00:00’. So … now I just need to remember to update my token in 2027. I wonder if I can put in a google calendar reminder for then?

Google tasks back up and running … first task listed is to fix the Samsung drying … it is making a lot of noise.

@python said in Kitchen Mirror / Whole Home Display:

Without recessing it would cause the mirror to protrude about 3" from the wall which would look weird from the side.

3" … it certainly doesn’t look that thick. After scanning your picks again, I noticed that I completely forgot to comment on your weimaraner dogs :)

Very nice … I really like how thin it is. You might have been able to get away without recessing it.

Thanks all. I was thinking of cloning a memory card … but if duplicating the folder works then I can use that in the short term.

This isn’t really trouble shooting …

I am building a MM (hardware) in my ‘shop’. I am also building a MM window (software). The software angle involves tinkering with placement, css files, look and feel, adding new modules. Finding that the new modules don’t really work. Finding that modules that did work have stopped working … aaaaGGGGGGGGGGGGGGG.

I feel as if I need a Prod version and a Dev (or test) version. Short of buying a completely new Pi … what is the easiest way of doing this?

I can’t seem to get CalendarExt2 to show up.  I have posted the CalendarExt2 portion of my config.js below

{	module: "MMM-CalendarExt2",
	config: {
		calendars : [
			{
				name: "Holidays",
				url: "http://www.calendarlabs.com/ical-calendar/ics/76/US_Holidays.ics"
			},
		], 
		views: [
			{
				name: "DEFAULTVIEW",
				mode: "daily",
				position: "top_center",
				maxItems: 50,
				maxDays: 1000,
				locale: "en",
				hideOverflow: false,
				filterPassedEvent: false,
				calendars: ["Holidays"],
			},
		], 
		scenes: [
			{
				name: "DEFAULTSCENE",
				views: ["DEFAULTVIEW"],
			},
		], 
	}, 
}, 

I have commented out everything else except for CLOCK and STANDARD CALENDAR.  They are working, but nothing is showing up for CalendarExt2.

config.js clears the checker.  I have also stopped and restarted mm.

My bet is that I am missing something really obvious, but I can’t see it.

Edit: Chrome won’t let me post this (ERROR but no useful description). Edge has no problem posting this. What is going on?

I ordered a piece of smart mirror as well as picking up some 1/4" 2x4 Oak sanded plywood (lowes). Time to start thinking about putting this puppy together.

I will take pictures as I go.

calendar.js file modded to show the text in the symbol field if displaySymbol is FALSE and displayText is TRUE.

Those display options are embedded in the js file (I tried to get them in via the config.js but couldn’t seem to get it done. I added the the displayText one.

	if (this.config.displaySymbol) {
<snip>

// the code above is for location reference.
// ... below is new ... and, YES, I did hard code some style items

	} else if (this.config.displayText) {
		const blankCell = document.createElement("td");
		const symbols = this.symbolsForEvent(event);
		symbols.forEach((s, index) => {
			blankCell.innerHTML = s;
			blankCell.style.paddingRight = "10px";
			blankCell.style.fontFamily = "Calibri";
			blankCell.style.fontSize = "18px";
			blankCell.style.fontcolor = "#B9B9B9";
		});
		eventWrapper.appendChild(blankCell);

Edit: I did have a brief look to see if I could stop the duplicate / repeat entries … nothing jumped out at me so I am going to pass on that.

@sharkbyte - thanks for reading this and the reply.

@ruff-hi great build an looks like your rolling along
Oh thanks for the great news on Green Bay losing ha

Spoiler? Sorry. It was a weird weekend worth of games … all decided near or after the end of the 4th quarter.

For the to do list and calendar I use MMM-CalendarExt2

I will take a look at it.

Edit: I had a quick look and first impressions is that it might be too much detail for my MM. My home calendars are pretty boring (1st … give dogs flea / tick pills, every 2nd Monday - put out recycling bins, etc).

I do want to see if I can mod the default code to identify (without icons) which calendar is which … and to drop the 2+ items from all recurring appointments (ie only show the first one).