MMM-OClock

MagicMirror module - O-clock inspired by PolarClock Screensaver

Screenshot

Details

MMM-Widget

MagicMirror module for external web widgets.
Widgets could be inserted anywhere multiply.

Screenshot

Details

MMM-AssistantMk2 (v3)

Preview Video

Screenshot

What is updated

• Fully rebuild from scratch.
• More stable.
• Installer is served. (For Raspbian or any Debian-based Linux)
• Annoying audio output dependencies are deprecated. Simply using standard HTML5 audio output.
• plugin and responseHook are added.
• screen output is more controllable.
• customizable UI.
• pre-built recipes are served.
• Easier custom action managing.

Last Tested

• MagicMirror : 2.10.0
• RPI 3B+ / raspbian 10 /nodeJS v10.17.0 / npm 6.13.2
• MacOS Catalina 10.15.2 / MacBookPro 2017 15" / nodeJS v11.12.0 / npm v6.9.0
• debian 10 / nodeJS v10.18.0 / npm v6.13.4

Credits

• Author :
  • eouia (@Sean)
  • bugsounet(@Bugsounet)
• License : MIT
  • By terms of Google Assistant SDK, You are not allowed to use or provide this module for commercial purpose.

Sorry for my fellows. I was on my vacation and my business works when you have had problems in these modules - MMM-CalendarExt and MMM-Assistant. They are caused by downgrading of Main MM versioning.

There are some fix for these issues thanks to many volunteers. However, I’ll check all of these issues and will release the patch for a few days. I’ll promise to solve those issues for all of you until end of this month.

Sorry for all of your inconvenience.

I wrote this;
https://forum.magicmirror.builders/topic/8534/head-first-developing-mm-module-for-extreme-beginners

Head first developing MM module for extreme beginners

Today morning, I’ve got two messages from two members of this forum at the same time. Both of two asked me the same thing - “How can I show my contents on MM with my module?”
So, here is a simple guide for developing MM module. This is not a royal road or perfect answer, but I hope this could be a help

This article is not about using git or any other deeper knowledge. I assume you are familiar with javascript(nodeJS) at least.

Make a workspace

cd ~/MagicMirror/modules
mkdir MMM-Test
cd MMM-Test
touch MMM-Test.js  

MMM-Test.js is your main module script. It will be called by MM core at running.

Let’s make something.

configuration

First, add your module into MM framework. open ~/MagicMirror/config/config.js and add your module.

modules: [
 {
  module: "MMM-Test",
  position: "top_left",
  config: {}
 },
]

For simple things, remove all other modules except your MMM-Test.

MMM-Test.js

open MMM-Test.js and edit.

nano MMM-Test.js

In that, copy this and paste into MMM-Test.js.

Module.register("MMM-Timetable", {
  defaults: {},
  start: function () {},
  getDom: function() {},
  notificationReceived: function() {},
  socketNotificationReceived: function() {},
})

There are many other things to study but currently, we will focus on these 5 things.

getDom()

This function will render your content on MM screen.
Let’s do something.

getDom: function() {
  var element = document.createElement("div")
  element.className = "myContent"
  element.innerHTML = "Hello, World!"
  return element
},

<div> element is created and returned to MM for rendering.
When MM needs your module’s output being refreshed, this function will be called by MM core.
See how it works.

cd ~/MagicMirror
npm start dev

defaults:{}

You can use default configuration values. Let’s do it

defaults: {
  foo: "I'm alive!"
},
getDom: function() {
  var element = document.createElement("div")
  element.className = "myContent"
  element.innerHTML = "Hello, World! " + this.config.foo
  return element
},

your configuration value foo could be used like this.config.foo.
this in this module, it directs module itself. you can access various module values with it.
See how it works.

And you can customize configuration values with config.js
set your config.js like this;

{
  module: "MMM-Test",
  position: "top_left",
  config: {
    foo: "I'm the King of the world!"
  }
},

The result will be like this;

start() & updateDom()

This function will be executed when your module is loaded successfully.
Let’s change something.

start: function (){
  this.count = 0
  var timer = setInterval(()=>{
    this.updateDom()
    this.count++
  }, 1000)
},

getDom: function() {
  var element = document.createElement("div")
  element.className = "myContent"
  element.innerHTML = "Hello, World! " + this.config.foo
  var subElement = document.createElement("p")
  subElement.innerHTML = "Count:" + this.count
  subElement.id = "COUNT"
  element.appendChild(subElement)
  return element
},

After your module is loaded, your module’s output will be updated per every 1 second.
Whenever you want to update your output, you can call .updateDom() to let MM also call your .getDom() to redraw the output. (Don’t try to call getDom() directly by yourself. It will not work as your expectation. Rendering is delegated to the MM core.)

By the way, start() is not a good place to control drawing, because start() is called before your DOM objects are first rendered. Above code is somewhat bad behavior.

notificationReceived()

MM and modules are communicating each other with notification. Your module can receive notification and send it also.

start: function (){
  this.count = 0
},

getDom: function() {
  var element = document.createElement("div")
  element.className = "myContent"
  element.innerHTML = "Hello, World! " + this.config.foo
  var subElement = document.createElement("p")
  subElement.innerHTML = "Count:" + this.count
  subElement.id = "COUNT"
  element.appendChild(subElement)
  return element
},

notificationReceived: function(notification, payload, sender) {
  switch(notification) {
    case "DOM_OBJECTS_CREATED":
      var timer = setInterval(()=>{
        this.updateDom()
        this.count++
      }, 1000)
      break
  }
},

The result looks so same with previous codes. But your timer will be started after when “DOM_OBJECTS_CREATED” notification is received but not when the module is loaded.
DOM_OBJECTS_CREATED notification is emitted when all of modules are loaded and rendered(with getDom()) first time. At the moment, you can manipulate your output in your module.

Another way to control output

Once your DOM is ready(after first calling getDom() and DOM_OBJECTS_CREATED notification is emitted), you can access your DOM with script.

notificationReceived: function(notification, payload, sender) {
  switch(notification) {
    case "DOM_OBJECTS_CREATED":
      var timer = setInterval(()=>{
        //this.updateDom()
        var countElm = document.getElementById("COUNT")
        countElm.innerHTML = "Count:" + this.count
        this.count++
      }, 1000)
      break
  }
},

Instead updateDom(), direct access to DOM is used.

node_helper.js

But your MMM-Test.js has some limitation. Because it is run on MM framework and Browser(Electron/Chromium or Midori)
When you need more than what browser can provide, you should use node_helper.js
By example, your MMM-Test.js cannot read or write local files by usual way (Of course, there is a hack, but that is not the point at this moment.).
But your node_helper.js can. Or when you need to use other various node modules, node_helper.js exists for that purpose.

Let’s make node_helper.js

nano node_helper.js

Copy this code and paste.

var NodeHelper = require("node_helper")

module.exports = NodeHelper.create({
  start: function() {},
  socketNotificationReceived: function() {},
})

This is a default template of node_helper.js. Now add some codes.

var NodeHelper = require("node_helper")

module.exports = NodeHelper.create({
  start: function() {
    this.countDown = 10000000
  },
  socketNotificationReceived: function(notification, payload) {
    switch(notification) {
      case "DO_YOUR_JOB":
        this.sendSocketNotification("I_DID", (this.countDown - payload))
        break
    }
  },
})

Like MMM-Test.js, start() will be executed when node_helper.js is loaded and connected to your module.
Between MMM-Test.js and node_helper.js, socketNotification is used for communication. (similar with notification)
You can get socketNotification with socketNotificationReceived() and can send it by sendSocketNotification().

Then, you should modify MMM-Test.js

getDom: function() {
  var element = document.createElement("div")
  element.className = "myContent"
  element.innerHTML = "Hello, World! " + this.config.foo
  var subElement = document.createElement("p")
  subElement.id = "COUNT"
  element.appendChild(subElement)
  return element
},

notificationReceived: function(notification, payload, sender) {
  switch(notification) {
    case "DOM_OBJECTS_CREATED":
      var timer = setInterval(()=>{
        this.sendSocketNotification("DO_YOUR_JOB", this.count)
        this.count++
      }, 1000)
      break
  }
},

socketNotificationReceived: function(notification, payload) {
  switch(notification) {
    case "I_DID":
      var elem = document.getElementById("COUNT")
      elem.innerHTML = "Count:" + payload
      break
  }
},

Result will be like this;

Now you made your MMM-Test.js to work with node_helper.js
Of course, this is not so good example to show what node_helper.js can do.
But I believe you can understand how node_helper.js and MMM-Test.js work with each other.

Well. You’ve learned 90% of how to develop MM module. the remains are described in https://github.com/MichMich/MagicMirror/blob/master/modules/README.md
Good luck to you.

Description:

Hi, guys.
I have searched world-clock but I can’t find. Of course, I can run default clock instances multiple, but I think that seems to me some kind of guilty for wasting resources. Therefore I did by myself.

This is my first MM module. I’m not a skilled programmer. So this module might have many improvement points expected. But… I don’t care. This is a very simple module and it works in one way or another.

I think playing with MM could be my new afterwork hobby. Thanks to everyone.

Download:

Screenshot

(I run 3 instances for showing how it looks, but just a sample case.)

MMM-Spotify

Spotify controller for MagicMirror

Screenshot

Main Features

• Showing Current playback of any devices
• Playing Controllable by Notification (Play, pause, next, previous, volume)
• Spotify Controllable by Notification (change device, search and play)

---

My MBP was gone a few weeks ago with 12,000 mp3s which I was collecting for my whole life…
I’ve never used any streaming service, but now have to.
So I consider to use Spotify. I know there is already some modules about it. Anyway, I need something different. I was playing with Spotify API for my private purpose.

Just at that moment , @ejay-ibm wanted to control Spotify with voice command through MMM-AssistantMk2. He asked sometimes and I answered. I asked also sometimes he replied…

And then, Wow, Suddenly This module is born.
Special Thanks to @ejay-ibm. He gave me great inspiration and motivation to complete this (and real coworking also).

TODO

I’ll add touch interface to control Spotify. (somedays)

Like this?

I haven’t fully tested it. Tell me errors.

There are some undefined dates, like 01 Jan., I don’t know Slovak calendar system, so I cannot define them. You’d better fulfill missed dates by yourself.

I just want to take the 100th post.

My name is Yi.(Yi is a very common family name in Korea.) I’m 45 Y old, born in Korea, living in Frankfurt a.M, Germany currently as an expatriate.
I was a programmer for some decade of years in S.Korea and Japan, but now I’m running a branch of my mother company here.
I was an old-schooled programmer. My first programming was Basic & Fortran on the Z80 machine. I was a little bored with being a small compartment of huge projects, so I quitted from programming and changed to products design. After that, finally business managing is my current job.
However, MM is a little and lovely project which kind of something can still be done individually. I found this project 2 years ago, and it becomes my greatest hobby at this moment.
And this can justify the reason to my wife why I still need an expensive Macbookpro

@sdetweil
I don’t want to make an argument about your success. The difficulty is always relative.

As you’ve said, all cloned modules should manage their own ID by themselves. (not only for the one device but also for each clients if multi-devices are working under server-clients)
It could not be difficult, frankly, usual web sites/applications/components are developed like that.
But the MM… hmmm. I always consider MM would be a standalone running device. Even though there exist some server/client usecases, most of the modules are developed as standalone. Using H/W peripheral(like GPIO or mic) is an example.
Of course, we, developers can make the module clonable from the early stage of development. But I often have a question it’s worthy.

For an imaginary use-case of other users, should I consider to make module clonable? Always my answer for this MM was… no.
Because;

• I’m not using clones. If I need something similar, I would make a new module, which might be able to manage multi-views(like CALEXT2) or to share some resources.(AMK2 and HOTWORDS), but it makes things too complex. I hate this way.
• I feel some cul-de-sac from MM legacy. MM needs to provide more friendly way to reuse modules. At this moment, not. So that’s why I haven’t considered cloning. and why I lost interest in MM.

Anyway, to say shortly. This module is not made for that purpose. Unless modification by myself or somebody, not possible. That’s all.

not so easy.

MM legacy structure doesn’t consider multiple instances of node_helper. One module should have just one node_helper and vice versa. So, the cloning instance of the module needs some manual fixing. Some simple modules could be clonable easily(like the original newsfeed module), but not this module’s case.

Another point is, to get news individually through cloned modules(If you’ve done somehow), it will consume system resources twice. and API quota also will be consumed doubly. Hmmm. it is not so beautiful.

A reasonable approach would be, Making a serving-slave process(which access the news API) by spawn/fork from one node_helper of the module. then other cloned modules would connect to the slave to get their own needs.

Or make another front-end module, which would just pull data from the original module.

Anyway, I didn’t make this module for that purpose. And under the current MM structure, to do so is not so easy.

Finally, I’m not supporting this module anymore. So, sorry. not possible by me.

@lavolp3
Just Idea. store recent lottery values from API with the date as JSON file, Then when you need new values (on restart or on every Sunday), Check the JSON file first then request API when the stored data is out-of-dated.

PS Ah, you’ve already approached. Don’t mind.

@ngnijland
Impossible in the current MM legacy structure.
those processes are separated and can not share function.

2 reasons;

• The function itself cannot be transferred through socket (JSON doesn’t allow it)
• If the function depends on some dependencies, it will lose them.

Anyway, if the function itself is somehow simple and has no dependency, there could be some trick.

var originalPayload = {
  "something": "hello, world",
  "someFunc" : (value) => {
    console.log(value)
    return value
  }
}

originalPayload.someFunc("Original Execution.")


let replacer = (key, value) => {
  if (typeof value == "function") {
    return "__FUNC__" + value.toString()
  }
  return value
}

// Encode function in payload object
var encodedPayload = JSON.stringify(originalPayload, replacer, 2)
console.log("----")
console.log(encodedPayload)
console.log("----")
// encodedPayload will have;
// {
//   "something": "hello, world",
//   "someFunc": "__FUNC__(value) => {\n console.log(value)\n return value\n  }"
// }

// Now you can transfer this string as payload of socketNotification.
// this.sendSocketNotification("SOME_EVENT", encodedPayload)
// ...

// Let's assume you got a payload through socketNotification
var receivedPayload = encodedPayload

let reviver = (key, value) => {
  if (typeof value === 'string' && value.indexOf('__FUNC__') === 0) {
    value = value.slice(8)
    let functionTemplate = `(${value})`
    return eval(functionTemplate)
  }
  return value
}

var revivedPayload = JSON.parse(receivedPayload, reviver)
revivedPayload.someFunc("Function is revived.")

CAUTION
If the function requires dependencies (node modules, injected Object, references out of scope, …) those will be lost and it will cause an error.

As I’ve said in another post, I couldn’t maintain this module anymore.

However, yesterday night, suddenly I got an idea of what happened. (Not tested, and… sorry, I couldn’t test)

Most of MM modules and MM itself are using the same port to communicate internally and externally. I suspect some modules(and even inside logics in a module) were racing to use the port. They had opened and closed the port by their own schedule, which could make this symptom. Connection with Google Server often needs some long time probably.

The solution might be to use a different port not to race. and make the connections not to happen asynchronously. For the performance, I usually used asynchronous attempting to communicate with Google Server, It might make worse that issue.
Well, some modification of source might be needed, but as I’ve said (again), I couldn’t.

Anyway, this guess is not confirmed by the test, just an idea.
If someone could get an inspiration, I hope this guess could be a help.

@lxne
If nobody will take over the module, I’ll keep it still publicly, but no guarantee of bug fixing or updating, adding feature. And I might not answer/solve the issue.

@Bugsounet
Thanks. I’ve already transferred. But, You need to rename/remove your bugsounet/MMM-Timetable for transferring my MMM-Timetable repository before.

Dear buddy.

For several years, I made some ( I think too many…) modules for the community.

But nowadays I lost my interest in this MagicMirror project, So I decide to leave.

• I broke my ankle on last holidays
• This COVID Pandemic depression.
• My grandmother passed away last month (not by COVID but she was 100 years old)
• I’m tired to maintain all my modules for every compatible issue. And the limit of legacy. I think it’s better to make my own framework for my mirrors.
• I’m so busy on my job. have not enough time…

So leaving this project, If there is someone who has interests in the modules, I want to give him ownership of my modules.

Here is the list. Anyone has interests, tell me (eouia0819@gmail.com)

• MMM-AssistantMk2 (new owner : @Bugsounet )
• MMM-Hotword (new owner : @Bugsounet )
• MMM-Selfieshot (@bhelper)
• MMM-Spotify (@Bugsounet )
• MMM-CalendarExt2 (github org @MMM-CalendarExt2)
• MMM-CalendarExtPlan (github org @MMM-CalendarExt2)
• MMM-CalendarExtMinimonth (github org @MMM-CalendarExt2)
• MMM-CalendarExtTimeline(github org @MMM-CalendarExt2)
• MMM-CalendarExt
• MMM-Touch (@gfischershaw)
• MMM-GooglePhotos
• MMM-DropboxWallpaper
• MMM-YouTube (github/@Anonym-tsk )
• MMM-NotificationTrigger
• MMM-Volume (github/@Anonym-tsk )
• MMM-VolvoOnCall
• MMM-TelegramBot (@Bugsounet )
• worldclock (@wisser)
• MMM-Tools (@Bugsounet )
• MMM-CountEvents
• MMM-GroveGestures
• MMM-Widget2 (@wisser)
• MMM-Widget (@wisser)
• MMM-Clap
• MMM-OClock
• MMM-fbPageCounter
• MMM-Timetable (@Bugsounet )
• MMM-AVStock (@lavolp3)
• MMM-Whereis
• MMM-GoogleShoppingList
• MMM-WeatherBackground (@bhepler)
• MMM-News (@Bugsounet )
• MMM-GoogleTTS
• MMM-Dummy
• MMM-DailyAlarm
• MMM-LunarDate
• MMM-Remote-Control-Repository
• MMM-Rijks (@cirdan )
• MMM-Meniny
• MMM-HTMLBox (@wisser)
• MMM-Glance

Wow, so many…
Send me a mail who has interests. (eouia0819@gmail.com)
Have great days always, guys. In the meantime, it was fun.

@gonzonia
There could be possibility “dead url after it’s lifetime”(60 minutes) but to avoid it, photos working urls would be rescanned and refreshed per 50mins.
Of course, if there be network error to prevent resurrection, it will not work. That is not the token issue.

@RoggerFabri
All those kinds of errors (403, 500, …) means network/server errors. Nothing could do in client(module) itself. Only thing would be just waiting(stuck) problem solved by network/server.