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

My desktop clock? calendar? whatever…

• RPI 4B
• 1920x480 Touch LCD /w case unit from AliExpress.

with some modules modification and scripts, it could become a 9to5 office gadget.

I need some more angled plugs for a better look, anyway 90% done.

@arora1mayank
You cannot make any commercial benefit with GA SDK. it is not allowed.
https://developers.google.com/assistant/sdk/overview

@magmirusr
Idk alexa, but for google assistant embeded machine(e.g. home mini) you can do that already. So I think ideally possible with alexa. Just no one have had interest in it to imply.

@arora1mayank
What’s the definition of AR? What do you want to accomplish ?

@suvan
I think it’s possible with MMM-GoogleTTS, MMM-NotificationTrigger and cron

cron

0 8 * * *  curl --data "notification=YELL_TIME" http://localhost:8080/webhook

This is an example of a daily 8 am execution.

MMM-NotificationTrigger

{
  module: "MMM-NotificationTrigger",
  config: {
    useWebhook:true,
    triggers:[
      {
        trigger: "YELL_TIME",
        fires: [
          {
            fire:"TTS_SAY",
            payload: function(payload) {
              return {
                content: "It is " + new Intl.DateTimeFormat("en-US", { dateStyle: "long", hour: "numeric", dayPeriod: "long" }).format(new Date())
              }
            },
          },
        ],
      },
    ]
  }
},

MMM-GoogleTTS
whatever…

I haven’t tested this on real machine.

Instead of direct using cron, you can use MMM-ScriptScheduler or MMM-ModuleScheduler. I believe when you are using MMM-ModuleScheduler, MMM-NotificationTrigger might not be needed.

@magmirusr

case "CASE_1":
  scrape("...").then((text) => {
    this.sendSocketNotification("text", text)
  })
  break

Or

case "CASE_1"
  const AsyncJob = async () => {
    var text = await scrape("...")
    this.sendSocketNotification("text", text) 
  }
  AsyncJob()
  break

@pillaresci

I’m trying to modify the weather module for my location (North Carolina instead of New York). I replaced the openweather ID and API key in the config file but when I start up Magic Mirror that module is stuck on “loading” so I am assuming I’ve done something wrong. At a minimum would just like to get that working,

You can post your configuration (entire contents or just the parts of weather module). We can check what was wrong.

try to have the calendar pull from my work, Office 365 calendar (working on a method I found through here were I import it into Google Calendar and then go from there)

The first to do is find the iCal(*.ics) feed URL of your target calendar service.

add modules (haven’t figured out which ones yet, but the link provided below on adding modules looks to be helpful)

Usually, module developers provide how-to-install (README.md) document in their module repository.

however, what isn’t clear is how I stop that? If I remove the raspberry pi to add modules or make changes, how do I get out of the Magic Mirror (control Q?).

It depends on what method you use. I assume you are using pm2 to manage MM’s running. You can connect MM remotely. After connection, type pm2 stop all, it will stop current MM’s execution.

@karsten13
I’ll make a PR in a few days. I just need some assurances. :)

@bkeyport said in [Proposal] Enhanced Translator:

So, let me get this straight, we’re getting international support within vanilla JS?

Well, it’s not about a matter of using Vanilla JS or not. But briefly answered, “possible”.
The main point of this project is;
“Give more freedom to the translation providers and Reduce the burden from the module developers.”
This will not become the alternative of “momentJS”. The main algorithm for WHAT TO SHOW still should be done in the module. But the translation provider could have more freedom for HOW TO SHOW under specific language and locale.