@Stoffbeuteluwe go into the MagicMirror home folder and execute

npm install electron@latest

@loengard Well it’s done. The changes were quite easy :-)
Try it out, it is very rough and there are several things still called “Dilbert” :-).

https://github.com/lavolp3/MMM-DailyDilbert

I think it would make sense to eventually create a “ComicStrip” module and let the user choose between Dilbert, Garfield, xkcd and what else can be created. @kjb085 was already mentioning a website agnostic module.

But I’d like to leave the decision to @andrecarlucci (or is it @kjb085?) and/or @Blastitt who have put much more work into it.

Naaaa nanana Nana Nana
You can touch this!

As part of a bigger project to build a touch kitchen dashboard, I programmed a virtual touch keyboard based on the npm module simple-keyboard.
This module can basically interact with every other module using the MM notification system!

Download:

[card:lavolp3/MMM-Keyboard]

https://github.com/lavolp3/MMM-Keyboard

Screenshots:

Features:

• working with MM’s notification system (see below), can interact with every other module you can think of! (the notification function needs to be programmed into the module)
• supports en and de locales, more on request
• standard and numeric keyboard supported

Working with the Keyboard

Opening the keyboard

The keyboard works with MagicMirror’s notification system. You can broadcast notifications from another module using the following parameters

this.sendNotification("KEYBOARD", {
    key: "uniqueKey",
    style: "default"
});

The payload of the notification must be an object containing two parameters:
key: You can use any unique key, it is advised to use the module name. MMM-Keyboard will take the key and send it back for the module to understand it.
style: Use “default” or “numbers” here

Receiving data

As soon as you hit the “SEND!”-Button the keyboard sends back the written content using the format

this.sendNotification("KEYBOARD_INPUT", {
    key: "uniqueKey",
    message: "test"
});

You can fetch this message by checking for the key component. Here an example:

notificationReceived : function (notification, payload) {
    if (notification == "KEYBOARD_INPUT" && payload.key === "uniqueKey") {
        console.log(payload.message);
    }
},

Implemented modules

• MMM-Bring (PR prepared, not implemented into master yet)

Planned:

• MMM-Todo
• an own Timer / Alarm module

For further implementations, contact me or send it as an issue here!

Thanks

Thanks to @jheyman for alpha testing and Francisco Hodges for the beautiful simple-keyboard npm module!

@boybay7 said in Changing the colour of all text on screen:

Okay another question, I want to change the colour on weather forecast. Currently it’s red and blue, but I want it to go blue (min temp) and then red (max temp), so how would I do that? Appreciate all the help

That’s a bit more complicated, but can be done via styling.

Without explaining too much, put that in your custom.css

.weatherforecast tr.colored .min-temp {
  color: 'green';  
}

.weatherforecast tr.colored .max-temp {
  color: 'red';  
}

or use hex codes (like ‘#00ff00’) for any color you like.

I have now managed to include the little guy in the MMM-DarkSkyForecast module:

BUT: I have used a sprite image from a google image search and need to ask the weather station provider for allowance to use/share it.

Now you have my full attention! :-)
Sounds exciting! Good luck with development!

Do you now jasper?
“Jasper is an open source platform for developing always-on, voice-controlled applications”
https://jasperproject.github.io/
Maybe worth a look?

E.g.:
“Julius is a high-performance open source speech recognition engine. It does not need an active internet connection. Please note that you will need to train your own acoustic model, which is a very complex task that we do not provide support for. Regular users are most likely better suited with one of the other STT engines listed here.”
(from the documentation)

As @broberg said: Freedom! You can do anything and you can use the OS itself for any further Raspbian things you would like. (A mirror as a jdownloader host? possible… Measuring temp in bath room directly using the mirror? possible…)
There are so many possibilities…

Also, you don’t necessarily have to throw any html or setup a web server. It’s all done automatically at the installation.
Yes, if you want to go forward there’s a lot to learn, but I have contributed / played with a lot of modules already and not written more than 3 lines of html (albeit lots of JS)

@boybay7

So just to confirm, even though I have edited code in like modules or custom.css for the font colour, it won’t be replaced when I update with git pull?

To have a complete answer to this, a more basic approach.

You have two things going on in your MM environment.
One is the server side, that is represented by the node_helper.js files. It is kind of a back office, fetching, progressing and forwarding data so it can be displayed in the browser / on the mirror. It does e.g. call weather or calendar APIs and fetches the data.

The server side communicates with the client side, which is represented by the module.js and module.css files (among others).
These are (mostly) responsible for building the html and css code that you finally see in the browser.

The server side is refreshed whenever you restart the mirror (e.g. by pm2 restart mm, or by restarting the Raspberry pi…)
The client side is refreshed whenever you reload a browser page (also with pm2, or - on your laptop - just by reloading the browser page!)

Meaning, you can e.g. display your mirror on your laptop (by going to http://MIRRORIP:8080), change things in custom.css or in config.js and just reload the browser page on the laptop to test these changes out.
Note however, that when you just reload the browser there may be things running on the server side, that do not understand you changes made on the client side anymore, since the server side code has not been refreshed.

The best way of keeping your mirror running and properly updating after code changes is using pm2 and above command to restart.

All of this has nothing to do with git pull.
Git pull is a synchronisation with the code on the git server.
Git pull is used to get updates on the module code from the module creator. It is comparable to updating any program on your computer.
Of course you should restart the mirror after having done git pull.

Hope that helps to understand the environment. It’s surely not easy for beginners.

BTW: If you wonder why you need both of these parallel processes:
The magic word is asynchronity. Whenever you want to fetch data from an API, which your mirror does a lot of times, you have to wait for an answer (the api call is asynchronous, its not synchronous with the rest of the code anymore, it waits…)
If you implement this into the same code that would build up your page, you would end up in a mess.

So the trick is, you have another process that just sends messages (here: notifications) to your page building code. The page building code can then react to these messages by updating what is on the mirror. It does not have to sit and wait for an answer, it can just react to a message.

I could go on for ages here, it’s really a fascinating concept for someone who has only been slightly in programming in the past. This has thrown me into kind of a programming pit. You can see that from the size of my answer :-)

@carlslylike1 Next time, try to provide the config entry and the two modules around it so we can debug it.
Also, look into the link in my signature for troubleshooting advice.
My first troubleshooting action would be

npm run config:check

and send the resuls here if you don’t understand yourself

Another (and hopefully the last!) COVID19-related module.

https://github.com/lavolp3/MMM-COVID19-Inc

This one can show

• incidence rates of different districts(Landkreise) in Germany.
• a map of Germany with colored districts.
• a list of highest/lowest incidence rates.

The rates are pulled from a private API that refers to RKI data, but may not be complete / up to date.
I just recently found a few data points missing.

Screenshot: