[GELÖST] DWDUnwetter Bindung - Lange Texte umbrechen? 2. Version

GUI Relevanten, PaperUI, BasicUI, HabPanel ...

Moderatoren: seppy, udo1toni

Benutzeravatar
Trashware
Beiträge: 35
Registriert: 27. Jun 2019 14:12
Answers: 1

Re: [GELÖST] DWDUnwetter Bindung - Lange Texte umbrechen?

Beitrag von Trashware »

Hier ebenfalls Interesse. Interessanterweise funktioniert der Umbruch unter der Android-App erst seit dem Update vom 3.6.20 nicht mehr.

thomas_w

Re: [GELÖST] DWDUnwetter Bindung - Lange Texte umbrechen? 2. Version

Beitrag von thomas_w »

alkaline hat geschrieben: 12. Jul 2020 20:45 ich wäre ein dankbarer Abnehmer dafür, vielen Dank für deine Mühe
eric1905 hat geschrieben: 16. Jul 2020 21:03 Genau so hab ich mir das vorgestellt. Wäre auch dankbar um den Code. Vielen Dank.
Trashware hat geschrieben: 17. Jul 2020 01:08 Hier ebenfalls Interesse. Interessanterweise funktioniert der Umbruch unter der Android-App erst seit dem Update vom 3.6.20 nicht mehr.
Hier nun die 2. Version eine Lösung um die langen Text aus DWD Unwetter sinnvoll anzuzeigen

Projektidee:
Die langen Text von DWD Unwetter vollständig darstellen. Weiterhin sollen die langen Text im Browser und in der App korrekt dargerstellt werden. Damit dies alles funktioniert kommen HTML, CSS und JavaScript Bibliotheken zum Einsatz



.things

Code: Alles auswählen

dwdunwetter:dwdwarnings:ort "Warnungen Ort" [ cellId="deine-cell-id-4711", refresh=15, warningCount=1 ]
.items[/]

Code: Alles auswählen

// Items fuer das DWD Unwetter Bindung
// Stand 19.06.2020
Group gDWDUnwetter "Weitere Details..." <none> 
Switch WarningOrt "Weather warning" <none> { channel="dwdunwetter:dwdwarnings:ort:warning1" }
String WarningOrtServerity "[%s]" <none> { channel="dwdunwetter:dwdwarnings:ort:severity1" }
String WarningOrtBeschreibung "[%s]" <none> { channel="dwdunwetter:dwdwarnings:ort:description1" }
String WarningOrtAusgabedatum "Vorhersage für [%s]" <none> { channel="dwdunwetter:dwdwarnings:ort:effective1" }
String WarningOrtGueltigAb "ab Uhrzeit [%s]" <none> { channel="dwdunwetter:dwdwarnings:ort:onset1" }
String WarningOrtGueltigBis "bis Uhrzeit [%s]" <none> { channel="dwdunwetter:dwdwarnings:ort:expires1" }
String WarningOrtTyp "[%s]" <none> { channel="dwdunwetter:dwdwarnings:ort:event1" }
String WarningOrtTitel "[%s]" <none> { channel="dwdunwetter:dwdwarnings:ort:headline1" }
String WarningOrtHoeheAb "von Höhe [%d m]" <none> { channel="dwdunwetter:dwdwarnings:ort:altitude1" }
String WarningOrtHoeheBis "bis Höhe [%d m]" <none> { channel="dwdunwetter:dwdwarnings:ort:ceiling1" }
String WarningOrtUrgency "[%s]" <none> { channel="dwdunwetter:dwdwarnings:ort:urgency1" }
String WarningOrtInstruction "[%s]" <none> { channel="dwdunwetter:dwdwarnings:ort:instruction1" }


Die eigentliche Darstellung ist in eine Webview ausgelagert. Also in eine .html Datei, die von OH innerhalb eines iFrame in der Sitemap dargestellt wird.

dwdunwetter2.html

Code: Alles auswählen

<html>
 <head>
  <link rel="stylesheet" href="lib/bootstrap-4.1.1/bootstrap.min.css"> 
 </head>
 <body ng-app="dwdunwetterApp" ng-controller="dwdunwetterCtrl" ng-cloak="ng-cloak">
  <div class="form-group">
   <label class="btn btn-primary btn-sm" for="titel">Titel</label><span class="form-control" id="titel" ng-bind-html="dwdunwetter.titel | trustAsHtml"></span>
  </div>     
  <div class="form-group">
   <label class="btn btn-primary btn-sm" for="typ">Typ</label><span class="form-control" id="typ" ng-bind-html="dwdunwetter.typ | trustAsHtml"></span>
  </div>   
  <div class="form-group">
   <label class="btn btn-primary btn-sm" for="beschreibung">Beschreibung</label><span class="form-control" id="beschreibung" ng-bind-html="dwdunwetter.beschreibung | trustAsHtml"></span>
  </div>   
  <div class="form-group">  
   <label class="btn btn-primary btn-sm" for="ausgabedatum">Ausgabedatum</label><span class="form-control" id="ausgabedatum" ng-bind-html="dwdunwetter.ausgabedatum | trustAsHtml"></span>
  </div>
  <div class="form-group">  
   <label class="btn btn-primary btn-sm" for="gueltigab">Gültig ab</label><span class="form-control" id="gueltigab" ng-bind-html="dwdunwetter.gueltigab | trustAsHtml"></span>
  </div>  
  <div class="form-group">  
   <label class="btn btn-primary btn-sm" for="gueltigbis">Gültig bis</label><span class="form-control" id="gueltigbis" ng-bind-html="dwdunwetter.gueltigbis | trustAsHtml"></span>
  </div>    
  <div class="form-group">  
   <label class="btn btn-primary btn-sm" for="instruction">Instruktionen</label><span class="form-control" id="instruction" ng-bind-html="dwdunwetter.instruction | trustAsHtml"></span>
  </div>    
  
  <script type="text/javascript" src="lib/angular-1.7.8/angular.min.js"></script>
  <script type="text/javascript" src="lib/angular-1.7.8/angular-sanitize.min.js"></script>
  <script type="text/javascript" src="app/dwdunwetter.js"></script> 
 </body>
</html>
Wie in der .html Datei zu sehen ist, werden sowohl CSS als auch JavaScript Bibliotheken eingebunden.


CSS und JavcaScript

Verzeichnisstruktur
openhab-dwdunwetter-html.jpg
Verzeichnis: html/lib/bootstrap-4.1.1

CSS Libraries
bootstrap css 4.1.1

ACHTUNG: Derzeit meldet mein Firefox mit diesem LINK ein Zertifikat Error: Fehlercode: SSL_ERROR_BAD_CERT_DOMAIN (Download also auf eigene Gefahr)
https://cdn.usebootstrap.com/bootstrap/ ... ap.min.css


JavaScript Library
AngularJS 1.7.8 (alte 1.x Version, läuft aber Problemlos bei mir. Ab Angular Version 2.x ist alles anders)
Verzeichnis: html/lib/angular-1.7.8


Im /html Verzeichnis kommt nun das Script dwdunwetter2.html. Das dwdunwetter2.html Script wird später über ein WebView in der Sitemap geladen



Im /html/app Verzeichnis kommt nun das Script dwdunwetter.js. Das dwdunwetter.js JavaScript steuert mit Hilfe von AngularJS die Anzeige in dwdunwetter2.html.
Hier muss die IP Adresse angepaßt werden.
dwdunwetter.js

Code: Alles auswählen

/**
* AngularJS App 
* dwdunwetter.js
* 12.07.2020
*/
var app = angular.module( 'dwdunwetterApp', [] ); 

/* HTML sicher in Webview sitemap einbinden */
app.filter('trustAsHtml', function($sce) {
  return function(html) {
    return $sce.trustAsHtml(html);
  };
});


/* AngularJS Controller */
app.controller(
 "dwdunwetterCtrl",
 function( $scope, $timeout ) {
  
  /* Liste meiner DWDUnwetter Items */
  $scope.dwdunwetter = { titel: '', typ: '', beschreibung: '', ausgabedatum: '', gueltigab: '', gueltigbis: '', instruction:''};

  $scope.items = [
   { 'item': 'titel', 'oh_item': 'WarningOrtTitel'},   
   { 'item': 'typ', 'oh_item': 'WarningOrtTyp'},
   { 'item': 'beschreibung', 'oh_item':'WarningOrtBeschreibung'},
   { 'item': 'ausgabedatum', 'oh_item': 'WarningOrtAusgabedatum'},
   { 'item': 'gueltigab', 'oh_item': 'WarningOrtGueltigAb'},
   { 'item': 'gueltigbis', 'oh_item': 'WarningOrtGueltigBis'},
   { 'item': 'instruction', 'oh_item': 'WarningOrtInstruction'}   
  ];


  /* Daten holen mit native Fetch API */
  $scope.fetch = function(oh_item) {
   /* https://attacomsian.com/blog/javascript-fetch-api */
   console.log('fetch startet...');

   /* fetch method */
   const options = {
    method: 'GET'
   };

   /* fetch headers */
   const headers = new Headers({
    'Content-Type': 'application/json'
   });

   /* items Wertes mit Hilfe OpenHAB REST API holen */
   const request = new Request('http://192.168.x.xxx:8080/rest/items/' + oh_item, {
    headers: headers
   });

   /* fetch startet ...*/
   fetch(request, options)
   .then(res => res.json())
   .then(res => {
     
     $timeout( function(){
      switch(oh_item) {
       case 'WarningOrtTitel':
        $scope.dwdunwetter.titel = res.state; 
        break;       
       case 'WarningOrtTyp':
        $scope.dwdunwetter.typ = res.state;        
        break;      
       case 'WarningOrtBeschreibung':
        $scope.dwdunwetter.beschreibung = res.state;        
        break;
       case 'WarningOrtAusgabedatum':
        $scope.dwdunwetter.ausgabedatum = res.state;        
        break;       
       case 'WarningOrtGueltigAb':
        $scope.dwdunwetter.gueltigab = res.state;        
        break;        
       case 'WarningOrtGueltigBis':
        $scope.dwdunwetter.gueltigbis = res.state;        
        break;          
       case 'WarningOrtInstruction':
        $scope.dwdunwetter.instruction = res.state;        
        break;         
      }
     },0);
     
   })
   .catch(error => {
    console.log('upload error', error);
   });   
  };



  // Datenübergabe an AngularJS mit Verzögerung $timeout() wegen native fetch api promise
  // @todo - bessere Lösung als Timeout?
  Object.keys($scope.items).forEach(function(key) {
   $scope.fetch($scope.items[key].oh_item);
  });
  
  
  
  
});


Zum Schluß die Sitemap. Hier muss die IP des Openhab Server angepaßt werden

.sitemap

Code: Alles auswählen

Frame label="DWD Unwetterwarnung" item=WarningOrtTyp visibility=[WarningOrt==ON] {
      Group item=gDWDUnwetter icon="alarm" {
          Webview url="http://192.168.x.xxx:8080/static/dwdunwetter2.html" icon="none" height=25
      }
}
Die JavaScript und CSS Bibliotheken habe ich auch als .zip angehängt.

So, bin gespannt, ob es bei Euch auch läuft...Falls ich etwas vergessen habe bitte melden.

Grüße
Thomas
Du hast keine ausreichende Berechtigung, um die Dateianhänge dieses Beitrags anzusehen.

Benutzeravatar
Trashware
Beiträge: 35
Registriert: 27. Jun 2019 14:12
Answers: 1

Re: [GELÖST] DWDUnwetter Bindung - Lange Texte umbrechen? 2. Version

Beitrag von Trashware »

Also, ich weiss nicht wie es den anderen geht, aber ich bin schon etwas geschockt davon, was man inzwischen alles unternehmen muss, um einen einfachen String darzustellen. Mir ist das zu aufwändig und ich mache es mir für meine Zwecke jetzt einfach, indem ich das Android Update vom 3. Juni verhindere. Bis dahin war die Welt nämlich in der Android App noch in Ordnung.... Einfache Beispiele für die Darstellung der alten App-Version im Anhang.

Mein Kommentar im Playstore dazu ("Strings are cut at the end of the line. No page break anymore since version 2.13.0 of 6/3/20. Worked fine before.") wurde mit Bug Fixing beantwortet (LOL).

Du hast Dir eine riesige Mühe gemacht und das Ergebnis sieht gut aus, keine Frage. Diejenigen wie ich, die nur die Darstellung auf Ihrem Android Smartphone beanstanden, sparen sich die Arbeit, indem Sie einfach das Update der App verhindern.

Im Prinzip gehört dem String Item auf der Sitemap einfach eine Eigenschaft mitgegeben (line break yes / no). Aber das lässt sich dann nur bei openHAB selbst lösen.
Bild
Bild


Benutzeravatar
alkaline
Beiträge: 173
Registriert: 20. Apr 2017 13:25

Re: [GELÖST] DWDUnwetter Bindung - Lange Texte umbrechen? 2. Version

Beitrag von alkaline »

thomas_w hat geschrieben: 17. Jul 2020 19:38
alkaline hat geschrieben: 12. Jul 2020 20:45 ich wäre ein dankbarer Abnehmer dafür, vielen Dank für deine Mühe
Vielen Dank für die Bereitstellung, habe gestern Abend noch alles eingebaut und warte nun gespannt auf die erste Meldung, momentan sind keine vorhanden.

Gruß
Marcus

thomas_w

Re: [GELÖST] DWDUnwetter Bindung - Lange Texte umbrechen? 2. Version

Beitrag von thomas_w »

Trashware hat geschrieben: 20. Jul 2020 02:57 Im Prinzip gehört dem String Item auf der Sitemap einfach eine Eigenschaft mitgegeben (line break yes / no). Aber das lässt sich dann nur bei openHAB selbst lösen.
Ja, die APP sollte es korrekt anzeigen können, aber Updates blockieren ist problematisch. Man bekommt nichts neues mehr, weder Gutes noch Schlechtes. Aller auch im Browser werden die langen Text nicht richtig umgebrochen.

Aus meiner Sicht liegt das Problem vielleicht an der Art, wie die Texte angezeigt werden. Texte in <input> HTML-Tag werde nicht umgebrochen, Texte im <textarea>, <div>, <span>, <p> HTML-Tag schon. Eventuell auch der Einsatz von CSS. Muss ich noch mal im Original schauen...

Ja, es ist natürlich ein Bug in OH.


Grüße
Thomas

thomas_w

Re: [GELÖST] DWDUnwetter Bindung - Lange Texte umbrechen? 2. Version

Beitrag von thomas_w »

alkaline hat geschrieben: 20. Jul 2020 05:52 Vielen Dank für die Bereitstellung, habe gestern Abend noch alles eingebaut und warte nun gespannt auf die erste Meldung, momentan sind keine vorhanden.

Gruß
Marcus
Waiting for the hurricane.. ;-)

Ich habe mir eine Rule gebaut und die DWD Unwetter Items manuell zum Testen gefüllt. Wenn Du möchtest, poste ich heute Abend das Script. Ist aber nicht kompliziert.

Grüße
Thomas

Benutzeravatar
udo1toni
Beiträge: 13864
Registriert: 11. Apr 2018 18:05
Answers: 222
Wohnort: Darmstadt

[GELÖST] DWDUnwetter Bindung - Lange Texte umbrechen? 2. Version

Beitrag von udo1toni »

openHAB stellt leider für Basic UI kein Widget zur Verfügung, welches mehrzeiligen Text darstellen kann.
Früher (mit Classic UI) hat das gut funktioniert, ohne Verrenkungen.
Aber mal ehrlich: Man kann das so nutzen, die Idee hinter openHAB ist aber eine andere.
Wenn man die Texte vollständig lesen will, muss man deshalb etwas tiefer in die Trickkiste greifen.

Es hindert Dich übrigens niemand, hier Verbesserungen einzubringen ;)

Es gibt eine Reihe von Dingen, die „schon immer“ vermisst werden, z.B. Freitexteingabe, ein Date/Time Picker...

Es gab unter OH1 auch ein List Widget, welches (dem Namen entsprechend) Wertelisten darstellen konnte. Wurde leider geopfert.
Hintergrund für dieses Opfer dürfte vermutlich (aber das ist auch nur das, eine Vermutung) die dynamische Größe eines solchen Widgets sein. Die zweispaltige Ansicht von Basic UI ist dann in einem Darstellungsdilemma. Man müsste also entweder damit leben, dass das Design auseinander reißt, wenn sich die Textmenge ändert, oder man müsste solche Elemente als exklusiv definieren (z.B. genau ein solches Element und sonst nichts innerhalb eines Frames)
Ich hoffe ja, dass openHAB3 auch hier Fortschritte bringen wird.


Gesendet von iPad mit Tapatalk
openHAB4.1.2 stable in einem Debian-Container (bookworm) (Proxmox 8.1.5, LXC), mit openHABian eingerichtet

thomas_w

Re: [GELÖST] DWDUnwetter Bindung - Lange Texte umbrechen? 2. Version

Beitrag von thomas_w »

thomas_w hat geschrieben: 20. Jul 2020 07:39
alkaline hat geschrieben: 20. Jul 2020 05:52 Vielen Dank für die Bereitstellung, habe gestern Abend noch alles eingebaut und warte nun gespannt auf die erste Meldung, momentan sind keine vorhanden.
Ich habe mir eine Rule gebaut und die DWD Unwetter Items manuell zum Testen gefüllt. Wenn Du möchtest, poste ich heute Abend das Script. Ist aber nicht kompliziert.
Testrule für DWD Unwetter. Bei Bedarf den // Kommentar vor den Items entfernen.

.rule

Code: Alles auswählen

rule "DWD Unwetter TEST"
when

    System started or
    Item localLastMeasurement changed  

then 

    // Unwetterwarnung Testdaten
    // WarningOrtServerity.postUpdate('Moderate')
    // WarningOrtBeschreibung.postUpdate('Es treten Gewitter auf. Dabei gibt es Starkregen mit Niederschlagsmengen bis 20 l/m² pro Stunde sowie Windböen mit Geschwindigkeiten bis 60 km/h 17m/s, 33kn, Bft 7 und kleinkörnigen Hagel.')
    // WarningOrtAusgabedatum.postUpdate('18.06.2020')
    // WarningOrtGueltigAb.postUpdate('15:00')
    // WarningOrtGueltigBis.postUpdate('18:30')
    // WarningOrtTyp.postUpdate('TEST')
    // WarningOrtTitel.postUpdate('Amtliche WARNUNG vor TEST')
    // WarningOrtInstruction.postUpdate('ACHTUNG! Hinweis auf mögliche Gefahren: Örtlich kann es Blitzschlag geben. Bei Blitzschlag besteht Lebensgefahr! Während des Platzregens sind kurzzeitig Verkehrsbehinderungen möglich.')
    // WarningOrt.postUpdate('OFF')

    // logInfo(pollenTodayGrassesOutput)

end
Bei den when Bedingungen muss man für sich was passenden einbauen.

Grüße
Thomas

thomas_w

Re: [GELÖST] DWDUnwetter Bindung - Lange Texte umbrechen? 2. Version

Beitrag von thomas_w »

udo1toni hat geschrieben: 20. Jul 2020 11:29 Es hindert Dich übrigens niemand, hier Verbesserungen einzubringen ;)

Es gibt eine Reihe von Dingen, die „schon immer“ vermisst werden, z.B. Freitexteingabe, ein Date/Time Picker...

Es gab unter OH1 auch ein List Widget, welches (dem Namen entsprechend) Wertelisten darstellen konnte. Wurde leider geopfert.
Hintergrund für dieses Opfer dürfte vermutlich (aber das ist auch nur das, eine Vermutung) die dynamische Größe eines solchen Widgets sein. Die zweispaltige Ansicht von Basic UI ist dann in einem Darstellungsdilemma. Man müsste also entweder damit leben, dass das Design auseinander reißt, wenn sich die Textmenge ändert, oder man müsste solche Elemente als exklusiv definieren (z.B. genau ein solches Element und sonst nichts innerhalb eines Frames)
Ich hoffe ja, dass openHAB3 auch hier Fortschritte bringen wird.
Eine Verbesserung habe ich ja nun schon gezeigt. ;)
Aber da OH im Wesentlichen in JAVA geschrieben ist (stimmt doch oder?) bin ich komplett raus. Habe auch derzeit zuwenig Zeit und Energie :roll:

Eine "Freitexteingabe" sollte mit JavaScript eigentlich klappen. Ich probieres es bei Gelegenheit.

Die Basic-UI mit dem Webview iFrame bietet ja einen guten JavaScript einsprung. Ich gehe davon aus, das mit OH 3 etwa Node.js oder so etwas mit eingebunden wird. Dann wären da plötzlich sehr viele JavaScript Blibliotheken vorhanden.

Grüße
Thomas

Benutzeravatar
udo1toni
Beiträge: 13864
Registriert: 11. Apr 2018 18:05
Answers: 222
Wohnort: Darmstadt

Re: [GELÖST] DWDUnwetter Bindung - Lange Texte umbrechen? 2. Version

Beitrag von udo1toni »

Wie gesagt, mit externen Inhalten kann man viel machen, schöner wäre es halt, wenn es nativ ginge :) nicht jeder hier ist Webentwickler und hat entsprechendes Knowhow, wie man so etwas korrekt umsetzt (also so, dass es auf jedem Endgerät gleich (gut) aussieht.
Und die Idee der Basic UI ist ja, eine Oberfläche für den Alltag anzubieten, die alles wichtige abdeckt.
Listen (z.B. letzte Anrufer...) und Freitexteingabe (schnell man eine Nachricht an alle in der Familie schicken, incl. Sprachausgabe im Haus) gehören in meinen Augen eindeutig mit zu diesen wichtigen Funktionen.
Es gibt auch Leute, die wollen einfach eine dumme Schaltuhr haben (ich bin eigentlich ein Verfechter der keine-Schaltuhr-Fraktion), die müssen einen irrsinnigen Aufwand treiben, nur, weil es keinen DateTimePicker gibt.
Und mir kann keiner erzählen, dass es in der verwendeten Umgebung keine entsprechenden Funktionen gibt, das ist einfach Standard.
Warum gibt es nach 8 Jahren (und mehrerer zwischenzeitlicher Wechsel des Frameworks) immer noch kein entsprechendes Element? Ich denke nicht, dass es daran scheitert, dass das zu schwer umzusetzen wäre...
openHAB4.1.2 stable in einem Debian-Container (bookworm) (Proxmox 8.1.5, LXC), mit openHABian eingerichtet

Antworten