快速設計一個簡單的WPF串口上位機

最近一直在學習UWP,其中有的技術參考了WPF，所以又回頭再來學習WPF，感覺學的東西很雜，必須記錄一下，不然時間長了還得忘掉，於是申請開始寫博客，將學習的心得記錄一下，以備后用。這次是因為公司內訓，剛好想着推廣一下開源硬件，所以選擇了Arduino，而又結合WPF的強大功能，設計了串口上位機。

1.Arduino UNO作為下位機

利用Arduino作為下位機，理由很簡單，語法很簡單，上手很快。

1.電路連接

下圖為電路原理圖，主要利用模擬口A0讀取光敏電阻和普通電阻的分壓值，然后通過設定邏輯控制LED的狀態。之后通過串口將數據發送給電腦。

2.下位機程序

在arduino IDE里完成。代碼結構非常簡單，setup()中設置IO口及串口，然后在loop()中讀取數值，根據數據控制LED狀態，並將數值從串口發送出去。

void setup() {
  // put your setup code here, to run once:
  pinMode(13,OUTPUT);
  Serial.begin(9600);
}

void loop() {
  // put your main code here, to run repeatedly:
int val=analogRead(0);
int time;
int result;
for(time=0;time<20;time++)
{
  result+=val;
}
result=result/20;

if(result<256)
{
  digitalWrite(13,HIGH);
}
else{
  digitalWrite(13,LOW);
}

Serial.println(result);
delay(10);
}

2.WPF串口上位機。

這里主要使用WPF自帶的串口控件、進度條、以及DynamicDataDisplay控件實現上位機數據顯示。具體實現是：將arduino發過來的數據在頁面上通過進度條顯示出來，同時畫出曲線。

1.串口控件SerialPort。

對於該控件，簡單的使用過程如下：

1. 實例化一個串口；
2. 配置串口參數，例如波特率、數據位、串口號；
3. 打開串口；
4. 添加串口接收數據事件；
5. 處理數據接收事件。

需要注意的是：多線程問題，由於WPF的控件都在UI線程，而串口數據在另外1個線程。一開始直接將串口數據給進度條賦值會出現錯誤，后來參考網上資料，使用了相應控件的dispatcher.invoke(Action())，解決了數據更新問題。關於多線程的問題，后續還需要再繼續學習，搞清這一部分。

而數據曲線繪制使用了DynamicDataDisplay控件，相關使用方法可參考網上，由於第1次使用該控件，感覺效果還行。

代碼寫的很嫩。

程序界面如下，這里沒有選擇串口的選型，因為提前看了串口號。

 

xaml代碼：

<Window x:Class="Communication.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Communication"
        xmlns:d3="http://research.microsoft.com/DynamicDataDisplay/1.0"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525"
        Loaded="Window_Loaded">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="40"/>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <TextBlock HorizontalAlignment="Center"
                   Text="光照度顯示程序"
                   Grid.ColumnSpan="2"
                   FontSize="30"/>
        <StackPanel Orientation="Horizontal" 
                    Grid.Row="1" >
            <TextBlock HorizontalAlignment="Left"
                   Grid.Row="1"
                   Text="光照值："/>
            <TextBlock HorizontalAlignment="Left"
                   Grid.Row="1"
                   Name="light_result"/>
        </StackPanel>

        <StackPanel Grid.Row="1"
                    Grid.Column="1" 
                    Orientation="Horizontal"
                    HorizontalAlignment="Center">
            <Button x:Name="開始" 
                    Content="開始"
                    Click="開始_Click"
                    Height="20"
                    Width="60"
                    Margin='10,0,10,0'/>
            <Button x:Name="關閉"
                Content="關閉"
                Click="關閉_Click"
                Height="20"
                Width="60"/>
        </StackPanel>
       
        <ProgressBar Grid.Row="2" Grid.ColumnSpan="2" 
                     Minimum="0" Maximum="1023" 
                     Height="20" Width="300" 
                     HorizontalAlignment="Left"
                     x:Name="light_value"/>
        <d3:ChartPlotter x:Name="plotter" 
                         Margin="10,20,10,10"
                         Grid.Row="3"
                         Grid.ColumnSpan="2">
            <d3:HorizontalAxis>
                <d3:HorizontalIntegerAxis/>
            </d3:HorizontalAxis>
            <d3:VerticalAxis>
                <d3:VerticalIntegerAxis/>
            </d3:VerticalAxis>
            <d3:Header Content="光照曲線"/>
            <d3:VerticalAxisTitle Content="光照強度"/>
        </d3:ChartPlotter>
    </Grid>
</Window>

后台代碼：

using Microsoft.Research.DynamicDataDisplay;
using Microsoft.Research.DynamicDataDisplay.DataSources;
using System;
using System.IO.Ports;
using System.Threading;
using System.Windows;
using System.Windows.Media;
using System.Windows.Threading;

namespace Communication
{
    /// <summary>
    /// MainWindow.xaml 的交互邏輯
    /// </summary>
    /// 

    public partial class MainWindow : Window
    {

        SerialPort myPort = new SerialPort();
        double result;
        bool portClosing;
        string lightValue;

        private ObservableDataSource<Point> dataSource = new ObservableDataSource<Point>();
        private DispatcherTimer timer = new DispatcherTimer();
        int i = 0;

        public MainWindow()
        {
            InitializeComponent();
        }

        private void 開始_Click(object sender, RoutedEventArgs e)
        {
            try
            {
                myPort.BaudRate = 9600;
                myPort.DataBits = 8;
                myPort.PortName = "COM3";
                myPort.NewLine = "\r\n";
                myPort.Open();
                portClosing = false;
            }
            catch (Exception err)
            {
                MessageBox.Show(err.Message);

            }

            myPort.DataReceived += MyPort_DataReceived;

            timer.Interval = TimeSpan.FromMilliseconds(200);
            timer.Tick += drawPoint;
            timer.IsEnabled = true;
            plotter.Viewport.FitToView();

        }

        private void MyPort_DataReceived(object sender, SerialDataReceivedEventArgs e)
        {
            if (portClosing)
            {
                return;
            }

            try
            {
                lightValue = myPort.ReadLine();
                result = double.Parse(lightValue);
            }

            catch(Exception err1)
            {
                //MessageBox.Show(err1.Message);
                
            }

            light_value.Dispatcher.BeginInvoke(new Action(() =>
            {
                light_value.Value = result;
            }));

            light_result.Dispatcher.BeginInvoke(new Action(() =>
            {
                light_result.Text = result.ToString();
            }));
        }

        private void 關閉_Click(object sender, RoutedEventArgs e)
        {
            portClosing = true;

            Thread.Sleep(10);

            if (myPort.IsOpen)
            {               
                myPort.Close();
                
            }
            else
            {
                MessageBox.Show("串口已關閉");
            }

            timer.Stop();
        }

        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            plotter.AddLineGraph(dataSource, Colors.Green, 2, "光照度");

        }

        private void drawPoint(object sender, EventArgs e)
        {
            double x = i;
            double y = result;

            Point point = new Point(x,y);
            dataSource.AppendAsync(base.Dispatcher, point);
            i++;
        }
    }
}

程序運行效果：

以上就是軟硬件系統的全部細節，歡迎拍磚！