externen Text in HTML-Seite einbinden (durch ersetzen)

[Pindrei P. (pindrei)]

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

[Peter II (Gast)]

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.

[Pindrei P. (pindrei)]

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.

[Planlos (Gast)]

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

$.getJSON('http://192.168.1.210/Messwert1', function(data) {
  $('#ich_bin_die_temperaturanzeige').html(data.temp+'° C');
});

Optimierung: "/Messwert1" aus der URL rausnehmen, den µC alle Messwerte 
auf einmal ausspucken lassen
{
"temp1":10.42,
"temp2":21.7,
"battery":3.89
...
}

[Peter II (Gast)]

Pindrei P. schrieb:
> mmmh, schade.

warum? Die Änderungen sind doch recht schnell umgesetzt.

statt dem Meesswert sendet du

HTTP/1.1 200 OK
Content-Type  text/plain;charset=UTF-8

{Messwert:10}

dann schaust du dir jquery an, damit kannst du die werte abfragen.

http://api.jquery.com/jquery.getjson/

[Karl H. (kbuchegg)]

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.

[Pindrei P. (pindrei)]

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.

[Pindrei P. (pindrei)]

....Irgendwie komme ich nicht weiter. Wenn ich den µC-Abfrage bekomme 
ich jetzt folgende Antwort

  {
"test1":    111.00,
"test2":    222.00,
"test3":    333.00,
"test4":    444.00,
"test5":    555.00,
"test6":    666.00
}

und meine html Seite habe ich um:

    <script>
      console.log("Skript gestartet");
        
      $.getJSON('http://192.168.1.210/get', function(data) 
      {
        $('#werte').html("test1= "+data.test1+"° C");
        }
          );
      console.log("Skript beendet");
  </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.

[Peter II (Gast)]

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: *

[Achim H. (anymouse)]

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?

[Pindrei P. (pindrei)]

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.

[Peter II (Gast)]

Pindrei P. schrieb:
> mmh ich glaube nicht, nur das script und der Rest ist html.

dann binde doch erst mal jquery ein.

[Pindrei P. (pindrei)]

Hier die komplette HTML-Seite:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>
  <title>Energieverbrauch</title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <meta name="generator" content="Geany 0.21" />
  

</head>

<body>

    <script>
      console.log("Skript gestartet");
        
      $.getJSON('http://192.168.1.210/get', function(data) 
      {
        $('#werte').html("test1= "+data.test1+"° C");
        }
          );
      console.log("Skript beendet");
  </script>
  #werte
</body>

</html>

[Peter II (Gast)]

Pindrei P. schrieb:
> Hier die komplette HTML-Seite:

ja das wichtigste fehlt:

http://www.w3schools.com/jquery/jquery_get_started.asp

<head>
 <script src="jquery-1.11.3.min.js"></script>
</head>

wenn du sie selber hosten kannst/willst.

Sonst von Google

<head>
 <script 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>;
</head>

[Planlos (Gast)]

Pindrei P. schrieb:
> Hier die komplette HTML-Seite:

Kein jquery drinnen. Das muss da rein.
Entweder runterladen und selber ausliefern, oder z.B. die Google-server 
mitbenutzen:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

[Pindrei P. (pindrei)]

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.

[Planlos (Gast)]

Pindrei P. schrieb:
> Jetzt fehlt nur noch
> eine Ausgabe.

ersetze "#werte"
durch
<span id="werte"></span>

[Arc N. (arc)]

Warum immer jquery oder anderes Zeug was erst aus diversen Ecken des 
Internets geladen werden muss? XMLHttpRequest gibt es seit ~10 Jahren

var req = new XMLHttpRequest();
req.onreadystatechange = function() {
    if (request.readyState == 4 && request.status == 200) {
        // do something with req.responseText here       
    }
}; 
req.open('GET', aUrl);
req.send();

[Peter II (Gast)]

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.

[Pindrei P. (pindrei)]

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

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

[Peter II (Gast)]

Pindrei P. schrieb:
> Jetzt funktioniert auch die Ausgabe, jedoch ohne Nachkommastellen....

einfach mal debuggen. Bringt ja jeder Browser schon mit.

[Daniel A. (daniel-a)]

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?

// Ungetestet

function get(method,path,success,error){
  var xhr = new XMLHttpRequest();
  xhr.onload = function(){
    if(xhr.status==200){
      success(xhr.responseText);
    }else{
      if(error)
        error(xhr.responseText,xhr.status);
    }
  };
  function errorHandler(e){
    if(error)
      error((e.error||e).stack,0);
  }
  xhr.onerror = errorHandler;
  try {
    xhr.open(method,path,true);
    xhr.send();
  } catch(e){
    errorHandler(e);
  }
}

console.log("Skript gestartet");
        
get("GET",'http://192.168.1.210/get', function( json ){
  var data = JSON.parse( json );
  document.body.innerHTML = "test1= "+data.test1+"° C";
},function( msg, code ){
  alert("Something went wrong! Code "+code+"\nMessage: "+msg);
});

console.log("Skript beendet");

[Pindrei P. (pindrei)]

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

[Peter II (Gast)]

Daniel A. schrieb:
> Warum machen nur immer alle aus keinem Problem ein JQuery Problem?

weil es einfacher ist - sieht man ja an der länge von deinem Code


document.body.innerHTML

bitte ein Konkretes Objekt aktualisieren.

[Pindrei P. (pindrei)]

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

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

[Daniel A. (daniel-a)]

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. (pindrei)]

Pindrei P. schrieb:
> OK, in der JSON-Abfrage werden auch keine Kommata angezeigt.....

ich habe zwar nichts verändert, dennoch funktioniert es jetzt!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>
  <title>Energieverbrauch</title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <meta name="generator" content="Geany 0.21" />
  

</head>

<body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
      console.log("Skript gestartet");
        
      $.getJSON('http://192.168.1.210/get', function(data){
        $('#werte').html("test1= "+data.test1+"° C");
        alert(data.test2);
        });
          
      console.log("Skript beendet");
  </script>
  <span id="werte"></span>



</body>

</html>

für mich ist es so vollkommen ausreichend. Besten Dank für die Hilfe.

[Planlos (Gast)]

Pindrei P. schrieb:
> für mich ist es so vollkommen ausreichend.

Naja... ein "setInterval", dass alle X Sekunden die Temperatur neu 
abfragt und einsetzt sollte schon noch sein :)

[Planlos (Gast)]

Ich nehm an dein Projekt ist nicht kommerziell?

Das hier noch einbauen:

http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgauge/index.htm

Macht dann gleich viel mehr her als so ein schnödes <span> mit Text :)

[Pindrei P. (pindrei)]

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.

[Pindrei P. (pindrei)]

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

#!/usr/bin python

import urllib2
import json

url= "http://192.168.1.210/get"

if __name__== "__main__":
  req = urllib2.Request(url)
  opener = urllib2.build_opener()
  f = opener.open (req)
  json = json.load(f)

  print "Controller gefunden ! \n"
  for item in json:
    print item
  
    try:
      print "%02d" % (item["test1"])
    except:
      print "??"

als Ausgabe bekomme ich:

Controller gefunden ! 

test1
??
test2
??
test3
??
test4
??

Die Json-Ausgabe des µC sieht so aus:

  {
"test1":    111.00,
"test2":    222.00,
"test3":    333.00,
"test4":    444.00
}

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?

[Dirk D. (dicky_d)]

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

> var req = new XMLHttpRequest();
> req.onreadystatechange = function() {
>     if (request.readyState == 4 && request.status == 200) {
>         // do something with req.responseText here
>     }
> };
> req.open('GET', aUrl);
> req.send();
>

weil ich bei jquery weiß das es in allen browsern vernünftig laufen 
wird.
Hast du dein code mal im IE probiert?

[Konrad S. (maybee)]

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.

[Pindrei P. (pindrei)]

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

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

[Dirk D. (dicky_d)]

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 
:)

[Pindrei P. (pindrei)]

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

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.

 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.

[Konrad S. (maybee)]

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]

[Pindrei P. (pindrei)]

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

print json[item]

bekomme ich jetzt auch die Variable angezeigt.

besten Dank

[Pindrei P. (pindrei)]

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

#!/usr/bin python

import urllib2
import simplejson
import MySQLdb as mdb
import sys

url= "http://192.168.1.210/get"

try:
  con = mdb.connect('localhost', 'pi', 'pi', 'stromdb')
  cur = con.cursor()
  cur.execute("INSERT INTO tabelle(Zeit,test1,test2) VALUES(NOW(),'1.1','1.1')")
  con.close()
  print "In Datenbank geschrieben!\n"
  
except mdb.Error, e:
  print "Error %d: %s" % (e.args[0],e.args[1])
  sys.exit(1)

Hat jemand eine Idee, was ich falsch mache?

[Onkel Tom (Gast)]

Pindrei P. schrieb:
> Hat jemand eine Idee, was ich falsch mache?

Ja du solltest mal erst ein Grundlagenbuch lesen anstatt hier ständig 
jedes neue triviale Mikroproblemchen auszuwalzen.

[Pindrei P. (pindrei)]

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 (Gast)]

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.

[Pindrei P. (pindrei)]

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.

#!/usr/bin python

import urllib2
import simplejson
import MySQLdb as mdb
import sys

url= "http://192.168.1.210/get"

Anfrage = "";
name = ""
values = ""
try:
  req = urllib2.Request(url)
  opener = urllib2.build_opener()
  f = opener.open (req)
  json = simplejson.load(f)
  print "Controller gefunden ! \n"
  for item in json:
    print item
    print json[item]
  
    try:
      print item + " = " + str(json[item])
      name = name + ", " + item 
      values = values + ", " + str(json[item])
      
    except:
      print "??"
  con = mdb.connect('localhost', 'pi', 'pi', 'stromdb')
  cur = con.cursor()
  Anfrage = "INSERT INTO HZ_Neues_Haus(Zeit " + name + ") VALUES(NOW() "+ values +  ");"
  cur.execute(Anfrage)
  con.commit()    #Schreibt die Daten in die Datenbank (Absenden!)
  con.close()
  print "In Datenbank geschrieben!\n"
  print Anfrage
  
except mdb.Error, e:
  print "Error %d: %s" % (e.args[0],e.args[1])
  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.