MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    MMM-Embed URL centered on fullscreen_above?

    Scheduled Pinned Locked Moved Unsolved Troubleshooting
    12 Posts 3 Posters 89 Views 3 Watching
    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.
    • wishmaster270W Offline
      wishmaster270 Module Developer @sdetweil
      last edited by

      @sdetweil @bkeyport
      Hi… I’m here 😉

      Sorry, but I need some more information.
      Can you share your config and a screenshot which shows the current view and a hint what you want to achieve please?

      S BKeyportB 2 Replies Last reply Reply Quote 0
      • S Offline
        sdetweil @wishmaster270
        last edited by

        @wishmaster270 I think the requirements are here

        https://forum.magicmirror.builders/post/130079

        Don’t know config

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        1 Reply Last reply Reply Quote 0
        • BKeyportB Offline
          BKeyport Module Developer @wishmaster270
          last edited by BKeyport

          @wishmaster270

          Config stub:

                         {
                                  module: "MMM-EmbedURL",
                                  position: "fullscreen_above",
                                  classes: "camera1",
                                  config: {
                                          updateInterval: 0,
                                          animationSpeed: 0, 
                                          appendTimestamp: false,
                                          attibutes: [],
                                          embed: [
                                                  "http://192.168.0.7/picture/1/frame/"
                                          ],
                                  },
                          },
          

          2dc7cd57-7c0c-4b0c-94af-2cbbdf7382c2-image.png

          The camera stream should be centered left/right. The camera feed is 4x3. (scaled from 640x480 due to how I have to get the feed at this time) and will always stretch the vertical to 100%

          (note: screenshot isn’t actual screen resolution)

          The "E" in "Javascript" stands for "Easy"

          S 1 Reply Last reply Reply Quote 0
          • S Offline
            sdetweil @BKeyport
            last edited by

            @BKeyport also, you should be able to see the html element used to display the web view in the developers window elements tab and relocate it w css

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            BKeyportB 1 Reply Last reply Reply Quote 0
            • BKeyportB Offline
              BKeyport Module Developer @sdetweil
              last edited by

              @sdetweil Indeed, I can see it in develop mode, but everything I’ve tried has failed, which is why I’m here.

              The "E" in "Javascript" stands for "Easy"

              S wishmaster270W 2 Replies Last reply Reply Quote 0
              • S Offline
                sdetweil @BKeyport
                last edited by sdetweil

                @BKeyport I’m sure you need

                .MMM-EmbedURL Element-name {
                   position :absolute;
                   left:10vw;  /* move 10% towards the right +/
                }
                

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                1 Reply Last reply Reply Quote 0
                • wishmaster270W Offline
                  wishmaster270 Module Developer @BKeyport
                  last edited by

                  @BKeyport
                  Instead of setting the spacing with absolute values (like sam does) you can try to set the wrapper which contains the embedded elements to add equal spacing if the elements do not need the whole space.
                  The wrapper is a flexbox container:

                  .MMM-EmbedURL .embed .embededSubWrapper0 {
                    justify-content: center;
                  }
                  
                  BKeyportB 1 Reply Last reply Reply Quote 0
                  • BKeyportB Offline
                    BKeyport Module Developer @wishmaster270
                    last edited by

                    @wishmaster270 Doh! Was using the wrong css item.

                    <internally screaming at CSS>

                    The "E" in "Javascript" stands for "Easy"

                    1 Reply Last reply Reply Quote 0
                    • 1
                    • 2
                    • 2 / 2
                    • First post
                      Last post
                    Enjoying MagicMirror? Please consider a donation!
                    MagicMirror created by Michael Teeuw.
                    Forum managed by Sam, technical setup by Karsten.
                    This forum is using NodeBB as its core | Contributors
                    Contact | Privacy Policy