HTML Code in readings wird im Eventmonitor falsch dargestellt

[xanker]

Bin mal wieder auf etwas gestoßen. Bei ankommenden Events wird im Eventmonitor jedes Leerzeichen durch   ersetzt, ich weiß zwar warum, allerdings verursacht das Probleme wenn HTML Code in einem Reading steht (z.B. beim Weather Modul:)

Code Auswählen Erweitern

apiMaintainer: Leon Gaultier (<a href=https://forum.fhem.de/index.php?action=profile;u=13684>CoolTux</a>)
Hier werden auch die Leerzeichen ersetzt, weswegen das den ganzen HTML-Code "zerstört":

Code Auswählen Erweitern

Leon&nbsp;Gaultier&nbsp;(<a&nbsp;href=https://forum.fhem.de/index.php?action=profile;u=13684>CoolTux</a>)
Das kann der Browser dann natürlich nicht mehr interpretieren.

Man sollte in dem Fall HTML Tags von dem ersetzen ausschließen, oder (mMn besser) die HTML Tags escapen.

[rudolfkoenig]

Meiner Meinung nach sollte ein Modul ueber Readings kein HTML einschmuggeln, es gibt ja schliesslich nicht nur WEB-basierte Frontends, und fuer FHEMWEB andere Wege sowas zu hinterlegen.
Weiterhin sehe ich auch nicht die Notwendigkeit einer vom Modul ausgeloesten HTML-Formatierung der Daten fuer den Eventmonitor.

Bin aber fuer Argumente offen.

[xanker]

Meiner Meinung nach sollte ein Modul ueber Readings kein HTML einschmuggeln

Sehe ich auch so, dennoch steht nirgends geschrieben, dass es "verboten" ist. Man sollte also eine Lösung finden. Ich habe aber gerade mal in console.js rein geschaut. Eigentlich sollte das dort eh schon abgefangen werden:

Code Auswählen Erweitern

  if(new_content.indexOf('<') != 0)
    new_content = new_content.replace(/ /g, "&nbsp;");
aber das scheint wohl nicht zu greifen.

Da &nbsp; aber ohnehin ein HTML Zeichen ist, wäre ich (wie schon geschrieben) dafür, "<" und ">" komplett zu escapen, da diese Zeichen ja durchaus in einem Reading vorkommen können und dann fälschlicherweise als HTML Tag interpretiert werden.

[rudolfkoenig]

wäre ich (wie schon geschrieben) dafür, "<" und ">" komplett zu escapen

Habs gemacht, bin auf die Seiteneffekte gespannt.

[xanker]

Habs gemacht, bin auf die Seiteneffekte gespannt.

Hallo Rudolf,

leider stimmt das noch nicht ganz. Wenn mehrere Readings als bulk gesendet werden, wird nur das letzte angezeigt.

Code Auswählen Erweitern

  var ma = new_content.match(/(.*)<br>[\r\n]+$/); // matched nur auf die letzten Zeile!
  if(ma) {
    new_content = ma[1];
    if(new_content.indexOf('<') != 0) {
      var rTab = {'<':'&lt;', '>':'&gt;',' ':'&nbsp;'};
      new_content = new_content.replace(/[<> ]/g, function(a){return rTab[a]});
    }
    new_content += '<br>';
  }

Das funktioniert:

Code Auswählen Erweitern

  var ma = new_content.split(/<br>[\r\n]+/); // split by lines
  if(ma) {
  new_content = '';
  for(var line=0;line<ma.length;line++) {
var new_line = ma[line];
if(new_line.indexOf('<') != 0) {
  var rTab = {'<':'&lt;', '>':'&gt;',' ':'&nbsp;'};
  new_line = new_line.replace(/[<> ]/g, function(a){return rTab[a]});
}
if(new_line) // exclude emtpy lines
new_content += new_line+'<br>';
  };
  }

Edit:
Geht auch noch "schöner". Das ersetzt komplett den bisherigen Code (Zeile 63 bis 71)

Code Auswählen Erweitern

  var rTab = {'<':'&lt;', '>':'&gt;',' ':'&nbsp;'};
  new_content=new_content.replace(/[<> ]/g, function(a){return rTab[a]}).replace(/&lt;br&gt;/g,'<br>');
erst alles escapen und dann <br> Tag unescapen

[rudolfkoenig]

Danke fuer den Hinweis.
Ich bin auf eine aehnliche Variante gekommen (bevor ich dein Edit gesehen habe), wenn es damit Probleme gibt, bitte melden.

Bei ankommenden Events wird im Eventmonitor jedes Leerzeichen durch &nbsp; ersetzt, ich weiß zwar warum,

Kannst du das "Warum" bitte verraten?
Dann wuerde ich es dokumentieren.

[xanker]

Danke fuer den Hinweis.
Ich bin auf eine aehnliche Variante gekommen (bevor ich dein Edit gesehen habe), wenn es damit Probleme gibt, bitte melden.
Kannst du das "Warum" bitte verraten?
Dann wuerde ich es dokumentieren.

Da die Events in einem <div> und nicht in einem <pre> landen. Wenn ein Readings (aus welchen Gründen auch immer) mehrere Leerzeichen hintereinander enthält, werden diese sonst nicht im HTML dargestellt

[Ellert]

Habs gemacht, bin auf die Seiteneffekte gespannt.

DOIFtools lässt die console.js in eine Textarea ausgeben, um den Eventmonitor in der Detailansicht von DOIFtools und DOIF einbinden zu können.

Nach der Änderung funktioniert der Zeilenumbruch in der Textarea nicht mehr und ich habe keinen Ansatz wie ich das beheben könnte.

Das Verhalten wurde hier beschrieben: https://forum.fhem.de/index.php/topic,102696.0.html

[xanker]

DOIFtools lässt die console.js in eine Textarea ausgeben, um den Eventmonitor in der Detailansicht von DOIFtools und DOIF einbinden zu können.

Nach der Änderung funktioniert der Zeilenumbruch in der Textarea nicht mehr und ich habe keinen Ansatz wie ich das beheben könnte.

Das Verhalten wurde hier beschrieben: https://forum.fhem.de/index.php/topic,102696.0.html

Fraglich ob das direkt Einfluss darauf hat, da die Zeilenumbrüche (<br> Tag) nach wie vor vorhanden sind, lediglich alle anderen HTML Tags werden escaped.

Eine alternative Lösung, statt escapen, wäre das div#console zu einem pre#console zu machen, so wie es bei den Logfiles auch der Fall ist. Dann müsste man die Leerzeichen nicht mehr escapen und hätte entsprechend auch keine Probleme mehr mit HTML Tags. Kann man natürlich auch per CSS "white-space" machen, aber eigentlich sind dafür <pre> Tags gedacht.

[Ellert]

Fraglich ob das direkt Einfluss darauf hat, da die Zeilenumbrüche (<br> Tag) nach wie vor vorhanden sind, lediglich alle anderen HTML Tags werden escaped.

Eine alternative Lösung, statt escapen, wäre das div#console zu einem pre#console zu machen, so wie es bei den Logfiles auch der Fall ist. Dann müsste man die Leerzeichen nicht mehr escapen und hätte entsprechend auch keine Probleme mehr mit HTML Tags. Kann man natürlich auch per CSS "white-space" machen, aber eigentlich sind dafür <pre> Tags gedacht.

Ich verwende textarea#console, weil sich dann leicht ein Fenster beschreiben lässt, wie in dieser Abbildung https://wiki.fhem.de/wiki/DOIFtools#Beispiel:_in_der_Detailansicht_ge.C3.B6ffneter_Event-Monitor

[Ellert]

Es würde wieder funktionieren wenn br und \n gesendet werden. In der Textarea stört br nicht und in der Eventmonitorseite stört \n nicht.

Bitte daher Zeile 70 in der console.js mit \n ergänzen zu:

Code Auswählen Erweitern

    new_content += '<br>\n';

Edit:
Besser wäre, es vom Tag abhängig zu machen:

Code Auswählen Erweitern

    new_content += $("#console").is("textarea")?'\n':'<br>';

Edit: Explizit jetzt hier dargestellt: https://forum.fhem.de/index.php/topic,102773.0.html