[MMM-EmbedURL] Embed one or multiple websites to the mirror

[wishmaster270]

Description:

There are already a lot of modules out there that provide support to embed different other websites like MMM-EmbedYoutube or MMM-GrafanaChart. Most of them simply rebuild the URL they should display by some information the users configure and embed the content with i a IFrame.
If the pages do not support embedding and the build in electron browser is used modules like MMM-WebView can be used to embed the content.

BUT:
I needed a module that allows me to embed multiple panels of my Grafana installation, maybe a Webcam that is visible on a webpage and my NodeRED dashboard at different positions and/or pages of my mirrors.
Wherever possible i wanted to use IFrame but needed Webview for NodeRED.

As there was module that supports embedding different sites with different parameters i created this one.

The module supports multiple instances and is able to add css classes to the different instances. This way different styling for the instances is possible.
As the module it self uses Flexbox-Layout styling is highly possible without fix tables.

If you can not use webview (cause you do not use the electron browser) the Readme contains some information about extensions for Firefox and Chrome Browser that will remove the headers preventing the websites to be embedded and do an automatic cookie consent.

Screenshots:

Download:

Download
[card:Tom-Hirschberger/MMM-EmbedURL]

---

Version 0.0.9

• removed unused node_helper.js (thanks to @sdetweil)
• added configs to make it possible to configure the module with MMM-Config (thanks to @sdetweil)

Version 0.0.8

• introducing the updateDomOnResume option. If you do not want the html elements to be recreated when the module is shown after it was hidden you can set this option to false now.

Version 0.0.7

• changed the way attributes get handled
• introducing a new code style (thanks to @KristjanESPERANTO) and fixed all ESLint issues

Version 0.0.6

• add a new function to the module which periodically checks if the content of embedded img elements is decodeable. If not the src URL is removed and set again to reload the image. The feature can be activated by setting a interval in seconds in the configuration with the new option imgDecodeCheckInterval.
• fixed all issues reported by the new automatic module scanning script developed by @KristjanESPERANTO

Version 0.0.5

• Added new option appendTimestamp which controls if a current timestamp is added to each URL. This is to avoid caching issues.

Version 0.0.4

• automatic refresh now can be disabled by setting updateInterval to 0 or lower
• the default basicElementType changed from “span” to “div” as i.e. “webview” does not work properly with “span”

Version 0.0.3

• added support of Iconify icons
• All CSS definitions are now prefixed with the main class of the module (MMM-EmbedURL)

Version 0.0.2

• Fixed attributes with value “0” being added without value in some cases

Version 0.0.1

• embed one or multiple other websites
• choose how often the websites should be refreshed (all at once)
• choose which websites should be displayed if different profiles are active
• set custom attributes to the elements that include the websites
• choose which HTML element should be used to embed the websites (normally iframe or webview)
• add icons and/or titles before or after the embedded websites
• icons can be either images or Font Awesome 4.7 icons
• the order the icons/titles/elements will be added can be configured
• different options can be configured for different websites by nesting embed elements

[KamiSchami]

@wishmaster270 great modul and nice webcam ;-)

[Egnos]

Great job @wishmaster270!
Thanks.

[SiDuMo]

I really enjoy the module :)
One thing I figured out and which might be nice to add to the git manual:

You can invert the colors of websites though CSS styling.
This will make white background black and looks nice at the mirror.

Add to your custom.css:

.MMM-EmbedURL {
  filter: invert(100%);
}

Enjoy!