Daten an HTML Seite senden, welches Format ist richtig

Moin liebe Gemeinde,
arbeite immer noch ein mein WoMo Projekt, d.h in meinem WoMo ist ein kleiner ESP8266 NodeMCU, der ist auch fleissig und macht Sensoren auslesen, Webserver/Client MQTT Broker/Client. Das macht er ziemlich gut. Eigentlich könnte ich damit zufrieden sein. Selbst die Waage mittels HX711 für das Messen der Propan Gasflasche funktioniert nun so, das ich damit leben kann.
Was jetzt fehlt, ist das Webinterface und die Übergabe der Daten an ein ausrangiertes Iphone5, welches nur Daten ausgeben soll, also Gewicht Gasflasche, den Füllstandssensor für den Wassertank (mit DMX5100 oder so ähnlich).

Sorgen bereitet mir da die Übergabe der Daten, insbesondere die verdammten Datenformate, int, char, usw. ich weiss nicht, welche Formate da auf meiner HTML Seite mit CSS erwartet werden und wie ich die ins richtige Format bringe.

Kann da jemad Rat geben?

z.B.void httpTime()
{
String output = “

Zaehler seit

“;
output += " zeile”;
output += String(millis());
output += " milliSekunden. \n “;
output += "
\n”;
output += String(temperature1);
output += "
\n”;
// output += String(bme.readTemperature());
output += "
\n";
output += String(pressure);
// output +=(String)bme.readHumidity());
// output += “html { font-family: Helvetica; display: inline; font-size: 120x; }”;
// output += "

h1 zeile

";
// output +=“html { font-family: Helvetica; display: inline; padding: 10px; border: 3px solid black; margin: 0px auto; text-align: center; width: 300px; height: 600px}\n”;
// output +=“body{margin-top: 10px;} h4 {color: red} h1 {font-size: 60px;color: #444444;margin: 10px auto 30px;} h3 {color: #444444;margin-bottom: 10px;}\n”;

// output +="\n";
server.send(200, “text/html”, output);
}

der einzige Wert der auf der HTML Seite ausgegeben wird ist

output += String(millis());

alle anderen Werte sind 0 oder nicht sichtbar.

Würde mich freuen wenn da mal einer seinen Senf dazugeben kann.

vg

Gerd

Setze Deinen Code bitte in Codetags (</>-Button oben links im Forumseditor oder [code] davor und [/code] dahinter oder gehe in der IDE auf Bearbeiten - Für Forum kopieren und füge es hier ein).
Dann ist er auch auf mobilen Geräten besser lesbar.
Das kannst Du auch noch nachträglich ändern.

Außerdem entferne bitte die unnötigen Leerzeilen und formatiere den Code ordentlich (+T in der IDE hilft Dir dabei).

Gruß Tommy

gschrode54:
Moin liebe Gemeinde,
alle anderen Werte sind 0 oder nicht sichtbar.

dann sind schlicht deine Variablen alle 0.
Wenn millis() funktioniert - dann sollten die anderen auch funktionieren.

mach mal testweise eine lokale Variable in deiner Funktion, und gib sie aus (so wie millis()) und du wirst sehen das geht.

int glaubsnicht = -42;

und weiter unten

output += String(glaubsnicht);

void httpTime()
{
  String output = "<h1>Zaehler seit</h1> ";
  output += " zeile";
  output += String(millis());
  output += " milliSekunden. \n ";
  output += "
 \n";
  output += String(temperature1);
  output += "
 \n";
  //   output += String(bme.readTemperature());
  output += "
 \n";
  output += String(pressure);
  //    output +=(String)bme.readHumidity());
  //   output += "<style>html { font-family: Helvetica; display: inline; font-size: 120x; }";
  //   output += "<h1> h1 zeile</h1>";
  // output +="<style>html { font-family: Helvetica; display: inline; padding: 10px; border: 3px solid black; margin: 0px auto; text-align: center; width: 300px; height: 600px}\n";
  // output +="body{margin-top: 10px;} h4 {color: red} h1 {font-size: 60px;color: #444444;margin: 10px auto 30px;} h3 {color: #444444;margin-bottom: 10px;}\n";
  // output +="</style>\n";
  server.send(200, "text/html", output);
}

gschrode54:

Du hast keine Frage gestellt.
Ist das die Antwort?

void httpTime()
{
  int glaubsnicht = -42;
  String output = "<h1>Zaehler seit</h1> ";
  output += " zeile";
  output += String(millis());
  output += " milliSekunden. \n ";
  output += "
 \n";
  output += String(glaubsnicht);
  server.send(200, "text/html", output);
}

Sieh dir doch einfach mal die Beispiele von Fips an.
Da kannst du erkennen, wie die Informationen auf die Webseite gelangen.

Dank an alle,
temperature = bme.readTemperature(); habe ich jetzt zugeordnet. Das war bisher nur für den Broker gepublished

myBroker.publish("broker/Temperatur", (String)bme.readTemperature()); ich dachte das reicht.

Jetzt tuts.
Kommastelle krieg ich auch noch hin, oder weiss jemand ad hoc wies geht?

int jetzt glaubichs = -35
vg

Gerd

noch mal ne kurze Frage,

int macht dann aber über String den String, der ist jedoch ohne Kommastellen :frowning:

vg

Gerd

hallo noiasca,
durch die viele hin und her probiererei hatte ich den überblick verloren.
jetzt tuts.
danke
vg Gerd

Hallo liebe Wissenden,

nun habe ich die Sonsordaten auf der Homepage, allerdings ziemlich roh.
wie bekomme ich den die variablenwerte in die folgende Seite:

const String HTML2 = R"DATA(
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.3, user-scalable=yes">
    <meta name="description" content="Das ist die index.html">
    <title>Wohnmobil App</title>
<style>
    ul { list-style-type: none;  margin: 0;  padding: 0;  overflow: hidden;  background-color: #333;}
    li { float: left;}
    li a { display: block;  color: white;  text-align: center;  padding: 14px 16px;  text-decoration: none;}
    li a:hover:not(.active) {  background-color: #111;}
    .active {  background-color: #4CAF50;}
</style>
</head>
<body>
<ul>  <li><a href="./">Home</a></li>  
  <li><a href="time">Gas</a></li> 
  <li><a href="html2">Luft</a></li>
  <li><a href="html">Wetter</a></li>
  <li style="float:right"><a class="active" href="#about">About</a></li>
</ul>
<header class="site-header">
      <p style="font-size: 180px; text-align: center; font-decoration: none;">
            27 luft altitude [b]<-- da soll die Variable hin (String(temperature);)[/b]
      </p>
      <p style="text-align: center; color: green; font-size: 30px;">
      Liter Rest Luft
      </p>
</header>
</body>
</html>
 )DATA";

für jede Hilfe ziemlich dankbar…
vg
Gerd

Überhaupt nicht, da Du const nicht verändern kannst.

Baue Dir die konstanten Teile zwischen den Werten einzeln und gib das dann nacheinander aus.

Gruß Tommy

umspanne deine Daten mit einem eindeutigen
hierderInitialwert

und aktualsiere mittels Fetch/API - JavaScript

Magst vieleicht mal das lesen:
https://werner.rothschopf.net/201809_arduino_esp8266_server_client_2.htm

Hallo Tommy,
d.h. const String1 + Variablenwert + const String2 = meine Homepage

dann kann ich meine Seite ja so einrichten das nur noch Variablenwert1 angehangen wird, auf den zweiten Teil muss ich dann verzichten, das ginge. wie hänge ich dann den Variablenwert unten an meine Seite? und wie muss dann der Aufruf im Browser stattfinden, wenn zwei Aktionen erfolgen sollen?

vielleicht sollte ich es doch wieder mit Holzhacken versuchen. :slight_smile:

vg Gerd

hallo noiasca,
auf der Seite von Werner Rothschopf war ich schon, habe mir auch die Sketche von ihm geladen und versucht sie zu verstehen. Eigentlich super....
jetzt muss ich erst mal sehen wie du das mit dem SPAN-ID und dem aktualisieren mittels FETCH API meinst und wie das funktioniert.
Ich will doch nur ein paar Sensor Daten auf meinem alten Iphone per HTML abrufen.
Na erst mal danke, werde wieder lesen und probieren ....

schönen Tag noch

vg Gerd

Mit nur anhängen an einen 1. Teil wird das wohl nichts werden. Das ist ja dann kein gültiges HTML.
Den Rest der Frage verstehe ich nicht.

Gruß Tommy

gschrode54:
hallo noiasca,
auf der Seite von Werner

vieleicht zur endgültigen Verwirrung …

Werner = noiasca

:wink:

das was ich hier zeige:

message += F("<p>Internal Voltage measured by ESP: <span id='internalVcc'>"); 
message += ESP.getVcc();
message += F("</span>mV</p>\n");

macht genau das:

der Output wird in einem Buffer “message” zusammengebaut
(die Fixtexte sind mit dem F-Makro trotzdem im Flash)
der aktuelle Wert aus ESP.getVCC() wird an der auszugebenden Stelle eingefügt
der auszugebende Wert wird mit einem span id umgeben

damit du ihn später mittels JavaScript findest und austauschen kannst

eigentlich eh ganz einfach :wink:

Hallo Werner,
bin gerade dabei den Sketch Server/Client für meine Bedürfnisse zu ändern/erweitern (von deiner Homepage :-)).

versteh nicht wie das mit dem Remotzugriff funktionieren soll. Ist damit gemeint das ein weiterer ESP6288 als Client funktioniert und Daten an den Server schicken kann. Für mein Beispiel würde ich einen Sensor an den Client klemmen und erwarten das die Daten dann an den Server gesendet werden. Ist das so?

Übrigens ist der Server/Client Sketch schön strukturiert und übersichtlich, danke ..... verstehe jetzt einige Sachen besser.

vg
Gerd