While the Alert Class can be good for debugging applications, during development of a couple of personal projects I’ve seen the need to create another class which allows me to monitor variables which are likely to change constantly. One such variable is the current frame rate. Using the Alert or trace actions to monitor values that change as much as the frame rate is impractical, especially when you want to also monitor several other variables in real time. For this reason I’ve created the dPanel class.

An example of the dPanel is shown below. To show the dPanel you need to press the ‘transition key’, which for this example has been set to the grave accent key (this key is typically underneath the ‘Esc’ key on Windows keyboards and to the left of the ‘Z’ key on Mac keyboards). Pressing this will slide the dPanel into view. Press the grave accent key again to slide the dPanel out of view.

There are three functions publically available:

init() - you call this method once to initialize the class with your desired settings
addSection() - adds a new section to the dPanel
update() - updates the specified section

Simple Usage

Using the dPanel is very easy.

1. All you have to set things up is make a call to dPanel.init(), passing to it a reference to the stage.
2. You then call dPanel.addSection() passing to it a name for the new section and if desired, the colour of the text shown in that section.
3. When you want to update that section, you simply call dPanel.update(), passing to it the name of the section you want to update and the value you want to update it to.

Here is example code which uses the dPanel to constantly show the mouse position:

import com.dVyper.utils.dPanel;
import flash.events.Event;
//	INITIALIZE dPanel
dPanel.init(stage);
//	ADD A NEW SECTION
dPanel.addSection("mousePosition");
//	UPDATE THE dPanel EVERY FRAME TO DISPLAY MOUSE COORDINATES
stage.addEventListener(Event.ENTER_FRAME, updateDebugPanel);
function updateDebugPanel(event:Event):void {
	dPanel.update("mousePosition", "x:"+stage.mouseX+" y:"+stage.mouseY);
}

And that is all there is to it! The dPanel is very easy to setup and use and I’m sure will prove very useful to you!

Advanced Usage

Here is more detailed information on the init() and addSection() functions:

dPanel.init(stageReference:Stage, transitionKey:int, colour:int, alpha:Number);

stageReference:Stage - this has to be a reference to the stage
transitionKey:int (96) - this is the character code of the key that you want to use to show/hide the dPanel
colour:int (0×000000) - the colour of the dPanel
alpha:Number (0.8) - the alpha of the dPanel

//	CREATES A dPanel WHERE YOU PRESS 'Delete' TO SHOW THE dPanel
dPanel.init(stage, 127);

dPanel.addSection(sectionName:String, colour:int);

sectionName:String - the name of the new section
colour:int (0xFFFFFF) - the colour of the text and border for the new section

//	CREATES A GREEN SECTION CALLED 'currentTime'
dPanel.addSection('currentTime', 0x00FF00);

Please let me know if you’ve found this useful or if you have any ideas for improvements

Download dPanel.as
Download dPanel Example source files

Enjoy!