Home | Lehre | Videos | Texte | Vorträge | Software | Person | Impressum, Datenschutzerklärung | Blog RSS

Continued from Last Week

2D Graphics Programming

GUI Programming

Stages of complexity, performance, and programmer-friendlyness:
  1. Busy waiting for user input: Our program checks permanently whether or not some input has occurred.
  2. Multitasking with event loop (demo: Win32 programming): The operating system calls our functions (hence: callbacks) when something happens.
  3. Event listeners (Java), events and delegates (.NET), signals and slots (Qt), and similarly in most current frameworks: GUI elements are connected to show behavior. This may partially be built into virtual functions.

Drawing onto the Screen

Virtually all current systems trigger the repainting of the screen via a pseudo-event "Screen has to be repainted". The idea is to collect all drawing code at one place. (Never spread functionality across your software!) If the runtime environment finds that it needs to redraw your graphical component, it will invoke this function [diese Funktion aufrufen]. If you want to draw yourself, you will typically not invoke this function directly, but rather tell the runtime environment that your graphical component needs an update. Thus, the environment can organize the redrawing efficiently, in particular by collapsing several requests into one.
 
Java Swing .NET (C#) Explanation
repaint() Invalidate() member function of the widget to call for a display update
protected void paintComponent(Graphics g)
{
  super.paintComponent(g);
  //...
}
override void protected OnPaint(PaintEventArgs e)
{
  base.OnPaint(e);
  //...
}
member function of the widget to override for your own drawing commands

The .NET object e contains a reference e.Graphics to the graphics context. All popular windowing systems use such a graphics context to both store information about which part of the window has to be drawn etc. and as an object on which one invoke all kinds of drawing operations. For instance, we may write:
using System.Drawing;
// ...
Pen p = new Pen(Color.Blue, 7);
e.Graphics.DrawLine(p, 12, 34, 56, 78);
You can consult the documentation or the automatic code completion for further drawing commands.

Experiment: Control the form of a painted shape by a UI element such as a slider. Nothing will appear on screen as long as we don't force a redraw either by manipulating [hantieren mit] the windows or by explicitly calling Invalidate(), e.g., on the change event of the slider.

Bitmap Effects

.NET allows you to easily load and manipulate Bitmap objects. You may retrieve and changes single pixels through GetPixel and SetPixel. Simple color changes can be achieved by iterating over every pixel and computing a new color for it based on its former RGB value. Demonstrations with Photoshop: gradation curves, contrast and brightness, hue and saturation (convert RGB per pixel to another color system such as HSV, shift these values, convert back to RGB).

Blur [Weichzeichner], sharpen [Scharfzeichner], emboss [Relief], and similar effects operate not only on each pixel by itself, but also take the neighboring pixels into account. (Demonstrations with Photoshop)

Typical errors:

In C#, operations on arrays and on bitmaps can be accelerated dramatically by using pointers. More about this next time.

A good idea to implement such effects is to create a plug-in for an existing application such as Photoshop (software development kit based on C and no longer available for free), GIMP (open source; plug-ins written in C), or Paint.NET (free with source; just inherit from some .NET classes to create a plug-in).