当前位置： 文江博客话题详情

当由运行 ESPAsyncWebServer 的 ESP8266 提供服务时，CSS 样式将被删除

发布于 2025-01-16 16:04:09 字数 3223 浏览 3 评论 0原文

尝试在图像中定位文本，就像 w3schools 中的示例一样。 它在 w3schools 的我的空间中运行良好。当我在浏览器中查看css时：

.container {
  position: relative;
}

.center {
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 18px;
}

img { 
  width: 100%;
  height: auto;
  
}

但是当完全相同的html + css代码在esp8266 nodeMCU上运行时，定位失败。正如 Ben T 所说，缺少宽度样式。

.container {
  position: relative;
}

.center {
  position: absolute;
  top: 50;
  text-align: center;
  font-size: 18px;
}

img { 
  width: 100%;
  height: auto;
  
}

所以 css-class“center”出了问题。

这是在 esp8266 上运行的代码。 现在的 html 文件位于同一个文件中。 css 定位也因温度字符串而失败。

#include <Arduino.h>
#include <ESP8266WiFi.h>
#include <Hash.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <Adafruit_Sensor.h>
#include "LittleFS.h"

const char* ssid     = "ESP8266-Access-Point";
const char* password = "123456789";

// hard coded current temperature & humidity
float t = 15.1;
float h = 55.5;

AsyncWebServer server(80);

const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
<style>
.container {
  position: relative;
}

.center {
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 18px;
}

img { 
  width: 100%;
  height: auto;
  
}
</style>
</head>
<body>

<h2>Image Text</h2>

<p>Center text in image:</p>

<div class="container">
  <img src="camper" alt="Cinque Terre" width="1000" height="300">
  <div class="center">Centered</div>
</div>

</body>
</html>)rawliteral";


// Replaces placeholder with DHT values
String processor(const String& var){
  //Serial.println(var);
  if(var == "TEMPERATURE"){
    return String(t);
  }
  else if(var == "HUMIDITY"){
    return String(h);
  }
  return String();
}

//background-image: url(\"camper\")

void setup(){
  Serial.begin(115200);
  
  WiFi.softAP(ssid, password);

  IPAddress IP = WiFi.softAPIP();
  Serial.print("AP IP address: ");
  Serial.println(IP);

  if(!LittleFS.begin()){
        Serial.println("An Error has occurred while mounting SPIFFS");
        return;
  }

  File camper = LittleFS.open("/camper.png", "r");

  Serial.println(WiFi.localIP());

  // Route for root / web page
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/html", index_html, processor);
  });

  server.on("/camper", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(LittleFS, "/camper.png", "image/png");
  });

  server.on("/temperature", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/plain", String(t).c_str());
  });
  server.on("/humidity", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/plain", String(h).c_str());
  });

  server.begin();
}
 
void loop(){  
}

以前有人经历过这样的事情吗？ 预先感谢您的任何提示；）

原文

Tried to position text In an Image exactly like in the example from w3schools.
It works fine in my space at w3schools. When I look at the css in the browser:

.container {
  position: relative;
}

.center {
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 18px;
}

img { 
  width: 100%;
  height: auto;
  
}

But when the exact same html + css code is running on the esp8266 nodeMCU, the positioning fails. Like Ben T stated, the width style is missing.

.container {
  position: relative;
}

.center {
  position: absolute;
  top: 50;
  text-align: center;
  font-size: 18px;
}

img { 
  width: 100%;
  height: auto;
  
}

So something goes wrong in the css-class "center".

This is the Code running on the esp8266.
The html file right now is in the same file.
The css-positioning also fails with the temperature string.

#include <Arduino.h>
#include <ESP8266WiFi.h>
#include <Hash.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <Adafruit_Sensor.h>
#include "LittleFS.h"

const char* ssid     = "ESP8266-Access-Point";
const char* password = "123456789";

// hard coded current temperature & humidity
float t = 15.1;
float h = 55.5;

AsyncWebServer server(80);

const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
<style>
.container {
  position: relative;
}

.center {
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 18px;
}

img { 
  width: 100%;
  height: auto;
  
}
</style>
</head>
<body>

<h2>Image Text</h2>

<p>Center text in image:</p>

<div class="container">
  <img src="camper" alt="Cinque Terre" width="1000" height="300">
  <div class="center">Centered</div>
</div>

</body>
</html>)rawliteral";


// Replaces placeholder with DHT values
String processor(const String& var){
  //Serial.println(var);
  if(var == "TEMPERATURE"){
    return String(t);
  }
  else if(var == "HUMIDITY"){
    return String(h);
  }
  return String();
}

//background-image: url(\"camper\")

void setup(){
  Serial.begin(115200);
  
  WiFi.softAP(ssid, password);

  IPAddress IP = WiFi.softAPIP();
  Serial.print("AP IP address: ");
  Serial.println(IP);

  if(!LittleFS.begin()){
        Serial.println("An Error has occurred while mounting SPIFFS");
        return;
  }

  File camper = LittleFS.open("/camper.png", "r");

  Serial.println(WiFi.localIP());

  // Route for root / web page
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/html", index_html, processor);
  });

  server.on("/camper", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(LittleFS, "/camper.png", "image/png");
  });

  server.on("/temperature", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/plain", String(t).c_str());
  });
  server.on("/humidity", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/plain", String(h).c_str());
  });

  server.begin();
}
 
void loop(){  
}

Has somebody experienced something like this before?
Thanks in advance for any kind of hints ;)

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

源来凯始玺欢你 2025-01-23 16:04:09

模板处理器用于：

request->send_P(200, "text/html", index_html, processor);

以及 https://github.com/me -no-dev/ESPAsyncWebServer#template-processing

占位符用 % 符号分隔。像这样：%TEMPLATE_PLACEHOLDER%。

因此，index_html 字符串文字中的所有 % 字符都需要进行转义。例如：

top: 50%%;
width: 100%%;

否则，ESPAsyncWebServer 模板处理会将 % 字符之间的字符视为占位符。

即文本 %;\n width: 100% 被视为占位符。您的processor()函数仅替换TEMPERATURE和HUMIDITY占位符，任何其他占位符都将替换为空字符串。

这意味着此 CSS:

top: 50%;
width: 100%;

替换为：

top: 50;

这个一般问题在问题 https 中进行了描述://github.com/me-no-dev/ESPAsyncWebServer/issues/644。

A template processor is used in:

request->send_P(200, "text/html", index_html, processor);

and from https://github.com/me-no-dev/ESPAsyncWebServer#template-processing

Placeholders are delimited with % symbols. Like this: %TEMPLATE_PLACEHOLDER%.

So all of the % characters in the index_html string literal need to be escaped. e.g.:

top: 50%%;
width: 100%%;

Otherwise the ESPAsyncWebServer template processing will treat the characters between % characters as a placeholder.

i.e. the text %;\n width: 100% is treated as a placeholder. Your processor() function only replaces the TEMPERATURE and HUMIDITY placeholders and any other placeholder is replaced by an empty string.

This means this CSS:

top: 50%;
width: 100%;

is replaced with:

top: 50;

This general problem is described in the issue https://github.com/me-no-dev/ESPAsyncWebServer/issues/644.

回复 原文
~没有更多了~

关于作者

沩ん囻菔务

暂无简介

文章
评论
28 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

alipaysp_snBf0MSZIv

文章 0 评论 0

梦断已成空

文章 0 评论 0

瞎闹

文章 0 评论 0

凯凯我们等你回来

文章 0 评论 0

寄意

文章 0 评论 0

似梦非梦

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文