MMM-Scenes2

“Life is a theatre set in which there are but few practicable entrances.”

― Victor Hugo, Les Misérables

MagicMirror module to change screen scenes by time and order with ANIMATION EFFECT.

Demo

Click To Play
Click it to see the DEMO.
Its configuration file is in /examples/config.js.example

Successor of MMM-Scenes

Since MM 2.25, a new feature, animateCSS is introduced into the MagicMirror.

By this update, my previous MMM-Scenes will be obsoleted. So I remade a new module for MM 2.25

• The update can provide more effects now. ( without my effort. :D )
• I guess custom animation is rarely used, and this update would cover most use-cases. So I decided to drop it.
• I redesigned the structure more simply and intuitively. (role is introduced.)

Concept

The scenario of the MM screen comprises a series of scenes. Each module has its role in its appearance scenes to enter and exit by design.

When a scene begins, all modules whose roles end will be expelled, and all modules with the parts in that scene will be admitted.

As described in the scenario, your MM screen will play a drama with modules.

Features

• control show/hide modules by assigning role names to the module’s class
• various animations for modules exit/enter
• control scenes by notification and WebURL endpoints.
• Loop control
• custom indicators

https://github.com/MMRIZE/MMM-Scenes2

MMM-Hotword2

MagicMirror module withPicovoice’s Porcupine for Hotword detector. My previous MMM-Hotword module is deprecated due to that snowboy hot-word detecting engine closed its service. Fortunately, PICOVOICE’s Porcupine and its siblings would be good enough alternative. So I rebuilt the hot-word detector again.

I know, there is other Porcupine modules already, but they may lack some features which I need to use. So I revamped my old one for my demands.

Features

• Multi Hotwords/ Custom Hotwords supported
• Individual Hotword setting
• On detection, various works possible;
  • Control other modules with custom notification
  • Execute Shell command or scripts and get the result.
• Not only hotword, but also continuous utterance could be acauired.(as recorded wav file)
  • The recorded file could be consumed on other STT / voice handling modules
• No need to rebuild for electron

For more details; https://github.com/MMRIZE/MMM-Hotword2

MMM-DropboxPictures

MagicMirror module for presenting Pictures from Dropbox (Successor of MMM-DropboxWallpaper)

This module is a direct successor of previous MMM-DropboxWallpaper. I need to rebuild new one, and now it will be hosted by me again.

New Updates

3.0.0 (2023-11-09)

• FULLY REBUILT FROM SCRATCH You need to reinstall and reconfigure.
• Using recent Dropbox V2 API (SDK ^10.34)
• New OAUTH authentification
• Dynamic configuration on the fly(by notification).
• auto-rotation feature is deprecated.
• Remove 3rd-party dependencies as many as possible.

DEMO

Click To Play

https://github.com/MMRIZE/MMM-DropboxPictures

@mwm341
As described also in the link, mix-blend-mode: different is not a cure-all. In many cases, especially with simple high-contrast background, it will work fine. But with a mid-contrast or too complex background image, it will not work as expected.

@birdabirda
A1:
Yes, you can. but pay heed to these;

• Be careful when your modules(instances) access the resource(e.g. HTML Element, sounds, sensors,…_ The competes for the same resources would make trouble.
• You need to manage the communications with node_helper from your instances. Instances will share the node_helper at same time, so your socketNotfication or resources of node_helper might have to be controlled by the session per instance.

A2:
Right. 1:M messaging channel tricks might be needed.

A3:
Your module object itself. it has many methods and members. It would be created by MM framework with the definition from your code. Then it would play its role in the MM framework.

A4:
All variables in the `Module.register(“YOURMODULE”,{ … }) will be scoped. They will not be shared unless you refer or link them to global/window scope.

A5:
You might need instance id as payload member on using socketNotification to catch which instance sends this socketNotification to node_helper. Vice versa, instance id might be also needed when node_helper sends socketNotification, to explicit which instance should be aware. Between module and node_helper unlike among modules, only simple basic data type would be transferrable, so you cannot use callback or ‘complex’ class object to make the communication easy.

Though I’m not using Windows anymore, I always envy the Rainmeter despite its ridiculous instability and low performance.
10 minutes ago, suddenly I remembered the idea that the Electron could be used for that purpose. That means I can use MM as a desktop wallpaper. So I did.

Here’s how to do it.

For disclaimers, Electron cannot hook Windows Desktop by itself. There are a few solutions for that, but I don’t want to hack MM heavily. For Windows, use Rainmeter.

custom.css

:root {
  --color-text: #DDD;
  --color-text-dimmed: #BBB;
  --color-text-bright: #fff;
  --color-background: rgba(0, 0, 0, 0);
 /* make fonts color brighter */

  --font-size: 2vh;
  --font-size-small: 0.75rem;

  --gap-body-top: 20px;
  --gap-body-right: 120px;
  --gap-body-bottom: 20px;
  --gap-body-left: 40px;
/* adjust margin for your screen */
}

* {
  text-shadow: 2px 2px 5px #000000; /* make text more readable on the background image */
}

config.js

In the case of Linux, some options might need to be modified.

electronOptions: {
  /*
  x: 1920,
  y: -320,
  width: 3360,
  height: 1892,
  */
  width: 1920,
  height: 1200,
  fullscreen:  false,
  backgroundColor: '#00000000',
  titleBarStyle: 'none',
  frame: false,
  type: 'desktop',
  hasShadow: false,
  transparent: true,
  resizable:   false,
},

• width, height : Your screen resolution
• x, y : position offset from 0, 0 for the left-upper corner of MM screen.

If you are using multi-screen like this and you want to place MM to secondary monitor;

You can adjust x and y to move MM to the secondary monitor.

js/electron.js

I’m not sure this is necessary. but when above modification is not enough, try this.

// line 22 of electron.js
// Change this line
app.commandLine.appendSwitch("autoplay-policy", "no-user-gesture-required");

// to this.
app.commandLine.appendSwitch("autoplay-policy", "no-user-gesture-required", "enable-transparent-visuals");

This needs source modification. I already made a PR to enable customizing electron switches, but this online source modification is needed before acceptance of that PR.

I tested it on macOS, and I believe it will be working on Linux also. Have good luck.

@richmp95
MM2.24 changed some codes then showing somewhat annoying “error” message. Not related with real “error”, just ignore it.

@BKeyport
You can see the browser-side log in the backend (terminal or log file) without ‘npm run start:dev’ or dev-console of chromium.
Frankly said, I’m a bit tired with always saying “open your dev-console and let’s see whether there be suspicious errors,… no, that is element tab, console tab is another, you can see those tabs in upper right side,… first you should have stopped the pm before,…” :D

@plainbroke

put this into your css/custom.css;

.CX3 .cell {
  display: flex;
  flex-direction: column;
}

.CX3 .cell > div {
  order: 1;
}

.CX3 .cell .cellHeader {
  order: 2;
}

.CX3 .eventContainer {
  bottom: calc(var(--cellHeaderHeight) + var(--cellFooterHeight));
}

@birdabirda
ADD to A5.

However, there are some tricks that can be used between node_helper and your instance to make dedicated communication.

• HTTP connection : your node_helper can serve its own web server that can provide URL endpoints for request/response methods. Your front-end module instance could access the dedicated URL.
• websocket or similar technics.