项目描述

项目介绍

本次活动是使用NXP的FRDM-MCXN947板卡来完成实现任务，其中有三个任务可供选择，大致分为三个方向：

1. USB、UART、CAN相关的内容
2. 以太网通讯相关的
3. 使用eIQ NPU 实现机器学习加速

我选择的是任务2，大致的项目需求如下：

使用板卡上的以太网接口连接到电脑上并通过以太网和电脑通信，实现数据传输。要求电脑可以获取到板卡上的温度，触摸和按键信息，并可以通过电脑控制板卡上的RGB LED灯（有搭配扩展模块，传感器类的在电脑上显示数据，执行器类的能用电脑控制其工作）

设计思路

1. 确定硬件的连接情况，和能够使用的硬件
2. 1. 有RJ45网口
   2. RGB灯
   3. 按键
2. 确定软件框架
3. 1. 操作系统：使用Free RTOS操作系统
   2. 以太网：本项目使用的是WebServer的模式，在浏览器中输入对应的IP地址即可在网页端来进行采集和控制

硬件介绍

拿到一块新的板子，知道了如何供电，以及如何编译下载程序，就可以开始愉快的玩耍了。

这是官方手册中的框图，我将介绍下面红色区域，这是任务相关的几个硬件部分

供电下载部分

仅需一根Type-C即可完成供电和下载，通过NXP的LPC55S69JEV98这一块基于ARM Cortex-M33内核的微控制器实现。

有几个需要注意的点：

1. J18：开启或禁用串口调试的VCOM
2. J19：开启或禁用SWD
3. J21：控制从内部Flash启动还是启动ISP模式
4. J23：外部SWD下载
5. 有三颗LED来指示相关的下载状态

以太网部分

MCXN947中集成了集成了ETH，说明具有MAC层功能，只需要外接一个具有PHY功能的芯片。开发板上选择的是LAN8741A-E，最高可以支持1000Mpbs的数据速率，MCXN947 MCU与LAN8741A-E之间的连接使用的是RMII接口。RMII是一种简化版的媒体独立接口（MII），减少了信号线的数量，降低了复杂性。

软件流程图

软件主要分别两块需要编写，

1. MCXN947的程序代码【使用Free RTOS操作系统】
2. HTML+CSS+JS的网页端的代码【有一个主界面和四个子界面】

MCU

Web端

介绍一下Web的主要编写关键的地方，（注：本人并不是前端开发的技术人员，全部通过例程、AI和自己的摸索完成的）

有一个主显示界面，其中有四个按钮，分别用来在主界面的右侧显示子界面，有点类似于嵌入式中的模块复用吧。

1. 静态页面显示：只需要会编写HTML相关的代码即可完成
2. 通过CGI控制：以其中一个举例，要以这样的格式<%config:BLUELED_State%>，并且BLUELED_State和MCU要对应上
3. 通过SSI获取：以其中一个举例，HTML标签中有一个namename="post_input"，MCU在获取的时候要和这个name对应上

功能展示及说明

事先准备：

1. 将对应的代码烧入到开发板中
2. 插上 J16-TypeC 和 J17-RJ45网口
3. 将电脑的网口改为固定的，网段为0，设备为100
4. 在浏览器中输入http://192.168.0.102/，就可以访问MCU构建的浏览器了【具体功能在视频中查看】

以上按顺便展示了四个界面

1. 是一个静态的活动介绍界面，加载后就不会有什么交互了
2. 状态控制界面：通过CGI提交表单，将数据发送到MCU中
3. 运行时间界面：通过SSI技术将变量嵌入到HTML代码中，实现获取MCU中的数据
4. 数据获取界面：通过SSI技术将变量嵌入到HTML代码中，实现获取MCU中的数据

部分代码介绍

一次性任务

在main函数中，会初始化各种时钟和外设，然后会启动一个一次性任务来启动剩余的任务和初始化，在这个工程中，初始化并且启动了Lwip相关的任务栈和socket

CGI

CGI全称通用网关接口（Common Gateway Interface）是一个Web服务器主机提供信息服务的标准接口。通过CGI接口，Web服务器就能够获取客户端提交的信息，转交给服务器端的CGI程序进行处理，最后返回结果给客户端。

在工程中一个完成的cgi分为两个部分，一个是Get，另一个是Post。注意：Get 是用来从服务器上获得数据，而 Post 是用来向服务器上传递数据。

在Post部分，当板卡读取到的数据大于0的时候，就会解析读取到是数据，通过!strcmp(cgi_data, "XXX"来进行比较是否为想要的数据

下面是Web中Post cgi的部分代码

SSI

SSI全称是Server Side Includes，即服务器端包含，是一种基于服务器端的网页制作技术。允许通过在HTML页面注入脚本或远程执行任意代码。

但现在大多数Web很少用SSI了

下面是板卡中SSI的代码了，当触发回调函数的时候，就会比较SHtml传回来的参数。若是，就会进入到if中执行对应赋值操作最后在网页端显示了

下面是Web中ssi的部分代码，<%config:XXX%>这是一个特定的占位符，要和板卡程序中对应起来

活动心得

对于NXP之前只接触过他家的大众入门Linux的产品-IMX6ULL，通过这次活动有幸接触到NXP的MCU，这是一款基于Arm Cortex-M33内核，并且集成了神经处理单元(NPU)，感觉它非常适合边缘计算和人工智能应用，因为有些拖沓完成任务的有些慢，只能先在任务二和任务三中选择一个，玩了一下以太网相关的内容和知识，还没有用到该芯片的NPU，看到有些小伙伴已经完成了数字图像识别等AI功能，后面将继续挖掘该MCU的性能和好玩的东西。

分割线

分割线

分割线(以下是具体流程)

LWIP配置示例

环境搭建（MCUXpresso IDE）

想要完好板子，第一部分肯定是要搭建环境并且编译工程，最后烧入到板子中，就算进入到了初探门径的程度了。我将一步步引导您完成环境搭建。

下载IDE,按照默认提示一直下一步,改一下安装目录就行：面向恩智浦MCU的MCUXpresso IDE_Linux、Windows和iOS_恩智浦半导体 | NXP 半导体
1- 打开IDE，选择一个工作空间，就是平常放创建工程的目录，看个人喜欢了

2- 第一次打开工程，是默认没有安装SDK的，所以先导入SDK，在board中找到这块开发板（FRDM-MCXN947）安装一下，

3- 导入SDK，选择RT1040-EVK开发板，里面有很多官方提供的案例，我们选择frdmmcxn947_lwip_httpsrv_freertos，给工程命个名，然后打开就行了

4- 插上板子后点击debug

5.1- 会识别到板子上面DAP，点击确定就开始调试了

5.2- 选择SWD Configuration，因为NXP的这块芯片是双核的，所以Debug的时候要选择一下用哪个，一般选择第一个就可以了

6- 修改电脑以太网的属性

7- 在浏览器中输入192.168.0.128，就可以看到编写并且转化的HTML页面了（效果图见上功能展示）

Mkfs

mkfs是makefadata的简称，该工具是编译的网页文件转换成二进制数组的小工具。

老版本的是：.exe文件直接运行即可。新版本的：需要安装perl在命令行中编译

老版本我放在附件中，大家各取所需，但建议使用新版本！

安装perl

windows的下载地址：Strawberry Perl for Windows，下载完成并且配置环境之后，就可以运行mkfs脚本了

运行

1. 打开CMD命令行
2. 进入到脚本文件的目录中，例如：cd D:\NXP\mkfs
3. 运行脚本：mkfs.pl .\lwip_httpsrv_fs_data\webpage
4. 1. 后面参数是：需要转化源文件的目录，可以是脚本的相对路径也可以是绝对路径
4. 就会在脚本文件的目录中生成httpsrv_fs_data.c文件，这就是转化完成后的

需要注意的是，红框标注的地方是带着你源文件路径的并不符合C语言的命名规则，需要通过搜索一键替换成空格即可。

可以看到12个数据，其中第12个数组包含了所有元素的数据，有：.png、.html、.ico、.css、.js、.shtml这些构成页面的文件，这个文件复制到工程中，并且启动，就可以在浏览器中看到自己编写的网页了（每次编译，替换、粘贴、下载，网页查看比较麻烦，可以在本地中直接打开.html文件先调试好）