Hallo,
ich bin derzeit dabei eine Webseite zu Erstellen auf der sich Messertreihen grafisch darstelllen lassen. Dazu nutze ich Chart.js.Dar Webserver ist auf einen ESP 8266 NodeMCU. Grundlage Hallo Server abgeändert mit LittleFS. Die HTML Seite liegt also auf dem Filesystem.Es gibt derzeit ein Chart mit zwei Messreihen. Die Messreihen sollen als JSON mit Fetch abgerufen werden. Dazu AdruinoJson.Lib verwendet.
Im Moment hängt es an der Stelle die Daten auf der Webseite auzulesen. Der Brauser meldet einen Fehler im Json.
SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data
Mit dem Heifisch hab ich mir die Daten angesehen , der erkennt das richtig und gibt die beiden Member Key´s und Array´s des Objekt richtig an.
Auf der Webseite habe ich zum testen ein paar zeilen um ein paar Testwerte auf das Chart zu bringen das klappt soweit.
kann mir einer da weiterhelfen
Danke Heinz
Hier der Sketch
#include <LittleFS.h>
#include <ArduinoJson.h>
#include <ESP8266WebServer.h>
const byte maxbuffer = 20;
const size_t capacity = JSON_ARRAY_SIZE(2 * maxbuffer) + JSON_OBJECT_SIZE(2) + 30;
const char* ssid = "xxxx";
const char* password = "yyyy";
int wert1, wert2;
int buffer1[maxbuffer];
int buffer2[maxbuffer];
uint32_t altzeit;
// Server Instanz erstellen
ESP8266WebServer server(80);
//--------------- Setup --------------
void setup() {
Serial.begin(115200);
Serial.println();
WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password);
Serial.println("Size ");
Serial.println(capacity);
// Wait for connection
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.print("Connected to ");
Serial.println(ssid);
Serial.print("IP address: ");
Serial.println(WiFi.localIP());
LittleFS.begin(); // Filesystem starten
FSzeigen(); // Info anzeigen
// --Server Handle einrichten---
server.serveStatic("/", LittleFS, "/chart2.html");
server.on("/daten", sendeDaten);
server.onNotFound(handleNotFound); // Fehler bearbeiten
server.begin();
Serial.println("HTTP server started");
}
// ------------- Loop ---------------
void loop() {
server.handleClient();// hier passiert sonst nichts
if (millis() - altzeit >= 1000) { // Messwerte simulieren
altzeit = millis();
wert1 = 200+random(10);
wert2 = 500+random(10);
Serial.print(wert1); Serial.print("\t");
Serial.print(wert2); Serial.println();
fillbuffer();
}
}// ------- loop ende -----------
// ------------ Fehler Seite
void handleNotFound() {
String message = "File Not Found\n\n";
message += "URI: ";
message += server.uri();
message += "\nMethod: ";
message += (server.method() == HTTP_GET) ? "GET" : "POST";
message += "\nArguments: ";
message += server.args();
message += "\n";
for (uint8_t i = 0; i < server.args(); i++) {
message += " " + server.argName(i) + ": " + server.arg(i) + "\n";
}
server.send(404, "text/plain", message);
}
// --------------- Fillesystem anzeigen ---------------------
void FSzeigen() {
FSInfo fs_info;
LittleFS.info(fs_info);
float fileTotalKB = fs_info.totalBytes / 1024.0;
float fileUsedKB = fs_info.usedBytes / 1024.0;
Serial.print("\nFilesystem Total KB "); Serial.print(fileTotalKB);
Serial.print(" benutzt KB "); Serial.println(fileUsedKB);
Dir dir = LittleFS.openDir("/"); // Dir ausgeben
while (dir.next()) {
Serial.print(dir.fileName()); Serial.print("\t");
File f = dir.openFile("r");
Serial.println(f.size());
}
}
void fillbuffer() {
static int zeiger = -1;
if (zeiger < maxbuffer-1) {
zeiger++;
}
else { // Array Pos verschieben
for (byte i = 1; i < maxbuffer; i++) {
buffer1[i - 1] = buffer1[i];
buffer2[i - 1] = buffer2[i];
}
}
buffer1[zeiger] = wert1;
buffer2[zeiger] = wert2;
//Serial.print(zeiger);
}
void sendeDaten() {
String json = "";
DynamicJsonDocument doc(2048);
JsonArray value1 = doc.createNestedArray("wert1");
Serial.println();
for (byte i = 0; i < maxbuffer; i++) {
value1.add(buffer1[i]);
//Serial.print(buffer1[i]);
}
Serial.println();
JsonArray value2 = doc.createNestedArray("wert2");
for (byte i = 0; i < maxbuffer; i++) {
value2.add(buffer2[i]);
//Serial.print(buffer2[i]);
}
Serial.println();
serializeJson(doc, json);
Serial.println(json);
server.send(200, "application/json", json);
}
und hier die HTML Fehlerstelle ist markiert.
<!DOCTYPE html>
<html lang="de">
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<meta charset = "UTF-8">
<title>Messwerte</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<style>
button{
width:5.5em;
height:2em;
font-size:1em
}
</style>
</head>
<body>
<div style="width:70%">
<canvas id="chart"> </canvas>
</div>
<button type="button" onclick="loadDaten()">neu</button>
<script>
//setInterval(loadDaten, 1000);
myjson='{"wert1":[20,21,22,23,22,22,22,24,22,25],"wert2":[8,10,11,12,11,13,11,10,12,12,13,13,12,13,13,14]}'
const max_x=50; // max Anzahl der Messwerte
var xachse= [];
var wert=[];
var ctx = document.getElementById("chart").getContext('2d');
var config={
type: 'line',
data: {
labels: xachse,
datasets: [{
label: 'Reihe 1',
borderColor: "red",
backgroundColor:"black",
data:wert,
fill:false,
},{
label: 'Reihe 2',
borderColor: "blue",
backgroundColor:"black",
data:wert,
fill:false,
}]
},
options:{
animation: {
duration: 0 // general animation time
},
scales:{
xAxes:[{
display: true,
scaleLabel: {
display: true,
labelString: 'letzte Messung'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: '°C'
}
}]
}
} // options ende
};
laden();
function laden(){
for (var i=0;i<=max_x-1;i++){ // X-Achse beschriften
xachse[i]=max_x-i;
}
var ctx = document.getElementById("chart").getContext('2d');
window.myChart = new Chart(ctx,config);
// zum testen
var obj=JSON.parse(myjson);
config.data.datasets[0].data =obj.wert1;
config.data.datasets[1].data =obj.wert2;
window.myChart.update();
}
function loadDaten(){
fetch('/daten')
.then( function(response){
return response.json();
})
.then(function(myjson){
var obj=JSON.parse(myjson); // hier tritt der Fehler auf.
config.data.datasets[0].data =obj.wert1;
config.data.datasets[1].data =obj.wert2;
window.myChart.update();
});
}
</script>
</body>
</html>
danke nochals