是否可以将变量输入到HTML中并将其提供给CSS以更新仪表读数？

Question

我正在尝试编写一些代码来读取传感器，并用我的ESP32制作一个显示该值的网页。

但在一个有“针”(想速度计类型的东西)输出的仪表上，我可以在CSS中设置变量，我可以在CSS中设置仪表，并在HTML中显示。我可以通过更改CSS变量来更改仪表的值，但我希望能够将此变量从HTML文件传递给CSS。

这是因为我可以在我的ESP32上处理HTML页面，更新传感器的值并显示它，我似乎无法获得通过HTML更新CSS varible的选项。

我宁愿远离JavaScript，我已经在学习CSS和HTML来让它工作，但如果需要的话，我会这么做的。

或者我可以用PHP来做这件事？

有什么建议吗？

Answer 1

如果你想让它动态化，你别无选择，只能使用JavaScript结合你正在使用的东西。据我所知，它要么是百分比值，要么是你在玩弄的旋转度数。

对于您的特定情况，我可以推荐的是使用内联样式来更改指示器的位置。

类似于：

<div style="width: 99%;"></div>

如果你能与我们分享你到目前为止所拥有的代码，这将会有所帮助。

另外，据我所知，你对这类编码仍然是个新手，但对你来说可能真的很好用的东西可能是Socket.io你只需要分配一个接收信息的端口并对其进行配置，你就可以配置你的ESP32来发送信息到那个端口，我想，尽管你对这一部分并不是很熟悉。

Answer 2

如果你想在自己的网站上使用esp32刷新实时数值，你必须使用websockets。我不知道您使用的是什么服务器库，但是有几个websocket库。我推荐ESP32_AsyncWebserver from Me_no_Dev。这是一个完全异步的the服务器实现，它也包含异步websocket。

如果您成功地将其实现到您的项目中，并使用您提到的仪表加载了静态html文件，那么在esp32的运行时，您可以将websocket文本消息发送到前端javascript代码。一旦你在javascript端收到消息，你就可以很容易地从那里更新任何东西。

如果你对此更感兴趣，我可以在这里为你写一些代码。告诉我就行了。