Integral Design

Grazie agli strumenti offerti dal .NET Gadgeteer SDK, creare interfacce grafiche touch screen è estremamente semplice. L’oggetto Display,  infatti, oltre alle classiche funzioni “primitive” per disegnare immagini, forme geometriche e testo, espone un oggetto, chiamato WPFWindow, grazie al quale è possibile creare oggetti con una filosofia simile a quella che si avrebbe con WPF.

Vediamo un esempio concreto, utilizzando il modulo Display T35 di GHI Electronics. Definiamo innanzi tutto una funzione SetupWindow:

private Bitmap normalButton;
private Bitmap pressedButton;
private Image imgButton;
private Text txtMessage;

private void SetupWindow()
{
    Font baseFont = Resources.GetFont(Resources.FontResources.NinaB);
    normalButton = Resources.GetBitmap(Resources.BitmapResources.NormalButton);
    pressedButton = Resources.GetBitmap(Resources.BitmapResources.PressedButton);

    Window window = display.WPFWindow;
    Canvas canvas = new Canvas();
    window.Child = canvas;

    imgButton = new Image(normalButton);
    imgButton.TouchDown += new TouchEventHandler(imgButton_TouchDown);
    imgButton.TouchUp += new TouchEventHandler(imgButton_TouchUp);
    canvas.Children.Add(imgButton);
    Canvas.SetTop(imgButton, 50);
    Canvas.SetLeft(imgButton, 90);

    txtMessage = new Text(baseFont, "Button is NOT PRESSED");
    canvas.Children.Add(txtMessage);
    Canvas.SetTop(txtMessage, 200);
    Canvas.SetLeft(txtMessage, 90);
}

In questo esempio, creiamo un oggetto Canvas per contenere tutti gli oggetti dell’interfaccia: dal momento che il display è a dimensione fissa, esso ci permette di posizionare gli oggetti esattamente dove vogliamo. Creiamo poi un’immagine e ci registriamo sui suoi eventi TouchDown e TouchUp, che come è facile intuire dal nome vengono generati rispettivamente quando si tocca l’immagine con il dito e quando lo si alza dallo schermo. Infine, inseriamo anche una casella di testo.

Il nostro obiettivo è cambiare l’immagine e il testo quando si tocca l’immagine, quindi dobbiamo scrivere il seguente codice nei gestori degli eventi:

private void imgButton_TouchDown(object sender, TouchEventArgs e)
{
    imgButton.Bitmap = pressedButton;
    txtMessage.TextContent = "Button is PRESSED";
}

private void imgButton_TouchUp(object sender, TouchEventArgs e)
{
    imgButton.Bitmap = normalButton;
    txtMessage.TextContent = "Button is NOT PRESSED";
}

E’ tutto molto semplice: Il framework si occupa di inserire gli oggetti nella posizione specificata dello schermo, di capire le coordinate del punto che abbiamo toccato e di lanciare gli eventi corrispondenti sull’oggetto che si trova in tale posizione. Ovviamente, il numero di oggetti disponibili è limitato, ma le classi disponibili,  come Canvas, Text, Image e ListBox, possono essere utilizzate per creare controlli più complessi.

In conclusione, il file Program.cs completo della nostra applicazione è il seguente:

using System;
using Microsoft.SPOT;
using Microsoft.SPOT.Presentation;
using Microsoft.SPOT.Presentation.Controls;
using Microsoft.SPOT.Presentation.Media;

using GT = Gadgeteer;
using GTM = Gadgeteer.Modules;
using Gadgeteer.Modules.GHIElectronics;
using Microsoft.SPOT.Input;

namespace WPFWindowExample
{
    public partial class Program
    {
        void ProgramStarted()
        {
            SetupWindow();

            // Do one-time tasks here
            Debug.Print("Program Started");
        }

        private Bitmap normalButton;
        private Bitmap pressedButton;
        private Image imgButton;
        private Text txtMessage;

        private void SetupWindow()
        {
            Font baseFont = Resources.GetFont(Resources.FontResources.NinaB);
            normalButton = Resources.GetBitmap(Resources.BitmapResources.NormalButton);
            pressedButton = Resources.GetBitmap(Resources.BitmapResources.PressedButton);

            Window window = display.WPFWindow;
            Canvas canvas = new Canvas();
            window.Child = canvas;

            imgButton = new Image(normalButton);
            imgButton.TouchDown += new TouchEventHandler(imgButton_TouchDown);
            imgButton.TouchUp += new TouchEventHandler(imgButton_TouchUp);
            canvas.Children.Add(imgButton);
            Canvas.SetTop(imgButton, 50);
            Canvas.SetLeft(imgButton, 90);

            txtMessage = new Text(baseFont, "Button is NOT PRESSED");
            canvas.Children.Add(txtMessage);
            Canvas.SetTop(txtMessage, 200);
            Canvas.SetLeft(txtMessage, 90);
        }

        private void imgButton_TouchDown(object sender, TouchEventArgs e)
        {
            imgButton.Bitmap = pressedButton;
            txtMessage.TextContent = "Button is PRESSED";
        }

        private void imgButton_TouchUp(object sender, TouchEventArgs e)
        {
            imgButton.Bitmap = normalButton;
            txtMessage.TextContent = "Button is NOT PRESSED";
        }
    }
}

L’applicazione di esempio è disponibile per il download.