Find all your DIY electronics in the MakerShed. 3D Printing, Kits, Arduino, Raspberry Pi, Books & more!

The Monday Jolt

This post was originally written by Andrew Rossignol and published in on The Resistor Network on April 4. It is reposted here on MAKE with permission.

I have been experimenting with the uVGA-II VGA controller for the past couple of weeks. It is an amusing piece of hardware that is capable of drawing graphics onto a VGA framebuffer. The VGA controller takes care of line drawing algorithms and helps to hardware accelerate the drawing of geometric primitives (squares, circles, triangles, polygons, lines).

Once I realized the power of this hardware I decided to implement a window manager like you would expect on any standard desktop PC. I have used a mouse for user input to the system.

Close-up of the Default Configuration

Close-up of the Default Configuration

The default system boots with three applications: Theme Manager, Audio Player. and Window Factory. The Theme Manager is used to modify the colors of the system theme, the Audio Player is used to playback some audio files stored on an SD card and the Window Factory is used to create new windows for the purposes of demonstration.

Slightly Blue Theme, with more Windows

Slightly Blue Theme, with more Windows

Here is a video demonstrating the system.

Software Overview

I have tried to maintain layers of abstraction within this software. I will start by explaining the layered approach that I have taken for the drivers, window manager, and user application.

A layered approach

A layered approach

At the bottom of the stack is the UART driver. My MCU has two UART modules so I can interface with both the uVGA-II and the serial mouse simultaneously.

Unfortunately I have fallen into the trap of trying to write good code and there is a blur between the layers. The Window Manager makes calls directly to the uVGA-II layer which means that it would be difficult to port this window manager to another VGA controller. This can be resolved by creating an intermediate, platform independent hardware interface layer. If a user wished to run AVRDE using another VGA controller they would change the hardware abstraction layer rather than the window manager itself.

Despite the blur between the layers, I find it easy to maintain. I was able to add a new widget (the slider) within a couple of hours.

Modelling a GUI Toolkit in C

This is my first attempt at using C to model complex abstraction. Typically I am using C to control hardware, registers and other low-level hardware concepts. This project takes a completely different direction and attempts to model the desktop metaphor. I do not claim to know C++ so I have decided to stay within my element and use structs and unions in C.

All On-Screen objects are descendants of the Widget

All On-Screen objects are descendants of the Widget

The dWidget_t has an anonymous union of all child types. This allows the dWidget_t object to be the parent type of all desktop widgets. The mouseDown, mouseMove and mouseUp callbacks of the parent dWidget_t object are handled by the window manager itself. The function pointers within the “inherited” types are for the user applications. I bind to the valueChange() callback to handle theme changes.

Managing Windows

In addition to the dWidget_t type, I have implemented a dManager_t. This struct is used to maintain the windows and associated function callbacks.

Window Manager

Window Manager

This manager struct keeps track of the size of the window manager (to avoid hard-coded constants), some aspects of the cursor, a list of window pointers and the positions and sizes of the buttons on the taskbar.

Drawing the Desktop

I have employed the Painter’s algorithm to handle the drawing of windows. This means that I sort the windows by Z-Index and then draw them from lowest to highest such that the foreground window is always on top.

I have borrowed a concept from Android that I am quite fond of. I am using a repaint flag to handle repainting when necessary. This means that if I make a modification to a widget (change the text of a Label, for example), I must call dInvalidate() on that widget to have it painted onto the screen. This minimizes the amount of total repaints necessary.

I also have a repaint flag in the manager. This flag is set when a window is moved, the theme is changed or a window is minimized. The manager.repaint flag results in a complete repaint of the desktop environment.

Lots of windows

Lots of windows

System Theme

Each widget contains a pointer to a theme. This makes it possible for different windows to have different themes or for applications to maintain their own appearance. I have not exploited this functionality in the demonstration video.

The manager also has a reference to the system theme for drawing the taskbar.

The Taskbar

The taskbar is quite simple. It is not implemented as a widget, it is simply drawn on top of the window manager when necessary and the locations of the buttons are stored for window switching.

When the titles of windows are too long for the button, the final 2 characters are replaced with “..”.

Title shortening

Title shortening

Hardware

There isn’t too much to the hardware. I have an ATmega1284p microcontroller, a uVGA-II VGA controller, a MAX233 level converter and a Microsoft Serial Mouse.

A close up of the bread-boarded hardware

A close up of the bread-boarded hardware

The Code

I need to work on the UART driver some more and polish up some documentation before uploading the code to my Github repository.

Thanks to Andrew Rossignol for allowing us to repost his article here on the MAKE site.

Alasdair Allan

Alasdair Allan is a scientist, author, hacker, tinkerer and co-founder of a startup working on fixing the Internet of Things. He spends much of his time probing current trends in an attempt to determine which technologies are going to define our future.


Related

Comments

In the Maker Shed