32位合泰单片机实现串口通信

一、需要有的硬件实物和软件

HT32(32位合泰单片机,以下简称HT32)

  • 数据线(一定要是可以传输数据的,普通的充电线不一定可以),不知道是不是数据线的可以进行检验,参考博客
  • XCOM串口助手(网上下载即可)

二、需要了解的有关串口通信的知识

● 通用同步异步收发器 – USART
● 同时支持异步和时钟同步串行通信模式
● 异步工作频率高达 (fPCLK/16) MHz,同步工作频率高达 (fPCLK/8) MHz
● 全双工通信
● 完全可编程串行接口通信特性包括:
字长:7,8 或 9-bit 字符
校验位:奇、偶或无奇偶校验位的产生和检测
停止位:1 或 2 个停止位产生
位顺序:低位优先或高位优先传输
● 错误侦测:奇偶校验、溢出和帧错误
● 自动硬件流控制模式 – RTS、CTS
● IrDA SIR 编码器和解码器
● 具有输出使能控制的 RS485 模式
● FIFO 深度:8×9 位接收器和发送器

通用同步异步收发器 USART 提供了一个灵活的采用同步或异步传输的全双工数据交换。USART用来转换并行和串行接口之间的数据,通常也被用作 RS232 标准通信。USART 外设功能支持四种类型的中断,包括线路状态中断、发送 FIFO 空中断、接收器阈值级别到达中断和超时中断。USART 模块包括一个发送 FIFO (TX_FIFO) 和一个接收 FIFO (RX_FIFO)。通过读取线路状态寄存器LSR,软件可以检测 USART的错误状态。状态包括传输模式下的类型和状况以及因奇偶、溢出、帧和暂停事件造成的错误状况。
在这里插入图片描述
在这里插入图片描述

最终实现效果
在这里插入图片描述

三、HT32实现串口通信代码

main.c

#include "ht32.h"
#include "usart.h"

int main()
{

  USART_Configuration();//串口初始化
	while(1)
	{
		 //循环发送字符串,用于测试是否通信成功
		 Usart_SendStr(COM1_PORT,"你好!");
	}
 
}

usart.c

#include "usart.h"
#include "ht32f5xxxx_gpio.h"
#include "ht32_board.h"
#include "ht32_board_config.h"

/*USART_Configuration函数说明:配置usart串口*/
void USART_Configuration(void)
{
  USART_InitTypeDef USART_InitStructure;
	
	CKCU_PeripClockConfig_TypeDef CKCUClock= {{0}};
	CKCUClock.Bit.AFIO = 1;
	COM1_CLK(CKCUClock)  = 1;  //开启时钟
	CKCU_PeripClockConfig(CKCUClock, ENABLE);
		
  AFIO_GPxConfig(USART_GPIO_GROUP, USART_TX_PIN, AFIO_FUN_USART_UART);
  AFIO_GPxConfig(USART_GPIO_GROUP, USART_RX_PIN, AFIO_FUN_USART_UART);

  /*
		波特率: 115200
		长度:   8bits
		停止位: 1位
	  校验位: 无			
	  模式:   正常模式
  */
  USART_InitStructure.USART_BaudRate = 115200;
  USART_InitStructure.USART_WordLength = USART_WORDLENGTH_8B;
  USART_InitStructure.USART_StopBits = USART_STOPBITS_1;
  USART_InitStructure.USART_Parity = USART_PARITY_NO;
  USART_InitStructure.USART_Mode = USART_MODE_NORMAL;
  USART_Init(COM1_PORT, &USART_InitStructure);

  // 使能 COM1_PORT  发送和接收 
  USART_TxCmd(COM1_PORT, ENABLE);
  USART_RxCmd(COM1_PORT, ENABLE);
	
	 //中断设置    
   NVIC_EnableIRQ(COM1_IRQn);

   USART_IntConfig(COM1_PORT, USART_FLAG_RXDR , ENABLE);
   USART_IntConfig(COM1_PORT, USART_FLAG_TXDE , ENABLE);
 
	/* 设置FIFO接收等级*/                                                                                   
    USART_RXTLConfig(COM1_PORT, USART_RXTL_04);
}


/*COM1_IRQHandler函数说明:接收中断服务函数*/
void COM1_IRQHandler(void)
{
	u8 data;
	
	if( USART_GetFlagStatus(COM1_PORT, USART_FLAG_RXDR ) )//接收中断
	{
		data = USART_ReceiveData(COM1_PORT);//读取接收到的数据                         
		printf("data = %c\n",data);  //把收到的数据发送回电脑                                		
	}
}


/*函数说明:FIFO*/
void USART_Tx(const char* TxBuffer, u32 length)
{
  int i;

  for (i = 0; i < length; i++)
  {
    while (!USART_GetFlagStatus(COM1_PORT, USART_FLAG_TXC));
    USART_SendData(COM1_PORT, TxBuffer[i]);
  }
}


/*函数说明:发送一个字节*/
void Usart_Sendbyte(HT_USART_TypeDef* USARTx, u8 data)
{
	USART_SendData(USARTx, data);
	while (USART_GetFlagStatus(USARTx, USART_FLAG_TXDE) == RESET);		
}
 
/*Usart_SendArray函数说明:发送数组*/
void Usart_SendArray(HT_USART_TypeDef* USARTx, u8 *array,u8 num)
{
	u8 i;
	for( i = 0;i < num;i++)
	{
		Usart_Sendbyte(USARTx,*array);
		array++;
	}
}

/*Usart_SendStr函数说明:发送字符串*/
void Usart_SendStr(HT_USART_TypeDef* USARTx, uint8_t *str)
{
	uint8_t i;
	for(i = 0;str[i] != '\0';i++)
	{
		Usart_Sendbyte(USARTx,str[i]);
	}
}


### 前端圆环进度条实现方法 #### 使用 SVG 的 Circle 元素绘制圆环进度条 通过 `SVG` 中的 `circle` 元素,可以分别创建两个圆形:一个是用于显示底色的基础圆形,另一个则是动态变化表示进度的部分。基础圆形可以通过设置固定的样式来呈现背景颜色;而进度部分则需要计算路径长度并应用到 `stroke-dasharray` 和 `stroke-dashoffset` 属性上以模拟填充效果[^1]。 以下是基于此方式的一个简单示例: ```html <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- 底层圆 --> <circle cx="50" cy="50" r="40" stroke="#eaeaea" stroke-width="8" fill="transparent"></circle> <!-- 进度圆 --> <circle class="progress-circle" cx="50" cy="50" r="40" stroke-linecap="round" stroke="#ff7f50" stroke-width="8" fill="transparent" style="--percentage:90;"></circle> </svg> <style> .progress-circle { transition: all .3s ease; transform-origin: center; /* 计算百分比 */ stroke-dasharray: calc(2 * 3.14159 * 40 * var(--percentage) / 100), calc(2 * 3.14159 * 40); } </style> ``` #### 利用 ECharts 绘制圆环进度条 对于更复杂的场景者希望快速集成的功能需求来说,借助第三方库如 **ECharts** 是一种高效的选择。它提供了丰富的表类型支持以及高度自定义的能力。要制作一个标准的圆环进度条,则需配置好系列中的数据项,并调整其视觉属性使之呈现出空心的效果[^2]。 下面是一个基本的例子展示如何利用 setOption 函数初始化带有特定参数选项的对象完成渲染过程: ```javascript var myChart = echarts.init(document.getElementById('main')); option = { series: [{ name:'访问来源', type:'pie', radius: ['50%', '70%'], // 定义内外半径比例形成环状结构 avoidLabelOverlap: false, label:{ normal:{show:false}, emphasis:{show:true,textStyle:{fontSize:20}} }, data:[ {value:70,name:''},{value:30,name:'',itemStyle:{color:'#ccc'}} ] }] }; myChart.setOption(option); ``` #### CSS3 动态生成圆形进度指示器 如果偏好纯 HTML/CSS 解决方案而不依赖 JavaScript 额外框架的话,那么也可以尝试仅依靠 CSS 来构建这样的 UI 控件。这种方法通常涉及伪类选择器 ::before/:after 结合 border-radius 设置达到近似形表现形式的同时配合动画特性让数值更新更加流畅自然[^3]。 代码片段如下所示: ```css @keyframes rotate { from{transform:rotate(0deg);} to{transform:rotate(360deg)} } .circle-progress{ position:relative;width:10em;height:10em;border-radius:50%;background:#eee; animation-duration:.5s;animation-name:rotate;animation-timing-function:linear; } .circle-progress::after{ content:"";display:block;margin:auto;padding-top:100%; clip-path:polygon( 50% 5%,//top point ... ); } ``` #### Ant Design Progress 组件的应用案例 Antd 提供了一个名为 `<Progress>` 的内置组件用来简化开发流程,在其中指定宽度、类型(此处应选 circle)、当前百分比以及其他可选状态字段即可轻松获得所需界面布局[^4]。 实际运用时只需按照官方文档说明引入相应模块并将必要 props 赋予标签内部即能生效。 ```jsx import React,{useState}from'react'; import {Progress}from'antd'; function App(){ const [percent,setPercent]= useState(0); setTimeout(()=>{ let newPerc=Math.min(percent+10,100); setPercent(newPerc); },1000) return ( <> Current Percent:{percent}%<br/> <Progress width={100}type='circle'percent={percent}/> </> ) } export default App; ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

信奥教练橙子

你的鼓励将是我的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值