externen Text in HTML-Seite einbinden (durch ersetzen)

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.

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.

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.

....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.

Pindrei P. schrieb:
> 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.

.. dann hast Du wahrscheinlich auch noch kein jQuery eingebunden, in die 
Webseite, oder?

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.

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>

Peter II schrieb:
> dann binde doch erst mal jquery ein.

ich glaube das war der Fehler. Jetzt bekomme ich keine Fehlermeldung 
mehr. Wie gesagt, mein erster Tag mit Javaskript. Jetzt fehlt nur noch 
eine Ausgabe.

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();

Planlos schrieb:
> ersetze "#werte"
> durch
> <span id="werte"></span>

Jetzt funktioniert auch die Ausgabe, jedoch ohne Nachkommastellen....

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");

Peter II schrieb:
> Pindrei P. schrieb:
>> Jetzt funktioniert auch die Ausgabe, jedoch ohne Nachkommastellen....
>
> einfach mal debuggen. Bringt ja jeder Browser schon mit.

OK, in der JSON-Abfrage werden auch keine Kommata angezeigt.....

Daniel A. schrieb:
> Natürlich geht das! Warum denn auch nicht?

läuft! Verwirrt mit aber ein wenig...

Pindrei P. schrieb:
> läuft! Verwirrt mit aber ein wenig...

Das hört irgendwann auf.

Peter II schrieb:
> document.body.innerHTML
>
> bitte ein Konkretes Objekt aktualisieren.

document.querySelector("#werte").innerHTML = xy;

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.

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.

....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?

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?

Pindrei P. schrieb:
> print "%02d" % (item["test1"])

Ich hab mit Python nix am Hut, aber das sieht falsch aus. Das sollte 
vmtl. eher json[item] oder so ähnlich sein.

Dirk D. schrieb:
> Hast du dein code mal im IE probiert?

Hab ich unter Linux und auf dem Tablett nicht.......

Pindrei P. schrieb:
> Dirk D. schrieb:
>> Hast du dein code mal im IE probiert?
>
> Hab ich unter Linux und auf dem Tablett nicht.......
Ich auch nicht, aber wenn ich jQuery benutze hab ich an der stelle ein 
gutes Gefühl das es auch für Leute ausserhalb meiner blase funktioniert 
:)

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.

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]

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

... 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?

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.

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.