Slashdot Mirror
What 2D GUI Foundation Do You Use?
Zmee writes "I am looking to build a 2D application for personal use and I will need to use a canvas to paint custom objects. I am trying to determine what foundation to use and have not located a good side-by-side comparison of the various flavors. For reference, I need the final application to work in Windows; Linux is preferred, but not required. I have looked at WPF, Qt, OpenGL, Tcl/Tk, Java's AWT, and others. I have little preference as to the language itself, but each of the tutorials appear to require significant time investment. As such, I am looking to see what the community uses and what seems to work for people prior to making that investment."
HTML and Javascript?
GDI+ is good enough for low frame rates and trivial to use if you have any C# experience. If these are static controls that need to be painted and then updated on user input, it's more than sufficient.
Nothing is easier for amateurs, even though I'm no Microsoft fan.
I'd use Java AWT or OpenGL. They're both cross-platform, and what you learn will can be easily leveraged elsewhere, since they're widely adopted technologies. (No matter what you pick, you're going to have some learning curve.)
Out of everything I've tried (pretty much everything usable from C, C++, and C#), WPF is the best UI framework around. It is extremely flexible and can be very intimidating if you try to learn all the details too quickly, but the basics of it are easy. You should be able to pop out a good design pretty quickly. It's a shame that Mono has no plans to implement it, because everything else feels primitive in comparison.
If you don't mind dirtying your C++ with a less-than-modern design and ugly preprocessor hijinks, Qt can be a pretty solid framework. Works well on many platforms and is full of features. Has a lot of portable non-UI things too, but I haven't used much of it.
Python's UI stuff is simple but has a lot of features. Great for quick, portable apps. Easy integration with C++ if you need it.
I avoid wxWidgets. The last time I tried using it (about a year ago), I ended up very frustrated rooting around their code to find that it makes a bunch of stupid assumptions about things like DPI, default fonts, etc. that fall apart pretty easily.
I also avoid GTK, but mainly just because it always feels "off" on Windows.
Having used everything on the list and much more (such as wx, GTK, etc), as well as making my own toolkits for embedded devices and products, my personal experience tells me hands down that Qt is the best choice for anything GUI related. It's power, ease of use, tools, documentation and learning curve are unparalleled to this day and age. Any other toolkit or API I've use fails in one or more of such areas.
Qt is the only toolkit that made me feel as if they could know in advance everything i'd ever need (so when i go to the docs it's there, right how as i imagined it should be), yet keeping the bloat down with great modularization. I have used it from C++ as well as from Python with great success.
I use the Qt framework at home and at work and I have published a couple teeny GPL'd apps:
Regardless of which framework you decide to use, I wish you luck!
OpenGL? "Lightweight"? Sure, I suppose because it's all implemented in the system, you don't have to redistribute much, but have you actually ever written anything remotely complicated in raw OpenGL? For anything resembling a GUI, the poster is going to spend months of writing low-level code that's been done a thousand times already.
Qt is heavy, but it's heavy for a reason - it includes a very nice set of tried-and-true widgets, with all the nice features and weird corner cases thought of already. It's also fairly speedy, and even more so if you use QGraphicsView, which can be optionally accelerated via OpenGL for even more speed.
Qt also has nice support for custom widgets. You can subclass any widget, or QWidget, and make anything you want. You can even integrate your custom widgets with Qt Designer, either by promoting a placeholder widget, or writing a Designer plugin so your widget is WYSIWYG.
OpenGL is so low level that everything I talked in the last two paragraphs is completely beyond its scope. Even font rendering is rather arduous, and good luck with nicely word-wrapped, formatted text.
Who suggested Java AWT? What is this, 1998? Someone is behind on their homework :).
Java's Swing + Java2D is *fully hardware accelerated* (ever since Java 1.6.0_u10 some time ago), multi-platform, with good multi-thread support (not for rendering, you don't need that, but for the rest of the program), very customizable, and looks fantastic with the Nimbus look&feel (a standard part of Java). Swing is used a lot on the enterprise desktop (and a few shrink wrapped products too - I know I've purchased some as they were best-of-breed tools). Many of the Java Swing ttools are free and there are a lot of them (eg. Matisse in Netbeans makes creating GUIs a snap). Java2D had extensive contributions from Adobe who happen to know a thing or two about presentation. Plus, drawing in Java2D also allows printing relatively simply.
I use QT and love it too, but it has some serious drawbacks, from my perspective. The biggest is that it requires a wonky special compilation system. You either have to use the build system they offer (qmake) or you have to manually run their generator yourself (moc - though if you were a masochist you could learn to write out the files moc makes yourself and avoid using it).
I compare every IDE to Eclipse, because that's the best IDE I've seen for any language. But I've never found that CDT, the C++ plugin for Eclipse, is any good. It fails to work out of the box for me and is a pain to configure (but I haven't tried it in a few years). QT Creator, while usable, is really an immature product. There's no support for refactoring, the UI is unintuitive and awkward (for me, at least) and there's lots of little issues with it. Plus you're committed to MingW, which can be a problem depending on what libraries you want to use. Codeblocks is a pretty good IDE, but it doesn't have a QT plugin, so you're left with the problem of dealing with moc files. Visual Studio has a plugin, but it only works with the paid versions.
All of this can be dealt with (and I do) but it's annoying.
Adobe Air -
Easy UI interaction framework, very powerful drawing APIs, runs on windows/linux/mac/android.
http://www.adobe.com/products/air/
Latest version lets you call native apps on windows/linux/mac.
I don't have much time... I write the GUI, and any drawing logic with Tcl/Tk. Easy, portable. Any time critical or extensive logic gets pushed into C or FORTRAN (depending on what it is). Just standard in/standard out. Parse the output with Tcl, and display.
A recent example -- I needed to upgrade some systems for a client (Solaris 6 to 10). We needed to identify the binary parts (non-OS) that needed to move. I wrote a GUI tool (binport) for this. Took 2 days to write, ran on Linux and MacOS X (two of us shared the work). After the job, the tool was essentially discarded.
No time to "debug" really, and I don't typically have time for compile and test cycles. Tcl is an interpreter, with very simple syntax and semantics.
Other examples that have used Tcl/Tk -- the GUI layer for GDB, Redhat Source Navigator, etc.
Yes, it's not "sexy", or even particularly "new", but it works, and works well.
Just another "Cubible(sic) Joe" 2 17 3061
(For those that missed the reference, this is it)
"I'm never quite so stupid as when I'm being smart" (Linus van Pelt)
Now draw a circle.
glPointSize(10);
glColor3f(1.0f, 1.0f, 1.0f);
float point[2] = {0.0, 0.0};
glVertexPointer(2, GL_FLOAT, 0, point);
glDrawArrays(GL_POINTS, 0, 1);
Now draw a bezier curve.
float lines[numberOfLines] = {0.0, 0.0, .......}
glVertexPointer(2, GL_POINTS, 0, lines);
glDrawArrays(GL_LINES, 0, numberOfLines);
Now draw a circular gradient.
uniform vec2 center;
uniform vec4 innerColor;
uniform vec4 outerColor;
uniform float radius;
void main()
{
float dis = distance(center, gl_FragCoord.xy);
if (dis > radius);
gl_FragColor = outerColor;
else
gl_FragColor = dis/radius*outerColor + (radius - dis)/radius*innerColor;
}
Now draw a button with the text "OK" on it.
NSFont *font = [NSFont fontWithName:@"Helvetica" size:18.0f];
NSDictionary *fontAttributes = [NSDictionary dictionaryWithObjectsAndKeys:font, NSFontAttributeName, [NSColor whiteColor], NSForegroundColorAttributeName, [NSColor blackColor], NSBackGroundAttributeName, nil];
NSAttributedString *string = [[NSAttributedString alloc] initWithString:@"OK" attributes:fontAttributes];
NSImage *image = [[NSImage alloc] initWithSize:string.size];
[image lockFocus];
[string drawAtPoint:NSMakePoint(0.0f, 0.0f)];
NSBitmapImageRep *bitmap = [[NSBitmapImageRep alloc] initWithFocusedViewRect:NSMakeRect(0.0f, 0.0f, image.size.width, image.size.height)];
[image unlockFocus];
GLint button;
glEnable(GL_TEXTURE_RECTANGLE_ARB);
glGenTextures(1, &button);
glBindTexture(GL_TEXTURE_RECTANGLE_ARB, button);
glTexImage2D(GL_TEXTURE_RECTANGLE_ARB, 0, GL_RGBA, bitmap.size.wigth, bitmap.size.height, 0, GL_RGBA, GL_UNSIGNED_BYTE, [bitmap bitmapData]);
float rectangle[8] = {0.0, 0.0, 0.0, bitmap.size.height, .....} // Make the button what ever shape you want.
glEnableClientState(GL_TEXTURE_COORD_ARRAY);
glVertexPointer(2, GL_FLOAT, 0, rectangle);
glTexCoordPointer(2, GL_FLOAT, 0, rectangle);
glDrawArrays(GL_QUADS, 0, 4);
[font release];
[fontAttributes release];
[string release];
[image release];
[bitmap release];
Doing this all in OpenGL then makes it dead simples to animate and tranform and move around the screen.
Qt has recently introduced Qt Quick, a collection of technologies meant to help you create animation-rich UIs similar to those used on touch phones. The most important part is the QML language, which is used to describe the user interface of a program. QML is declarative and animation-friendly, and makes it easy to create fluid interfaces. On the downside, it is not mature yet and lacks most of the standard UI widgets at the moment (basically, you have text input and clickable areas). I wouldn't have recommended it for general application writing just yet, but the original question was not very specific on the requirements so it might be suitable already in its current form.
Original poster here. I am looking to implement a customized card game (think Magic or Yu-Gi-Oh). This is my step-son's first foray into development, and my first UI requiring any custom controls. (I have done a fair bit of ASP.NET, PHP, and Windows Forms, but most of that is not applicable given what I am planning here). The idea is to be able to create the card images from a combination of stored bitmaps, text, and some general backgrounds. As such, much of the GUI will be vectored, but some must be raster (ie the bitmaps). Note that given the general structure, framerate is not a high consideration.
Note that I have not ruled out a HTML 5 UI and if I went with Java AWT, I may wrap it as an applet. I would certainly like to stay away from Flash (& am leaning against Java for similar reasons), but have not ruled that out either.