@czabel
I need your config and custom.css to guess what happened.

@MilkShake said in Receive a HTTP request and subsequently wake up display and display alert/notification:

I cannot get http://192.168.1.100:8090/webhook?action=notification=SOMEONE_AT_THE_DOOR to work. It returns a 200:OK but nothing is displayed.

http://MMIP:8090/webhook?notification=SOMEONE_AT_THE_DOOR

read carefully.

@bassin12
Updated. There was a logical bug in the code. Sorry.

@MilkShake said in Receive a HTTP request and subsequently wake up display and display alert/notification:

It works when I include the notification in the URL like this:

http://MMIP:8090/remote?action=NOTIFICATION&notification=SOMEONE_AT_THE_DOOR

Simply, you can use this.

http://MMIP:8090/webhook?notification=SOMEONE_AT_THE_DOOR

That is the GET method.

for the shellscript, your trial seems right, but you should take care for the path and the permission.
I think this would be right. (It depends on your environment)

exec: "bash /home/Kragh/monitor_on.sh",
// OR
exec: ". /home/Kragh/monitor_on.sh",

@MilkShake
Could you share the doc? Let’s look inside together.

@bassin12
I’ll look inside; maybe it was my mistake.

@MilkShake

First, What request method and body is emitted from the gate?
It should be something like;

• endpoint : http://MYMM:8090/webhook
• requestMethod : "POST"
• requestHeader: "Content-type: application/json"
• requestBody : (

{
  notification: "SOMEONE_AT_THE_DOOR"
}

If you select “GET” as requestMethod, you may need to deliver the notification as parameter instead of requestBody JSON

Then you can configure like this.

{
	module: "MMM-NotificationTrigger",
	config: {
		useWebhook: true,
		triggers: [
			{
				trigger: "SOMEONE_AT_THE_DOOR",
				fires: [
					{
						fire: "SHOW_ALERT",
						payload: {
							title: "Someone arrives home",
							message: "Welcome back home!",
							timer: "10000",
						}
					}
				]
			}
		]
	}
},

@MilkShake
What is the request body from the gate? “SHOW_ALERT”? I think it would be better to emit other dedicated custom notification other than “SHOW_ALERT”.

@natmash @sdetweil
It seems a bug on the default calendar module. One of my CX3 user also reported it so I looked inside.
https://github.com/MMRIZE/MMM-CalendarExt3/discussions/146#discussioncomment-9380307

UPDATE 1.9.0 (2024-09-25)

• customHeader available,.
  Now you can add customHeader for the calendar view instead of module’s default header.

• variable maxEventLines by number of rows
  Every month has a different number of weeks in its calendar, so it was hard to adjust the height of the month view. Now, you can assign the variable maxEventLines by the number of rows. (And additional CSS Selectors related to it was added.)

@Chuck_morisse
I think npm run config:check cannot validate optional chaining operator (?.). That is somewhat modern state-of-art feature of ECMA Javascript since 2020.
I think you can ignore that error message, anyhow it will work.
I’m not using npm run config:check for that reason.

@Mystara
Not tested, only with my brain, so just idea.

1. Get all the DOMs which has textContent.

const els = document.querySelectorAll('*')
for (let i = 0; i < els.length; i++) {
  const el = els[i]
  const children = el.childNodes
  let hasText = false
  for (let j = children.length; j--) {
    if (children[j].nodeType === 3 && children[j].nodeValue.trim().length) {
      hasText = true
      break
    }
  }
  if (hasText) {
    //This element has text content
  }
}

2. If it and its ancestors don’t have a background, apply your solution.

// assume that already know target element
let withoutBackground = true
let node = targetElement
while (node.parentElement) { // until document
  const styles = window.getComputedStyle(node)
  if (styles.backgroundColor === 'transparent' || ... ) { // Maybe backgroundImage should be checked too.
    // node has no background, so check the parent
    node = node.parentElement
  } else {
    withoutBackground = false
    break
  }
}
if (withoutBackground)  {
  // the target element has no its own background. So you can apply your solution.
}

To improve : a caching strategy for a once checked node to skip would be better.)

However, I’m not too fond of this approach,

1. getComputedStyle is very expensive
2. Rather, it would be better to propose a theme style guide as MagicMirror’s default coding rules.

@Chuck_morisse
I assumed;

• All targeting birthday events placed in the Birthdays calendar. Only those events would be considered.
• All birthday events would have profile image. (At least as many as possible)
• The profile image has a format like johndoe.webp, located in /modules/MMM-CalendarExt3.

/* In your config.js */
{
	module: "calendar",
	header: "Birthdays",
	position: "top_left",
	config: {
		calendars: [
			{
				name: "Birthdays",
				url: "https://somewhere.com/birthday.ics"
			}
		]
	}
},
{
	module: "MMM-CalendarExt3",
	position: "bottom_bar",
	config: {
		mode: "week",
		preProcessor: (event) => {
			if (event.calendarName === "Birthdays") {
				event.skip = true
			}
			return event
		},
		manipulateDateCell: (cellDom, events) => {
			const birthday = events.filter(event => event.calendarName === "Birthdays")?.[0] || null;
			if (birthday) {
				const filename = birthday.title.replace(/[^a-z0-9]/gi, '').toLowerCase() + ".webp"
				cellDom.classList.add("birthday-event")
				cellDom.style.setProperty("--birthday-event-image", `url("/modules/MMM-CalendarExt3/${filename}")`)
			}
		}
	}
},

/* In your custom.css */
.CX3 .cell.birthday-event {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: var(--birthday-event-image, "");
}

Not considered

• It will take the first birthday when multiple birthdays are in the same day.
• If will not check whether the real image exists or not. (In the example, John Smith has no profile image, but that event is skipped also.)

@Chuck_morisse
There could be many approaches to accomplish your goal, So I need more precise conditions.

1. Does your birthday calendar only include birthdays? (Are your targeting birthdays distinguishable by a separate calendar or by a specific title format?) => I Have to know how to point the birthday event from another normal event.

2. All the targeting birthdays would have the own picture? It is not so easy to apply the default picture when there is no proper image (To be honest, it would be also possible, but many additional coding skill be needed.)

If the size is around 14", I recommend purchasing a laptop repair LCD Panel from AliExpress.
If you purchase a 14" - 17" laptop repair Panel together with the Control Board;

Example

PROS

1. Since only the LCD panel is cleanly separated, there is no hassle when making a MagicMirror frame, and especially, there is no risk of damage due to carelessness when disassembling a ready-made monitor.

2. The Control Board and the buttons connected to it are also cleanly separated, so it is easy to place when making a frame.

3. Unlike general desktop monitors, the power supply is simply supplied with 12V DC (5V depending on the model), so there is no need to build an unnecessarily large and heat-generating power supply for general monitors into the MagicMirror.

4. The panel itself is very thin and the board is also thin, so it is suitable for making a thin and ultra-thin MagicMirror.

CONS

• It is slightly more expensive than purchasing a general desktop monitor, but it usually costs around 100EUR/100USD. It is easy to get. Even if you don’t go through a Chinese distributor like AliExpress, you can get it on Amazon for a slightly higher price.

@jubbles
To show 3 sequenced month-instances of the CX3 modules;

{
	module: "calendar",
	header: "US Holidays",
	position: "top_left",
	config: {
		maximumEntries: 100,
		maximumNumberOfDays: 365,
		calendars: [
			{
				symbol: "calendar-check",
				url: "https://ics.calendarlabs.com/76/mm3137/US_Holidays.ics"
			}
		]
	}
},		
{
	module: "MMM-CalendarExt3",
	position: "bottom_bar",
	config: {
		instanceId: "THISMONTH",
		mode: "month",
	}
},
{
	module: "MMM-CalendarExt3",
	position: "bottom_bar",
	config: {
		instanceId: "NEXTMONTH",
		mode: "month",
		monthIndex: 1,
	}
},
{
	module: "MMM-CalendarExt3",
	position: "bottom_bar",
	config: {
		instanceId: "NEXTNEXTMONTH",
		mode: "month",
		monthIndex: 2,
	}
},

I don’t use MMM-Carousel, so get a help from others.

@danncabrera
https://forum.magicmirror.builders/post/101510

@sdetweil this module doesn’t use moment module. It is using pure JavaScript Intl function

@srobison62 said in Apple Calendar integration:

Right now its only taking up about 60% of the screen and itsgot alot of space on the sides

How is your current config.js and custom.css?
To make things simple; disable all other modules(of course, except the default calendar module) then focus on this module alone, then adjust things.

@srobison62

Is there a way to make it taller?

It depends on how big the font size is and how many events will be shown in one cell.
These properties are related to that.

Of course you can adjust more details with CSS overriding.