Search code examples
javascriptstatisticscustomizationpanel

What is a custom panel and how do you use it in stats.js?

Stats.js often says something about a 3+ panel support for custom panels. What do they mean for custom panel and how do you use it? I searched through many wikis and found no answer. Stats.js is a Javascript library that allows you to easily embed a performance monitor on your website. Here is the Github Repository.

Solution

  • I noticed no one was able to answer this question, so I just figured it out myself. The addPanel() allows you to pass in one argument to add in a panel into the performance monitor. It is a panel object. The syntax to create a panel object is:

    var panel = new Stats.Panel("name", "color1", "color2");

    Using this method you can add in a panel as the following:

    var panelVar = addPanel( new Stats.Panel( 'name', 'color1', 'color2' ) );

    Here is an example:

    var fpsPanel = addPanel( new Stats.Panel( 'FPS', '#0ff', '#002' ) );

    Next, configuring the panel to show what it wants to show, you have to add-in a your code that configures the panel each frame. To do this you have to run your code in the format panelVar.update(a, b) where a is the amount in the top of the ratio and b is in the bottom. a / b will give the percentage that was shown. You have to run this code between stats.begin() and stats.end() inside the animation frame function.