Theming

FPSMeter comes with pretty nice theming support. To not pollute your CSS file with such trivialities, themes are stored in the FPSMeter.theme object. You can create your own theme by adding it to this object like this:

FPSMeter.theme.myTheme = {};

And than use it in your FPSMeter object:

var meter = new FPSMeter({ theme: 'myTheme' });

Structure

Theme consists of these properties:

FPSMeter.theme.myTheme = {
	heatmaps: [],
	container: {},
	count: {},
	legend: {},
	graph: {}
	column: {}
};

Except heatmaps, all properties specify settings and styles of one meter element.

heatmaps

Array with objects that contain HSL color settings for generating heatmaps used by this theme, if any. Each object specifies saturation and lightness properties, and will generate one heatmap for this theme. Example:

FPSMeter.theme.myTheme = {
	heatmaps: [
		{
			saturation: 0.5,
			lightness: 0.7
		}
	]
};

This will generate one heatmap with index 0 (the index of object in the heatmaps array).

The hue value is applied by heatmap generator, which generates a pallet of colors from red to green with saturation and lightness specified by heatmap object.

With this, you can have multiple heatmaps of different saturation and lightness, which can be used, for example, to color the meter background with darker heat colors, and text with lighter heat colors.

container

Object with settings and styles for FPSMeter container element.

Settings:

• heatOn String - Specifies what CSS property should receive the heat color. Omit to disable heatmapping for this element.
• heatmap Integer - Index of a heatmap to be used. Default is always 0.

Example:

FPSMeter.theme.myTheme = {
	container: {
		// Settings
		heatOn: 'background',
		heatmap: 0, // 0 is default, so this could be omitted

		// Styles
		background: '#444',
		padding: '5px',
		border: '1px solid #222',
		...
	}
}

In container object, these style properties are overridden by new FPSMeter() options:

• position
• zIndex
• left
• top
• right
• bottom
• margin

count

Object with settings and styles for count element. This is the element that holds the FPS or ms number.

Settings:

• heatOn String - Specifies what CSS property should receive the heat color. Omit to disable heatmapping for this element.
• heatmap Integer - Index of a heatmap to be used. Default is always 0.

legend

Object with settings and styles for legend element. This is the element that shows the FPS or ms legend.

Settings:

• heatOn String - Specifies what CSS property should receive the heat color. Omit to disable heatmapping for this element.
• heatmap Integer - Index of a heatmap to be used. Default is always 0.

graph

Object with settings ad styles for graph element. This is the element that holds the graph columns.

Settings:

• heatOn String - Specifies what CSS property should receive the heat color. Omit to disable heatmapping for this element.
• heatmap Integer - Index of a heatmap to be used. Default is always 0.

column

Object with settings ad styles for each graph column element.

Settings:

• heatOn String - Specifies what CSS property should receive the heat color. Omit to disable heatmapping for this element.
• heatmap Integer - Index of a heatmap to be used. Default is always 0.
• width Integer - Width of one column in pixels. This is a setting, and not style, so no units, just integer.
• spacing Integer - Spacing between columns in pixels.

In column object, you do not set the width style, but width setting, which is along with spacing used to calculate the final width of a graph.

Markup

This is the markup of a final meter object:

<container>
	<count>
	<legend>
	<graph>
		<column>
		<column>
		...
	</graph>
</container>

The elements are all DIVs with no classes or IDs to minimize the possibility of inheriting some other styles.

Example theme

This is the full object that defines the colorful theme:

FPSMeter.theme.colorful = {
	heatmaps: [
		{
			saturation: 0.5,
			lightness: 0.6
		}
	],
	container: {
		// Settings
		heatOn: "backgroundColor",

		// Styles
		padding: "5px",
		minWidth: "95px",
		height: "30px",
		lineHeight: "30px",
		textAlign: "right",
		background: "#aaa",
		border: "1px solid #ccc",
		borderColor: "rgba(0,0,0,0.1)",
		color: "#fff",
		textShadow: "1px 1px 0 rgba(0,0,0,.2)"
	},
	count: {
		// Styles
		position: "absolute",
		top: 0,
		right: 0,
		padding: "5px 10px",
		height: "30px",
		fontSize: "24px",
		fontFamily: "Consolas, Andale Mono, monospace",
		zIndex: 2
	},
	legend: {
		// Styles
		position: "absolute",
		top: 0,
		left: 0,
		padding: "5px 10px",
		height: "30px",
		fontSize: "12px",
		lineHeight: "32px",
		fontFamily: "sans-serif",
		textAlign: "left",
		float: "left",
		zIndex: 2
	},
	graph: {
		// Styles
		position: "relative",
		boxSizing: "padding-box",
		MozBoxSizing: "padding-box",
		height: "100%",
		zIndex: 1
	},
	column: {
		// Settings
		width: 4,
		spacing: 1,

		// Styles
		background: "#777",
		backgroundColor: "rgba(0,0,0,.2)"
	}
};