High performance GUI design

This article comes from my experience in implementing Statistics application (2003) which is a high performance GUI, capable of displaying large amount of data (with formatting) refreshing every 1 second without flickering. The table can be very big 256 x 64.

Below are some important concepts I used:  

– The first important concept in any GUI design is separation of data and view. Never couple them together.

– Data pushing approach: it is simple and usually the 1st approach you can come up with. Once you have data, you simply poplute the view.  
1/ This approach requires the view to maintain its own buffer to store your data for drawing. Violate the 1st concept!
2/ Note that when you populate the view, you have push all data (in this case the whole 256×64 table) since you don’t know the current viewing area.
You may say. I can ask the view for current viewing area to just populate that area. The problem is that when user scrolls,  user will see nothing/bad data!

– On-demand drawing/Data pulling approach: retrieve & draw only current viewing area (let’s say it’s 10×10 area); ignore hidden view areas although those area still can be scrolled to. Data is pulled only when needed. This is done via a callback function.  At each refresh, go through all cells in current viewing area, call the callback function with coordinate as parameters. Callback function will use the coordinate to determine what data to retrieve and draw. Note that if you can even implement a dirty flag to reduce drawing. In the end, at any moment, only a 10×10 area is drawn, not 256×64. 
Note that this approach requires you to maintain data buffer 

This concept is also the core concept in AJAX.

– Dynamic formatting: as mentioned above, we have to maintain our own buffer. In this statistic app case, it is just a 2-dimensional array or a matrix. Although data can be integer, fraction (for average), status codes such ON/OFF, CONNECTED/DISCONNECTED/PARTIAL CONNECTED…, we want to maintain as simple data type as possible to save space. So I chose integer. Remembering the callback function above, we can use coordinate to look up the context of a particular cell we are about to draw. If it’s status code, return string “ON” for 1, “OFF” for 0. You implement style object, you can even make “ON” green, “OFF” red. If it’s average number w/ 2 decimal points, return number/100. You get the idea.

High performance GUI design

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s