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

MMM-Scenes

Scheduled Pinned Locked Moved System
12 Posts 5 Posters 3.7k Views 5 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.
  • M Offline
    MMRIZE @Norder
    last edited by Aug 4, 2022, 11:10 PM

    @Norder

    To assign specific animation to the specific module, you can use “custom animation function” in your “scenario”.

    To specify the module, you can use module property in animation function. For example, you can use module.name , module.data.classes or module.data.position (or whatever you want) (https://docs.magicmirror.builders/development/core-module-file.html#available-module-instance-properties)

    config: {
      scenario: [
        {
          name: "scene1",
          expelAnimation: ({ module, moduleWrapper, duration }) => {
            if (module.name === 'clock') {
              return new Promise((resolve, reject) => {
                moduleWrapper.animate([
                  { transform: 'scale(1,1)', opacity: 1 },
                  { transform: 'scale(10, 10)', opacity: 0 }
                ], { duration }).onfinish = resolve
              })
            } else {
              return new Promise((resolve, reject) => {
                moduleWrapper.animate([
                  { transform: 'scale(1, 1)', opacity: 1 },
                  { transform: 'rotate(-360deg) scale(0, 0)', opacity: 0 }
                ], { duration }).onfinish = resolve
              })
            }
          }
        },
        {
          name: "scene2"
        }
      ]
    }
    

    Well, this example looks not so simple, I hope you can follow it.

    S N 2 Replies Last reply Aug 4, 2022, 11:47 PM Reply Quote 0
    • S Offline
      sdetweil @MMRIZE
      last edited by Aug 4, 2022, 11:47 PM

      @MMRIZE said in MMM-Scenes:

      expelAnimation: ({ module, moduleWrapper, duration })

      javascript programming question

      why do you use {} around the function parms? usually this creates an object, which same labeled properties

      but you don’t use them like properties of an object in the function

      what extra value did u get from the braces?

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      M 1 Reply Last reply Aug 5, 2022, 12:01 AM Reply Quote 0
      • M Offline
        MMRIZE @sdetweil
        last edited by MMRIZE Aug 5, 2022, 12:34 AM Aug 5, 2022, 12:01 AM

        @sdetweil

        let x = {
          foo: 123,
          bar: 456,
          baz: "please don't touch me"
        }
        
        function A (obj) {
          console.log(obj.foo)
          console.log(obj.bar)
          // obj.baz = 'oops I did it again"
        }
        
        function B (Foo, Bar) {
          console.log(Foo)
          console.log(Bar)
          // safe for .baz or object itself
          // However, you must keep the order and number of parameters.
        }
        
        function C ({bar, foo}) { 
          console.log(foo)
          console.log(bar)
          // safe for .baz or object itself
          // You don't need to keep the order and number of parameters.
        }
        
        function C2 (obj) {
          let {bar, foo} = obj
          console.log(foo)
          console.log(bar)
          // obj.baz = 'oops I did it again'
        }
        
        
        
        A(x)
        B(x.foo, x.bar)
        C(x)
        C2(x)
        
        S 1 Reply Last reply Aug 5, 2022, 12:12 AM Reply Quote 0
        • S Offline
          sdetweil @MMRIZE
          last edited by Aug 5, 2022, 12:12 AM

          @MMRIZE thanks, I had not seen anonymous object before., or the hidden object property

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          1 Reply Last reply Reply Quote 0
          • N Offline
            Norder @MMRIZE
            last edited by Aug 13, 2022, 8:57 PM

            @MMRIZE

            Thank you for your quick reply!

            I really appreciate you taking the time to provide an example for me to work with. Most of this makes sense, despite my lack of programming skills.

            Can I use the predefined PageDown animation within the custom definition? I’d like to avoid having to remake animations you’ve already provided.

            My other question is how do I set temporary identifiers to the modules so the correct animation gets pulled? I don’t think module name or classes alone will work since I need the identifier to change based upon scene selection. Nor do I want to load multiple instances of the modules as I’m already pushing the heat up a bit. Please forgive my ignorance here, I’m sure it’s already well documented, I just don’t know where to begin.

            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