MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord

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

    Utilities
    4
    4
    481
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • wishmaster270
      wishmaster270 Module Developer last edited by 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:

      SomeGrafanaPanels.png

      webcam.png

      Download:

      Download


      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 1 Reply Last reply Reply Quote 2
      • KamiSchami
        KamiSchami @wishmaster270 last edited by

        @wishmaster270 great modul and nice webcam 😉

        Real programmers never work 9 to 5. If they are around at 9 AM, it's because they were up all night.

        1 Reply Last reply Reply Quote 0
        • E
          Egnos last edited by

          Great job @wishmaster270!
          Thanks.

          My Mirror https://forum.magicmirror.builders/topic/17262/the-raspimirror-was-born/7

          1 Reply Last reply Reply Quote 0
          • S
            SiDuMo last edited by

            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!

            1 Reply Last reply Reply Quote 1
            • 1 / 1
            • First post
              Last post
            Enjoying MagicMirror? Please consider a donation!
            MagicMirror created by Michael Teeuw.
            Forum managed by Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
            This forum is using NodeBB as its core | Contributors
            Contact | Privacy Policy