websocket 无法实时更改存储颜色的框的值

0g0grzrc  于 2023-04-21  发布在  其他
关注(0)|答案(1)|浏览(94)

我在ESP8266上的项目有问题。我使用颜色传感器收集RGB值并通过WebSockets将其发送到在ESP上创建的服务器,值正常传递并真实的显示在网站上。我还想添加功能,以便生成的颜色显示在颜色框中。不幸的是,我无法获得这个,我已经搜索了所有我能找到的。This is how it looks, this olive-green color is permanently assigned rgb(120, 120, 0)
这是我使用的代码:

websock.onmessage=function(event)
        {
          var obj = JSON.parse(event.data);
                    
          document.getElementById('Rvalue').innerHTML = obj.Rvalue;
          document.getElementById('Gvalue').innerHTML = obj.Gvalue;
          document.getElementById('Bvalue').innerHTML = obj.Bvalue;

          const root = document.documentElement;
          root.style.setProperty('--box-color', '120, 120, 0');
        }
      }

      window.onload = function(event)
      {
        InitWebSocket();
      }

我想修改这一行:root.style.setProperty('--box-color','120,120,0');root.style.setProperty('--box-color','Rvalue,Bvalue,Gvalue');
我还使用此代码通过WebSocket向服务器发送数据。现在我有随机值,但稍后我想将其附加到传感器。

unsigned long now = millis();
  if ((unsigned long)(now - previousMillis) > interval) 
  { 
    String jsonString = "";
    StaticJsonDocument<200> doc;
    JsonObject object = doc.to<JsonObject>();
    object["Rvalue"] = random(100);
    object["Gvalue"] = random(100);
    object["Bvalue"] = random(100);
    serializeJson(doc, jsonString);
    Serial.println(jsonString);
    webSocket.broadcastTXT(jsonString);
    
    previousMillis = now;
  }

我认为这是一个问题,RGB值是字符串而不是INT。
我尝试用不同的方法将字符串转换为INT值,例如:int Rvalue_int = Integer.valueOf((String)“Rvalue”);或者int Rvalue_int = jsonObj.get(“Rvalue”).asInt();但这会阻止发送RGB值

rjee0c15

rjee0c151#

您需要使用从WebSocket消息中接收到的RGB值更新--box-color属性值。更改行:

root.style.setProperty('--box-color', '120, 120, 0');

致:

root.style.setProperty('--box-color', `${obj.Rvalue}, ${obj.Gvalue}, ${obj.Bvalue}`);

这将把--box-color属性设置为接收到的RGB值,格式为“Rvalue,Gvalue,Bvalue”。
有关使用JavaScript设置CSS变量的更多信息,请参阅此链接:https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty

相关问题