• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
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 454 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 Nov 13, 2024, 3:53 AM

    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 Nov 13, 2024, 1:20 PM Reply Quote 0
    • S Offline
      sdetweil @ChrisLeduex
      last edited by Nov 13, 2024, 1:20 PM

      @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 Nov 13, 2024, 5:58 PM Reply Quote 0
      • S Offline
        sdetweil @ChrisLeduex
        last edited by sdetweil Nov 13, 2024, 1:22 PM Nov 13, 2024, 1:22 PM

        @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 Nov 13, 2024, 5:58 PM

          @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 Nov 13, 2024, 6:10 PM Reply Quote 0
          • S Offline
            sdetweil @ChrisLeduex
            last edited by Nov 13, 2024, 6:10 PM

            @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 Nov 14, 2024, 5:12 AM

              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 Nov 18, 2024, 9:11 PM

                @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 Nov 19, 2024, 9:20 PM Reply Quote 0
                • S sdetweil has marked this topic as solved on Nov 19, 2024, 1:25 PM
                • C Offline
                  ChrisLeduex @JohnGalt
                  last edited by Nov 19, 2024, 9:20 PM

                  @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 Nov 20, 2024, 1:09 AM Reply Quote 0
                  • J Offline
                    JohnGalt @ChrisLeduex
                    last edited by Nov 20, 2024, 1:09 AM

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

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