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

Lesson Learned: Updating HTML canvas module

Scheduled Pinned Locked Moved Development
2 Posts 2 Posters 1.4k Views 2 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.
  • H Offline
    hoyski
    last edited by Mar 19, 2017, 1:13 PM

    Hello All -

    I wanted to share something I figured out yesterday in the hopes that this info may be useful to a future developer.

    My module does all of its rendering onto an HTML canvas. The problem I had was that the module would never update after its initial display. In the start function my module calls setInterval() to have it call updateDom() periodically. I saw my log statements from my module’s getDom() function every update so I presumed all was good. Once my mirror had been running for days on end, however, without me fiddling with it I noticed that my module’s display wasn’t updating. (My module displays the planets’ locations so the display changes very slowly.)

    The root cause of the problem was that my module returned the exact same HTML on every invocation of getDom(). Basically, <div>< canvas>< /canvas></div> . When MM’s updateDom() fires for a module, it calls the module’s getDom() function. It then compares the HTML that was returned against what was previously displayed and only updates the display if there’s a difference. Since the differences from one update to the next in my module are drawing commands buried inside the canvas object, MM didn’t see that the module had changed so it didn’t update the display.

    My solution was to add an id attribute to the canvas object with the current time in the id’s value. Now the HTML is different each time getDom() is called so the display updates.

    Searching the forum I didn’t see that anyone else had come across this but I may have missed something. If there’s a better way I could have resolved this issue please let me know.

    Thanks,
    Dave

    S 1 Reply Last reply Mar 19, 2017, 1:51 PM Reply Quote 0
    • S Offline
      strawberry 3.141 Project Sponsor Module Developer @hoyski
      last edited by strawberry 3.141 Mar 19, 2017, 1:52 PM Mar 19, 2017, 1:51 PM

      @hoyski you’re not the first who came across this issue, but using id for timestamps isn’t that nice. I would use a different attribute for it.

      Imagine more modules would do this depends on what youre using for the timestamp a user could end up with two modules trying to use the same id for different modules

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

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