FT800Touch

A standard graphical technique for detecting touch is to record a positions x,y and then search a list of objects and see if the position falls within an objects boundary. Although this works really well, the main disadvantage of this approach is that it requires the user program to manage lists of objects which can be used for the search. Normally, this is not a problem as the lists used to render an object can be the same as the one used for searching for a hit. However, the FT800 manages its own object list - so why introduce additional complexity. Fortunately, the FT800 makes detecting touch easy objects can be marked or "tagged" for touch. The image show here is a simple football, which we can use to demonstrate some basic approaches to tagging the object for touch. Here is some code that loads the image and displays it to the screen:
' imports module... imports Ft800 ' program entry point... sub main() dim bmpBall as Bitmap = Ft.LoadBitmap("football.bin", 183, 183) dim cx as ushort = 240 ' screen centre cx dim cy as ushort = 136 ' screen centre cy dim x as ushort = cx - (bmpBall.Width / 2) ' offset ball x dim y as uShort = cy - (bmpBall.Height / 2) ' offset ball y dim selectedTag as byte = 0 while true Ft.Clear() Ft.Tag(100) Ft.DrawBitmap(x, y, bmpBall) selectedTag = Ft.GetTag() Ft.cmd_text(15, 240, 27, 0, "Selected Tag : " + cstr(selectedTag)) Ft.Swap() end while end sub
Notice the call to Ft.Tag() - this marks the bitmap with a tag value of 100. Tag values can range from 0 to 254 (255 is reserved for objects that are not assigned tags). When the ball is touched, the "Selected Tag" text changes from 0 to 100. It really doesn't get much easier than that! All your code needs to do is look for "tag = 100" and you know the ball as been touched, enabling you to take some action.
The code above will actually tag the whole bitmap, even the transparent parts. If you just want to tag the visible part of the football, we have to take a different approach to tagging. The good news is that the FT800 drawing primitives can also be tagged. So rather than tag the bitmap, we draw the bitmap and overlay an invisible circle, like this
Ft.DrawBitmap(x, y, bmpBall) ' draw the bitmap Ft.ColorMask(0,0,0,0) ' ensure r,g,b and alpha are disabled Ft.PointSize(16 * radius) ' point size is same as the football Ft.Begin(POINTS) ' begin points Ft.Tag(100) ' create tag Ft.Vertex2ii(cx, cy) ' now draw the circle Ft.RestoreContext() ' restore previous drawing state
If you slowly drag a fingernail over the image, you will see that the tag only changes when inside the football, rather than the whole bitmap as before. Putting this all together...
imports Ft800 ' program entry point... sub main() dim bmpBall as Bitmap = Ft.LoadBitmap("football.bin", 183, 183) dim cx as ushort = 240 ' screen centre cx dim cy as ushort = 136 ' screen centre cy dim x as ushort = cx - (bmpBall.Width / 2) ' offset ball x dim y as uShort = cy - (bmpBall.Height / 2) ' offset ball y dim radius as byte = bmpBall.Width / 2 ' ball radius dim selectedTag as byte = 0 while true Ft.Clear() Ft.DrawBitmap(x, y, bmpBall) ' draw the bitmap Ft.ColorMask(0,0,0,0) ' ensure r,g,b and alpha are disabled Ft.PointSize(16 * radius) ' point size is same as the football Ft.Begin(POINTS) ' begin points Ft.Tag(100) ' create tag Ft.Vertex2ii(cx, cy) ' now draw the circle Ft.RestoreContext() ' restore previous drawing state selectedTag = Ft.GetTag() Ft.cmd_text(15, 240, 27, 0, "Selected Tag : " + cstr(selectedTag)) Ft.Swap() end while end sub
Please note that all of the above code does not show the calibration routines needed to ensure touch is correctly tracked. There is an article here which shows you how to calibrate the screen.


