function variable_visualization()
{
  this.reset();
  this.fontHeightCache = {};

  this.font = 'Times New Roman';
  this.fontSize = 24;
  
  this.prevRenderTime = 0;
}
/**********************************************************************************************************************
  Data Structure of variable_visualization
 **********************************************************************************************************************
  Key                           Type          Meaning
    .font                       String        Font family name eg: 'Arial'
    .fontSize                   Integer       Font size in pixels
    .fontHeightCache[font]      Object        Cache for font heights that have already been calculated
    
    .outputCanvas               HTMLElement   The canvas to render on          
    .outputContext              --            2d canvas context
    
    .variables[varName]
      .value                    --            Value of this variable
      .options
        .roundingRule           Integer       Integer number of decimal places to round output to
        .useDelta               Boolean       Show an arrow indicating increasing or decreasing values
        .highlight              Boolean       Show value in a different color
        .visible                Boolean       Show or hide this variable
      .hideKeys                 Object        Holds information about blacklist of keys to be hidden if .value is an object
      .shownKeys                Object        Holds information about whitelist of keys to be shown if .value is an object
 **********************************************************************************************************************
  Notes:
  Functions beginning with _ underscore are for internal use.
  
  If the variable's value is an object, you are able to filter the keys that are displayed using 6 functions. If the
  variable is not an object, these functions will have no effect.
  On addHiddenKeys/removeHiddenKeys/clearHiddenKeys:
    These functions set up a blacklist. Keys in the blacklist will not be shown when rendering.
  On addShownKeys/removeShownKeys/clearShownKeys:
    These functions set up a whitelist. Keys in the whitelist will be rendered, and all other keys will not be rendered.
  
  Example usage, assuming the following code is used to setup the visualization. Each example occurs seperately.
  
  var vvis = new variable_visualization();
  var foo = {min:{x:0, y:0}, max:{x:1, y:1}};
  vvis.setVariable("bounds", foo);
  
  // Blacklisting the min output
  vvis.addHiddenKeys("bounds", ["min"]);
  Output:
    bounds
      .max
        .x=1
        .y=1

  // Blacklisting keys of nested objects 
  vvis.addHiddenKeys("bounds", ["min.x", "max"]);
  Output:
    bounds
      .min
        .y=0
  
  // Whitelisting the min output
  vvis.addShownKeys("bounds", ["min"]);
  Output:
    bounds
      .min
        .x=0
        .y=0
        
  // Whitelisting keys of nested objects 
  vvis.addHiddenKeys("bounds", ["min.x", "max"]);
  Output:
    bounds
      .min
        .x=0
      .max
        .x=1
        .y=1
 ***********************************************************************************************************************/
Data Structure of variable_visualization

Key                           Type          Meaning
.font                       String        Font family name eg: 'Arial'
.fontSize                   Integer       Font size in pixels
.fontHeightCache[font]      Object        Cache for font heights that have already been calculated

.outputCanvas               HTMLElement   The canvas to render on
.outputContext              --            2d canvas context

.variables[varName]
.value                    --            Value of this variable
.options
.roundingRule           Integer       Integer number of decimal places to round output to
.useDelta               Boolean       Show an arrow indicating increasing or decreasing values
.highlight              Boolean       Show value in a different color
.visible                Boolean       Show or hide this variable
.hideKeys                 Object        Holds information about blacklist of keys to be hidden if .value is an object
.shownKeys                Object        Holds information about whitelist of keys to be shown if .value is an object

Functions beginning with _ underscore are for internal use.

If the variable's value is an object, you are able to filter the keys that are displayed using 6 functions. If the
variable is not an object, these functions will have no effect.

Example usage, assuming the following code is used to setup the visualization. Each example occurs seperately.



Blacklisting the min output
vvis.addHiddenKeys("bounds", ["min"]);
Output:
bounds
.max
.x=1
.y=1



Whitelisting the min output
vvis.addShownKeys("bounds", ["min"]);
Output:
bounds
.min
.x=0
.y=0


Data Structure of variable_visualization Key Type Meaning . font String Font family name eg : ' Arial ' . fontSize Integer Font size in pixels . fontHeightCache [ font ] Object Cache for font heights that have already been calculated . outputCanvas HTMLElement The canvas to render on . outputContext -- 2d canvas context . variables [ varName ] . value -- Value of this variable . options . roundingRule Integer Integer number of decimal places to round output to . useDelta Boolean Show an arrow indicating increasing or decreasing values . highlight Boolean Show value in a different color . visible Boolean Show or hide this variable . hideKeys Object Holds information about blacklist of keys to be hidden if . value is an object . shownKeys Object Holds information about whitelist of keys to be shown if . value is an object Functions beginning with _ underscore are for internal use . If the variable ' s value is an object you are able to filter the keys that are displayed using 6 functions . If the variable is not an object these functions will have no effect . Example usage assuming the following code is used to setup the visualization . Each example occurs seperately . Blacklisting the min output vvis . addHiddenKeys ( " bounds " [ " min " ] ) ; Output : bounds . max . x = 1 . y = 1 Whitelisting the min output vvis . addShownKeys ( " bounds " [ " min " ] ) ; Output : bounds . min . x = 0 . y = 0
function variable_visualization()
{
  this.reset();
  this.fontHeightCache = {};
  this.font = 'Times New Roman';
  this.fontSize = 24;
  this.prevRenderTime = 0;
}
function variable_visualization ( ) { this . reset ( ) ; this . fontHeightCache = { } ; this . font = 'Times New Roman' ; this . fontSize = 24 ; this . prevRenderTime = 0 ; }
Data Structure of variable_visualization
Data Structure of variable_visualization