快速设计一个简单的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(,OUTPUT);
   Serial.begin();
 }

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

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

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

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="" Width=""
         Loaded="Window_Loaded">
     <Grid>
         <Grid.RowDefinitions>
             <RowDefinition Height=""/>
             <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=""
                    FontSize=""/>
         <StackPanel Orientation="Horizontal"
                     Grid.Row="" >
             <TextBlock HorizontalAlignment="Left"
                    Grid.Row=""
                    Text="光照值："/>
             <TextBlock HorizontalAlignment="Left"
                    Grid.Row=""
                    Name="light_result"/>
         </StackPanel>

         <StackPanel Grid.Row=""
                     Grid.Column=""
                     Orientation="Horizontal"
                     HorizontalAlignment="Center">
             <Button x:Name="开始"
                     Content="开始"
                     Click="开始_Click"
                     Height=""
                     Width=""
                     Margin='10,0,10,0'/>
             <Button x:Name="关闭"
                 Content="关闭"
                 Click="关闭_Click"
                 Height=""
                 Width=""/>
         </StackPanel>

         <ProgressBar Grid.Row="" Grid.ColumnSpan=""
                      Minimum="" Maximum=""
                      Height="" Width=""
                      HorizontalAlignment="Left"
                      x:Name="light_value"/>
         <d3:ChartPlotter x:Name="plotter"
                          Margin="10,20,10,10"
                          Grid.Row=""
                          Grid.ColumnSpan="">
             <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 = ;

         public MainWindow()
         {
             InitializeComponent();
         }

         private void 开始_Click(object sender, RoutedEventArgs e)
         {
             try
             {
                 myPort.BaudRate = ;
                 myPort.DataBits = ;
                 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();
             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();

             if (myPort.IsOpen)
             {
                 myPort.Close();

             }
             else
             {
                 MessageBox.Show("串口已关闭");
             }

             timer.Stop();
         }

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

         }

         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++;
         }
     }
 }

程序运行效果：

以上就是软硬件系统的全部细节，欢迎拍砖！