我可以将变量输入 HTML 并将其提供给 CSS 以更新仪表读数吗?

Can I input a variable into HTML and give it to CSS to update a gauge reading?

我正在尝试编写一些代码来读取传感器,并使用我的 ESP32 创建一个将显示该值的网页。

但是在带有“针”(想想速度计类型的东西)的仪表上,比如输出,我可以在 CSS 中创建变量,我可以在 CSS 中创建仪表并显示在 HTML 很好。 我可以通过更改 CSS 变量来更改仪表的值,但我希望能够将此变量从我的 HTML 文件传递​​给 CSS。

这样我就可以在我的 ESP32 上处理 HTML 页面,更新传感器的值并显示它,我似乎无法获得更新 CSS 变量的选项HTML.

我宁愿远离 JavaScript 做主人,我已经在学习 CSS 和 HTML 来完成这项工作,但如果需要我会做它。

或者我可以在 PHP 中执行此操作吗?

有什么建议吗?

如果你想让这个动态化,你别无选择,只能结合你正在使用的东西重新使用 JavaScript。据我了解,它类似于您正在玩弄的百分比值或旋转度值。

我可以针对您的具体情况推荐的是使用内联样式来更改指示器的位置。

类似于:

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

如果您与我们分享您目前所拥有的代码,将会有所帮助。

此外,据我了解,您对这种编码仍然很陌生,但可能对您来说非常有效的方法可能是 Socket.io 您只需分配一个接收信息的端口并对其进行配置,你可以配置你的 ESP32 将信息发送到我想的那个端口,虽然不是很熟悉那部分。

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

如果您成功将其应用到项目中,并使用您提到的仪表加载静态 html 文件,则在 esp32 运行时,您可以将 websocket 文本消息发送到 front-end javascript代码。在 javascript 端收到消息后,您可以从那里轻松更新任何内容。

如果你对此更感兴趣,我会在这里为你写一些代码。请告诉我。