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

Fade-in/Fade-out with Electron

Scheduled Pinned Locked Moved Development
6 Posts 3 Posters 3.7k 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.
  • B Offline
    Beh
    last edited by Aug 5, 2016, 8:58 AM

    Hi,
    I’m currently building my own mirror. I’ll start building the frame tomorrow.
    I’m also writing a module which will give you current information for public transport departures in Berlin and Brandenburg (using the HAFAS realtime data by VBB).
    For the list with the departures I’d like to fade the old list items out and the new items in, so that there is some kind of “rolling” effect.

    It should look something like this when the module gets updated:

    (time) (list item)
    -2min item1 <------ fade out
    -1min item2 <------ fade out
    now item3
    +1min item4
    …
    +9min itemX
    +10min itemY <----- fade in

    Does Electron have such a feature? Or can I just import jQuery and use the fadeIn() and fadeOut() from there? Or does anyone of you has an idea which node framework provides such UI features?

    Thanks and Greetings
    Beh

    S 1 Reply Last reply Aug 5, 2016, 9:04 AM Reply Quote 0
    • S Offline
      strawberry 3.141 Project Sponsor Module Developer @Beh
      last edited by Aug 5, 2016, 9:04 AM

      @Beh do you want something like this?

      then you can have a look in here, credits go to @ianperrin

      Please create a github issue if you need help, so I can keep track

      1 Reply Last reply Reply Quote 0
      • B Offline
        Beh
        last edited by Aug 5, 2016, 9:13 AM

        @strawberry-3-141
        Yeah, after digging the code, I think that is what I was looking for :=)
        I didn’t think it was THAT easy ^^’
        Thank you very much!

        1 Reply Last reply Reply Quote 0
        • S Offline
          strawberry 3.141 Project Sponsor Module Developer
          last edited by Aug 5, 2016, 9:17 AM

          especially have a look at the following lines https://github.com/fewieden/MMM-soccer/blob/046346597ca7b1429b0a1f6e6c55c8f0624373a7/MMM-soccer.js#L169

          Please create a github issue if you need help, so I can keep track

          1 Reply Last reply Reply Quote 0
          • B Offline
            Beh
            last edited by Aug 5, 2016, 9:29 AM

            yes, already got them :) thanks!

            Do I have to mark this topic as solved? (And if yes, how?) Or is this done by the admins?

            1 Reply Last reply Reply Quote 0
            • I Offline
              ianperrin
              last edited by Aug 5, 2016, 11:26 AM

              and also take a look at https://github.com/MichMich/MagicMirror/blob/develop/modules/default/weatherforecast/weatherforecast.js#L142 - this is where the MMM-soccer fade functionality was derived from

              credits to @MichMich and the MM team :)

              "Live as if you were to die tomorrow. Learn as if you were to live forever." - Mahatma Gandhi

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