Seite 4 von 5

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

Verfasst: 1. Aug 2020 10:50
von thomas_w
Heute kommt noch eine lokalisierte Formatierung der Datums- und Zeitangaben von DWDUnwetter hinzu. Dazu verwendet ich die JS-Bibliothek moment. Lustiger Name, aber ist so. Bei mir sieht das Ergebnis nun so aus:
openhab-dwdunwetter-html.jpg

Hier kommen jetzt also nur die Neuigkeiten. Die komplette Installation ist weiter oben im Thread beschrieben.

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="lib/moment-2.27.0/moment.min.js"></script>
  <script type="text/javascript" src="lib/moment-2.27.0/locales.min.js"></script>
  <script type="text/javascript" src="app/dwdunwetter.js"></script> 
 </body>
</html>
dwdunwetter.js

Code: Alles auswählen

/**
* AngularJS App 
* dwdunwetter.js
* 01.08.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  IP anpassen! */
   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 = $scope.getFormattedDatetime(res.state);        
        break;       
       case 'WarningOrtGueltigAb':
        $scope.dwdunwetter.gueltigab = $scope.getFormattedDatetime(res.state);        
        break;        
       case 'WarningOrtGueltigBis':
        $scope.dwdunwetter.gueltigbis = $scope.getFormattedDatetime(res.state);        
        break;          
       case 'WarningOrtInstruction':
        $scope.dwdunwetter.instruction = res.state;        
        break;         
      }
     },0);
     
   })
   .catch(error => {
    console.log('upload error', error);
   });   
  };

  // moment 2.27.0 mit "de" Locale
  // Datetime YYYY-MM-DDTHH:MM:SS => Wochentag TT.MM.JJJJ HH:MM
  // https://momentjs.com/docs/#/displaying/
  $scope.getFormattedDatetime = function(stateValue) {
   
   moment.locale('de');
   var formattedDate = moment(stateValue).format('dddd L LT');
   // console.log(formattedDate);
   return formattedDate;
  };


  // 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);
  });
  
  
});

die notwendige JavaScript Bibliothek kommt in das html/lib Verzeichnis in ein neues Unterverzeichnis moment-2.27.0
https://momentjs.com/
openhab-dwdunwetter-lib.jpg
Das Wesentliche notwendige habe ich mal als .zip hier angehängt.

Viel Spaß damit...

Grüße
Thomas

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

Verfasst: 13. Aug 2020 18:31
von SaschaQ
Komischerweise bekomme ich im Chrome auf meinem Desktop PC keine Werte angezeigt.

Auf meinem Handy aber schon. Android Handy.

Ist das normal?

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

Verfasst: 13. Aug 2020 19:37
von thomas_w
SaschaQ hat geschrieben: 13. Aug 2020 18:31 Komischerweise bekomme ich im Chrome auf meinem Desktop PC keine Werte angezeigt.

Auf meinem Handy aber schon. Android Handy.

Ist das normal?
Ich habe getestet mit:
- akt. Firefox Browser Windows 10
- Fennec Browser unter Android (Firefox Browser Ableger)
- OpenHAB App unter Android

Alle drei zeigen Werte an.

Zeigt der Chrome Browser leere Felder an?

Mit [Strg]+[Umschalt]+[J] wird die Entwickler Konsole vom Chrome geöffnet. Vielleicht gibt es einen JavaScript Meldung /Fehler...
http://techfrage.de/question/3100/chrom ... -shortcut/

Ich nutze selber keinen Chrome Browser...

Grüße
Thomas

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

Verfasst: 15. Aug 2020 20:21
von thomas_w
Auf einem Win-7 PC habe ich einen Chrombrowser, der zeigt die aktuelle DWD Unwetterwarnung korrekt an. Es gibt allerdings eine Warnung in der Developerkonsole, es scheinen .Map Dateien zu fehlen. Ich stelle eine neue .zip Datei zur Verfügung...

Grüße
Thomas

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

Verfasst: 6. Sep 2020 09:03
von SaschaQ
Hallo zusammen,

wie bekomme ich es hin, dass wenn keine Meldung vorliegt nicht "NULL" oder "Invalid Date" erscheint, sondern einfach leer bleibt.

Ist nur ein kleiner Schönheitsfehler aber vielleicht bekommt man das ja irgendwie weg.

Ich hatte es mit Transformation versucht, aber das funktioniert nicht.
Unbenannt.JPG

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

Verfasst: 15. Sep 2020 08:30
von SaschaQ
Keiner eine Idee?

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

Verfasst: 16. Sep 2020 21:53
von udo1toni
Also, Du kannst z.B. die visibility nutzen.
Ansonsten kannst Du Proxy Items verwenden und eine Rule.

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

Verfasst: 13. Jan 2021 13:29
von SaschaQ
Könntest du mir Beispielhaft sagen wie das geht?

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

Verfasst: 13. Jan 2021 13:59
von sihui
SaschaQ hat geschrieben: 13. Jan 2021 13:29 Beispielhaft
https://www.openhab.org/docs/configurat ... visibility

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

Verfasst: 13. Jan 2021 14:19
von SaschaQ
Es gibt ein Switch item falls eine Unwetterwarnung hereinkommt:

String WarningMeerbuschServerity "Schwere[%s]" (gDWD) { channel="dwdunwetter:dwdwarnings:6b11aef1:severity1" } visibility=[WarningMeerbusch==ON]

kann ich das dann so machen?