FT800Widget
FirewingUser.FT800Widget History
Hide minor edits - Show changes to output
Changed line 3 from:
%justify%One of the great features of the FT800 chip (as used on the Gameduino 2 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.
to:
%justify%One of the great features of the FT800 chip (as used on the [[http://excamera.com/sphinx/gameduino2 | Gameduino]] and FTDI [[http://www.ftdichip.com/Products/Modules/VM800B.html | 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.
Changed line 3 from:
%justify%One of the great features of the FT800 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.
to:
%justify%One of the great features of the FT800 chip (as used on the Gameduino 2 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.
Changed line 7 from:
%justify%The original PNGs can be created in any suitable editing program, which are then turned into zlib compressed *.bin files. This is achieved by using the [[http://www.ftdichip.com/Support/Utilities.htm | image conversion software]] provided by FTDI. The *.bin image files used and source code for this project can be downloaded from here
to:
%justify%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 [[http://www.ftdichip.com/Support/Utilities.htm | image conversion software]] provided by FTDI. The *.bin image files used and source code for this project can be downloaded from here
Changed lines 7-8 from:
%justify%The original PNGs can be created in any suitable editing program, which are then turned into zlib compressed *.bin files. This is achieved by using the [[http://www.ftdichip.com/Support/Utilities.htm | image conversion software]] provided by FTDI. The *.bin image files used in the demo can be downloaded from here
to:
%justify%The original PNGs can be created in any suitable editing program, which are then turned into zlib compressed *.bin files. This is achieved by using the [[http://www.ftdichip.com/Support/Utilities.htm | image conversion software]] provided by FTDI. The *.bin image files used and source code for this project can be downloaded from here
* [[Attach:widgets.zip | widget source code]]
* [[Attach:widgets.zip | widget source code]]
Changed lines 47-52 from:
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
to:
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:
=firewing [=
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.
=firewing [=
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.
Added line 47:
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
Changed lines 7-13 from:
The original PNGs can be created in any suitable editing program, which are then turned into zlib compressed *.bin files. This is achieved by using the [[http://www.ftdichip.com/Support/Utilities.htm | image conversion software]] provided by FTDI. The *.bin image files used in the demo can be downloaded from here
* Attach:widget-images.zip
* Attach:widget-images.zip
to:
%justify%The original PNGs can be created in any suitable editing program, which are then turned into zlib compressed *.bin files. This is achieved by using the [[http://www.ftdichip.com/Support/Utilities.htm | image conversion software]] provided by FTDI. The *.bin image files used in the demo can be downloaded from here
* [[Attach:widget-images.zip | widget-images.zip]]
To load a file into your program and display, simply use:
=firewing [=
* [[Attach:widget-images.zip | widget-images.zip]]
To load a file into your program and display, simply use:
=firewing [=
Added lines 15-49:
Ft.DrawBitmap(10, 10, bmpClock)
=]
%justify%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
=firewing [=
' 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
=]
%justify%The same technique is used to draw the gauge. For example,
=firewing [=
' 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
=]
=]
%justify%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
=firewing [=
' 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
=]
%justify%The same technique is used to draw the gauge. For example,
=firewing [=
' 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
=]
Added lines 6-14:
The original PNGs can be created in any suitable editing program, which are then turned into zlib compressed *.bin files. This is achieved by using the [[http://www.ftdichip.com/Support/Utilities.htm | image conversion software]] provided by FTDI. The *.bin image files used in the demo can be downloaded from here
* Attach:widget-images.zip
dim bmpClock as Bitmap = Ft.LoadBitmap("clock.bin", 126, 126)
Changed lines 3-5 from:
%justify%One of the great features of the FT800 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 [[https://www.youtube.com/watch?v=eAJSSxKjTx0&feature=youtu.be | 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.
to:
%justify%One of the great features of the FT800 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.
%justify%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 [[https://www.youtube.com/watch?v=eAJSSxKjTx0&feature=youtu.be | 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.
%justify%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 [[https://www.youtube.com/watch?v=eAJSSxKjTx0&feature=youtu.be | 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.
Changed line 3 from:
%justify%One of the great features of the FT800 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 to look at using. In the picture shown here, the clock and speed gauge use custom bitmaps but overlay the built in clock and gauge commands to display the gauge needle and clock hours, minutes and seconds hand. You can [[https://www.youtube.com/watch?v=eAJSSxKjTx0&feature=youtu.be | view a video]] showing them in action.
to:
%justify%One of the great features of the FT800 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 [[https://www.youtube.com/watch?v=eAJSSxKjTx0&feature=youtu.be | 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.
Changed lines 3-6 from:
%justify%'''One of the great features of the FT800 is that is has many built in command to render different user interface widgets to the screen. For example, scroll bars, gauges, clocks and so on.
Firewing is a modular hardware and software development system based around a powerful Microchip 16 bit microcontroller. With 128KB of ROM (program storage) and 8KB of working RAM, you will be able to realise many great projects using the free Firewing compiler.'''
Firewing is a modular hardware and software development system based around a powerful Microchip 16 bit microcontroller. With 128KB of ROM (program storage) and 8KB of working RAM, you will be able to realise many great projects using the free Firewing compiler
to:
%justify%One of the great features of the FT800 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 to look at using. In the picture shown here, the clock and speed gauge use custom bitmaps but overlay the built in clock and gauge commands to display the gauge needle and clock hours, minutes and seconds hand. You can [[https://www.youtube.com/watch?v=eAJSSxKjTx0&feature=youtu.be | view a video]] showing them in action.
Changed line 3 from:
%color=#4088b8 justify%'''One of the great features of the FT800 is that is has many built in command to render different user interface widgets to the screen. For example, scroll bars, gauges, clocks and so on.
to:
%justify%'''One of the great features of the FT800 is that is has many built in command to render different user interface widgets to the screen. For example, scroll bars, gauges, clocks and so on.
Added lines 1-6:
%lfloat text-align=center margin-top=5px margin-right=16px margin-bottom=5px margin-left=16px% Attach:widget.jpg |
%color=#4088b8 justify%'''One of the great features of the FT800 is that is has many built in command to render different user interface widgets to the screen. For example, scroll bars, gauges, clocks and so on.
Firewing is a modular hardware and software development system based around a powerful Microchip 16 bit microcontroller. With 128KB of ROM (program storage) and 8KB of working RAM, you will be able to realise many great projects using the free Firewing compiler.'''
%color=#4088b8 justify%'''One of the great features of the FT800 is that is has many built in command to render different user interface widgets to the screen. For example, scroll bars, gauges, clocks and so on.
Firewing is a modular hardware and software development system based around a powerful Microchip 16 bit microcontroller. With 128KB of ROM (program storage) and 8KB of working RAM, you will be able to realise many great projects using the free Firewing compiler.'''