Lesson Learned: Updating HTML canvas module

[hoyski]

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

[strawberry 3.141]

@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