4

How do people make GUIs? I mean the basic building block or principle they used to draw visual components on the screen like KDE, Gnome, etc. Are there any simple examples about how to draw something like a rectangle on the screen by directly dealing with the hardware?

I am using a PC for those who are asking about my platform.

8
  • That entirely depends on your platform.
    – EboMike
    Oct 16, 2010 at 1:17
  • When you say "PC", you probably mean "Windows"? Okay, next up - what layer are we talking? Are you creating a Windows app that has its own GUI? Or are you writing your own opreating system?!
    – EboMike
    Oct 16, 2010 at 1:24
  • When I say a PC I mean a PC not windows. I am dual booting windows and Linux at the same time. An example for windows or Linux will be useful but i really want to be platform independent .. I wanna deal with the hardware directly. I am not trying to achieve a certain functionality but I wanna know how such thing works.
    – Lettuce
    Oct 16, 2010 at 1:32
  • There are many layers involved, see my post. Bottom line - you need a driver to talk to the graphics card, and the driver is specific to your kernel.
    – EboMike
    Oct 16, 2010 at 1:35
  • 1
    "The kernel" is "Linux 2.6.35", or "Windows 7", or "Windows 95". Each kernel is completely different. There's a good reason why there are all the layers on top - so you don't have to worry about all that. Are you writing an application?
    – EboMike
    Oct 16, 2010 at 1:52

4 Answers 4

8

Well okay, let's start at the bottom. You have a monitor that displays an image. This image is a matrix of pixels, say, 1600x1200 pixels with 24 bits depth.

The monitor knows what to display from the video adapter. The video adapter knows what to display through the "frame buffer", which is a big block of memory that - in this example - contains 1600 * 1200 pixels, usually with 32 bits per pixel in contemporary cards.

The frame buffer is often accessible to the CPU as a big block and memory that it can poke into directly, and some adapters have GPUs that allow for things like rendering stuff into the frame buffer, like shaded textured triangles, so the CPU just sends commands through a "command buffer", telling it what to draw and where.

Then you have the operating system, which loads a hardware driver that communicates with the video adapter.

The operating system usually offers functions to write to the frame buffer using functions. Win32 for example has lots of functions like BitBlt, Line, Text, etc. These will end up talking to the driver.

Then you have something like Java, that renders its own graphics, typically using functions provided by the operating system.

2
  • So learning any tool that can deal with frame buffer can give me the freedom to make my own GUIs. Right ?
    – Lettuce
    Oct 16, 2010 at 1:39
  • 2
    It still depends on what layer you're trying to settle on to. Are you writing your own operating system? Are you writing your own kernel? You cannot be platform-independent (unless you write your own kernel from scratch, have fun!). That's why we have things like Win32 or Java or QT - to allow you to be platform-independent, despite the fact that you need a custom driver for every graphics adapter out there, and that each operating system has its own way of exposing the driver to you.
    – EboMike
    Oct 16, 2010 at 1:44
5

The simple answer is bitmaps, in fact this would also apply to fonts on terminals in the early days.

The original GUI's, things like Xerox Parc's Alto GUI were based on bitmap displays, and the graphics were drawn with simple bitmap drawing tools and graphics libraries, using simple geometry to determine shapes like circles, squares, rectangles etc, and then map them to display pixels.

Today's GUI are the same, except with additional software and hardware that have sped up and improved the process, and performance of these GUIs.

The fundamental mapping of bits e.g. 10101010 to pixels is dependent on the display hardware, but at a simplistic level, you would provide a display buffer in memory and simply populate it's bytes with the display data.

So for a basic monochrome bitmap, you'd draw it by providing bits that represented the shape you want to draw, you can either position these bits, like this, a simple 8x8pix button.

01111110
10000001
10000001
10111101
10111101
10000001
10000001
01111110

Which you can see easier if I render it with # and SPACE instead of 1 and 0.

 ###### 
#      #
#      #
# #### #
# #### #
#      #
#      #
 ###### 

Which as a bitmap image would look like this : https://i.stack.imgur.com/i7lVQ.png (I know it's a bit small :) but this is the sort of scale we would've begun at, when GUI's were first developed.)

If you had a more complex (e.g. 24 bit color display, you'd provide each pixel using a 24bit number.)

Obviously some bitmaps cannot be drawn manually (for example the border of a window), like we've done above, this is where geometry comes in handy, and we can use simple functions to determine the pixel values required to draw a rectangle, or any other simple shape, and then build from there.

Once you are able to draw graphics in this way on a display, you then hook a drawing loop onto a system interrupt to keep the display up to date (you redraw the display very often, depending on your system performance.) This way you can make it handle interaction from user devices, e.g. a mouse.

Back in the early days, even before Xerox Parc / Alto there were a number of early computer systems which had Vector based displays, these would make up an image by drawing lines on a CRT representation of a cartesian plane. However, these displays never saw mainstream use, except perhaps in some early video games, like Asteroids and Tempest.

6
  • So how can you implement this on a computer ? I mean how can i really display this on the screen if i wanna do that. Any example in any language will be fine.
    – Lettuce
    Oct 16, 2010 at 1:46
  • This could be done in Assembly Language, on an extremely basic level you would allocate a buffer (region of memory) that was sent to the display system (in our example a mono display), we'd call that a display buffer. - Then we can do various operations on the display buffer to render shapes or bitmap designs.
    – ocodo
    Oct 16, 2010 at 1:53
  • Of course, nowadays you'd never NEED to touch anything as low level as this, and there are many different ways you can build GUI's. And building a full GUI from these very basic levels would be a pretty dumb thing to do, but you could do a number of exercises at this low level to understand the principals and mechanics at work.
    – ocodo
    Oct 16, 2010 at 1:56
  • If you want to just play with bitmap rendering it's possible in Python - pyx.sourceforge.net/examples/bitmap/index.html - or ActionScript3 (using the flash.display.BitmapData and flash.display.Bitmap classes. (although I think only in 24 bit) - most languages will provide ways to draw bitmaps.
    – ocodo
    Oct 16, 2010 at 2:07
  • Vector graphics displays like Tektronix terminals (en.wikipedia.org/wiki/Tektronix_4010) saw widespread use in the 70's-early 80's, at least in the scientific market. Oct 16, 2010 at 2:19
0

You probably need a graphics library such as, for example, OpenGL.

For direct hardware interaction, you probably need to do something like assembly, which is completely computer specific.

6
  • I know there are DirextX , OpenGL and others .. But I wanna understand the principle itself .. I mean the very low level principle of graphical user interface.
    – Lettuce
    Oct 16, 2010 at 1:16
  • @Lettuce: That's dependent on platform.
    – thyrgle
    Oct 16, 2010 at 1:17
  • @Downvoters: Please, I am curious to know what is wrong with my answer.
    – thyrgle
    Oct 16, 2010 at 1:29
  • I doubt you would use OpenGL for a normal GUI. A contemporary fancy one, maybe, but not for simple boxes, lines, and triangles.
    – EboMike
    Oct 16, 2010 at 1:31
  • @EboMike: You would probably use what the vendor provides, but, what do you think they made it with? They probably wrote their own implementation of something like OpenGL and then wrote on top of that so we could use their frameworks to create a GUI.
    – thyrgle
    Oct 16, 2010 at 1:32
0

If you are willing to look through a lot of source code, you might look at Mesa 3D, an open source implementation of the OpenGL specification.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.