@Kugelfang said in Electron CPU usage:

I tried your precise instructions but my system still installed electron 1.7.9

cd $HOME/MagicMirror
npm uninstall -g electron
npm uninstall electron
npm install electron@1.4.15 

@Zinkeler - Sorry, but I can’t help here. I’m running 2 pi’s with separate installations of pimatic and MagicMirror. The first Raspberry hosts pimatic including several interfaces (Homeduino, MySensors, arexx temperature logger) and the second is mounted behind a HDMI Monitor hanging at the wall of my diningroom.

@Mykle1 Yes, I downgraded due to high CPU usage with MM2.1.1 & electron1.4.17. Top showed a usage between 100 and 200% and my own written moduls had a really bad performance.

Hi, I try to get in the magic of Web programming and need help in positioning output of my own written MagicMirror modules.
I’ve written a module which receive information from my home automation system (pimatic). The information to display is a notification board which I would like to postion at ‘top_center’. A second information is a bunch of temperatures which I would like to place anywhere else on the monitor (e.q.‘bottom_left’). Currently I solved the issue by sending the second block of information to a second module. This module is registered in MM config.json including the position parameter ‘bottom_left’. But to write a second modul just to position the output of my main modul is not very efficient!

How can I control positioning of output to different display areas directly from my main modul?

Hello, here are some details on my configuration and the steps I’ve made to downgrade from 2.1.1 to MM 2.1.0 & electron 1.4.15. First, I use the following PI and OS

• Pi 3 Model B, 1024MB RAM

• Raspbian Stretch

pi@Infoboard:~ $ uname -a
Linux Infoboard 4.9.41-v7+ #1023 SMP Tue Aug 8 16:00:15 BST 2017 armv7l GNU/Linux

Downgrade MagicMirror from 2.1.1 to 2.1.0:
-rename of my MagicMirror folder to MagicMirrorSAVE
-download and unzip MM 2.1.0
-rename dir MagicMirror-2.1.0 to MagicMirror
-cd to MagicMirror
-npm install electron@1.4.15 # I didn’t install electron as a global package
-nano package.json
–> change electron version under dependencies to electron 1.4.15

{
  "name": "magicmirror",
  "version": "2.1.0",
  "description": "A modular interface for smart mirrors.",
  "main": "js/electron.js",
  "scripts": {
    "start": "electron js/electron.js"
  },
  "repository": {
    "type": "git",
 ...
 "dependencies": {
    "electron": "1.4.15",
    "express": "^4.14.0",
    "express-ipfilter": "latest",
    "feedme": "latest",
....

now, install MagicMirror

-npm install
-copy your own modules from the MagicMirrorSAVE to the respective MM2.1.0 directory
-install necessary node modules for your own modules
done
Check the installed version of electron

pi@Infoboard:~ $ more MagicMirror/node_modules/electron/dist/version
v1.4.15

run MM with ‘npm start’ and monitor the CPU usage with ‘top’
and the magic is there: 2 to 3 % CPU usage in case you are not running newsfeed or other modules with a lot of rendering stuff. If I include the newfeed modul CPU usage will increase up to 30%. So, I go without newsfeed!

I hope that help some or the other.

I also did a downgrade from MagicMirror 2.1.1 and electron@1.7 as proposed
to MagicMirror 2.1.0 and electron@1.4.15. and see a significant lower CPU usage. Formerly CPU usage was most of the time over 100% up to 200%. Now, top shows a CPU usage of electron between 2 to 3 %.

I hope that the electron dev team will take a look to fix that problem in a future release!

Hi,

over the Chrismas days I’ve created a slideshow modul which is close to the functionality of a “digital photo frame”.

MMM-Photoshow

At startup the modul scans a local directory structure and creates a repository of the image files to display. At this point in time the module hide itself and waits on a command to start. The slideshow will start by a notification message from another modul, hides all other modules and shows the pictures in fullscreen mode. New pictures wil show up by a configurable time intervall. If the exif tag of the photo provides an information on the date taken, this date is shown in a footer line at the bottom of the screen. In addtion the footer line shows an album name, the number of photos of the album and the last received notification message (command to steer the show).

The slideshow is controlled by notification messages from a separate control modul. I’ve implemented a communication (socket io) to an external voice recognition modul based on snowboy. I think the modul (i.e alexyak/voicecontrol) would also work.
It is possible to switch between photo albums (represented by subdirectories of the loaded directory structure), to go forward , backward or to stop the photoshow by speaking a command.
It would be easy to modify the module with regular scans of the directory structure. There is already a command to reload the file structure during the run of the slideshow. Access to pictures on a remote server (i.e. NAS) works fine by mounting the remote folders into the local directory structure.
With the command ‘INFO_BOARD’ the slideshow stop, hide itselfs and switch back to info mode by showing up all other module.

I would be pleased if my modul can be used as a base for further development by a more experienced programmer like me.

@tosti007 , @strawberry 3.141 - ok, you all right, it is not a failure to investigate a bit time to consult the internet and to learn new things!
I found and implemented a solution based on a table definition:

That’s was exactly what I was looking for!

I’m a complete novice to CSS and momentary it’s all Greek for me. I would like to change an existing style sheet provided by BenRoe (MMM-FHEM) for my own modul, but it would take me days to find the right code to change it to the layout below. An expert would presumably spend only a few minutes to create the necessary css file.

Below the existing display and style sheet of temperature values plus the layout I would like to realize.

Any hint how to start or assistance would be highly appreciated!

Thanks in advance.

.MMM-M2-Pimatic .flex-container {
  display: flex;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content:flex-end;
}

.MMM-M2-Pimatic .module-content .flex-item {
  flex-direction: column;
  /*margin: auto;*/
}

.region.left .MMM-M2-Pimatic .flex-container,
.region.center .MMM-M2-Pimatic .flex-container,
.region.right .MMM-M2-Pimatic .flex-container {
  flex-direction: column;
  -webkit-flex-direction: column;
  align-items: flex-start;
  -webkit-align-items: flex-end;
  max-width: 300px;
}

.region.left .MMM-M2-Pimatic .flex-container .flex-item > div,
.region.center .MMM-M2-Pimatic .flex-container .flex-item > div,
.region.right .MMM-M2-Pimatic .flex-container .flex-item > div {
  flex-direction: column;
  display: inline-block;
  min-width: 70px;
}

.MMM-M2-Pimatic .flex-item .title {
  border-bottom: 1px solid #666;
}

.region.left .MMM-M2-Pimatic .flex-item .title,
.region.center .MMM-M2-Pimatic .flex-item .title,
.region.right .MMM-M2-Pimatic .flex-item .title{
  border-bottom: none;
}

.MMM-M2-Pimatic .flex-item .value {
  display: inline-block;
  margin: 10px 5px;
}

.region.left .MMM-M2-Pimatic .flex-item .value,
.region.center .MMM-M2-Pimatic .flex-item .value,
.region.right .MMM-M2-Pimatic .flex-item .value{
  margin: 0;
  font-size: 1em;
}

.MMM-M2-Pimatic .value i {
  margin-right: 8px;
  font-size: 0.75em;

}

@shgmongohh - Unfortunately I’m neither familiar with git nor with javascript or web style sheets. Based on my old school programming skills from the early eighties I studied several moduls and created 2 new moduls.

The first one connect to pimatic via the WebSocket API and receives on device attribute changes all new values which I compare to device attribute definitions placed in the magic mirror config.js. If a device mach the new attribute, it is shown in the notification board (similar and based on modul MMM-DWD-WarnWeather by LukeSkywalker92). My modul also consist on 3 files:

Pimatic Notification Borad:

• MMM-Pimatic.js
• node_helper.js
• MMM-Pimatic.css
• icons/icons-pimatic.png

The second modul displays temperature devices and consists of 2 files and requires that the first modul is running, as it receives the pimatic attribute changes from the node-helper of the first modul by waiting on “notificationReceived”.

Pimatic Temperature Devices:

• MMM-M2-Pimatic.css
• MMM-M2-Pimatic.js

If someone could create the git repository and crosscheck the code I can provide the files by sending a zip.archiv.

I would be glad to see additional ideas/moduls dealing with pimatic.

@binderth
as @sero mentioned, the Advantage over the socket-API is that you get live events, if something in pimatic changes.
In addition I use the “MMM-REST” (push) module for displaying selected status messages in case a specific pimatic rule is fullfilled.

@MichMich: Thank’s a lot, I’ve fixed the issue. Result can be reviewed here

First of all a big, very big thank you to Michael Teeuw!!!

MagicMirror is really one of the greatest Raspberry projects followed by ‘pimatic - home automation controller’, another amazing Raspberry project. So far as I know both are developments from Dutchmen.
After studying the documentation and several MM-moduls, I decided to use MagicMirror to setup a central dashboard for my family. Beside customizing of the standard moduls I used the modul ‘MMM-DWD-WarnWeather by LukeSkywalker92’ as a base to create a new modul for retrieving data from my pimatic home controller.
I’m a complete novice to nodejs and all this web stuff, but my programming skill were sufficient to modify the Warnweather module and to integrate the the pimatic socket API.

And voila, here is my dashboard providing now actual information from the internet plus status information from my IoT devices controlled by pimatic.

Special thanks, to those people taken time to document and to publish there solutions.
(As soon as I’ve learned to use git, I will also publish the pimatic modul)

Best regards and a happy new year!

Hi,
I’m at my wit’s end!
Based on module “MMM-FHEM by BenRoe” I’ve created a module to receive event changes from the home automation pimatic. The module works fine. Then I started to write a second modul and can’t get rid of the error:
Cannot read property ‘getElementsByClassName’ of nullt

To isolate the problem I reduced the code to the example from the module development page.

Module.register("HelloWorld",{
    // Default module config.
    defaults: {
        text: "Hello World!"
    },
    
    start: function() {
        var self = this;
        setInterval(function() {
            self.updateDom(); // no speed defined, so it updates instantly.
        }, 1000); //perform every 1000 milliseconds.
    },
    // Override dom generator.
    getDom: function() {
        var wrapper = document.createElement("div");
        wrapper.className = 'MyHelloWorld';
        wrapper.innerHTML = this.config.text;
        return wrapper;
    }
});

Following the console log:

What’ s wrong? I need help from an expert!