Kann hier was optimiert werden ?

Hallo,
Ein Teil meiner Wetterstation mit HTML Webinterface ist das Darstellen der Daten in einer Grafik.
So wie diese Funktion die eine Website erstellt um den Windverlauf darzustellen

Mich stört hier etwas, das die Seite etwas langsam aufgebaut wird.
Man kann sehen wie die Seite von links nach rechts aufgebaut wird, also der for schleife quasi bei der Arbeit zusehen (dauert ca. 2 sek)
Wäre es Möglichkeit diese Website auf der SD Karte als File zu erstellen und von dort anzuzeigen ? - dann wäre das sichtbare Aufbauen wohl behoben.
Wie die Site ausschaut ist im Anhang zu sehen.

void Male_Windstatistik(EthernetClient cl)
{
int xpos=50; int werte=70;
int aktime=((hour()*60)+minute()) /10;
//Serial.println("Startstatistik");
//Serial.println(aktime);
String farbe,farbe1,farbe2="white";
byte zz=1;

for(int i=0;i<=143;i++)
{
zz++;

if (i<=aktime) {
farbe="red";
farbe1="orange";
}
else
{
farbe="grey";
farbe1="darkgray";
}

cl.print("<div style="position:absolute;top:50px;left:");
cl.print(xpos);

cl.print("px;background:");
cl.print(farbe);
cl.println(";width:6px;height:150px;border: 1px solid black;">");
werte=100-i2c_eeprom_read_byte(0x50,i);

cl.print("<div style="position:absolute;top:0px;left:0px;background:");
cl.print(farbe2);
cl.print(";height:");
cl.print(werte);
cl.println("%;width:6px ">");

cl.println("");

cl.println("<div style="position:absolute;top:");
cl.print(99-i2c_eeprom_read_byte(0x50,i+150));
cl.println("%;left:0px;background:");
cl.print(farbe1);
cl.println(";height:2px;width:6px ">");
cl.println("");

for (byte hh=20; hh<=100; hh+=20)
{
cl.print("<div style="position:absolute;top:");
cl.print(hh);
cl.println("%;left:0px;background:black;height:1px;width:6px ">");
}

cl.println("");
xpos+=6;

if (zz==7) {

if (farbe2=="white") farbe2="#F2F2F2";
else if (farbe2=="#F2F2F2") farbe2="white";

zz=1;
}
}

}

Webserver Statistik.htm (113 KB)

Ich ürde auf alle Fälle das F() Makro bei cl.print() verwenden.
Ansonsten ist das Ram /Flash schneller als eine SD-Karte am Arduino.
Grüße Uwe

uwefed:
Ich würde auf alle Fälle das F() Makro bei cl.print() verwenden.

Wenn ich dies mache, wird der Aufbau noch viel langsamer.
Flash ist schon viel langsamer als Sram.

Habe aber den Code schon optimieren können.
Vor allem die waagrechte Skalenlinien in jedem der 244 div Elemente war Käse.
Am Ende einfach 4 Div's drüberlegen ist viel besser.
Bin zufrieden.

Aber das Darstellen der Logdaten der anderen Sensoren in einer Website kann ich vergessen.
Wenn dann in seperaten Seiten.

Eine andere Plattform wäre wohl besser, ein Due oder ein YÚN.

Beim Due ist es die 3.3 Volt logic und die Anpassung der Lib's wohl das Hauptproblem.
Mein China Ethernet Shield wäre auch nicht kompatibel - leider keine R3
Mir fällt auch auf, das hier wenige den Due benutzen.

Der YÚN ist brandneu, und würde gerne wissen wie das mit Bridge Lib abläuft.

Grüße Rudi

rudirabbit:

uwefed:
Ich würde auf alle Fälle das F() Makro bei cl.print() verwenden.

Wenn ich dies mache, wird der Aufbau noch viel langsamer.
Flash ist schon viel langsamer als Sram.
...

  1. Flash ist beim lesen nicht langsamer als SRAM.
  2. ohne F() werden die Texte von Flash in den SRAM kopiert und dann übertragen.

Grüße Uwe

Hi Uwe, Ich glaube dir natürlich alles.

Leider ist es so, das der Code ohne F Macro ca. 1829 ms braucht um die Seite darzustellen.
Mit F Macro dauert das ganze 11597 ms :~

Da besteht Erklärungsbedarf.
Evtl. mache ich was falsch, es reicht IHMO statt cl.print("bla bla bla"); ein cl.print(F("bla bla bla")); zu schreiben ?
Anbei der Code mit F Macro:

void Male_Windstatitik_neu(EthernetClient cl)
{
unsigned long  starter=millis();
String farbe;  
int xpos=50; int werte=70;  
int aktime=((hour()*60)+minute()) /10;
byte boe,wind;

for(int i=0;i<=143;i++)
{
wind=100-i2c_eeprom_read_byte(0x50,i);
boe=100-i2c_eeprom_read_byte(0x50,i+150);
if (i<=aktime) 
          farbe="red";             
               else 
                  farbe="grey";
                                
                   
     
cl.print(F("<div style=\"position:absolute;top:50px;left:"));
cl.print(xpos);  
cl.print(F("px;background:"));
cl.print(farbe);
cl.println(F(";width:5px;height:150px;border: 1px solid black;\">"));   
 
cl.print(F("<div style=\"position:absolute;top:0px;left:0px;background:white;width:5px;height:"));
cl.print(boe);
cl.println(F("%\"></div>")); 

cl.print(F("<div style=\"position:absolute;top:"));
cl.print(boe+2);
cl.print(F("%;left:0px;background:white;width:5px;height:"));
cl.print(wind-boe-2);
cl.println(F("%\"></div>")); 
cl.println(F("</div>"));
 xpos+=6;    
}


for(int i=1;i<=120;i+=30)
{
cl.print(F("<div style=\"position:absolute;top:"));
cl.print(80+i);
cl.println(F("px;left:50px;background:black;width:865px;height:1px\"></div>"));
}
Serial.println(millis()-starter);

}

Wie schon gesagt, im Vergleich ohne F Macro sehr laaangsam - Warum ???
Bin echt neugierig woran das liegt.

Grüße Rudi

Das F Makro braucht nie soviel Zeit. Dein Ethernetclient ist vermutlich die Ursache. Ist es denkbar, daß der Client zu kleine Pakete erzeugt und die mit dem F Makro dann vieleicht nicht kleiner macht?

Wireshark ist Dein Freund wenn Du das analysieren willst.

Ok, Udo habe mal einen Log mit Wireshark gemacht.
Kannst ja mal einen Blick draufwerfen.

192.168.0.177 ist der Server Arduino 192.168.0.1 der Client Win 7 PC Firefox.
Habe kein DHCP am laufen.

Wenn ich als Client ein Android Tablett mit Opera nehme schaut es genauso aus.

log.rar (697 KB)

hi,

Du läßt den arduino die ganze arbeit machen und sendest tausende html-zeilen.
soll doch der browser arbeiten und Du sagst ihm, was er machen soll und überträgst nur werte.

ich hab' das nur schnell für den pc geschrieben und nicht für den arduino, hab' grad keinen zur hand.

in der funktion werte werden nur spaßwerte generiert, die kommen ja dann von den sensoren.

das ganze ist nur ein ansatz, vielleicht hilft es Dir weiter...

gruß stefan

test2.html (1.6 KB)

das ganze ist nur ein ansatz, vielleicht hilft es Dir weiter...

Natürlich hilft das, ist zumindest ein Ansatz. Ich denke das langsam zu verstehen....
Ich habe befasse mich erst seit ca. 3 Monaten intensiv mit HTML, bei der Java Lösung habe ich ein Verständnisproblem wie die Daten auf den Client kommen.

Wie bekomme ich die Daten rein, das ist ja schon java :
Hier verstehe ich das schon noch, es wird nicht auf die Arduino Daten zugegriffen.

function werte() { // array befüllen, macht der arduino
	a = new Array(12);
	for (var n = 0; n < 12; n++) {
		a[n] = new Array(12);
		for (var m = 0; m < 12; m++) {
			a[n][m] = Hier müsste auf Daten aus dem ext. EEprom des Arduino zugegriffen werden   
		}
	} 
}

Habe ich ein Array das in Java als auch in Arduino C++ sichtbar ist ??

Hallo,
Ich habe dies jetzt sehr einfach damit gelöst Image Charts  |  Google Developers

Der Arduino muss einfach eine URL zusammenbauen, und die passende Grafik landet auf der Website.
Belastet den Arduino nicht, ist genial einfach und dazu noch schnell und schaut obendrein schick aus :slight_smile:

Wundert mich eigentlich den Tip hier nicht bekommen zu haben :wink:

Der Lerneffekt wäre via Java Eigenbau mit Sicherheit größer gewesen, wobei ich es mit Sicherheit nicht ohne Hilfe hinbekommen hätte.
Dazu waren zu viele Fragen offen.

Grüße Rudi

Äähm,
vielleicht mal zu Klarstellung:
Javascript != Java

BerndJM:
Javascript != Java

Schon klar, den Haupt Unterschied kann man schon im Namen sehen, es handelt sich hier um eine Scriptsprache.
Um dies geht es aber hier nicht.

Warum wird eine Website mit F Macro deutlich langsamer aufgebaut ???
In meinem Beispiel habe ich die Zeit die der Arduino in dieser Funktion braucht gemessen.
Die Zeiten sind im Vergleich unterirdisch, und laut Uwe sollte dies nicht so sein.

Evtl. kann das ein anderer auch mal testen, es reicht hier eine statische etwas größere Website.
Diese refreshen - und den Unterschied mit oder ohne F Macro optisch sehen und auch messen.