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.

    Adding background image to analog clock.

    Scheduled Pinned Locked Moved Solved Troubleshooting
    10 Posts 3 Posters 451 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.
    • C Offline
      ChrisLeduex
      last edited by

      Hello, I’m trying to add a svg image to the default analog clock module in a way that will allow me to change it’s color along with the other elements using custom.css.

      However the problem is the image hides part of the clock hands and I can’t figure how to fix it. Any suggestions?

      Here’s my entry in the custom.css file:

      .clock-face {
      .clock-face {
        -webkit-mask: url('apple-fresh-fruit-svgrepo-com.svg') center/cover no-repeat;
        mask: url('apple-fresh-fruit-svgrepo-com.svg');
        display: block;
        margin: auto;
        margin-top: 60px;
        height:45%;
        width: 45%;
        background:var(--use_color);
      }
      

      20241111_18h07m53s_grim.png

      J 1 Reply Last reply Reply Quote 1
      • C Offline
        ChrisLeduex
        last edited by

        I found a way to make this work, though it’s not the cleanest.

        1:
        In the clock.js file I add these lines to the bottom of these sections:

        /************************************
        * Create wrappers for analog and digital clock
        */
        const analogBackground = document.createElement("div");
        analogBackground.className = "clock-grid-background";
        
        /****************************************************************
        * Create wrappers for ANALOG clock, only if specified in config
        */
        clockFace.appendChild(analogBackground);
        

        2:
        Added this section to the clock_styles.css:
        Note the “z-index: 0;”

        .clock-grid-background {
          position: absolute;
          display: block;
          z-index: 0;
        }
        

        I then added “z-index: 99;” to the following sections to make sure they stay on top:
        .clock-circle
        .clock-face
        .clock-face::after
        .clock-hour
        .clock-minute
        .clock-second

        Added this code to the custom.css file:

        .clock-grid-background {
          -webkit-mask: url('apple-fresh-fruit-svgrepo-com.svg') center/cover no-repeat;
          //mask: url('apple-fresh-fruit-svgrepo-com.svg');
          display: block;
          margin: auto;
          margin-top: 60px;
          margin-left: 65px;
          height: 120px;
          width: 120px;
          background-color: var(--use_color);
        }
        
        S 2 Replies Last reply Reply Quote 0
        • S Offline
          sdetweil @ChrisLeduex
          last edited by

          @ChrisLeduex cool. you should submit that as an enhancement

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          C 2 Replies Last reply Reply Quote 0
          • S Offline
            sdetweil @ChrisLeduex
            last edited by sdetweil

            @ChrisLeduex is z-index:99 below above? so would be hidden by module in fullscreen_above. don’t want them peeking thru

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            1 Reply Last reply Reply Quote 0
            • C Offline
              ChrisLeduex @sdetweil
              last edited by

              @sdetweil Larger numbers sit on top of smaller numbers. In this case I wanted to make sure the svg image was always underneath the clock face/hands (z-index: 0) and the clock hands were always on top (z-index: 99). I could have used ‘z-index: 0’ and ‘z-index: 1’ instead but picked a larger number just to be sure the clock is always on top of anything else that might get added.

              I’m still working on it because I’d like to have a solution that doesn’t require any code changes to the module files. I’d like something that only requires using the custom.css file.

              20241113_07h50m20s_grim.png

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

                @ChrisLeduex cool, it was just a question of implementation checking… good work

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                1 Reply Last reply Reply Quote 0
                • C Offline
                  ChrisLeduex @sdetweil
                  last edited by

                  Sorry @sdetweil, this is my first MM project and I have no idea what I’m doing. So I didn’t understand that “fullscreen_above” was a position option for modules.

                  In the screen shot below I left my clock the same as before with ‘z-index: 0’ on the apple and ‘z-index: 99’ on all the other classes of the clock. I then set my calendar module to “fullscreen_above” to see what would happen.

                  Not easy to see in the screen shot but all of the components of the clock that have a z-index are on top of the calendar and the date which doesn’t have any z-index values is underneath the calendar. So it would appear that any z-index value, even 0, puts those components on top of “fullscreen_above”. So yes, it should be used carefully because it will peek through.

                  {
                  	module: "clock",
                  	position: "top_left",
                  	config: {
                  		displayType: "analog",
                  		displaySeconds: false,
                  	}
                  },
                  {
                  	module: "calendar",
                  	header: "US Holidays",
                  	position: "fullscreen_above",
                  	config: {
                  		calendars: [
                  			{
                  

                  20241113_20h57m47s_grim.png

                  1 Reply Last reply Reply Quote 0
                  • J Offline
                    JohnGalt @ChrisLeduex
                    last edited by

                    @ChrisLeduex – Interesting exercise. Where did you put the .svg image[s]? In with the clock faces in the module folder? In the module folder root? Other?

                    C 1 Reply Last reply Reply Quote 0
                    • S sdetweil has marked this topic as solved on
                    • C Offline
                      ChrisLeduex @JohnGalt
                      last edited by

                      @JohnGalt I just put them directly in the CSS folder with the custom.css file while I was testing everything. But they can certainly go wherever you like based on how you organize stuff.

                      J 1 Reply Last reply Reply Quote 0
                      • J Offline
                        JohnGalt @ChrisLeduex
                        last edited by

                        @ChrisLeduex – OK, thanks. I wasn’t sure that the url path went anywhere in particular.

                        1 Reply Last reply Reply Quote 0
                        • 1 / 1
                        • 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