액세스 포인트로 구성된 ESP8266은 현재 여러 개의 DS18B20 센서를 읽고 SD 카드의 텍스트 파일에 판독 값을 저장하도록 프로그래밍되어 있습니다. 안드로이드 폰에서 AP에 연결할 수 있고 브라우저에서 10.10.10.1 (ESP의 정적 IP 주소)로 이동하여 HTML/JS를 통해 설정을 변경 (간격 시간 읽기/SD 카드 데이터 삭제)하고 저장된 값을 볼 수 있습니다 HTML 표에 표시됩니다.액세스 포인트로 실행되는 ESP8266 웹 서버에서 차트를 그릴 수 있습니까?
Google 차트와 같은 라이브러리를 얻기 위해 웹에 연결할 필요없이 여러 줄 (각 센서의 줄)이있는 간단한 2D 차트를 그릴 수있는 방법이 있는지 궁금했습니다. 신호가없는 원격 장소에 설치해야합니다. ESP의 목적은 나중에 웹 서버를 통해 사용자에게 제공 될 수있는 시간에 따라 데이터를 얻는 것입니다.
* svg 이미지를 차트로 사용하여 간단한 웹 페이지를 만들 수 있습니다. 이 같은 :
<html>
<head>
<meta http-equiv='refresh' content='5'/>
<title>ESP8266 Demo</title>
<style>
body { background-color: #cccccc; font-family: Arial, Helvetica, Sans-Serif; Color: #000088; }
</style>
</head>
<body>
<h1>Hello from ESP8266!</h1>
<img src=\"/chart.svg\" />
</body>
</html>
당신은 SVG 파일을 생성 어떤 방법으로 웹 서버 경로 server.on ("/chart.svg", drawGraph);를 매핑 할 수 있습니다. SVG file 간단한 텍스트 파일입니다. 다음과 같이하려면 몇 가지 마크 업 트릭을 알아야합니다.
void drawGraph() {
String out = "";
char temp[100];
out += "<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" width=\"400\" height=\"150\">\n";
out += "<rect width=\"400\" height=\"150\" fill=\"rgb(250, 230, 210)\" stroke-width=\"1\" stroke=\"rgb(0, 0, 0)\" />\n";
out += "<g stroke=\"black\">\n";
int y = rand() % 130;
for (int x = 10; x < 390; x+= 10) {
int y2 = rand() % 130;
sprintf(temp, "<line x1=\"%d\" y1=\"%d\" x2=\"%d\" y2=\"%d\" stroke-width=\"1\" />\n", x, 140 - y, x + 10, 140 - y2);
out += temp;
y = y2;
}
out += "</g>\n</svg>\n";
server.send (200, "image/svg+xml", out);
}
차트 라이브러리를 사용할 수없는 이유는 무엇입니까? 클라이언트 (브라우저)가 사실을 가져 오지만, 그렇다고해서 ESP8266 서버에서 가져와야한다는 것은 아닙니다. 제안 된대로 서버에 SVG (또는 유사)를 렌더링하는 대신 서버가 인터넷의 어딘가에있는 CSS/JavaScript에 대한 데이터 및 참조를 포함하여 "알몸"HTML을 제공 할 수 없습니까? 물론 [동일 도메인 정책] (https://en.wikipedia.org/wiki/Same-origin_policy)의 제약을 염두에 두어야합니다. –
"오프라인"액세스 포인트에 연결된 클라이언트는 인터넷에서 동시에 라이브러리를 가져올 수 있습니까? –
"오프라인"액세스 포인트가 무엇인지 알 수 없습니다. 인터넷에 연결되지 않은 AP (ESP8266 및 클라이언트가 연결)? –