MMM-Scenes

[Norder]

Hello! Thank you for the amazing work you’ve done. The scenes module was exactly what I needed to pop my MM up a notch. I do have some questions, however.

How do you apply an expel/admit animation to specific modules only and not the whole scene?

Can you do this for transitions between specific scenes? i.e. pageDown animation if arriving from scene 2, pageUp if arriving from scene 3?

I’m wondering if there is a simple way to accomplish this, like an extra class tag within a module itself to call the animation type? My end goal is to have swipe gestures change scenes and have the animations change based upon the previous scene.

Thanks again!

[MMRIZE]

@Norder Thanks for your interesting. I’m on the holidays so cannot look inside deeply.
After return, I’ll reply you sorry.

[MMRIZE]

@Norder
You can do it with “custom animation function” https://github.com/MMRIZE/MMM-Scenes#--custom-animation-function
You can define specific animation and module which you want to apply, then describe it in the “scenario”. Ideally it’s all, but real-world sample i will show you in a week (after my return)

[MMRIZE]

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

[sdetweil]

@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?

[MMRIZE]

@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)

[sdetweil]

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

[Norder]

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