FpsWidget (Experimental)

Displays the measured frames per second (FPS) as reported by the attached Deck instance.

JavaScript

import {Deck} from '@deck.gl/core';
import {_FpsWidget as FpsWidget} from '@deck.gl/widgets';
import '@deck.gl/widgets/stylesheet.css';

new Deck({
  widgets: [
    new FpsWidget({placement: 'top-left'})
  ]
});

TypeScript

import {Deck} from '@deck.gl/core';
import {_FpsWidget as FpsWidget} from '@deck.gl/widgets';
import '@deck.gl/widgets/stylesheet.css';

new Deck({
  widgets: [
    new FpsWidget({placement: 'top-left'})
  ]
});

React

import React from 'react';
import DeckGL from '@deck.gl/react';
import {_FpsWidget as FpsWidget} from '@deck.gl/widgets';
import '@deck.gl/widgets/stylesheet.css';

function App() {
  return (
    <DeckGL>
      <FpsWidget placement="top-left" />
    </DeckGL>
  );
}

Installation

npm install deck.gl
# or
npm install @deck.gl/core @deck.gl/widgets

import {_FpsWidget as FpsWidget, type FpsWidgetProps} from '@deck.gl/widgets';
import '@deck.gl/widgets/stylesheet.css';
new FpsWidget({} satisfies FpsWidgetProps);

To use pre-bundled scripts:

<script src="https://unpkg.com/deck.gl@^9.0.0/dist.min.js"></script>
<link href="https://unpkg.com/deck.gl@^9.0.0/dist/stylesheet.css" rel='stylesheet' />
<!-- or -->
<script src="https://unpkg.com/@deck.gl/core@^9.0.0/dist.min.js"></script>
<script src="https://unpkg.com/@deck.gl/widgets@^9.0.0/dist.min.js"></script>
<link href="https://unpkg.com/@deck.gl/widgets@^9.0.0/dist/stylesheet.css" rel='stylesheet' />

new deck._FpsWidget({});

Types

FpsWidgetProps

The FpsWidget accepts the generic WidgetProps.

Source

modules/widgets/src/fps-widget.tsx