MMM-CustomElementTime

MMRIZE

MMM-CustomElementTime

As always, the manual is longer than the codes. What’s wrong with my modules.

Author: Seongnoh Sean Yi eouia0819@gmail.com
Repository : https://github.com/MMRIZE/MMM-CustomElementTime
Version: 1.0.0 (2021-09-24)

I. Motivation & Concept

Tons of MM modules have been handling time-related stuff for many years. A module developer needs to implement his logic to display “in 5 minutes” or “Friday, 25. December”. Yup. It looks pretty straightforward at first glance until considering customizability or localization features. There was a relatively easy solution like momentJS. But now we are facing of deprecation of momentJS. Maybe luxon would be the best alternative, but…

JavaScript environment is evolving every day so fast. Now we can obtain brand new(Frankly, they have existed for several years already) weapons - Custom Element and Intl. I think these new features will change (and is changing) the whole things of Javascript applications, including MagicMirror.

This MM module gives the custom element <mm-time>, which can display time in the MM screen anywhere.

This module is not just for average users, and even more, it is a THING for developers. However, even ordinary users can use this tag wherever they want, and HTML is allowed. For example, you can put this <mm-time> tag in the helloworld module to display your custom world-clocks or event countdown.

For the developer; you can use this tag to reduce your code and not worry about handling displaying time. With just inserting <mm-time> into your module’s screen output, you don’t need to make logic for taking time-related stuff by yourself. Additionally, this tag can give more than your expectation.

This module and custom tag <mm-time> is made with only pure Javascript. Without momentJS or something 3rd Party dependency, probably you can handle the time how to show, I hope. (But the calculation of time is a different perspective.)

Features summary

You can get <mm-time> custom element (a.k.a web components), which enables to display time with these features;

self-redraw
alarm
locale/language-aware
relative-humanized
customizable
programmable/controllable in other modules
shoot-and-forget about time manipulating.
without 3rd party library/dependency
placable anywhere HTML is allowed

More Details;
https://github.com/MMRIZE/MMM-CustomElementTime

sdetweil

@mmrize angular has had support for custom tags for a long time.

MMRIZE

@sdetweil right. Anyway we will not rewrite mm with angular or vue. :) (I prefer vue)

cowboysdude

@mmrize if you’re talking about time you can just do that with straight ol vanilla js …

          var DateDiff = {
                inDays: function(d1, d2) {
                    var t2 = d2.getTime();
                    var t1 = d1.getTime();
                  return parseInt((t2 - t1) / (24 * 3600 * 1000));
                },
            }

I use that in my upcoming Holiday module to get days left until a particular holiday

If you’re looking for days left kind of thing. I know you can do this for other time variables such as minutes, seconds, etc.

sdetweil

@cowboysdude he is proposing a new html tag that will produce the content in a consistent way with the new time apis(not moment), so only have to write it once, and everybody benefits

MMRIZE

@cowboysdude
Yup, Every developer can implement his own logic to display time-related stuff. And hundreds of MM modules are there, so hundreds of implementations are existing also, just to display “in 15 days”.
I think it is a kind of waste. So I propose a reusable common HTML tag anyone can use anywhere.

But the most benefit of this custom tag is, in my thought, Customizability and Locale-awareness separated from the module itself. Logic-neutral HTML tag could give the ability of easier user-customization without the developer’s effort. That is the purpose of this custom tag.