EEPW论坛

1、简介

本文将介绍使用Mongoose在线编辑器实现零代码创建网页仪表盘，零代码（No-Code）是一种软件开发方法，允许用户无需编写传统程序代码即可构建应用程序。通过图形界面、拖放组件和预定义的逻辑块，非技术用户或具有有限编程技能的开发者能够轻松创建功能丰富的应用程序。

在【换取手持示波器】NUCLEO-F429ZI Mongoose移植-电子产品世界论坛这篇文章中，详细介绍了Mongoose的移植步骤，在该工程基础上可以设计出一个好看实用的网页仪表盘，网页端能够显示多种传感器数据，同时支持在线控制设备运行参数。

2、操作步骤

在如下网址进行无代码构建网页应用，选择工程配置选项第一项：集成网页UI到外部C/C++工程中

https://mongoose.ws/wizard/

新建文件夹用于保存工程文件

仪表盘模板设置，选中默认项

工程设置完成，点击finish

工程结构一览，这是典型的前后端架构视图

3、修改工程模板

删去不需要的UI组件

更改其他UI组件大小、文本内容，最终效果如下图

网页界面组件设置完成后，点击generate生成c文件

4、文件移植

将以上mongoose文件复制到基础工程目录中

main.c文件改动

/* Private includes ----------------------------------------------------------*/
/* USER CODE BEGIN Includes */
#include "mongoose_glue.h"
/* USER CODE END Includes */

修改LED点亮驱动源码

void glue_get_leds(struct leds *data) {
	data->led1=HAL_GPIO_ReadPin(GPIOB, GPIO_PIN_0);
	data->led2=HAL_GPIO_ReadPin(GPIOB, GPIO_PIN_7);
	data->led3=HAL_GPIO_ReadPin(GPIOB, GPIO_PIN_14);
}
void glue_set_leds(struct leds *data) {
	HAL_GPIO_WritePin(GPIOB, GPIO_PIN_0, data->led1);
	HAL_GPIO_WritePin(GPIOB, GPIO_PIN_7, data->led2);
	HAL_GPIO_WritePin(GPIOB, GPIO_PIN_14, data->led3);
}

启用web网站应用

  /* USER CODE BEGIN 2 */
  run_mongoose();
  /* USER CODE END 2 */

  /* Infinite loop */
  /* USER CODE BEGIN WHILE */
  while (1)
  {
    /* USER CODE END WHILE */

    /* USER CODE BEGIN 3 */
	HAL_Delay(500);
	HAL_GPIO_TogglePin(GPIOB,GPIO_PIN_7);
  }

5、实验结果

从串口助手输出的信息得知，开发板获取的IP为192.168.1.70

浏览器打开这个网址，输入账户登陆系统。用户名为admin或者user，密码与用户名相同

gif动图好像不能正常播放，这里放置一张系统运行界面图

LED控制效果