StringFPSTracker Module

Description

The StringFPSTracker module in the StringTune library provides real-time FPS (frames per second) tracking and displays the information on the screen. This utility is useful for debugging and monitoring the performance of your application.

How It Works

• Frame Count Tracking: The module counts the number of updates (frames) occurring within each second.
• On-Screen Display: Displays the FPS count in a fixed position on the screen.
• Non-Attribute Based: Unlike other modules, this one does not rely on HTML attributes for configuration but instead directly attaches to StringTune.

Integration

1. Import and Initialization

import { StringTune } from './StringTune/StringTune';
import { StringFPSTracker } from './StringTune/Modules/StringFPSTracker';

const stringModule = StringTune.getInstance();

stringModule.use(StringFPSTracker);

stringModule.start(60); // Start the library

Display Details

On-Screen FPS Counter

The FPS counter is displayed in the bottom-right corner of the viewport by default. It is styled dynamically using a combination of inline styles and a custom <style> block:

Example Display

[data-fps] {
  position: fixed;
  bottom: 10px;
  right: 10px;
  background-color: #C8C2CF;
  border: 1px solid #101214;
  color: green;
  z-index: 1000;
  font-family: Arial, sans-serif;
  font-size: 12px;
  padding: 2px 8px;
}

[data-fps]::after {
  content: attr(fps);
  color: #101214;
}

Advanced Functionality

FPS Value Emission

Although the module primarily updates the on-screen counter, you can extend its functionality by accessing or modifying the callCount in the onUpdate method or integrating custom logic in the onStart or destructor lifecycle methods.

Frequently Asked Questions

1. Can I reposition the FPS display?

Yes, modify the this.displayElement.style properties in the createDisplayElement method to change the position or style of the FPS display.

2. Can I stop the FPS tracking dynamically?

Yes, you can call the destructor method to stop the tracking and remove the display from the DOM:

stringModule.use(StringFPSTracker);
const fpsTracker = stringModule.getModule(StringFPSTracker);
fpsTracker.destructor();

3. How can I integrate the FPS data into my custom logic?

You can extend the onUpdate method to capture the callCount for your application-specific needs or emit the FPS values as events.

This documentation is designed for efficient integration and clear understanding of the StringFPSTracker module. Let me know if additional examples or clarifications are needed!