＜tauri＞＜rust＞＜GUI＞基于rust和tauri，实现一个大寰电爪PGHL（串口设备）定制化控制程序

前言

本文是基于rust和tauri，由于tauri是前、后端结合的GUI框架，既可以直接生成包含前端代码的文件，也可以在已有的前端项目上集成tauri框架，将前端页面化为桌面GUI。

环境配置

1. 系统：windows 10
2. 平台：visual studio code
3. 语言：rust、javascript
4. 库：tauri2.0

概述

本文是基于使用大寰电爪（串口通讯）的定制化控制程序，使用tauri来实现GUI，内部函数基于rust和javascript。
大寰夹爪厂家本身是有上位机调试程序的，但我感觉不好用，所以就基于他们的手册，自己开发了基于tauri的控制，UI如下：

注：本文是基于特定设备的定制化控制程序，如果你正好也使用了相同的设备，那么可以试试本程序。

1、创建前端项目

可以参考我之前的博文，本文不再赘述：
1、＜tauri＞＜rust＞＜GUI＞基于rust和tauri，在已有的前端框架上手动集成tauri示例
我们需要创建一个主页面，下面我们大致给一下页面代码，主要是左边的“控制页面”和右边的“状态页面”：

控制页面

  <div id="operatordiv">
      <div id="titlediv">
      <diV>
        <h2>大寰PGHL夹爪调试</h2>
      </diV>
      <div>
        <div>
          <span>波特率：</span>
          <select id="baudrate" class="baudrate">
            <option value="115200">115200</option>
            <option value="9600">9600</option>
            <option value="19200">19200</option>
            <option value="38400">38400</option>
            <option value="57600">57600</option>
          </select>
          <span>数据位：</span>
          <select id="databit" class="databit">
            <option value="Eight">8</option>
            <option value="Seven">7</option>
            <option value="Six">6</option>
            <option value="Five">5</option>
          </select>
          <span>校验位：</span>
          <select id="parity" class="parity">
            <option value="None">无</option>
            <option value="Even">偶</option>
            <option value="Odd">奇</option>
          </select>
          <span>停止位：</span>
          <select id="stopbit" class="stopbit">
            <option value="One">1</option>
            <option value="Two">2</option>
          </select>
        </div>
        
      </div>
      </div>
      <div id="serialinitdiv">
        <button id