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

Need Help Changing Background Image Based on Time

Scheduled Pinned Locked Moved Solved Troubleshooting
16 Posts 4 Posters 2.5k Views 4 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.
  • S Away
    sdetweil @tonkxy
    last edited by Sep 30, 2021, 11:13 PM

    @tonkxy u need to update the url before u call updatedDom()

    Sam

    How to add modules

    learning how to use browser developers window for css changes

    1 Reply Last reply Reply Quote 1
    • M Offline
      MMRIZE @tonkxy
      last edited by Sep 30, 2021, 11:38 PM

      @tonkxy

      start: function () {
        this.timer = null
        this.targetURL = null
        this.setImageURL()
      },
      
      getDom: function () {
        console.log(">", this.targetURL)
        var dom = document.createElement('div')
        dom.style.backgroundImage = `url(${this.targetURL})`
        dom.style.height = '100vh' // I recommend to control this through CSS, but in this example, I just hardcode it.
        dom.style.width = '100vw'
        dom.style.backgroundSize = 'cover'
        return dom
      },
      
      notificationReceived: function (notification, payload, sender) {
        if (notification === 'DOM_OBJECTS_CREATED') {
          this.job()
        }
      },
      
      
      job: function () {
        clearTimeout(this.timer)
        this.updateDom()
        this.setImageURL()
        this.timer = setTimeout(() => {
          this.job()
        }, this.config.updateInterval)
      },
      
      setImageURL: function () {
        // do your logic for picking image. Here I pick the random unsplash image instead for example.
        let rand = Math.floor(Math.random() * 100000)
        this.targetURL = `https://source.unsplash.com/random?seed=${rand}`
      }
      
      S 1 Reply Last reply Oct 1, 2021, 12:04 AM Reply Quote 1
      • S Away
        sdetweil @MMRIZE
        last edited by Oct 1, 2021, 12:04 AM

        @mmrize said in Need Help Changing Background Image Based on Time:

        job: function () {
        clearTimeout(this.timer)
        this.updateDom()
        this.setImageURL()

        still backwards.
        update url,
        then call updatedDom,
        which calls getDom
        which uses the url

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        M 1 Reply Last reply Oct 1, 2021, 8:11 AM Reply Quote 1
        • T Offline
          tonkxy
          last edited by tonkxy Oct 1, 2021, 12:29 AM Oct 1, 2021, 12:29 AM

          @MMRIZE @sdetweil
          Thank you both so much! That did work by the way! It worked once I moved the dom AND I was missing Module: (name), which is just dumb on my part. I appreciate the help and for solving my issue with this!!!

          Question, do you guys have a favorite beginners place for Magic Mirror? I feel I am missing some fundamentals and would love to take a recommendation.

          S E 2 Replies Last reply Oct 1, 2021, 12:35 AM Reply Quote 0
          • S Away
            sdetweil @tonkxy
            last edited by sdetweil Oct 1, 2021, 12:42 AM Oct 1, 2021, 12:35 AM

            @tonkxy really no design type stuff

            you can look at my sample module which does all this…
            https://github.com/sdetweil/SampleModule

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            1 Reply Last reply Reply Quote 1
            • M Offline
              MMRIZE @sdetweil
              last edited by Oct 1, 2021, 8:11 AM

              @sdetweil
              First url was set in start(), so I put that next of update in recursive.

              S 1 Reply Last reply Oct 3, 2021, 11:34 AM Reply Quote 0
              • E Offline
                easty @tonkxy
                last edited by Oct 2, 2021, 6:34 PM

                @tonkxy

                Time based background is a great idea. Are you planning on releasing this as a module?

                T 1 Reply Last reply Oct 3, 2021, 6:57 PM Reply Quote 0
                • S Away
                  sdetweil @MMRIZE
                  last edited by Oct 3, 2021, 11:34 AM

                  @mmrize ok. my experience and training on maintaining software teaches me never to do this. you have two places where state is set.

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

                  M 1 Reply Last reply Oct 3, 2021, 2:58 PM Reply Quote 0
                  • M Offline
                    MMRIZE @sdetweil
                    last edited by Oct 3, 2021, 2:58 PM

                    @sdetweil you are right. It was just an example. :)

                    1 Reply Last reply Reply Quote 0
                    • T Offline
                      tonkxy @easty
                      last edited by Oct 3, 2021, 6:57 PM

                      @easty i am! Im going to integrate it with weather conditions. It’ll have a gif background that resembles the time of day / condition. Ill be adding in overlays for hrly breakdowns, 5 day etc.

                      M 1 Reply Last reply Oct 3, 2021, 7:08 PM Reply Quote 0
                      • 1
                      • 2
                      • 1 / 2
                      1 / 2
                      • First post
                        10/16
                        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