The current look

So this is what the current look of the GUI interface looks like. I am not very design savvy so the skin I created isn’t very nice. This can be changed fairly easily by editing the skin texture file. As of now, I am using the StarCraft 2 Battle.Net UI as a model for designing the widgets. This more than likely won’t be the the end look.

The current state of the GUI  library.

The current state of the GUI library.

The entire interface is created by rendering “panels” which is basically a rectangle that uses a portion of a texture in a texture atlas.

So far the following widgets have been built:

  • Windows – with and without title bars
  • Simple Buttons – basic rectangle. Used for things like the close button on a window
  • Button – More advanced rectangle with proper scaling of edges so textures don’t stretch and look awkward.
  • Toggle Button – radio/checkbox
  • Slider – horizontal and vertical
  • Non-scrolling list boxes (scrolling in development)

The following is a list of widgets/containers I would like to implement.

  • Drop down list
  • Progress bar
  • Spinner
  • Accordians
  • Tab pages

Event callbacks haven’t been implemented yet, so technically you can’t use the GUI for anything useful yet other than to just look at it. But I will get to it eventually.

Wait, let’s build something else…

As I was starting to put together my OpenGL framework, I realised I needed some kind of GUI to be able to display things on the screen such as positions of objects. So I looked around for GUI frameworks that were OpenGL3 compatible but I discovered there wasn’t that much out there. Well there was, but I had quite a bit of trouble trying to get them working.

I tried a few different ones out, MyGUI, QuickGUI, LibRocket, Crazy Eddie’ GUI and a few others. I have used MyGUI before with an Ogre3d project, and it worked nicely. I tried integrating it with my OpenGL project, but for some reason the resource manager was going wonky and not finding anything. I got frustrated and decided to abandon it. I’ve heard good things about Crazy Eddie’s GUI, but I’ve also heard that it is extremely annoying to customize. I tried integrating it with my code, and although it worked, I could not get any of the other skins working, so I was stuck with the basic skins. Again I got frustrated and decided to abandon that one as well. I tried a few others, some wouldn’t compile, other’s claimed to be cross-platform for all the compilable examples were Windows only.

In the end, I decided to try to build my own pure OpenGL GUI system. I will put my GGLE on hold for now until I can get GGUI (Gavin’s GUI) working to a point where it will be usable. These are my goals for GGUI:

  • OpenGL only.
  • Limited dependencies. (FreeImage is the only one so far)
  • Easy integration

Currently I am using SDL to handle the window creation and input handling. The GUI is drawn using OpenGL calls. Once the interface is built, simply calling the following is enough to use the GUI:

while() {

    // Do Other OpenGL calls


    // swap openGL buffers

I spent most of the weekend building this and I have my first screenshot.

Basic window frame composed of two widgets, a Frame Window and a Title Bar

Basic window frame composed of two widgets, a Frame Window and a Title Bar

Let’s build an OpenGL Framework!

Recently I have been interested in OpenGL again. I haven’t used OpenGL in some time now, almost 10 years. The developments in OpenGL are impressive. For a time Direct3d was taking over and now it seems like OpenGL can give D3D a run for it’s money if used correctly. Not to mention that OpenGL is completely cross-platform. If it is able to run on Windows, Linux, and Mac, and have just as good, if not better, performance, why even bother with D3D. It will make development any kind of cross-platform framework much faster. This year at the GDC, nVidia gave a talk on how to improve the performance of OpenGL’s rendering with incredible results.

So I’m setting out on teaching myself OpenGL 3.2+ (My graphics card does not support anything higher yet :( ). As I continue learning, I plan on developing an OpenGL framework that can be used for building graphics applications, such as games….mostly games, that’s what I want to do. My hopes are to document my learning as tutorials for others to benefit from my research.

I have already started working on the framework. It is called GGLE (pronounced “giggle”), which stands for Gavin’s openGL Engine. The source code will be released on BitBucket as soon as I get it to a state where I think it will be usable for simple tasks. Until then, I will write some tutorials on OpenGL as I learn it myself, stay tuned!


Computational Fluid Dynamics written in Python

Over the past number of weeks, I have been learning Finite Element Analysis to use for solving the Navier-Stokes equations of fluid dynamics.  Finite Element Analysis is used to solve partial differential equations over an unstructured grid.  Usually the grid is made up of triangles or quadrilaterals.   In my case, I used triangles since any mesh can be constructed from triangles.

Here are some results. The following is a simulation of Vortex Shedding of an incompressible fluid due to a circular obstacle. The simulation was written in Python using Numpy, Scipy, and Matplotlib and employs the pressure correction method.

Properties of the fluid:
Boundary Velocities: $$ U(0,y) = U(5,y) =U(x,0) = U(x,3) =1.0 $$
$$Re = 500 $$

Another video with the parameters slightly changed. This uses No-Slip boundary conditions on the top and bottom boundaries as well as a smaller fluid channel
Boundary Velocities: $$ U(0,y) = U(5,y) = 1.0 $$
$$ U(x,0) = U(x,1) = 0.0 $$
$$Re = 1000 $$

I will release the Python code after I have cleaned it up a bit.

Conky + Twitter

I finally decided to get a Twitter account.  The first thing I wanted to do was interface it with my Conky script.  The Twitter API was a pain to use and there wasn’t much documentation on how to use it properly.  So I did some trickery and created a work around.

I found a command line interface for twitter called Twidge that was easy to set up and could easily read my Twitter friend’s feed and output it to the console.  This allowed me to pipe the output to a text file and then use a custom Python script to format the text the way I liked it.  The two lines that needed to be added to Conky are as follows:

${execi 1200 twidge lsrecent >  /home/commander/scripts/tweets.txt}
${execi 1200 python /home/commander/scripts/ /home/commander/scripts/tweets.txt}

The following is the python code that reads in the text file generated by Twidge and then reformats it to my choosing.  This code can be ignored if you just want to use the standard output that Twidge uses.  In which case the first line in the Conky script should not pipe the output to the text file.

import re
import sys
from time import strftime

def format(text, indent=2, width=70):
    Format a text block.

    This function formats a block of text. The text is broken into
    tokens. (Whitespace is NOT preserved.) The tokens are reassembled
    at the specified level of indentation and line width.  A string is

        `text`   -- the string to be reformatted.
        `indent` -- the integer number of spaces to indent by.
        `width`  -- the maximum width of formatted text (including indent).
    width = width - indent
    out = []
    stack = [word for word in text.replace("\n", " ").split(" ") if word]
    while stack:
        line = ""
        while stack:
            if len(line) + len(" " + stack[0]) > width: break
            if line: line += " "
            line += stack.pop(0)
        out.append(" "*indent + line)
    return "\n".join(out)

if len(sys.argv) != 2:
    print "Error: No input file"

f=open(sys.argv[1], 'r')

df ="\n")
strin = ""
name = ""
names = []
tweets = []
for l in df:
    match = "<(\w*)> *([\w\W]*)", l)
    if match:
         name =
         strin =

         strin = strin + " " + l.strip()

# All the names are stored in an array called names, and the tweets in an array called tweets
# You cay customize the output the way you like. This method was the best for me

print "                                        TWITTER FEED"
print "                                        Last update: " + strftime("%H:%M:%S")
print "                                       ================================================="
for i in range(1,12):
    ff = format( tweets[i], 50, 100 )
    print "                                        " + names[i] + ":"
    print ff
    print ""


The final Conky output looks like (blurred for privacy):