[GELÖST] DWDUnwetter Bindung - Lange Texte umbrechen? 2. Version
- Trashware
- Beiträge: 35
- Registriert: 27. Jun 2019 14:12
Re: [GELÖST] DWDUnwetter Bindung - Lange Texte umbrechen?
Hier ebenfalls Interesse. Interessanterweise funktioniert der Umbruch unter der Android-App erst seit dem Update vom 3.6.20 nicht mehr.
Re: [GELÖST] DWDUnwetter Bindung - Lange Texte umbrechen? 2. Version
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
Du hast keine ausreichende Berechtigung, um die Dateianhänge dieses Beitrags anzusehen.
- Trashware
- Beiträge: 35
- Registriert: 27. Jun 2019 14:12
Re: [GELÖST] DWDUnwetter Bindung - Lange Texte umbrechen? 2. Version
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.
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.
- alkaline
- Beiträge: 173
- Registriert: 20. Apr 2017 13:25
Re: [GELÖST] DWDUnwetter Bindung - Lange Texte umbrechen? 2. Version
Re: [GELÖST] DWDUnwetter Bindung - Lange Texte umbrechen? 2. Version
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
Re: [GELÖST] DWDUnwetter Bindung - Lange Texte umbrechen? 2. Version
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
- udo1toni
- Beiträge: 13864
- Registriert: 11. Apr 2018 18:05
- Wohnort: Darmstadt
[GELÖST] DWDUnwetter Bindung - Lange Texte umbrechen? 2. Version
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
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
Re: [GELÖST] DWDUnwetter Bindung - Lange Texte umbrechen? 2. Version
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
Grüße
Thomas
Re: [GELÖST] DWDUnwetter Bindung - Lange Texte umbrechen? 2. Version
Eine Verbesserung habe ich ja nun schon gezeigt.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.
Aber da OH im Wesentlichen in JAVA geschrieben ist (stimmt doch oder?) bin ich komplett raus. Habe auch derzeit zuwenig Zeit und Energie
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
- udo1toni
- Beiträge: 13864
- Registriert: 11. Apr 2018 18:05
- Wohnort: Darmstadt
Re: [GELÖST] DWDUnwetter Bindung - Lange Texte umbrechen? 2. Version
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...
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