1. 项目概述从零开始玩转广州易显VGA卡如果你手头有一块广州易显的VGA卡想用它来驱动一块串口屏实现一些简单的工控界面或者信息展示但面对一堆硬件和陌生的软件不知从何下手那么这篇教程就是为你准备的。我最近刚好用这套东西做了一个车间状态看板从一脸懵到成功点亮屏幕中间踩了不少坑也总结了一套非常接地气的流程。这篇内容会带你完整走一遍从软件安装、工程创建、画面设计到最终烧录、硬件连接和上电测试每个步骤我都会配上详细的截图和“为什么这么做”的解释确保你跟着做一遍就能成功。简单来说广州易显的这套方案核心就是一块集成了显示控制和串口通信功能的VGA卡也叫VGA板。它通过串口通常是UART接收来自上位机比如工控机、单片机、树莓派的指令然后输出标准的VGA信号到显示屏上。而我们用的HMIMaker软件就是一个图形化的界面设计工具让你像搭积木一样用按钮、文本、进度条这些“控件”拼出想要的界面最后生成一个工程文件烧录到VGA卡的存储卡里。一上电VGA卡就自动运行这个界面等待串口指令来更新内容。这比直接用单片机驱动TFT屏要省事得多尤其适合需要稳定显示复杂界面的工控场景。2. 核心思路与准备工作拆解在动手之前我们得先搞清楚整个流程的逻辑以及需要准备哪些“粮草”。这能帮你避免做到一半发现缺东少西的尴尬。2.1 系统工作原理与流程总览这套系统的运行可以理解为一个“离线渲染上电即显”的过程。上位机工控机和显示终端VGA卡屏是分离的。设计阶段在电脑上完成我们在电脑上使用HMIMaker软件设计好所有的界面元素我们称之为“控件”或“元件”比如哪里放一个标题哪里放一个数据展示框哪里放一个按钮。这个阶段我们只关心界面长什么样不关心数据从哪里来。编译与固化阶段设计完成后HMIMaker软件会把图形界面、控件属性等信息“编译”成一个VGA卡能直接识别的二进制文件包。然后我们把这个文件包拷贝到一张TF卡Micro SD卡里再把TF卡插入VGA卡。运行阶段给VGA卡和显示屏上电。VGA卡会从TF卡中读取那个文件包初始化自己然后持续输出对应的VGA信号到显示屏。此时屏幕上显示的就是我们设计的静态界面。交互与更新阶段运行时静态界面显示后工控机或任何有串口的设备就可以通过串口线连接到VGA卡上。工控机按照一定的通信协议发送指令给VGA卡比如“把ID是1的那个文本框的内容改成‘温度25.6℃’”。VGA卡收到指令后就会实时更新屏幕上对应控件的内容。这样就实现了动态的数据显示和简单的触控反馈如果设计了按钮。所以我们的核心任务就是完成前三个阶段准备环境、设计界面、烧录并上电测试。第四个阶段串口通信是后续应用开发的内容本篇先确保我们能成功点亮并显示基础界面。2.2 硬件与软件清单核对根据原文和实际经验我们需要准备以下东西。请务必在开始前核对一遍特别是电源和线材很容易被忽略。硬件部分广州易显VGA卡这是主角一块绿色的板子上面有VGA输出口、串口、电源接口和TF卡槽。型号可能不同但核心功能一致。显示屏支持VGA输入的显示器或液晶屏。最好是标准分辨率的比如1024x768兼容性最好。我用的是一台旧的19寸方正显示器。电脑用于安装HMIMaker软件和设计界面。Windows系统即可。储存卡一张Micro SD卡TF卡容量不需要太大128MB或256MB都绰绰有余。关键点务必将其格式化为FAT32文件系统。这是很多新手失败的第一步VGA卡通常只认FAT32格式。VGA线一头连接VGA卡的VGA口一头连接显示屏的VGA口。电源这是重中之重。VGA卡需要一个5V直流电源。查看你的VGA卡电源接口通常是蓝色的DC插座孔径约2.1mm。你需要一个输出为5V 1A或以上的电源适配器墙插式或台式都可以。绝对不要接错电压12V会烧板子可选串口线如果你想在测试阶段就验证串口通信需要一根USB转TTL串口线。VGA卡的串口通常是3.3V TTL电平的需要连接线缆的RX、TX、GND三根线。本篇基础测试可以暂不用。软件部分HMIMaker工程配置软件这是唯一的必需软件。前往广州易显官网www.gz-yixian.com的下载中心找到HMIMaker软件进行下载。如果官网链接失效也可以尝试联系供应商获取。安装过程就是典型的Windows软件安装一路下一步即可。注意软件兼容性。HMIMaker软件可能对高版本Windows如Win10/Win11的某些显示设置如缩放比例支持不佳如果遇到界面显示不全或错位可以尝试右键点击软件图标-属性-兼容性勾选“以兼容模式运行这个程序”并选择“Windows 7”同时勾选“替代高DPI缩放行为”由“应用程序”来执行。3. HMIMaker软件工程创建详解万事俱备我们开始“造界面”。这个过程很像在用一款简化的绘图软件但所有的元素最终都会变成可被指令控制的实体。3.1 新建工程与参数设置安装好HMIMaker后打开它你会看到一个略显复古但功能清晰的界面。我们从头创建一个工程。启动与新建点击软件左上角的菜单栏依次选择【工程】-【新建工程】。或者直接使用快捷键CtrlN。工程命名与保存会弹出一个对话框。在“工程名称”里取一个你喜欢的名字比如“车间看板_V1”。在“保存在”那里点击浏览按钮选择一个你容易找到的文件夹比如在桌面新建一个“易显VGA项目”文件夹。我强烈建议为每个项目建立独立的文件夹因为编译后会生成很多文件混在一起很难管理。核心参数分辨率设置接下来是“显示器分辨率”设置。这里需要和你实际使用的显示屏的最佳分辨率保持一致。为什么是这个值这个分辨率决定了你工程画面的像素尺寸。如果你设置成800x600但显示器是1024x768那么显示出来的画面要么不能全屏周围有黑边要么被拉伸变形。反之如果工程设置的分辨率高于显示器物理分辨率则可能无法正常显示。如何确定最稳妥的方法是查看你显示屏的说明书或者在网上搜索型号参数。常见的工控屏分辨率有800x600, 1024x768, 1280x800等。如果不确定1024x768是一个兼容性非常好的通用选择大部分4:3比例的屏幕都支持。在HMIMaker里“显示器宽度”填1024“显示器高度”填768。其他参数对话框里可能还有色深16位色/24位色等选项对于初次使用保持默认的“16位色”即可这能在保证不错色彩的同时减少资源占用。确认创建所有信息填好后点击【确定】。软件主界面就会变成一个灰色的大画布尺寸就是你刚才设置的分辨率。左侧是“工程窗口”里面有一个“画面”标签页下面默认生成了一个叫“0: win0.dr”的画面。这就是我们的一级主界面。3.2 界面设计与控件添加实操现在画布是空的我们需要把它填满。HMIMaker将界面元素称为“元件”所有可用的元件都在软件左侧的“元件库”窗口里。选择画面在左侧“工程窗口”的“画面”页下点击选中“0: win0.dr”。这样我们接下来的操作都是针对这个主画面。认识元件库在“元件库”窗口你会看到分类排列的图标比如“基本元件”按钮、标签、进度条、“显示元件”数字、文本、图片、“曲线图表”等。把鼠标悬停在图标上会有提示。添加第一个控件——按钮我们从一个简单的按钮开始。在“基本元件”里找到“按钮”图标通常是一个方框里面有个“A”字点击它。然后将鼠标移动到中间的灰色画布上你会发现鼠标变成了十字形。在画布上你想放置按钮的位置按住鼠标左键并拖动拉出一个矩形框然后松开。一个按钮就放置好了。实操心得拖动时软件底部或状态栏会显示当前拖动区域的像素尺寸这有助于你精确控制控件大小。不用担心一次放不好所有控件之后都可以再选中调整位置和大小。编辑按钮属性放置后按钮上默认显示“Text”。我们需要修改它。在画布上双击这个按钮会弹出“按钮属性”对话框。这里有很多页签基本属性把“文本”内容改成你想要的比如“启动”。可以设置字体、大小、颜色。位置与大小可以精确输入X、Y坐标和宽度、高度。你也可以直接在画布上拖动控件的边缘来调整大小拖动控件内部来移动位置。操作属性这是核心这里定义了按钮被按下或释放时VGA卡会向串口发送什么指令。对于测试我们可以简单设置。在“按下时”的发送缓冲区里填入一条指令例如AA 55 01 01 F0这是一条示例指令表示按下按钮1。指令的具体格式需要查阅VGA卡的通信协议文档不同型号可能不同。初期测试可以暂时不填先确保界面能显示。颜色设置可以设置按钮常态、按下时的背景色、文字色、边框色等让界面更好看。添加文本显示框接下来添加一个显示数据的区域。在“显示元件”里找到“文本”或“数值”元件一个显示“000”的图标用同样的拖动方式放置到画布上。双击它在属性里将“变量地址”设置为一个数字比如1。这个“地址”非常重要它是工控机通过串口指令更新这个文本框内容时需要指定的目标ID。在“格式”里可以设置显示整数、小数位数等。添加进度条在“基本元件”或“特殊元件”里找到“进度条”拖放到画布。双击设置其属性如最小值、最大值、当前值测试时可设一个中间值以及颜色、方向水平/垂直等。布局与对齐多放几个控件后为了美观可以使用软件顶部的对齐工具左对齐、居中对齐、等间距分布等或者按住Ctrl键多选控件后统一调整大小。注意事项控件的“ID”或“地址”。在HMIMaker中每个可被串口指令控制的控件都必须有一个唯一的标识可能是“控件ID”、“变量地址”或“寄存器地址”。这个信息是你后续编写工控机程序时用来定位更新哪个控件的关键。务必在属性框中记下它们或者在设计时就有规划地分配比如按钮用地址1-10数据显示用地址100-200。4. 工程编译与文件生成设计好界面后它还是一堆HMIMaker内部的工程数据需要转换成VGA卡能“吃下去”的格式。4.1 编译配置与过程执行编译点击软件顶部菜单栏的【工程】-【编译工程】或者直接点击工具栏上的一个类似“齿轮”或“播放▶”带箭头的编译按钮。关键配置FLASH容量点击编译后会弹出一个“编译选项”或“生成文件”的对话框。这里有一个至关重要的参数“FLASH容量”。这个容量是什么它指的是你VGA卡上那颗存储芯片Nand Flash的物理容量。这个值必须与实际VGA卡的硬件匹配如果设置大了文件可能烧录不进去或运行异常设置小了则浪费空间。如何确定最准确的方法是查看VGA卡的型号然后查阅其数据手册。常见的容量有128M字节bit、256M字节等。如果不确定256M字节是一个比较通用和安全的选择很多中端卡都支持这个容量。在HMIMaker的下拉菜单中选中它。其他选项如“是否包含字库”、“图片压缩方式”等初次编译全部保持默认即可。开始编译设置好FLASH容量后点击【确定】。软件下方通常会出现一个输出窗口显示编译进度比如“正在处理图片...”、“正在生成字体...”、“正在链接...”等。编译成功当输出窗口最后一行显示“编译成功”或类似的提示并且没有红色错误信息时就大功告成了。同时软件会提示你生成的文件保存在哪里通常就在你工程目录下的一个子文件夹里名字可能是“PrjName”、“Release”或直接以工程名命名。4.2 定位并准备烧录文件编译成功后我们需要找到最终要烧录到TF卡里的文件。找到输出文件夹按照编译完成时的提示打开工程所在的文件夹。你会发现除了你的.hmi工程文件外多出了一个以你工程名命名的文件夹例如“车间看板_V1”。进入关键目录双击进入这个文件夹。里面可能还有若干子文件夹。你需要找到一个通常名为“NandFlash”的文件夹。这个文件夹里的所有内容就是我们要拷贝到TF卡根目录下的东西。检查文件进入“NandFlash”文件夹你会看到一些文件比如OS.BIN、PIC.BIN、FONT.BIN以及一些配置文件。不要单独拷贝某个文件而是需要将这个文件夹下的全部内容或者整个NandFlash文件夹本身取决于VGA卡的要求进行备份。为了保险起见我通常是将NandFlash文件夹整体压缩成一个ZIP包这样既方便管理也防止文件在拷贝过程中丢失。为什么压缩这是一种文件管理的好习惯。一是避免TF卡里文件散乱二是在某些情况下VGA卡的上位机更新工具可能需要接收一个压缩包进行远程升级。当然直接拷贝文件夹内的所有文件到TF卡根目录对于本次本地烧录也是完全可行的。5. 硬件连接与上电测试全流程这是最激动人心的环节把虚拟的设计变成真实的显示。5.1 文件烧录至储存卡准备TF卡确保你的Micro SD卡已经通过读卡器连接到电脑并且在“我的电脑”中能正常识别。格式化重要在“我的电脑”中右键点击SD卡盘符选择“格式化”。文件系统选择“FAT32”分配单元大小选择“默认配置大小”勾选“快速格式化”然后点击开始。这一步会清空卡内所有数据请提前备份。格式化成功是后续一切的基础。拷贝文件打开格式化好的TF卡盘符它是一个空白的驱动器。然后将我们在第4.2步中找到的“NandFlash”文件夹下的所有文件和文件夹注意是文件夹内的内容不是文件夹本身全部复制、粘贴到TF卡的根目录下。所谓根目录就是打开TF卡驱动器后直接看到的界面不要在里面再新建任何文件夹。安全弹出文件复制完成后在系统托盘找到USB设备图标安全弹出你的SD卡读卡器。5.2 硬件连接步骤与要点现在请将你的硬件按照以下顺序连接起来。我建议在断电状态下进行所有连接。插入储存卡将已经拷贝好文件的Micro SD卡插入VGA板上标有“TF”或“SD”的卡槽内。确保方向正确轻轻推入直到卡住。有些板子卡槽没有防呆设计注意观察金属触点朝下。连接VGA线将VGA线的一端牢固地插入VGA板上的蓝色VGA母口拧紧两侧的螺丝固定。另一端连接到你的显示屏的VGA输入口同样拧紧螺丝。物理连接一定要稳固接触不良会导致花屏或无信号。连接电源最关键的一步找到你的5V直流电源适配器先确认其输出参数确实是5V DC并且电流能力如1A, 2A足够。电流不足可能导致屏幕闪烁或板子工作不稳定。将适配器的DC圆头插到VGA板的电源输入口通常是蓝色的DC座子。先不要将适配器插到220V市电插座上。最后上电确保VGA板、显示屏的电源线都连接好后先将显示屏的电源打开。然后再将5V适配器插到220V插座上。5.3 上电现象与结果判断接通电源的瞬间请仔细观察VGA板和显示屏电源指示灯VGA板上通常有一颗红色的LED电源指示灯。上电后它应该常亮。如果灯不亮立即断电检查电源适配器是否有输出电源线是否插好板子是否短路屏幕启动如果电源灯亮起你的显示屏应该从休眠状态被唤醒显示“无信号”或类似提示的状态变为开始显示内容。加载过程屏幕上很可能会出现一个进度条。这表示VGA卡正在从TF卡中读取程序文件并将其加载到自身的存储芯片中。这个过程通常很快几秒钟内完成。最终界面进度条走满或消失后屏幕应该立即、稳定地显示出你在HMIMaker中设计的主界面。所有你放置的按钮、文本框、进度条都应该出现在预设的位置上并且静态显示的内容如按钮文字、进度条的初始值都和你设计的一模一样。测试成功标志屏幕上清晰、稳定地显示出你设计的完整界面没有任何扭曲、错位、缺失或花屏现象。此时你可以尝试按压屏幕上你设计的按钮如果是触摸屏且VGA卡支持触摸功能虽然还没有接串口不会有实际数据返回但按钮的按下效果颜色变化应该能正常显示。实操心得关于“变红”。原文提到“进度条加载完成变为红色”这可能是特定版本固件或界面的一个视觉效果。在实际操作中更常见的是进度条走满后消失直接进入主界面。所以只要最终主界面能正确显示无论进度条是否变红都意味着编译和烧录的文件是正确的VGA卡已经成功启动并运行了你的工程。6. 常见问题排查与深度解析即使按照步骤操作也可能遇到一些问题。这里我把常见的问题、原因和解决办法整理成表方便你快速排查。问题现象可能原因排查步骤与解决方案上电后VGA板电源灯不亮1. 电源适配器故障或无输出。2. 电源线接触不良。3. VGA板存在短路或损坏。1. 用万用表测量适配器空载输出电压是否为5V。2. 检查DC头与板子插座是否插紧尝试晃动或重新插拔。3. 断开所有外围连接只接电源看灯是否亮。如果仍不亮可能板子损坏。电源灯亮但屏幕无显示显示‘无信号’1. VGA线未接好或损坏。2. 屏幕输入源未切换到VGA。3. TF卡内文件错误或缺失。4. 工程分辨率与显示器不匹配。1. 重新插拔并拧紧VGA线两端尝试更换一根VGA线。2. 使用显示器菜单键将输入信号源切换到“VGA”或“PC”。3.重点检查TF卡是否FAT32格式文件是否完整拷贝至根目录可重新格式化并拷贝文件。4. 在HMIMaker中检查工程分辨率设置改为显示器支持的分辨率重新编译烧录。屏幕有显示但花屏、错位、颜色异常1. VGA线质量差或接触不良导致信号干扰。2. 电源功率不足导致板子工作不稳定。3. 编译时FLASH容量设置错误。4. 显示屏时序与VGA卡输出不兼容。1. 更换高质量的VGA线确保连接牢固。2. 换用电流更大的5V电源适配器如2A。3.重点检查核对VGA卡型号确认其FLASH容量在HMIMaker中重新设置并编译。4. 尝试在HMIMaker中更换不同的分辨率或刷新率设置。进度条卡住不动无法进入主界面1. TF卡读取失败卡损坏、格式不对、文件错误。2. 编译生成的文件不完整或损坏。3. VGA板Flash芯片损坏。1. 换一张质量好的TF卡重新格式化(FAT32)并拷贝文件。2. 在HMIMaker中执行【工程】-【清理工程】然后重新完整编译一次。3. 尝试烧录一个官方提供的、最简单的示例工程以排除是否为你工程文件的问题。界面显示正常但触摸屏无反应1. 触摸屏排线未连接或松动。2. VGA卡不支持触摸或触摸驱动未启用。3. HMIMaker中未正确配置触摸控件。1. 检查VGA卡与触摸屏之间的排线连接。2. 确认你购买的VGA卡型号是否支持触摸功能。3. 在HMIMaker中检查按钮等控件的“操作属性”是否启用以及触摸校准是否完成部分型号需通过串口指令校准。串口发送指令屏幕控件无变化1. 串口线连接错误RX/TX接反。2. 串口波特率、数据位、停止位等参数设置错误。3. 指令格式或控件地址错误。4. 未进入“运行模式”。1. 确保工控机的TX接VGA卡的RX工控机的RX接VGA卡的TXGND对接。2. 查阅VGA卡协议文档确认默认通信参数常见为9600,8,N,1并在串口助手中设置一致。3.重点检查核对指令中的帧头、地址、数据、校验和格式。确保控件地址与HMIMaker中设置的“变量地址”一致。4. 有些卡需要发送一条“进入指令模式”的指令后才能接收控制指令。深度解析为什么是FAT32格式这是一个非常典型的嵌入式系统约束。VGA卡内部运行的是一个精简的实时操作系统或固件其文件系统驱动通常只集成了最通用、开销最小的FAT32。像exFAT或NTFS这些更现代的文件系统需要更复杂的驱动和更多的内存资源在资源受限的嵌入式设备上并不适用。因此格式化时务必选择FAT32。个人踩坑记录电源的“虚标”问题我曾用一个标称5V 1A的旧手机充电器给VGA卡供电屏幕能亮但频繁闪烁。后来用万用表测量发现该充电器在带载时电压跌落到4.5V以下。换用一个足额的5V 2A电源后问题立刻解决。所以电源的“质量”和“实际带载能力”非常关键尤其是当你后续连接了背光较亮的屏幕时功耗会增大一个劣质电源会成为整个系统不稳定的罪魁祸首。7. 从入门到进阶下一步可以做什么成功点亮屏幕并显示静态界面只是万里长征第一步。这套系统的真正威力在于动态的串口交互。当你确认硬件和基础显示都没问题后就可以开始探索更深入的内容钻研通信协议向供应商索要或在其官网下载《VGA卡串口通信协议手册》。这份文档是你的“圣经”里面详细规定了如何通过一串串16进制代码来控制屏幕上每一个元素的动作。从最简单的修改文本内容到控制进度条增减、切换画面、播放音乐等都依赖于它。搭建串口测试环境在电脑上使用“串口调试助手”软件如AccessPort、SSCOM将电脑通过USB转TTL串口线连接到VGA卡。先尝试发送协议手册里最简单的查询指令看能否收到VGA卡的回复以此验证物理链路和基础通信是否通畅。编写上位机程序当你熟悉了协议就可以用你擅长的语言C#、Python、LabVIEW等编写一个简单的上位机程序。这个程序可以定时从传感器或数据库读取数据然后按照协议格式组装成指令通过串口发送给VGA卡从而实现屏幕上数据的实时更新。这才是工控显示的核心。设计多页面与逻辑HMIMaker支持创建多个画面页面并通过指令进行切换。你可以设计一个主菜单页面、几个不同的数据监控页面通过按钮指令在它们之间跳转让界面逻辑更加丰富。集成到实际项目最后将VGA卡、显示屏封装进一个漂亮的外壳将你的上位机程序部署到工控机或小型嵌入式主机上连接好真实的传感器如温湿度、电压电流一个专业的现场监控显示终端就诞生了。整个过程就像在搭积木HMIMaker负责把积木控件摆出形状静态界面串口协议负责告诉你如何指挥这些积木动起来动态更新而上位机程序就是那个发号施令的大脑。把这几个环节打通你就能灵活地运用这套性价比高、稳定性好的方案去实现各种现场可视化需求了。