externen Text in HTML-Seite einbinden (durch ersetzen)

Pindrei P. OP #4299656
Lesenswert?
• ▲
▼ 
Hallo,

ich Programmiere aktuell einen µC der als kleiner Server, Messwerte 
weitergeben soll.

Eigentlich funktioniert alles super, wenn ich in den Browser bsw. 
"192.168.1.210/Messwert1" eingebe, bekomme ich als Antwort "10.0 °C". 
Ich habe bewusst auf den html Frame verzichtet.
Als nächstes möchte ich diesen Messwert in meine lokale Webseite 
einbinden. Das ganze jedoch ohne Frame!

z.B.

Der aktuelle Messwert lautet <192.168.1.210/Messwert1> ......

angezeigt werden soll:

Der aktuelle Messwert lautet 10.0 °C ......


Kann mir jemand sagen, wie die Syntax lautet?

MfG
pindrei
Antwort Zitieren Bearbeiten Thread verschieben Thread sperren Anmeldepflicht aktivieren Anpinnen Thread löschen Thread mit anderem zusammenführen Beitrag melden
Pindrei P. OP #4299716
Lesenswert?
• ▲
▼ 
mmmh, schade.

Auf Dauer sollen die Daten eh in eine Datenbank abgelegt werden, daher 
ist eine direkte Datenbankabfrage wohl die Lösung.
Wie ich die Daten in die MySQL-Datenbank bekomme kann ich auch noch 
nicht sagen. Ich dachte an JavaScript, habe mich aber noch nicht 
eingearbeitet.



Danke für die Hilfe.
Antwort Zitieren Bearbeiten Löschen Beitrag melden
Planlos Gast #4299730
Lesenswert?
• ▲
▼ 
Pindrei P. schrieb:
> mmmh, schade.

Wieso schade?

Ändere deine µC-Webseite.
Statt "10,0 °C" gibst du aus
{"temp":10.0}
mit Content-type application/json

in deiner Webseite baust du (z.B) jquery und  kleines Script ein

1
$.getJSON('http://192.168.1.210/Messwert1', function(data) {

2
  $('#ich_bin_die_temperaturanzeige').html(data.temp+'° C');

3
});


Optimierung: "/Messwert1" aus der URL rausnehmen, den µC alle Messwerte 
auf einmal ausspucken lassen
{
"temp1":10.42,
"temp2":21.7,
"battery":3.89
...
}
Antwort Zitieren Bearbeiten Löschen Beitrag melden
Karl H. #4299761
Lesenswert?
• ▲
▼ 
Pindrei P. schrieb:
> Hallo,
>
> ich Programmiere aktuell einen µC der als kleiner Server

Die andere Alternative lautet, dass du in deinen Server einen 
Mechanismus einbaust, der sich das auszuliefernde HTML ansieht und dort 
'Schlüsseltokens' mit dem jeweiligen Messwert ersetzt, ehe dann das so 
umgeänderte HTML endgültig rausgeht.

Viele AVR basierte 'Server' arbeiten nach dieser Methode.

Vorteil: es ist meistens recht einfach zu implementieren
Nachteil: es ist in keinster Weise irgendwie standardisiert, was nach 
einiger Zeit insofern ein Problem aufwirft, dass man selber nicht mehr 
weiss, welche Token es gibt und was sie bewirken. Und natürlich: dein 
Nachfolger wird sich erst mal wundern.
Antwort Zitieren Bearbeiten Löschen Beitrag melden
Pindrei P. OP #4299823
Lesenswert?
• ▲
▼ 
Karl H. schrieb:
> Die andere Alternative lautet, dass du in deinen Server einen
> Mechanismus einbaust, der sich das auszuliefernde HTML ansieht und dort
> 'Schlüsseltokens' mit dem jeweiligen Messwert ersetzt, ehe dann das so
> umgeänderte HTML endgültig rausgeht.

Ja die Lösung habe ich bereits umgesetzt, wenn sich in der html-Seite 
eine Zeichenkette wie z.B. %Messwert% befindet, wird ein Array aus 
Strukturen nach den Namen zwischen den %-Zeichen durchsucht und die 
Variable + Einheit ausgegeben. Im µC-Programm arbeite ich dann direkt 
mit dieser Struktur. Jedoch werden nachher mehrere Server zur 
Messdatenerfassung benötigt.

Die Lösung mit dem JSON habe ich nun auch implementiert. Jetzt fehlt nur 
noch das Javascript. Dazu muss ich mich aber erst einmal über die 
Erstellung einer JavaScript-Seite informieren.

Danke für die Hilfe.
Antwort Zitieren Bearbeiten Löschen Beitrag melden
Pindrei P. OP #4299933
Lesenswert?
• ▲
▼ 
....Irgendwie komme ich nicht weiter. Wenn ich den µC-Abfrage bekomme 
ich jetzt folgende Antwort
1
  {

2
"test1":    111.00,

3
"test2":    222.00,

4
"test3":    333.00,

5
"test4":    444.00,

6
"test5":    555.00,

7
"test6":    666.00

8
}

und meine html Seite habe ich um:
1
    <script>

2
      console.log("Skript gestartet");

3
        

4
      $.getJSON('http://192.168.1.210/get', function(data) 

5
      {

6
        $('#werte').html("test1= "+data.test1+"° C");

7
        }

8
          );

9
      console.log("Skript beendet");

10
  </script>

erweitern, jedoch bekomme ich jedes mal die Fehlermeldung "$ is not 
defined". Wenn ich das Skript um ein "var $;" erweitere wird es nicht 
besser.
Wie ich Werte ausgebe, bzw. darauf zugreife habe ich auch noch nicht 
verstanden. Wie gesagt, mit javaScript und dem Anlegen von Webseiten 
habe ich nahezu keine Erfahrung.
Antwort Zitieren Bearbeiten Löschen Beitrag melden
Peter II Gast #4299936
Lesenswert?
• ▲
▼ 
Pindrei P. schrieb:
> erweitern, jedoch bekomme ich jedes mal die Fehlermeldung "$ is not
> defined". Wenn ich das Skript um ein "var $;" erweitere wird es nicht
> besser.
> Wie ich Werte ausgebe, bzw. darauf zugreife habe ich auch noch nicht
> verstanden. Wie gesagt, mit javaScript und dem Anlegen von Webseiten
> habe ich nahezu keine Erfahrung.

da die Webseite eine andere ist, als die quelle deiner Daten hast du 
vermutlich das "Same-Origin" Problem.

https://de.wikipedia.org/wiki/Same-Origin-Policy

setze mal noch den Header

Access-Control-Allow-Origin: *
Antwort Zitieren Bearbeiten Löschen Beitrag melden
Pindrei P. OP #4299977
Lesenswert?
• ▲
▼ 
Achim H. schrieb:
> .. dann hast Du wahrscheinlich auch noch kein jQuery eingebunden, in die
> Webseite, oder?

mmh ich glaube nicht, nur das script und der Rest ist html.

Peter II schrieb:
> setze mal noch den Header
>
> Access-Control-Allow-Origin: *

ich habe den header im µC-Server erweitert:
"HTTP/1.1 200 OK\r\nContent-Type: 
application/json;charset=UTF-8;\nAccess-Control-Allow-Origin: *\r\n\r\n"

hat aber leider nicht geholfen.
Antwort Zitieren Bearbeiten Löschen Beitrag melden
Pindrei P. OP #4299983
Lesenswert?
• ▲
▼ 
Hier die komplette HTML-Seite:
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

2
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

3


4
<head>

5
  <title>Energieverbrauch</title>

6
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />

7
  <meta name="generator" content="Geany 0.21" />

8
  

9


10
</head>

11


12
<body>

13


14
    <script>

15
      console.log("Skript gestartet");

16
        

17
      $.getJSON('http://192.168.1.210/get', function(data) 

18
      {

19
        $('#werte').html("test1= "+data.test1+"° C");

20
        }

21
          );

22
      console.log("Skript beendet");

23
  </script>

24
  #werte

25
</body>

26


27
</html>
Antwort Zitieren Bearbeiten Löschen Beitrag melden
Arc N. #4300009
Lesenswert?
• ▲
▼ 
Warum immer jquery oder anderes Zeug was erst aus diversen Ecken des 
Internets geladen werden muss? XMLHttpRequest gibt es seit ~10 Jahren

1
var req = new XMLHttpRequest();

2
req.onreadystatechange = function() {

3
    if (request.readyState == 4 && request.status == 200) {

4
        // do something with req.responseText here       

5
    }

6
}; 

7
req.open('GET', aUrl);

8
req.send();
Antwort Zitieren Bearbeiten Löschen Beitrag melden
Peter II Gast #4300013
Lesenswert?
• ▲
▼ 
Arc N. schrieb:
> Warum immer jquery oder anderes Zeug was erst aus diversen Ecken des
> Internets geladen werden muss? XMLHttpRequest gibt es seit ~10 Jahren

warum nicht C(++) wenn es doch seit Jahren asm gibt.



Vervollständige doch mal dein Beispiel damit aus auch funktioniert, dann 
siehst du warum.
Antwort Zitieren Bearbeiten Löschen Beitrag melden
Daniel A. #4300028
Lesenswert?
• ▲
▼ 
Warum machen nur immer alle aus keinem Problem ein JQuery Problem?

Peter II schrieb:
> Pindrei P. schrieb:
>> Kann mir jemand sagen, wie die Syntax lautet?
>
> geht so nicht. Du sollte die Antwort als JSON ausliefern. Dann kann man
> mit JavaScript die Daten laden und dann in der Webseite darstellen.

Natürlich geht das! Warum denn auch nicht?

1
// Ungetestet

2


3
function get(method,path,success,error){

4
  var xhr = new XMLHttpRequest();

5
  xhr.onload = function(){

6
    if(xhr.status==200){

7
      success(xhr.responseText);

8
    }else{

9
      if(error)

10
        error(xhr.responseText,xhr.status);

11
    }

12
  };

13
  function errorHandler(e){

14
    if(error)

15
      error((e.error||e).stack,0);

16
  }

17
  xhr.onerror = errorHandler;

18
  try {

19
    xhr.open(method,path,true);

20
    xhr.send();

21
  } catch(e){

22
    errorHandler(e);

23
  }

24
}

25


26
console.log("Skript gestartet");

27
        

28
get("GET",'http://192.168.1.210/get', function( json ){

29
  var data = JSON.parse( json );

30
  document.body.innerHTML = "test1= "+data.test1+"° C";

31
},function( msg, code ){

32
  alert("Something went wrong! Code "+code+"\nMessage: "+msg);

33
});

34


35
console.log("Skript beendet");
Antwort Zitieren Bearbeiten Löschen Beitrag melden
Pindrei P. OP #4300056
Lesenswert?
• ▲
▼ 
Pindrei P. schrieb:
> OK, in der JSON-Abfrage werden auch keine Kommata angezeigt.....

ich habe zwar nichts verändert, dennoch funktioniert es jetzt!
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

2
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

3


4
<head>

5
  <title>Energieverbrauch</title>

6
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />

7
  <meta name="generator" content="Geany 0.21" />

8
  

9


10
</head>

11


12
<body>

13
<script src="http://code.jquery.com/jquery-latest.js"></script>

14
    <script>

15
      console.log("Skript gestartet");

16
        

17
      $.getJSON('http://192.168.1.210/get', function(data){

18
        $('#werte').html("test1= "+data.test1+"° C");

19
        alert(data.test2);

20
        });

21
          

22
      console.log("Skript beendet");

23
  </script>

24
  <span id="werte"></span>

25


26


27


28
</body>

29


30
</html>


für mich ist es so vollkommen ausreichend. Besten Dank für die Hilfe.
Antwort Zitieren Bearbeiten Löschen Beitrag melden
Pindrei P. OP #4300078
Lesenswert?
• ▲
▼ 
Planlos schrieb:
> Naja... ein "setInterval", dass alle X Sekunden die Temperatur neu
> abfragt und einsetzt sollte schon noch sein :)

Guter Tip, wurde direkt mit eingesetzt.

Planlos schrieb:
> Ich nehm an dein Projekt ist nicht kommerziell?
>

...glücklicher weise nicht, ansonsten wäre das Pojekt im minus. Die JBs 
wollte ich anfangs selber erstellen, da ich aber schon aus dem Zeitplan 
bin, werde ich wohl die vorgefertigten nehmen. Die Internetseite macht 
einen guten Eindruck.
Antwort Zitieren Bearbeiten Löschen Beitrag melden
Pindrei P. OP #4319307
Lesenswert?
• ▲
▼ 
....so mittlerweile bin ich an dem Punkt angekommen, an dem ich beginnen 
will, die Daten in eine SQL-Datenbank zu schreiben.

Dafür verwende ich natürlich ein Raspberry Pi und Python. Jedoch habe 
ich noch ein Probleme mit der JSON-Abfrage.

1
#!/usr/bin python

2


3
import urllib2

4
import json

5


6
url= "http://192.168.1.210/get"

7


8
if __name__== "__main__":

9
  req = urllib2.Request(url)

10
  opener = urllib2.build_opener()

11
  f = opener.open (req)

12
  json = json.load(f)

13


14
  print "Controller gefunden ! \n"

15
  for item in json:

16
    print item

17
  

18
    try:

19
      print "%02d" % (item["test1"])

20
    except:

21
      print "??"


als Ausgabe bekomme ich:

1
Controller gefunden ! 

2


3
test1

4
??

5
test2

6
??

7
test3

8
??

9
test4

10
??


Die Json-Ausgabe des µC sieht so aus:

1
  {

2
"test1":    111.00,

3
"test2":    222.00,

4
"test3":    333.00,

5
"test4":    444.00

6
}


Es sind zumindest schon einmal die Variablennamen, die ich im µC 
hinterlegt habe. Jedoch würde ich auch gerne die Variablenwerte 
angezeigt, bzw. weiterverarbeiten bekommen.

Kann mir jemand sagen, wie ich die Werte angezeigt bekomme?
Antwort Zitieren Bearbeiten Löschen Beitrag melden
Dirk D. #4319377
Lesenswert?
• ▲
▼ 
Arc N. schrieb:
> Warum immer jquery oder anderes Zeug was erst aus diversen Ecken des
> Internets geladen werden muss? XMLHttpRequest gibt es seit ~10 Jahren
>
>
1
> var req = new XMLHttpRequest();

2
> req.onreadystatechange = function() {

3
>     if (request.readyState == 4 && request.status == 200) {

4
>         // do something with req.responseText here

5
>     }

6
> };

7
> req.open('GET', aUrl);

8
> req.send();

9
>


weil ich bei jquery weiß das es in allen browsern vernünftig laufen 
wird.
Hast du dein code mal im IE probiert?
Antwort Zitieren Bearbeiten Löschen Beitrag melden
Pindrei P. OP #4319404
Lesenswert?
• ▲
▼ 
Konrad S. schrieb:
> Ich hab mit Python nix am Hut, aber das sieht falsch aus. Das sollte
> vmtl. eher json[item] oder so ähnlich sein.

ja würde ich auch sagen, ich hatte anfangs es mit
1
item.get('test1')

versucht, jedoch auch ohne Erfolg. Auch stehen in item nur die 
Variablennamen, jedoch keine Werte. Ich vermute, dass der Fehler beim 
einlesen ist.

1
 json = json.load(f)


Woher soll der Compiler wissen, dass eine Fließkommazahl kommt? Wobei 
meine ersten Erfahrungen mit Python und Java Skript gezeigt haben, dass 
es keine Datentypen mehr gibt.
Als C Programmierer ist eine Welt zusammengebrochen.
Antwort Zitieren Bearbeiten Löschen Beitrag melden
Pindrei P. OP #4319437
Lesenswert?
• ▲
▼ 
Konrad S. schrieb:
> Pindrei P. schrieb:
>> item.get('test1')
>
> Es kann sein, dass ich falsch liege, aber item iteriert über die
> JSON-Daten, d.h. es steht für ein einzelnes Element (oder nur dessen
> Key?). Du musst das übergeordnete Objekt befragen, deshalb schrieb ich
>
>> json[item]

jep, in item steht der name und  mit
1
print json[item]


bekomme ich jetzt auch die Variable angezeigt.

besten Dank
Antwort Zitieren Bearbeiten Löschen Beitrag melden
Pindrei P. OP #4320687
Lesenswert?
• ▲
▼ 
... nun stehe ich vor dem nächsten Problem. Ich habe eine Tabelle in 
MySQL angelegt, wo der 1.Typ von Typ Datetime und der zweite und dritte 
vom Typ Float sind.

Wenn ich direkt in der Eingabeaufforderung arbeite, kann ich mit:

INSERT INTO tabelle(Zeit,test1,test2) VALUES(NOW(),'1.1','1.1')

einen Datensatz anlegen.
jedoch wird er mit python nicht angelegt. Es gibt auch keine 
Fehlermeldung.

1
#!/usr/bin python

2


3
import urllib2

4
import simplejson

5
import MySQLdb as mdb

6
import sys

7


8
url= "http://192.168.1.210/get"

9


10
try:

11
  con = mdb.connect('localhost', 'pi', 'pi', 'stromdb')

12
  cur = con.cursor()

13
  cur.execute("INSERT INTO tabelle(Zeit,test1,test2) VALUES(NOW(),'1.1','1.1')")

14
  con.close()

15
  print "In Datenbank geschrieben!\n"

16
  

17
except mdb.Error, e:

18
  print "Error %d: %s" % (e.args[0],e.args[1])

19
  sys.exit(1)


Hat jemand eine Idee, was ich falsch mache?
Antwort Zitieren Bearbeiten Löschen Beitrag melden
Pindrei P. OP #4320738
Lesenswert?
• ▲
▼ 
Onkel Tom schrieb:
> Ja du solltest mal erst ein Grundlagenbuch lesen anstatt hier ständig
> jedes neue triviale Mikroproblemchen auszuwalzen.

Grundsätzlich muss ich dir recht geben, leider habe ich nur ein Buch 
über MySQL & php und ein Buch über python ohne MySQL, daher habe ich 
mich an dem Beispiel unter "http://zetcode.com/db/mysqlpython/"; 
gehalten. Jedoch fehlt da anscheinend im Absatz "Creating and populating 
a table" ein:

con.commit()

um die Daten an den Server zu übertragen. Jetzt funktioniert es.
Antwort Zitieren Bearbeiten Löschen Beitrag melden
Pindrei P. OP #4321129
Lesenswert?
• ▲
▼ 
Planlos schrieb:
> Pindrei P. schrieb:
>> cur.execute("INSERT INTO tabelle(Zeit,test1,test2)
>> VALUES(NOW(),'1.1','1.1')")
>
> Ich hoffe du setzt später deine Werte nicht per String-Concat da ein,
> sondern verwendest da parametrisierte Queries.


mmh ja genau so habe ich es gemacht. Über die Sicherheit habe ich mir 
keine Gedanken gemacht, da das ganze Projekt nur intern im lokalem 
Netzwerk läuft.

1
#!/usr/bin python

2


3
import urllib2

4
import simplejson

5
import MySQLdb as mdb

6
import sys

7


8
url= "http://192.168.1.210/get"

9


10
Anfrage = "";

11
name = ""

12
values = ""

13
try:

14
  req = urllib2.Request(url)

15
  opener = urllib2.build_opener()

16
  f = opener.open (req)

17
  json = simplejson.load(f)

18
  print "Controller gefunden ! \n"

19
  for item in json:

20
    print item

21
    print json[item]

22
  

23
    try:

24
      print item + " = " + str(json[item])

25
      name = name + ", " + item 

26
      values = values + ", " + str(json[item])

27
      

28
    except:

29
      print "??"

30
  con = mdb.connect('localhost', 'pi', 'pi', 'stromdb')

31
  cur = con.cursor()

32
  Anfrage = "INSERT INTO HZ_Neues_Haus(Zeit " + name + ") VALUES(NOW() "+ values +  ");"

33
  cur.execute(Anfrage)

34
  con.commit()    #Schreibt die Daten in die Datenbank (Absenden!)

35
  con.close()

36
  print "In Datenbank geschrieben!\n"

37
  print Anfrage

38
  

39
except mdb.Error, e:

40
  print "Error %d: %s" % (e.args[0],e.args[1])

41
  sys.exit(1)


das ganze rufe ich jetzt alle 15 min als cronjob auf.....
Anscheinend funktioniert es. Man könnte es noch verbessern, in dem man 
die Spalten der Datenbank beim 1. Aufruf dynamisch erstellt. Ich habe es 
jetzt per Hand gemacht.
Antwort Zitieren Bearbeiten Löschen Beitrag melden
Thread beobachten

Antwort schreiben

Bitte melde dich an, um einen Beitrag zu schreiben.

Bestehender Account

oder

Mit Google-Account einloggen

Noch kein Account?

Die Registrierung ist kostenlos und dauert nur eine Minute.

Jetzt registrieren