如何在NodeMCU的GyverPortal网页显示后更新变量值？

一、先搞定变量覆盖问题 #

你代码里的核心问题之一是局部变量覆盖全局变量，直接按下面改：

• 把存储传感器读数的变量设为全局变量，不要在loop()或ESP-NOW接收回调里重新定义同名局部变量
• 比如全局变量是float sensorValue，在数据更新时直接赋值sensorValue = 新读数，别写float sensorValue = ...

模拟读数的修正示例：

// 全局变量：存储传感器读数
float sensorValue = 0.0;

void loop() {
  // 直接给全局变量赋值，不创建局部变量
  sensorValue = random(0, 100) / 1.0;
  
  portal.tick();
}

ESP-NOW接收数据的修正示例：

// 全局变量：存储接收到的传感器数据
float receivedSensorValue = 0.0;

// ESP-NOW接收回调
void OnDataRecv(const uint8_t * mac, const uint8_t *incomingData, int len) {
  // 直接给全局变量赋值，不定义局部变量
  memcpy(&receivedSensorValue, incomingData, sizeof(receivedSensorValue));
}

二、让GyverPortal实时更新NUMBER控件 #

GyverPortal默认初始化时渲染控件，要实现实时更新，用下面两种方法：

方法1：指定控件ID手动更新 #

1. 给NUMBER控件设置唯一ID
2. 每次获取新读数后，调用portal.update()刷新该控件的值

示例代码：

#include <GyverPortal.h>

GyverPortal portal;
float sensorValue = 0.0;

void setup() {
  Serial.begin(115200);
  portal.begin("你的WiFi名称", "WiFi密码");
  
  // 给NUMBER控件设置ID为"sensor_read"
  portal.add(NUMBER, "传感器读数", "sensor_read", &sensorValue, 0, 100, 1);
}

void loop() {
  // 模拟读数更新
  sensorValue = random(0, 100) / 1.0;
  
  // 更新指定ID的控件值
  portal.update("sensor_read", sensorValue);
  
  portal.tick();
  delay(1000); // 模拟数据更新间隔
}

方法2：动态生成网页 #

如果需要更灵活的刷新，在自定义网页处理器里动态生成控件，每次网页请求都会用最新的全局变量值：

#include <GyverPortal.h>

GyverPortal portal;
float sensorValue = 0.0;

void setup() {
  Serial.begin(115200);
  portal.begin("你的WiFi名称", "WiFi密码");
  
  // 设置自定义网页处理器
  portal.handler([]() {
    portal.header("传感器监控");
    // 每次生成网页时使用最新的sensorValue
    portal.NUMBER("传感器读数", &sensorValue, 0, 100, 1);
    portal.footer();
  });
}

void loop() {
  // 模拟读数更新
  sensorValue = random(0, 100) / 1.0;
  
  portal.tick();
  delay(1000);
}

按上面的步骤修改后，全局变量会实时同步最新读数，GyverPortal也能正确刷新网页上的数值显示。

内容的提问来源于stack exchange，提问作者Barinov