-
|
How add css style file? |
Beta Was this translation helpful? Give feedback.
Answered by
Hieromon
Apr 15, 2021
Replies: 2 comments 1 reply
-
Sketch(It fits ESP32) #include <Arduino.h>
#include <WiFi.h>
#include <WebServer.h>
#include <FS.h>
#include <SPIFFS.h>
#include <PageBuilder.h>
// You need to change the SSID and PASS to the actual strings that match your environment.
#define WIFI_SSID "****"
#define WIFI_PASS "****"
const char _CONTENT_HELLO[] PROGMEM = R"(
<html>
<head>
<style>
{{STYLE}}
</style>
</head>
<body>
<div class="hello">
Hello, world
</div>
</body>
</html>
)";
// CSS files with the following names must be placed on SPIFFS
#define STYLE_FILENAME "/hello.css"
String readStyle(PageArgument args) {
String css;
if (SPIFFS.exists(STYLE_FILENAME)) {
File cf = SPIFFS.open(STYLE_FILENAME, "r");
css = cf.readString();
cf.close();
}
else {
Serial.printf("%s file not found\n", STYLE_FILENAME);
}
return css;
}
PageElement HelloElements(_CONTENT_HELLO, {
{ "STYLE", readStyle }
});
PageBuilder HelloPage("/hello", { HelloElements });
WebServer server;
bool connectWiFi(const char* SSID, const char* PASS) {
WiFi.mode(WIFI_STA);
delay(100);
Serial.printf("WiFi connecting to %s...", SSID);
WiFi.begin(SSID, PASS);
unsigned long tm = millis();
while (WiFi.status() != WL_CONNECTED) {
if (millis() - tm > 30000) {
Serial.println("can not connect");
return false;
}
}
Serial.printf("IP:%s\n", WiFi.localIP().toString().c_str());
return true;
}
void setup() {
delay(1000);
Serial.begin(115200);
Serial.println();
if (connectWiFi(WIFI_SSID, WIFI_PASS)) {
SPIFFS.begin(true);
HelloPage.insert(server);
server.begin();
Serial.println("http server started");
}
else
while (true)
yield();
}
void loop() {
server.handleClient();
}CSS file named
|
Beta Was this translation helpful? Give feedback.
1 reply
-
|
phx! worked! |
Beta Was this translation helpful? Give feedback.
Answer selected by
Hieromon
-
|
you can add any css files to your html codes by using the link tag |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Sketch
(It fits ESP32)