我在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值
1条答案
按热度按时间rjee0c151#
您需要使用从WebSocket消息中接收到的RGB值更新--box-color属性值。更改行:
致:
这将把--box-color属性设置为接收到的RGB值,格式为“Rvalue,Gvalue,Bvalue”。
有关使用JavaScript设置CSS变量的更多信息,请参阅此链接:https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty