Re: [GELÖST] DWDUnwetter Bindung - Lange Texte umbrechen?
Verfasst: 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 ]
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>
CSS und JavcaScript
Verzeichnisstruktur 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
}
}
So, bin gespannt, ob es bei Euch auch läuft...Falls ich etwas vergessen habe bitte melden.
Grüße
Thomas
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.