Mikhus / canvas-gauges

HTML5 Canvas Gauge. Tiny implementation of highly configurable gauge using pure JavaScript and HTML5 canvas. No dependencies. Suitable for IoT devices because of minimum code base.
http://canvas-gauges.com/
MIT License
1.57k stars 396 forks source link

Total canvas memory exceeds the maximum limit (224mb) #177

Closed RitterD closed 5 years ago

RitterD commented 6 years ago

Hi,

I'm using your cancas gauges to visualize temperature and rpm of a sensor. When the canvas gauges reaches 224mb the gauges vanishes and the app stops working a bit later.

Is it possible to extend the memory or clear the cash? Would be sad to to step back to progressbars because the gauges looking realy professional...

bildschirmfoto 2018-10-11 um 14 35 13

This error occurs first in the linear and then in the radial gauge.

I'm running tests on an iPhone latest version (12.0). Thank you very much in advance.

avijeetnpi commented 6 years ago

Try not to debug(disconnect USB cable) and repeat what you are doing. It should work!

RitterD commented 6 years ago

sorry for not responding so far. I tryed it without debugging as well on iOS and Android same result... Did you face the same problem @avijeetnpi ?

avijeetnpi commented 6 years ago

@RitterD Interesting!! This problem went away when I was not debugging. I ended up calling the update function for gauge to update the data. If you are calling the new RadialGauge to update then this problem will happen as cache is not being cleared(my assumption) and Gauge is being redrawn on the canvas. Update method doesn't redraw on canvas so it effective method in saving memory.

Declare var gaugeRef = null as global variable.

if (gaugeRef === null) { gaugeRef = new RadialGauge({ renderTo: 'xyzdiv', value : 10

            }).draw();
        }

else{ gaugeRef.update({ value: 12 }); }

If this code doesn't work for you, please share your code and I'll help you out. I have invested lot of time in this gauge so have good idea about lot of things.

Mikhus commented 6 years ago

Hi, guys. Sorry for been so late on your thread, but here are my thoughts. First of all you should never instantiate gauge more than once per canvas element. Once gauge is instantiated you can access it via document.gauges collection. There is no actual need to define a global var. All gauges always available through a gauges collection on your document. And yes, when you need to redraw a gauge (even in case you want to modify its look-and-feel) update() function is a right place to go with. It was especially designed for this purpose. By the way if you need to update value only there is no need to do more than gauge.value = newValue.

avijeetnpi commented 6 years ago

@Mikhus Yup, I agree with your opinion. I am using this gauge as a component in Vue in a Cordova app and gauge instance is lost when I move to other page so that's why had to draw the gauge every time when user navigates to the gauge page. Can you share something more about how to make it perform better as if in my case user keeps navigating to and fro between different pages, eventually gauges will disappear in 5-6 hours(Worst case Scenario)

avijeetnpi commented 6 years ago

@Mikhus I just realized you are the one who created this gauge library. lol! Thanks for the wonderful gauges and ability to customize them!! I love them!!!

RitterD commented 6 years ago

@avijeetnpi I'm also using the cordova framework.

Thank you very much for your support. I'll try this out when I'm back in the office on monday and report you.

I opend a stackoverflow thread as well you can finde a minimum of a code example there:

https://stackoverflow.com/questions/52778772/total-canvas-memory-exceeds-the-maximum-limit-224mb

Mikhus commented 6 years ago

Thank you, guys, for a kind words. I'll take a look at example code once I'll be in front of my PC

Mikhus commented 6 years ago

Another point here that to avoid memory leakage on SPA application you would need to destroy gauge instance properly when your component with gauge is unmounted off the page. Use gaugeInstance.destroy() for that purpose...

avijeetnpi commented 5 years ago

Yup, gaugeInstance.destroy() is the key in SPA!!! I call it in beforeDestroy event in VueJS.