One of the great features of the FT800 chip (as used on the Gameduino and FTDI VM800B43A module) is that is has many built in commands to render different user interface widgets to the screen. For example, scroll bars, gauges, clocks and so on. In many cases, these built in widgets are more that capable of delivering high quality user interfaces in very short time scales. However, they are based on vector rendering and if you want to deliver something a little more slick to your customers, then a custom drawn bitmap is what you need.

In the picture shown here, the clock and speed gauge use custom bitmaps but clock and gauge commands are overlaid in order to display the gauge needle and clock hour, minute and second hands. You can view a video showing them being used. This can give your interface a very polished effect or enable you to create something very specific to your application.

The original PNGs can be created using any suitable editing program, which are then turned into zlib compressed *.bin files. This is achieved by using the image conversion software provided by FTDI. The *.bin image files used and source code for this project can be downloaded from here

• widget source code
• widget-images.zip

To load a file into your program and display, simply use:

dim bmpClock as Bitmap = Ft.LoadBitmap("clock.bin", 126, 126)
Ft.DrawBitmap(10, 10, bmpClock)

which will load the image from an SD card, initialise a new variable bitmap structure and then draw to the screen at position 10, 10. Of course, this will only display the bitmap - not the hour, second or minute hands. To do this, use the FT800 command cmd_clock() with options that disable rendering of the clock face and tick marks. The example code places all of this in a single subroutine, which makes it easy to place the clock anywhere on the screen, like this

' display clock to the screen...
sub DisplayClock(x as ushort, y as ushort, bmp as Bitmap, optional alpha as byte = 255)
   dim Time As DS1307.RtcTime = DS1307.ReadTime()  ' get the current time  
   Ft.RestoreContext()                             ' restore previous drawing state
   Ft.ColorA(alpha)                                ' set clock transparency
   Ft.DrawBitmap(x, y, bmp)                        ' draw the bimap

   ' gray minute and hours...    
   Ft.ColorRGB(50,50,50)
   Ft.cmd_clock(x + 63, y + 63, 62, OPT_NOSECS or OPT_NOTICKS or OPT_NOBACK, Time.Hour, 
                                                                             Time.Minute, 
                                                                             Time.Second, 0)         
   ' red second hand...
   Ft.ColorRGB(200,0,0)
   Ft.cmd_clock(x + 63, y + 63, 62, OPT_NOHM or OPT_NOTICKS or OPT_NOBACK, Time.Hour, 
                                                                           Time.Minute, 
                                                                           Time.Second, 0)      
end sub

The same technique is used to draw the gauge. For example,

' display speed gauge...
sub DisplayGauge(x as ushort, y as ushort, bmp as Bitmap, pos as byte)
   Ft.DrawBitmap(x - (bmp.Width / 2), y - (bmp.Height / 2), bmp) 
   Ft.ColorRGB(200,0,0)
   Ft.cmd_gauge(x, y, 102, OPT_FLAT or OPT_NOTICKS or OPT_NOBACK, 0, 0, pos, 200)    
end sub

The demo code also shows a 7 segment display. This is a new widget and is simply a bitmap "strip" with each of the 7 segments (0..9) stacked on top of each other, giving a total bitmap size of 53 x 800. Because there are ten elements, each segment is therefore 80 pixels in height. As a bonus, frame 0 corresponds to segment 0, frame 1 to segment 1 and so on. So to display, we use:

dim bmpSeg as Bitmap = Ft.LoadBitmap("segstrip.bin", 53, 800, RGB565, 10)
Ft.DrawBitmap(5, 5, bmpSeg, 7)

This will load a RGB565 formatted bitmap with 10 frames and display the number 7 at location 5,5.