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 87 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.
    • 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