# MATLAB uihtml 应用程序生成器此技能为构建交互式 Web 应用程序提供了全面的指南，这些应用程序使用 uihtml 组件将 HTML/JavaScript 界面与 MATLAB 计算后端相结合。该架构利用现代 Web UI 功能，同时利用 MATLAB 强大的计算引擎。 ## 何时使用此技能 * 使用 HTML/JavaScript 界面构建交互式 MATLAB 应用程序 * 为 MATLAB 应用程序创建基于 Web 的 UI * 使用网络技术开发现代、响应式的 MATLAB GUI * 当用户提到：uihtml、HTML、JavaScript、Web 应用程序、Web 界面、交互式 GUI 时 * 将 Web UI 设计与 MATLAB 计算能力相结合 * 创建计算器应用程序、数据可视化工具或基于表单的 MATLAB 工具 ## 核心架构 ### 四个组成部分 1. **HTML 界面** \- 带按钮、表单、显示的用户界面 2. **JavaScript逻辑** \-事件处理和UI交互 3. **MATLAB Backend** \- 计算引擎和数据处理 4. **uihtml 组件** \- HTML 和 MATLAB 之间的桥梁 ### 沟通模式 uihtml 组件通过多种机制实现 JavaScript 和 MATLAB 之间的双向通信： #### 模式 1：MATLAB → JavaScript（数据属性） **用例**：从 MATLAB 发送数据以更新 HTML 界面 % MATLAB 端 h.Data = "你好世界！"; // JavaScript 端 htmlComponent.addEventListener("DataChanged", 函数(事件) { document.getElementById("显示").innerHTML = htmlComponent.Data; }); #### 模式 2：JavaScript → MATLAB（事件） **用例**：通过用户交互触发 MATLAB 函数 // JavaScript 端 - 将事件发送到 MATLAB htmlComponent.sendEventToMATLAB("计算", 表达式); % MATLAB端-接收并处理事件 h.HTMLEventReceivedFcn = @handleEvent; 函数handleEvent(src, 事件) 事件名称 = 事件.HTMLEventName; eventData = event.HTMLEventData; % 处理事件... 结束 #### 模式 3：MATLAB → JavaScript（自定义事件） **用例**：将计算结果或状态更新发送到 JavaScript % MATLAB 端 - 将自定义事件发送到 JavaScript sendEventToHTMLSource(h, "ResultChanged", 结果); // JavaScript 端 - 监听自定义事件 htmlComponent.addEventListener("ResultChanged", 函数(事件) { document.getElementById("显示").textContent = event.Data; }); #### 模式 4：复杂数据传输 **用例**：在 MATLAB 和 JavaScript 之间传递结构化数据 % MATLAB side - 结构数据自动获取 JSON 编码 itemData = struct("商品名称","苹果","价格",2,"数量",10); h.Data = itemData; // JavaScript 端 - 作为对象属性访问 htmlComponent.Data.ItemName //“苹果” htmlComponent.Data.Price // 2 htmlComponent.Data.Quantity // 10 ## 关键规则 ### 安全要求 * **使用本地 HTML 文件时，始终设置 `HTMLSource = 'trusted'`： h.HTMLSource = fullfile(pwd, 'myapp.html'); % 对于本地文件，这被自动视为可信 * **必须** 在 MATLAB 中处理之前验证来自 JavaScript 的所有输入 * **切勿** 在没有严格清理的情况下对用户输入使用“eval()” * **始终** 限制用户输入表达式中允许的字符 ### 错误处理 **始终将 MATLAB 事件处理程序包装在 try-catch 块中：** 函数handleEvent(src, 事件) 事件名称 = 事件.HTMLEventName; eventData = event.HTMLEventData; 尝试 % 处理事件结果=过程数据（事件数据）； % 将结果发送回 JavaScript sendEventToHTMLSource(src, 'ResultEvent', 结果); 抓住我 % 优雅地处理错误 fprintf('错误: %s\n', ME.message); sendEventToHTMLSource(src, 'ErrorEvent', ME.message); 结束结束 ### 数据验证 **在处理之前始终验证用户输入：** 函数结果 = validateExpression(表达式) allowedChars = '0123456789+-*/.() '; if ~all(ismember(表达式, allowedChars)) error('表达式中存在无效字符'); 结束 % 额外验证... 结果=真；结束 ### 文件组织 **遵循此目录结构：** 项目/ ├── app.m # 主要 MATLAB 函数 ├── app.html # HTML 界面 ├── README.md # 使用说明 └── Examples/ # 其他示例（可选） ## 完整示例 ### 示例 1：简单的计算器应用程序 **MATLAB 端（calculator.m）：** 函数计算器() % 创建主要人物 Fig = uifigure('名称', '计算器', '位置', [100 100 400 500]); % 创建 HTML 组件 h = uihtml(图, '位置', [25 25 350 450]); h.HTMLSource = fullfile(pwd, 'calculator.html'); h.HTMLEventReceivedFcn = @(src, event)handleEvent(src, event); 结束函数handleEvent(src, 事件) 事件名称 = 事件.HTMLEventName; eventData = event.HTMLEventData; 尝试切换事件名称案例“计算” % 验证输入表达式 = char(eventData); allowedChars = '0123456789+-*/.() '; if ~all(ismember(表达式, allowedChars)) error('表达式中存在无效字符'); 结束 % 安全评估结果 = eval(表达式); % 发回结果 sendEventToHTMLSource(src, '结果', num2str(结果)); 案例“清除” sendEventToHTMLSource(src, '结果', '0'); 结束抓住我 fprintf('错误: %s\n', ME.message); sendEventToHTMLSource(src, '错误', '无效表达式'); 结束结束 **HTML 端 (calculator.html):** <头> <风格> 身体{ 字体系列：Arial、无衬线字体；背景：线性渐变（135deg，#667eea 0%，#764ba2 100%）；保证金：0；内边距：20px； } .计算器{ 背景：白色；边框半径：10px；内边距：20px；盒子阴影：0 10px 30px rgba(0,0,0,0.3); } .显示{ 宽度：100%；高度：60 像素；字体大小：24px；文本对齐：右对齐；内边距：10px；边框：2px实线#ccc；边框半径：5px；底部边距：10px；背景：#f9f9f9； } .按钮{ 显示：网格；网格模板列：重复（4，1fr）；间隙：10px； } 按钮{ 内边距：20px；字体大小：18px；边框：无；边框半径：5px；光标：指针；背景：#667eea；颜色: 白色; 过渡：背景0.3s； } 按钮：悬停{ 背景：#764ba2； } .运算符{ 背景：#ff6b6b； } .operator:悬停{ 背景：#ee5a52； } <脚本类型=“文本/javascript”> 让当前表达式 = ''; 功能设置（htmlComponent）{ window.htmlComponent = htmlComponent; // 监听来自 MATLAB 的结果 htmlComponent.addEventListener("结果", 函数(事件) { document.getElementById("display").value = event.Data; 当前表达式 = event.Data; }); htmlComponent.addEventListener("错误", 函数(事件) { document.getElementById("显示").value = "错误"; 当前表达式 = ''; }); } 函数appendToDisplay（值）{ 当前表达式 += 值； document.getElementById("显示").value = currentExpression; } 函数清除显示() { 当前表达式 = ''; document.getElementById("显示").value = '0'; window.htmlComponent.sendEventToMATLAB("清除", ""); } 函数计算（）{ if (当前表达式) { window.htmlComponent.sendEventToMATLAB("计算", currentExpression); } } <正文>

<输入类型=“文本”id=“显示”类=“显示”值=“0”只读>

<按钮样式=“网格列：跨度4；背景：#ff6b6b；” onclick="clearDisplay()">清除

### 示例 2：数据可视化应用程序 **MATLAB 端 (visualizer.m)：** 函数可视化工具() Fig = uifigure('名称', '数据可视化工具', '位置', [100 100 800 600]); % 为控件创建 HTML 组件 h = uihtml(图, '位置', [25 400 750 175]); h.HTMLSource = fullfile(pwd, 'controls.html'); h.HTMLEventReceivedFcn = @(src, event) handlerEvent(src, event, Fig); % 创建绘图轴 ax = uiaxes(fig, '位置', [25 25 750 350]); xlabel(ax, 'X'); ylabel(ax, 'Y'); title(ax, '交互式情节'); 结束函数handleEvent（src，事件，fig）事件名称 = 事件.HTMLEventName; eventData = event.HTMLEventData; 尝试切换事件名称案例“更新图” % 从 JavaScript 解析参数参数=事件数据；频率 = params.频率；振幅 = params.amplitude; 绘图类型 = params.plotType; % 生成数据 x = linspace(0, 4*pi, 200); 切换绘图类型案例“正弦” y = 幅度 * sin(频率 * x); 案例“余弦” y = 幅度 * cos(频率 * x); 案例“两者” y = 幅度 * sin(频率 * x); y2 = 幅度 * cos(频率 * x); 结束 % 查找坐标轴并绘图 ax = findobj(fig, '类型', '轴'); cla（斧头）； if strcmp(plotType, '两者') 绘图(ax, x, y, '线宽', 2); 保持（斧头，'开'）；绘图（ax，x，y2，'线宽'，2）；保持（斧头，'关闭'）；图例(ax, '正弦', '余弦'); 否则绘图(ax, x, y, '线宽', 2); 结束网格（斧头，'开'）； % 发送确认信息 sendEventToHTMLSource(src, 'PlotUpdated', '成功'); 结束抓住我 fprintf('错误: %s\n', ME.message); sendEventToHTMLSource(src, '错误', ME.message); 结束结束 **HTML 端 (controls.html):** <头> <风格> 身体{ 字体系列：“Segoe UI”、Tahoma、Geneva、Verdana、sans-serif；背景：线性渐变（135deg，#2c3e50 0%，#34495e 100%）；颜色: 白色; 保证金：0；内边距：20px； } .controls { 显示：网格；网格模板列：1fr 1fr 1fr；间隙：20px； } .control-group { 背景：rgba(255,255,255,0.1); 内边距：15px；边框半径：8px； } 标签{ 显示：块；下边距：5px；字体粗细：粗体； } 输入[类型=“范围”]{ 宽度：100%； } 选择，按钮 { 宽度：100%；内边距：8px；边框半径：5px；边框：无；字体大小：14px； } 按钮{ 背景：#3498db；颜色: 白色; 光标：指针；顶部边距：10px；过渡：背景0.3s； } 按钮：悬停{ 背景：#2980b9； } <脚本类型=“文本/javascript”> 功能设置（htmlComponent）{ window.htmlComponent = htmlComponent; htmlComponent.addEventListener("PlotUpdated", 函数(事件) { console.log("绘图更新成功"); }); } 函数 updatePlot() { const 频率 = parseFloat(document.getElementById("频率").value); const 振幅 = parseFloat(document.getElementById("amplitude").value); constplotType = document.getElementById("plotType").value; 常量参数 = { 频率：频率，振幅：振幅，绘图类型：绘图类型 }; window.htmlComponent.sendEventToMATLAB("UpdatePlot", params); } 函数 updateFreqLabel(值) { document.getElementById("freqValue").textContent = 值; } 函数 updateAmpLabel(值) { document.getElementById("ampValue").textContent = 值; } <正文>

频率：1 <输入类型=“范围”id=“频率”最小值=“0.1”最大值=“5”步长=“0.1”值=“1” oninput="updateFreqLabel(this.value)">

幅度：1 <输入类型=“范围”ID=“振幅”最小值=“0.1”最大值=“5”步长=“0.1”值=“1” oninput =“updateAmpLabel（this.value）”>

绘图类型： <选择id =“绘图类型”> <选项值=“正弦”>正弦 <选项值=“余弦”>余弦 <选项值=“两者”>两者

### 示例 3：表单处理应用程序 **MATLAB 端（formProcessor.m）：** 函数 formProcessor() Fig = uifigure('名称', '表单处理器', '位置', [100 100 600 400]); h = uihtml(图, '位置', [25 25 550 350]); h.HTMLSource = fullfile(pwd, 'form.html'); h.HTMLEventReceivedFcn = @(src, event)handleEvent(src, event); 结束函数handleEvent(src, 事件) 事件名称 = 事件.HTMLEventName; eventData = event.HTMLEventData; 尝试切换事件名称案例“提交表格” % 提取表单数据名称=事件数据.名称；电子邮件= eventData.电子邮件；年龄 = eventData.age; % 验证数据如果为空（名称）||为空（电子邮件） error('姓名和电子邮件为必填项'); 结束 if ~包含(电子邮件, '@') error('无效的电子邮件地址'); 结束如果年龄 < 0 ||年龄 > 120 error('年龄无效'); 结束 % 处理数据（例如：保存到文件或数据库） fprintf('处理形式：\n'); fprintf(' 姓名: %s\n', 姓名); fprintf('电子邮件: %s\n', 电子邮件); fprintf('年龄: %d\n', 年龄); % 发送成功消息结果 = struct('状态', '成功', ... 'message', '表单提交成功！'); sendEventToHTMLSource(src, 'FormResult', 结果); 案例“ClearForm” sendEventToHTMLSource(src, 'FormCleared', ''); 结束抓住我 fprintf('错误: %s\n', ME.message); 结果 = struct('状态', '错误', '消息', ME.message); sendEventToHTMLSource(src, 'FormResult', 结果); 结束结束 ## 最佳实践 ### UI设计原则 * **使用 CSS Grid 或 Flexbox** 实现适应不同窗口大小的响应式布局 * **实现悬停效果**以获得更好的用户体验和视觉反馈 * **为用户操作（按钮点击、表单提交、错误）提供清晰的视觉反馈** * **使用语义 HTML 元素**（按钮、输入、表单）以获得更好的可访问性 * **应用专业配色方案** 使用 CSS 渐变和现代设计模式 ### 性能优化 * **最大限度地减少 HTML 和 MATLAB 之间的数据传输** - 仅发送必要的数据 * **使用适当的数据类型** \- 数字、字符串、结构（转换为 JSON） * **为长时间的 MATLAB 操作实现加载指示器** * **在适当的时候使用 MATLAB 中的持久变量缓存结果** * **批量多个更新**而不是发送许多小事件 ### 错误处理策略 **JavaScript 端：** htmlComponent.addEventListener("错误", 函数(事件) { // 显示用户友好的错误消息警报（“错误：” + event.Data）; }); **MATLAB 端：** 尝试结果=过程输入（输入）； sendEventToHTMLSource(src, '成功', 结果); 抓住我 fprintf('错误: %s\n', ME.message); sendEventToHTMLSource(src, '错误', '处理失败'); 结束 ### 测试策略 1. **单元测试** \- 独立测试MATLAB函数 % 测试各个处理函数 assert(validateExpression('2+2'), '验证应该通过'); 2. **集成测试** \- 测试 HTML-MATLAB 通信 % 使用示例数据测试事件处理 testEvent = struct('HTMLEventName', '计算', 'HTMLEventData', '2+2'); 处理事件（h，测试事件）； 3. **用户测试** \- 测试完整的用户工作流程 * 尝试所有按钮组合 * 测试边缘情况和无效输入 * 验证视觉反馈是否清晰 4. **错误测试** \- 测试错误条件 * 输入的字符无效 * 空输入字段 * 网络/超时场景 ### 调试技巧 * **MATLAB Side** ：使用 `fprintf()` 记录事件和数据 fprintf('收到事件：%s，数据：%s\n', eventName, eventData); * **JavaScript Side** : 使用浏览器开发者工具（F12）进行调试 console.log("发送到 MATLAB:", data); * **分别测试每个通信方向** * 首先测试 MATLAB → JavaScript（数据属性） * 然后测试 JavaScript → MATLAB（事件） * 最后测试双向流 * **验证数据类型和格式** fprintf('数据类型：%s\n', class(eventData)); fprintf('数据值：%s\n', string(eventData)); ## 常见模式 ### 模式 1：计算器模式 * JavaScript 通过按钮点击构建表达式字符串 * 通过 `sendEventToMATLAB` 将表达式发送到 MATLAB * MATLAB 通过输入验证进行安全评估 * 结果通过 `sendEventToHTMLSource` 发回 * 实时显示结果 ### 模式2：数据可视化模式 * JavaScript 处理用户交互（滑块、下拉菜单） * 发送参数到MATLAB进行计算 * MATLAB 处理数据并更新绘图 * 可以使用 uiaxes 进行 MATLAB 绘图或发送数据进行 JavaScript 绘图 * 支持实时更新和动画 ### 模式 3：表单处理模式 * JavaScript将表单数据收集到结构化对象中 * 将整个表单数据作为单个事件发送 * MATLAB 验证每个字段 * 处理数据（保存、计算、导出） * 发回确认或错误消息 * 根据结果更新UI ### 模式四：实时监控模式 * MATLAB不断生成数据（模拟、传感器读数） * 通过 `sendEventToHTMLSource` 定期发送更新 * JavaScript更新实时显示 * 实施开始/停止/暂停控制 * 使用高效的数据格式（数组、结构体） ## 实施清单在部署 uihtml 应用程序之前，请验证： * HTML 文件存在于正确的位置 * `HTMLSource` 属性设置为正确的文件路径 * 定义`HTMLEventReceivedFcn`回调 * JavaScript`setup(htmlComponent)`函数实现 * 添加事件监听器用于 MATLAB→JS 通信 * Try-catch 块包装了所有 MATLAB 事件处理 * 对所有用户数据实施输入验证 * 错误事件发送回JavaScript以供用户反馈 * CSS 样式应用于专业外观 * 响应式设计在不同窗口尺寸下进行测试 * 所有用户交互都提供视觉反馈 * 长时间运行时显示加载指示器 * 文件组织遵循项目结构 * 使用使用说明创建的文档（自述文件） ## 故障排除 **问题**：HTML 文件未在 uihtml 组件中加载 * **解决方案** : 检查文件路径是绝对路径还是相对于当前目录 h.HTMLSource = fullfile(pwd, 'app.html'); % 绝对路径 **问题**：事件不触发 MATLAB 回调 * **解决方案** ：在 HTML 加载之前验证 `HTMLEventReceivedFcn` 是否已设置 * **解决方案**：检查 JavaScript 是否正确调用 `sendEventToMATLAB` **问题**：JavaScript 中的数据未更新 * **解决方案** : 确保在 `setup()` 中注册了 `DataChanged` 事件监听器 * **解决方案**：验证 MATLAB 正在设置 `h.Data` 属性，而不是发送事件 **问题**：浏览器控制台中的 JavaScript 错误 * **解决方案** : 打开浏览器开发工具（F12）查看详细的错误消息 * **解决方案** ：确保将 `htmlComponent` 传递给 `setup()` 函数 * **解决方案** ：检查元素 ID 和函数名称中的拼写错误 **问题**：MATLAB 错误未向用户显示 * **解决方案**：在 MATLAB 和 JavaScript 中实现错误事件处理 * **解决方案** ：在 MATLAB 中使用 try-catch 并通过 `sendEventToHTMLSource` 发送错误消息 **问题**：发送数据时性能缓慢 * **解决方案**：减少更新频率（限制事件） * **解决方案**：仅发送更改的数据，而不是整个数据集 * **解决方案**：使用适当的数据类型（数字与字符串） **问题**：复杂的数据结构无法正确传输 * **解决方案** ：使用 MATLAB 结构体（自动转换为 JSON） * **解决方案** ：避免嵌套元胞数组；使用结构体数组代替 * **解决方案** : 首先用简单的例子测试数据传输 **问题**：样式显示不正确 * **解决方案**：验证 CSS 是否位于 `` 内的 `

Matlab Uihtml 应用程序生成器

包含技能