Arduino και εφαρμογές windows (μέρος 2ο) XAML και περιβάλλον χρήστη εφαρμογής

Arduino και Εφαρμογές Windows : Δημιουργία User Interface της εφαρμογής

Arduino και Εφαρμογές Windows. Πάμε τώρα να κατασκευάσουμε την εφαρμογή που θα επικοινωνεί με το Arduino.
Ανοίγουμε το Visual Studio, ξεκινάμε ένα καινούριο Project (File->New->Project) και επιλέγουμε VisualC#->Windows και στο μενού δεξιά WPF Application. Της δίνουμε ένα όνομα και πατάμε OK.

Αφού κατασκευάσει το Visual Studio το καινούριο Solution τότε πατάμε πάνω στο tab MainWindow.xaml Βλέπουμε εδώ πως το Visual studio έχει χτίσει από μόνο του αρκετό κώδικα. Εμείς τώρα θα αλλάξουμε το μεγέθος και τον τίτλο του παραθύρου αντικαθιστώντας την γραμμή 8 με την παρακάτω:

Title=”Led Control” Height=”250″ Width=”350″ ResizeMode=”NoResize”
και μέσα στην ετικέτα θα γράψουμε τον παρακάτω κώδικα για να χτίσουμε το περιβάλλον χρήστη που θα έχει η εφαρμογή μας.

<Rectangle HorizontalAlignment="Left" Height="95" Margin="13,107,0,0" Stroke="Black"
                   VerticalAlignment="Top" Width="310" RadiusX="10" RadiusY="10"/>

        <Rectangle HorizontalAlignment="Left" Height="95" Margin="13,8,0,0" Stroke="Black"
                   VerticalAlignment="Top" Width="310" RadiusX="10" RadiusY="10"/>

        <Button x:Name="button_Led_On" Content="Led On" HorizontalAlignment="Left" Margin="208,138,0,0" 
                VerticalAlignment="Top" Width="75" Click="button_Led_On_Click"/>

        <Button x:Name="button_Led_Off" Content="Led Off" HorizontalAlignment="Left" Margin="208,163,0,0"
                VerticalAlignment="Top" Width="75" Click="button_Led_Off_Click"/>

        <TextBlock x:Name="textBlock" HorizontalAlignment="Left" Margin="58,152,0,0" TextWrapping="Wrap" 
                   Text="Led Status" VerticalAlignment="Top"/>

        <TextBlock x:Name="textBlockLedStatus" HorizontalAlignment="Left" Margin="128,152,0,0" 
                   TextWrapping="Wrap" VerticalAlignment="Top" Width="75" Background="Gray" TextAlignment="Center"/>

        <TextBox x:Name="textBox_SerialPort" HorizontalAlignment="Left" Height="23" Margin="38,75,0,0" 
                 TextWrapping="Wrap" Text="COM3" VerticalAlignment="Top" Width="85"/>

        <TextBlock x:Name="textBlock2" HorizontalAlignment="Left" Margin="28,49,0,0" TextWrapping="Wrap" 
                   Text="Arduino Serial Port" VerticalAlignment="Top" Height="23" Width="105"/>

        <Button x:Name="button_Connect" Content="Connect Disconnect" HorizontalAlignment="Left"
                Margin="238,55,0,0" VerticalAlignment="Top" Width="75" Click="button_Connect_Click" Height="43"/>

        <TextBlock x:Name="textBlock2_Copy" HorizontalAlignment="Left" Margin="138,49,0,0" TextWrapping="Wrap" 
                   VerticalAlignment="Top" Height="23" Width="95"><Run Text="Serial Connection "/><LineBreak/><Run/></TextBlock>

        <TextBlock x:Name="textBlock_Status" HorizontalAlignment="Left" Margin="138,76,0,0" TextWrapping="Wrap" 
                   VerticalAlignment="Top" Height="23" Width="85" TextAlignment="Center" Background="#FFF34B4B">
                    <Run Text="Disconnected"/><LineBreak/><Run/></TextBlock>

        <TextBlock x:Name="textBlock2_Copy1" HorizontalAlignment="Left" Margin="23,11,0,0" TextWrapping="Wrap" 
                   Text="Arduino Connection" VerticalAlignment="Top" Height="18" Width="110" FontSize="10"/>

        <TextBlock x:Name="textBlock2_Copy2" HorizontalAlignment="Left" Margin="23,111,0,0" TextWrapping="Wrap" 
                   Text="Led Control" VerticalAlignment="Top" Height="18" Width="55" FontSize="10"/>

Arduino και Εφαρμογές Windows: Επεξήγηση κώδικα XAML

Με τον παραπάνω κώδικα δημιουργήσαμε όλα τα απαραίτητα κουμπιά και κείμενα (όπως φαίνονται πάνω) ώστε να έχουμε ενημέρωση και έλεγχο του λαμπτήρα LED.

Δημιουργήσαμε ένα TextBox με όνομα “textBox_SerialPort” από όπου θα παίρνει το πρόγραμμα μας την πληροφορία για την θύρα COM που είναι συνδεδεμένο το Arduino (μπορούμε να βρούμε ποια θύρα είναι αυτή πηγαίνοντας στο Control Panel\System and Security\System και επιλέγουμε Device Manager και πατάμε στο Ports(COM&LPT) ).

Δημιουργήσαμε ακόμα 3 κουμπιά από τα οποία θα ανάβουμε και θα σβήνουμε τον λαμπτήρα LED και με το τρίτο θα ξεκινάμε και θα σταματάμε την επικοινωνία μεταξύ Arduino και υπολογιστή.

Επίσης δημιουργήσαμε κάποια Text Blocks τα οποία θα ενημερώνονται για την κατάσταση της σύνδεσης και του λαμπτήρα και θα αλλάζουν το φόντο τους σύμφωνα με την κατάσταση που βρίσκεται το κάθε ένα την δεδομένη στιγμή. Αφού τελειώσαμε με το περιβάλλον χρήστη.