Main Site Documentation

Panda II Touch screen


#1

I am using the FEZTouch2.cs driver, what are the x direction values for the screen. I figured out that y direction is in increments of ten(10). But what is the x direction for character placement? Ten(10) is to big and five(5) might be to small.

Thanks


#2

This is a graphics system, so measure in pixels. The top,left is 0,0 and goes to 320,240.

To decide on where to place an object (eg. label) you have to account for the size of that object, this may depend on the size of the font you are using.


#3

Since I am using the FontCourierNew10(), is that 10x10 pixels? If that is the case, it is not being represented correctly on the screen. Where can I find the info for the Font stuff?


#4

The font generator application can be found here http://code.tinyclr.com/project/364/fez-touch-font-generator/

The font is courier 10 pt from Microsoft, not 10 pixel. The pixel height of a font can be determined by the querying the Height property. This font happens to be 16 pixels high.

When drawing text on the screen, you can use the font Height property to determine line height, and the GetTextWidth method to determine pixel width of the entire text string.

Here is a segment of code from the font definition file…


public class FontCourierNew10 : FEZ_Components.FEZTouch.Font
{
	// CONSTRUCTOR
	public FontCourierNew10()
	{
		// set properties
		this.avgWidth = 8;
		this.maxWidth = 8;
		this.height = 16;
		this.startChar = ' ';
		this.endChar = '~';

		// attach string pointers to const strings
		this.charDescriptors = constCourierNew10Descriptors;
		this.charBitmaps = constCourierNew10Bitmaps;
	}



#5

In the program below, as an experiment, I am trying to continuously display the time, in the upper right hand corner, as a thread. I want to be able to do other things, like a tempSensor, in the other part of the screen. The way the code runs now, I get an “Unhandled exception…” error, and the program never starts. Is their something with the FEZTouch driver that is causing the exception, or am I all screwed up in the way I am implementing the thread?

[CODE]
using System;
using System.Threading;
using Microsoft.SPOT;
using Microsoft.SPOT.Hardware;

using GHIElectronics.NETMF.FEZ;
using GHIElectronics.NETMF.Hardware;

namespace BaseCard
{
public class Program
{
static FEZ_Components.FEZTouch fezTouch;
static FEZ_Components.FEZTouch.Font defaultFont;

    public static void Main()
    {
        Thread dtThread = new Thread(new ThreadStart(TimeDate));

        dtThread.Start();

        InitGraphics();

                         // x  y
        fezTouch.DrawString(0, 0, "BaseCard Program", FEZ_Components.FEZTouch.Color.Yellow,
                            FEZ_Components.FEZTouch.Color.Black, defaultFont);
        fezTouch.DrawString(120, 12, "AA", FEZ_Components.FEZTouch.Color.Yellow,
                            FEZ_Components.FEZTouch.Color.Black, defaultFont);
        while (true)
        {
           
            
            
        }


    }

    public static void TimeDate()
    {
        InitGraphics();

        DateTime DT;
        DT = RealTimeClock.GetTime();
        fezTouch.DrawString(160, 0, "Date Time: " + DT, FEZ_Components.FEZTouch.Color.Yellow,
                        FEZ_Components.FEZTouch.Color.Black, defaultFont);
    }

    public static void InitGraphics()
    {
        // create lcd configuration for FEZ Panda II
        FEZ_Components.FEZTouch.LCDConfiguration lcdConfig = new FEZ_Components.FEZTouch.LCDConfiguration(
            FEZ_Pin.Digital.Di28,
            FEZ_Pin.Digital.Di20,
            FEZ_Pin.Digital.Di22,
            FEZ_Pin.Digital.Di23,
            new FEZ_Pin.Digital[8] { FEZ_Pin.Digital.Di51, FEZ_Pin.Digital.Di50, FEZ_Pin.Digital.Di49, FEZ_Pin.Digital.Di48, FEZ_Pin.Digital.Di47, FEZ_Pin.Digital.Di46, FEZ_Pin.Digital.Di45, FEZ_Pin.Digital.Di44 },
            FEZ_Pin.Digital.Di24,
            FEZ_Pin.Digital.Di26,
            FEZ_Components.FEZTouch.Orientation.Landscape
            );

        // create touch configuration for FEZ Panda II
        FEZ_Components.FEZTouch.TouchConfiguration touchConfig = new FEZ_Components.FEZTouch.TouchConfiguration(SPI.SPI_module.SPI2, FEZ_Pin.Digital.Di25, FEZ_Pin.Digital.Di34);

        // create fez touch
        fezTouch = new FEZ_Components.FEZTouch(lcdConfig, touchConfig);

        // create font for text
        defaultFont = new FEZTouch.Fonts.FontCourierNew10();

        // clear the screen
        fezTouch.ClearScreen();
        
    }

}

}
[/CODE]


#6

@ r_sad

you are calling InitGraphics twice; in the main tread and in the TimeDate thread.

you are also writing to display from both threads…

it is also helpful if you tell us what kind of an exception you are experiencing.


#7

Yes, that is my intent, to write to the screen, in the different areas. I tried to call InitGraphics in its own thread thinking maybe that was the problem, so I just left that code line in. This is the error:

An unhandled exception of type ‘System.InvalidOperationException’ occurred in GHIElectronics.NETMF.Hardware.dll

This what shows in the output window:
#### Exception System.NullReferenceException - CLR_E_NULL_REFERENCE (3) ####
#### Message:
#### BaseCard.Program::TimeDate [IP: 0024] ####
A first chance exception of type ‘System.NullReferenceException’ occurred in BaseCard.exe
An unhandled exception of type ‘System.NullReferenceException’ occurred in BaseCard.exe


#8

You should not be doing two initializations. Do it once in Main() before starting the thread

You should also not be writing from two threads unless you are using locking.

The following statement should be changed, although I don’t think it is your problem:

fezTouch.DrawString(160, 0, "Date Time: " + DT, FEZ_Components.FEZTouch.Color.Yellow,
                            FEZ_Components.FEZTouch.Color.Black, defaultFont);

To:

fezTouch.DrawString(160, 0, "Date Time: " + DT.ToString(), FEZ_Components.FEZTouch.Color.Yellow,
                            FEZ_Components.FEZTouch.Color.Black, defaultFont);

#9

This line I tried in the while statement in main, and it works as is.

fezTouch.DrawString(160, 0, "Date Time: " + DT, FEZ_Components.FEZTouch.Color.Yellow, FEZ_Components.FEZTouch.Color.Black, defaultFont);

The other thing I found out about DrawString is, it does not do word wrap, it will throw up an exception error, if the line of text is to long.

I will have to look up thread lock, although the example that I was looking at, for regular C#, that showed the use of threads, did not use any locks. This is an interesting problem.


#10

The code below compiles and runs, but it is doing weird text print out. I moved the InitGraphics() before doing the thread start, that seem to solve the exception errors. The program is not running the way I expected it to run. Maybe the processor is to slow, but at least I did figure out how to run a thread. Any suggestions for fixing the way the text gets printed to the screen? Now it seems like I am getting garbage characters on the screen.

[CODE]
using System;
using System.Threading;
using Microsoft.SPOT;
using Microsoft.SPOT.Hardware;

using GHIElectronics.NETMF.FEZ;
using GHIElectronics.NETMF.Hardware;

namespace BaseCard
{
public class Program
{
static FEZ_Components.FEZTouch fezTouch;
static FEZ_Components.FEZTouch.Font defaultFont;

    public static void Main()
    {
        Thread dtThread = new Thread(new ThreadStart(TimeDate));

        // Start this first
        InitGraphics();

        dtThread.Start();
        
                         // x  y
        fezTouch.DrawString(0, 12, "BaseCard Program", FEZ_Components.FEZTouch.Color.Yellow,
                            FEZ_Components.FEZTouch.Color.Black, defaultFont);
        fezTouch.DrawString(120, 24, "AA", FEZ_Components.FEZTouch.Color.Yellow,
                            FEZ_Components.FEZTouch.Color.Black, defaultFont);
        while (true)
        {

           
            fezTouch.DrawString(0, 32, "Test Line. ", FEZ_Components.FEZTouch.Color.Yellow,
                            FEZ_Components.FEZTouch.Color.Black, defaultFont);
            
        }


    }

    public static void TimeDate()
    {

        DateTime DT;

        lock (fezTouch)
        {
            while (true)
            {

                Thread.Sleep(10);
                DT = RealTimeClock.GetTime();
                fezTouch.DrawString(140, 0, " " + DT, FEZ_Components.FEZTouch.Color.Yellow,
                                FEZ_Components.FEZTouch.Color.Black, defaultFont);
                // fezTouch.DrawString(0, 12, "ZZ", FEZ_Components.FEZTouch.Color.Yellow,
                //                 FEZ_Components.FEZTouch.Color.Black, defaultFont);

            }
        }
    }

    public static void InitGraphics()
    {
        // create lcd configuration for FEZ Panda II
        FEZ_Components.FEZTouch.LCDConfiguration lcdConfig = new FEZ_Components.FEZTouch.LCDConfiguration(
            FEZ_Pin.Digital.Di28,
            FEZ_Pin.Digital.Di20,
            FEZ_Pin.Digital.Di22,
            FEZ_Pin.Digital.Di23,
            new FEZ_Pin.Digital[8] { FEZ_Pin.Digital.Di51, FEZ_Pin.Digital.Di50, FEZ_Pin.Digital.Di49, FEZ_Pin.Digital.Di48, FEZ_Pin.Digital.Di47, FEZ_Pin.Digital.Di46, FEZ_Pin.Digital.Di45, FEZ_Pin.Digital.Di44 },
            FEZ_Pin.Digital.Di24,
            FEZ_Pin.Digital.Di26,
            FEZ_Components.FEZTouch.Orientation.Landscape
            );

        // create touch configuration for FEZ Panda II
        FEZ_Components.FEZTouch.TouchConfiguration touchConfig = new FEZ_Components.FEZTouch.TouchConfiguration(SPI.SPI_module.SPI2, FEZ_Pin.Digital.Di25, FEZ_Pin.Digital.Di34);

        // create fez touch
        fezTouch = new FEZ_Components.FEZTouch(lcdConfig, touchConfig);

        // create font for text
        defaultFont = new FEZTouch.Fonts.FontCourierNew10();

        // clear the screen
        fezTouch.ClearScreen();
        
    }

}

}
[/CODE]


#11

Try this:


using System;
using System.Threading;
using Microsoft.SPOT;
using Microsoft.SPOT.Hardware;

using GHIElectronics.NETMF.FEZ;
using GHIElectronics.NETMF.Hardware;


namespace BaseCard
{
    public class Program
    {
        static FEZ_Components.FEZTouch fezTouch;
        static FEZ_Components.FEZTouch.Font defaultFont;

        public static void Main()
        {

            //For test
            int i = 0;

            //Crude Setup RTC
            RealTimeClock.SetTime(new DateTime(2010, 03, 01, 12, 0, 0, 0));
            Utility.SetLocalTime(RealTimeClock.GetTime());

            // Start this first
            InitGraphics();
            
            //Define Thread
            Thread dtThread = new Thread(new ThreadStart(TimeDate));

            // x  y
            fezTouch.DrawString(0, 12, "BaseCard Program", FEZ_Components.FEZTouch.Color.Yellow,
                                FEZ_Components.FEZTouch.Color.Black, defaultFont);
            fezTouch.DrawString(120, 24, "AA", FEZ_Components.FEZTouch.Color.Yellow,
                                FEZ_Components.FEZTouch.Color.Black, defaultFont);

            // Start Thread
            dtThread.Start();

            while (true)
            {

                lock (fezTouch)
                {
                    if (i > 2000) i = 0; else i++;

                    fezTouch.DrawString(0, 32, "Test Line. "+i, FEZ_Components.FEZTouch.Color.Yellow,
                                    FEZ_Components.FEZTouch.Color.Black, defaultFont);
                }
                Thread.Sleep(10);
            }


        }

        public static void TimeDate()
        {

            DateTime DT;


            while (true)
            {
                Thread.Sleep(10);
                lock (fezTouch)
                {

                    DT = RealTimeClock.GetTime();
                    fezTouch.DrawString(140, 0, " " + DT, FEZ_Components.FEZTouch.Color.Yellow,
                                    FEZ_Components.FEZTouch.Color.Black, defaultFont);
                    // fezTouch.DrawString(0, 12, "ZZ", FEZ_Components.FEZTouch.Color.Yellow,
                    //                 FEZ_Components.FEZTouch.Color.Black, defaultFont);
                }

            }
        }

        public static void InitGraphics()
        {
            // create lcd configuration for FEZ Panda II
            FEZ_Components.FEZTouch.LCDConfiguration lcdConfig = new FEZ_Components.FEZTouch.LCDConfiguration(
                FEZ_Pin.Digital.Di28,
                FEZ_Pin.Digital.Di20,
                FEZ_Pin.Digital.Di22,
                FEZ_Pin.Digital.Di23,
                new FEZ_Pin.Digital[8] { FEZ_Pin.Digital.Di51, FEZ_Pin.Digital.Di50, FEZ_Pin.Digital.Di49, FEZ_Pin.Digital.Di48, FEZ_Pin.Digital.Di47, FEZ_Pin.Digital.Di46, FEZ_Pin.Digital.Di45, FEZ_Pin.Digital.Di44 },
                FEZ_Pin.Digital.Di24,
                FEZ_Pin.Digital.Di26,
                FEZ_Components.FEZTouch.Orientation.Landscape
                );

            // create touch configuration for FEZ Panda II
            FEZ_Components.FEZTouch.TouchConfiguration touchConfig = new FEZ_Components.FEZTouch.TouchConfiguration(SPI.SPI_module.SPI2, FEZ_Pin.Digital.Di25, FEZ_Pin.Digital.Di34);

            // create fez touch
            fezTouch = new FEZ_Components.FEZTouch(lcdConfig, touchConfig);

            // create font for text
            defaultFont = new FEZTouch.Fonts.FontCourierNew10();

            // clear the screen
            fezTouch.ClearScreen();

        }

    }
}



#12

Thanks Rajesh, those changes fixed everything, now it runs as expected.

To summarize, the FEZTouch is 320 x 240, when the font10 is used, you get 40 chars wide, and 20 lines. Line numbers are in increments of 12 (0, 12, 24, …), and char location is in increments of 8 (0,8,16, 24, …). I have not tried to liven up the screen by using color, that will come later.

Now what I would like to do is show the date, and time as separate items, on two lines. When you use the GetTime(), it provides the date/time as one. I did not see any commands for getting them as separate items, but I could have missed it. Is there such a command?

The other thing that I was wondering, can a part of the screen be separated, so a thread can have access to that specific section. Since the next thing I will be doing is adding the temperature driver, I would like to show the date, time, degrees F, and degrees C, on four separate lines in the upper right hand corner.


#13

[quote]Now what I would like to do is show the date, and time as separate items, on two lines. When you use the GetTime(), it provides the date/time as one. I did not see any commands for getting them as separate items, but I could have missed it. Is there such a command?
[/quote]

Try this :

fezTouch.DrawString(140, 0, " " + DT.TimeOfDay.ToString().Substring(0,8), FEZ_Components.FEZTouch.Color.Yellow,
                                    FEZ_Components.FEZTouch.Color.Black, defaultFont);

fezTouch.DrawString(140, 30, " " + DT.Date.ToString().Substring(0,10), FEZ_Components.FEZTouch.Color.Yellow,
                                    FEZ_Components.FEZTouch.Color.Black, defaultFont);

[quote]The other thing that I was wondering, can a part of the screen be separated, so a thread can have access to that specific section. Since the next thing I will be doing is adding the temperature driver, I would like to show the date, time, degrees F, and degrees C, on four separate lines in the upper right hand corner.
[/quote]

The above code already does this, the main thread updates the incremented variable at 0,32 and the TimeDate thread updates 140,0 with the date time.


#14

Is there any example code for creating a simple touch menu screen? What I would like to try now is maybe instead of showing the clock all the time, have a touch menu selection that would turn the clock on/off. Another touch selection for turning an LED on/off, some simple stuff to start out with.


#15

Check out what Glide gives you (for the bigger platforms), then go over and compare that to Spiral from Skewworks. Personally I have Glide (although unused I have to admit - not focussing on UI right now).

You can also just find a menu C# “shell” and port that to netmf - even if you don’t find exactly what you want, it gives you some more exposure to how people approach certain problems.


#16

A while back, I created a personal serial terminal program using Visual C# that uses buttons and all that. I am not sure as to how that would help me to create a test UI for the Touch screen. When I glanced at the Touch screen driver that I am using, I did not see any methods for creating buttons, and etc for the screen. I am to much of a new beginner to try to add those kinds of methods, that is why I was asking if there were any examples for doing something like that.


#17

The FEZ Touch driver includes an example application, which is shows how to create “buttons”. The buttons are colored rectangles at the bottom of the screen, and are used to select a color for the drawing “pen”, and to clear the display. Touch input for the buttons is done by calculating where the user touched the screen, and determining if the touch location falls within a button.

It’s simple and requires work by the developer, but it is efficient, and doesn’t require a lot of overhead in terms of a class hierarchy, virtual methods, etc.