MMM-OClock

MagicMirror module - O-clock inspired by PolarClock Screensaver

Screenshot

Details

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

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.

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.

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.)

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.

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.

MMM-CalendarExt

Alternative calendar module for MagicMirror

Screenshots

Features

• daily, weekly, monthly, month, upcoming, current views are supported.
• All/any views in any regions.
• Profiles are supported (MMM-ProfileSwitcher or any modules which use CHANGED_PROFILE notification)
• Configuration can be changed by profile.
• Runtime-Configuration available.
• Your other module can add, update and remove instant events.
• Your other module can ask events and get answers.
• Almost everything customizable with configuration and CSS.

more information

See the Wiki

Download:

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 wrote this;
https://forum.magicmirror.builders/topic/8534/head-first-developing-mm-module-for-extreme-beginners

try forceLocalTZ: true to the suspicious calendar.

@sdetweil
I had used my owns for the same.
Currently, standalone MM executes server(backend) js inside of Electron. That makes the things complex.
It would have been better to execute server outside of MM then launch front Electron for a smooth fullscreen kiosk mode.

Or progressively using Electron’s features might have been better also. Electron can support more advanced features like accessing system resources directly.

Anyway, current structure is somewhat ambiguous. I was frightened.

I think MM needs to escape from the dependency of Electron. (Frankly, it is needed only for fullscreen kiosk front, not using any advanced benefits of Electron itself)
or at least modules need to use worker-threading or spawning child process which would be independent from Electron process environment to work with node’s native-modules.

Sorry for bothering you guys with my kinky ex-module.

The problem is; There is no server-pushed way to get current playback in RPI with spotify api.
So to get current playing data, frequent api callings are needed.

Possible solution under current condition is; removing some features - like progress bar, displaying playtime… So then too many requests are not needed.

In other platforms like desktop PC, Google Chrome has widevine/DRM so we can use “web playback api”, it can make direct playing spotify on browser level, and get playback data directly. But not possible in rpi natively.

Some hacks for widevine exist for RPI chromium, but our MM’s electron still miss that feature.

But! I’ve heard newest Electron(9.0) has a new Chromium(80? 83?) and it might have widevine supported (I haven’t tested yet, or never…)
I’m not sure it would be supported in rpi or not but if who has interest, worthy to try. If supported, you can build a new module which can play spotify directly without raspotify instead this poor module.

@soojh007
This? https://github.com/eouia/MMM-LunarDate/blob/master/README.md

@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.