Increase font size in tree view

The first time I used the World editor in torque I noticed the font size used for the tree view element was crammed together and was not very readable. I set out to increase the font size as well as the actual gui space given for each entry. It was simple enough to trace down, but I thought new users might find this useful.

Here goes!

First open a file named defaultProfiles.cs in your ..common/ui folder.
Starting around line 286 you wil find an if block that looks like this:

if(!isObject(GuiTreeViewProfile)) new GuiControlProfile (GuiTreeViewProfile)
{
   fontSize = 16;  // dhc - trying a better fit...
   fontColor = "0 0 0";
   fontColorHL = "64 150 150";
};

Change the fontSize = 16; To whatever you want. The default on mine was 11 I think. A size of 16 looked good to me.

That will change the font size of the tree view element, but what you will notice when you use the editor is that the font is clipped. The gui element did not adjust for the font size increase.

This next change modifies the gui element in the engine...

Now find the file named guiTreeViewCtrl.cc located in your ..engine/gui folder.

Within about the first 50 lines of code you will see an onWake function block like this:

bool GuiTreeViewCtrl::onWake()
{
   if (! Parent::onWake())
      return false;
   
   //get the font
   mFont = mProfile->mFont;
   
   //init the size
   mCellSize.set( 640, 16 );
   return(true);
}

Change the mCellSize.set( 640, 16 ); according to the font size you set from above. Mine was set to 640, 11 before I changed it to 640, 16. This statement is just setting the actual pixel size for each entry in the tree view in a width, height fashion.

In case that wasn't clear enough, Just make sure you set it to 640, 16. It is more than likely 640, 11 right now.

Ok, the last part deals with the 'plus' and 'minus' boxes you click to expand and collapse the entries in the tree view. It also fixes the lines that are drawn to connect the entries. This is not required for actual function, but will make the control look like it did before.

More FYI: For those new people wanting to learn: What we have done so far is change our font size from 11 to 16. Then we made the actual gui control bigger so that our new font letters would fit. Now we are increasing the graphic lines of the plus box to adjust for our larger font size.

Ok, in the same guiTreeViewCtrl.cc file go to the bottom around line 339 to 387 and find this code block.

if( render ){
      // Get our points
      Point2I boxStart( cellOffset.x + ( obj->level * statusWidth ), cellOffset.y );
         
      boxStart.x += 2;
      boxStart.y += 1;
         
      Point2I boxEnd = Point2I( boxStart );
         
      boxEnd.x += 9;
      boxEnd.y += 13;
      
      // Start drawing stuff
      if( grp && grp->size() ) { // If we need a box...
         dglDrawRectFill( boxStart, boxEnd, mProfile->mFillColor ); // Box background
         dglDrawRect( boxStart, boxEnd, mProfile->mFontColor );     // Border

         // Cross line
         dglDrawLine( boxStart.x + 3, boxStart.y + 7, boxStart.x + 8, boxStart.y + 7, mProfile->mFontColor );

         if( !grp->isExpanded() ) // If it's a [+] draw down line
            dglDrawLine( boxStart.x + 3, boxStart.y + 2, boxStart.x + 3, boxStart.y + 11, mProfile->mFontColor );
      }
      else {
         // Draw horizontal line
         dglDrawLine( boxStart.x + 4, boxStart.y + 6, boxStart.x + 9, boxStart.y + 6, mProfile->mFontColor );
         
         if( !obj->lastInGroup ) // If it's a continuing one, draw a long down line
            dglDrawLine( boxStart.x + 4, boxStart.y - 6, boxStart.x + 4, boxStart.y + 16, mProfile->mFontColor );
         else  // Otherwise, just a small one
            dglDrawLine( boxStart.x + 4, boxStart.y - 2, boxStart.x + 4, boxStart.y + 7, mProfile->mFontColor );  
      }
   }
   
   //draw in all the required continuation lines
   S32 parent = obj->parentIndex;
   
   while( parent != -1 ) {
      ObjNode *p = &(mObjectList[parent]);
      
      if( !p->lastInGroup ) {
         dglDrawLine( cellOffset.x + ( p->level * statusWidth ) + 6, 
                      cellOffset.y - 2, 
                      cellOffset.x + ( p->level * statusWidth ) + 6, 
                      cellOffset.y + 16, 
                      mProfile->mFontColor );
      }
      parent = p->parentIndex;
   }

The above code has changed the boxEnd.x and boxEnd.y values first, and then continued by changing the boxStart.x and boxStart.y values to look right for a size 16 font.

From here you just have to recompile your .exe and you are set! It would not have been difficult to reference the value in the defaultProfiles.cs file and change the hard coded numbers to variables based on the font size, but since I won't be changing these values often, it seemed like doing that would be useless code bloat. Your mileage may vary!

Hope that helps some new people out there that are tired of trying to click that tiny tree view control!!

One additional note: The World Editor Creator gui can be changed in exactly the same way. The file name for it is creator.cc. It is in the engine/editor folder.

B--