用WPF快速设计一个简单的串口上位机

最近一直在学习UWP,其中有的技术参考了WPF，所以又回头再来学习WPF，感觉学的东西很杂，必须记录一下，不然时间长了还得忘掉，于是申请开始写博客，将学习的心得记录一下，以备后用。这次是因为公司内训，刚好想着推广一下开源硬件，所以选择了Arduino，而又结合WPF的强大功能，设计了串口上位机。

1.Arduino UNO作为下位机

利用Arduino作为下位机，理由很简单，语法很简单，上手很快。

1.电路连接

下图为电路原理图，主要利用模拟口A0读取光敏电阻和普通电阻的分压值，然后通过设定逻辑控制LED的状态。之后通过串口将数据发送给电脑。

用WPF快速设计一个简单的串口上位机

2.下位机程序

在arduino IDE里完成。代码结构非常简单，setup()中设置IO口及串口，然后在loop()中读取数值，根据数据控制LED状态，并将数值从串口发送出去。

 1 void setup() {
 2   // put your setup code here, to run once:
 3   pinMode(13,OUTPUT);
 4   Serial.begin(9600);
 5 }
 6 
 7 void loop() {
 8   // put your main code here, to run repeatedly:
 9 int val=analogRead(0);
10 int time;
11 int result;
12 for(time=0;time<20;time++)
13 {
14   result+=val;
15 }
16 result=result/20;
17 
18 if(result<256)
19 {
20   digitalWrite(13,HIGH);
21 }
22 else{
23   digitalWrite(13,LOW);
24 }
25 
26 Serial.println(result);
27 delay(10);
28 }

2.WPF串口上位机。

这里主要使用WPF自带的串口控件、进度条、以及DynamicDataDisplay控件实现上位机数据显示。具体实现是：将arduino发过来的数据在页面上通过进度条显示出来，同时画出曲线。

1.串口控件SerialPort。

对于该控件，简单的使用过程如下：

实例化一个串口；
配置串口参数，例如波特率、数据位、串口号；
打开串口；
添加串口接收数据事件；
处理数据接收事件。

需要注意的是：多线程问题，由于WPF的控件都在UI线程，而串口数据在另外1个线程。一开始直接将串口数据给进度条赋值会出现错误，后来参考网上资料，使用了相应控件的dispatcher.invoke(Action())，解决了数据更新问题。关于多线程的问题，后续还需要再继续学习，搞清这一部分。

而数据曲线绘制使用了DynamicDataDisplay控件，相关使用方法可参考网上，由于第1次使用该控件，感觉效果还行。

代码写的很嫩。

程序界面如下，这里没有选择串口的选型，因为提前看了串口号。

用WPF快速设计一个简单的串口上位机

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

程序运行效果：

用WPF快速设计一个简单的串口上位机

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

秒客网

用WPF快速设计一个简单的串口上位机

1.Arduino UNO作为下位机

1.电路连接

2.下位机程序

2.WPF串口上位机。

1.串口控件SerialPort。

相关文章