[GELÖST] SchreibWas - Eingabe von Freitexten in OpenHAB Basic-UI

GUI Relevanten, PaperUI, BasicUI, HabPanel ...

Moderatoren: seppy, udo1toni

thomas_w

[GELÖST] SchreibWas - Eingabe von Freitexten in OpenHAB Basic-UI

Beitrag von thomas_w »

SchreibWas - Eingabe von Freitexten in OpenHAB Basic-UI

Projektidee:
Wie können in der OpenHAB Basic-UI Texte eingegeben und diesen an Items übergeben werden? Damit dies alles funktioniert kommen HTML, CSS und JavaScript Bibliotheken zum Einsatz.

Bild 1: Text eingeben
openhab-forum-schreibwas-1.JPG
Bild 2: Text wirde versendet
openhab-forum-schreibwas-2.JPG


In dem SchreibWas Formular sind drei Felder:
a) Eine Auswahl für eine Priorität per radio-button Normal=1, Wichtig=2, Alarm=3
b) Ein Freitext in dem max. 160 Zeichen eingegeben werden können (SMS max. 160 Zeichen)
c) Ein [Send] Knopf mit dem die Eingabewerte mit Hilfe der OH REST API an die Item übergeben werden


.items[/]

Code: Alles auswählen

// Items für Schreibwas
// Stand 22.07.2020
Group gSchreibwas "Nachricht schreiben..." <none> 

Number SchreibWasPrio "Priorität [%.0f]" <none> 
String SchreibWasNachricht "Nachricht [%s]" <none> 


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

schreibwas.html

Code: Alles auswählen

<html>
 <head>
  <link rel="stylesheet" href="lib/bootstrap-4.1.1/bootstrap.min.css">
  <style type="text/css">
  .radio-space { margin: 5px 5px 5px 5px !important;  } 
  .form-color { background-color: #fff3cd;  margin: 5px 5px 5px 5px; padding: 5px 5px 5px 5px;}
  </style>
 </head>
 <body class="form-color" ng-app="schreibwasApp" ng-controller="schreibwasCtrl" >
  <fieldset ><label>Schreibwas Formular</label>
   <div class="form-group">
    <input class="radio-space" type="radio" id="prioNormal" ng-model="schreibwas.prio" value="1" ><label for="prioNormal" class="radio-inline radio-space">normal</label>
    <input class="radio-space" type="radio" id="prioWichtig" ng-model="schreibwas.prio" value="2" ><label for="prioWichtig" class="radio-inline radio-space ">wichtig</label>
    <input class="radio-space" type="radio" id="prioAlarm" ng-model="schreibwas.prio" value="3" ><label for="prioAlarm" class="radio-inline radio-space">alarm</label> 
   </div>     
   <div class="form-group">
    <label class="label label-primary" for="typ">Nachricht</label><textarea ng-init="schreibwas.nachricht=''" placeholder="Hier kommt der Text rein..."  class="form-control" ng-maxlength="160" ng-model="schreibwas.nachricht" rows="5" id="nachricht">{{schreibwas.nachricht}}</textarea>
   </div>
  </fieldset>
  <button type="button" class="btn btn-primary" ng-click="send()">Senden</button>
  <script type="text/javascript" src="lib/angular-1.7.8/angular.min.js"></script>
  <script type="text/javascript" src="app/schreibwas.js"></script> 
 </body>
</html>

Wie in der .html Datei zu sehen ist, werden sowohl CSS als auch JavaScript Bibliotheken eingebunden.


CSS und JavcaScript

Alle benötigten JavaScript und CSS Libraries siehe lib.zip

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 schreibwas.html. Das schreibwas.html Script wird später über ein WebView in der Sitemap geladen



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

Code: Alles auswählen

/**
* AngularJS App 
* schreibwas.js  v0.2
* 25.07.2020
*/
var app = angular.module( 'schreibwasApp', [] ); 

/* AngularJS Controller */
app.controller(
 "schreibwasCtrl",
 function( $scope, $http ) {

  
  /* Angular Formular Felder */
  $scope.schreibwas = { prio: '1', nachricht: ''};

  /* Liste meiner ScheibWas Items - @todo automatisieren */
  $scope.items = [
   { item: 'prio', oh_item: 'SchreibWasPrio'},   
   { item: 'nachricht', oh_item: 'SchreibWasNachricht'}
  ];
  
  // AngularJS REST API PUT
  // fetch api scheint mit PUT, POST mit OH2 nicht zu funktionieren
  // https://infinityknow.com/angularjs-restful-web-service-get-and-post-api/
  $scope.restApi = function(oh_item, newValue) {
  
    $http({
        method : 'PUT',
        url : 'http://192.168.x.xxx:8080/rest/items/'+oh_item+'/state',
        data : newValue,  // text/plain Datenformat
        headers : {
            'Content-Type' : 'text/plain'
        }
    }).then(function(response) {
       // First function handles success
       console.log('success:', oh_item);     
    }, function(response) {
       // Second function handles error
       console.log('error:');
       console.log(response);
    });    

  };

  // Datenübergabe an REST API für alle Formularfelder
  $scope.send = function() {
   $scope.restApi($scope.items[0].oh_item, $scope.schreibwas.prio);
   $scope.restApi($scope.items[1].oh_item, $scope.schreibwas.nachricht);
  };
  
});


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

.sitemap

Code: Alles auswählen

Group item=gSchreibwas {
	Default item=SchreibWasPrio
	Default item=SchreibWasNachricht
	Webview url="http://192.168.x.xxx:8080/static/schreibwas.html" icon="none" height=12
}

Hier die Rules, in denen eine Änderung der Werte abgefangen werden kann. Hier komtm dann die eigentlichen Anwendung rein
schreibwas.rules

Code: Alles auswählen

rule "SchreibWas Formular TEST Rule (schreibwas.rules)"
when
  Item SchreibWasPrio changed or
  Item SchreibWasNachricht changed
then
  logInfo('SchreibWasPrio.state',SchreibWasPrio.state.toString)
  logInfo('SchreibWasNachricht.state',SchreibWasNachricht.state.toString)
end

So sieht das OB Eventlog aus, wenn im Schreibwas Formular etwas versendet wird.

event.log

Code: Alles auswählen

2020-07-26 11:11:15.989 [vent.ItemStateChangedEvent] - currentDateTime changed from 2020-07-26T11:10:15.959+0200 to 2020-07-26T11:11:15.967+0200
2020-07-26 11:11:16.159 [vent.ItemStateChangedEvent] - SchreibWasPrio changed from NULL to 2
2020-07-26 11:11:16.163 [vent.ItemStateChangedEvent] - SchreibWasNachricht changed from NULL to Essen ist fertig...

==> /var/log/openhab2/openhab.log <==

2020-07-26 11:11:16.287 [INFO ] [me.model.script.SchreibWasPrio.state] - 2
2020-07-26 11:11:16.287 [INFO ] [me.model.script.SchreibWasPrio.state] - 2
2020-07-26 11:11:16.290 [INFO ] [del.script.SchreibWasNachricht.state] - Essen ist fertig...
2020-07-26 11:11:16.293 [INFO ] [del.script.SchreibWasNachricht.state] - Essen ist fertig...

Frage
Kann man ohne externe Anbietern allen Geräten in eigenen Netz damt eine Nachricht senden?

Hoffe nicht vergessen zu haben und bei Fragen fragen.

Viel Spaß damit..

Danke und Grüße
Thomas
von Anonymous » 2. Aug 2020 15:09
Hier scheint sich nichts mehr zu tun, deshalb erkläre ich das Problem als gelöst...

Danke und Grüße
Thomas
Gehe zur vollständigen Antwort
Du hast keine ausreichende Berechtigung, um die Dateianhänge dieses Beitrags anzusehen.
Zuletzt geändert von thomas_w am 2. Aug 2020 15:09, insgesamt 1-mal geändert.

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

Re: SchreibWas - Eingabe von Freitexten in OpenHAB Basic-UI

Beitrag von udo1toni »

Toll!

Was ich mir noch wünschen würde... ;)
Eine Einschränkung der erlaubten Eingaben (z.B. es sind nur Ziffern erlaubt)

So etwas fehlt openHAB seit Anbeginn, eigentlich sollte ein entsprechendes Widget direkt von openHAB zur Verfügung gestellt werden.
openHAB4.1.2 stable in einem Debian-Container (bookworm) (Proxmox 8.1.5, LXC), mit openHABian eingerichtet

thomas_w

Re: SchreibWas - Eingabe von Freitexten in OpenHAB Basic-UI

Beitrag von thomas_w »

udo1toni hat geschrieben: 26. Jul 2020 11:35 Toll!

Was ich mir noch wünschen würde... ;)
Eine Einschränkung der erlaubten Eingaben (z.B. es sind nur Ziffern erlaubt)

So etwas fehlt openHAB seit Anbeginn, eigentlich sollte ein entsprechendes Widget direkt von openHAB zur Verfügung gestellt werden.
Danke für das Lob. JavaScript ist in den letzten 10 Jahren deutlich besser geworden. Nicht mehr so chaotisch wie früher. JavaSCript ist ebenso wie JAVA auf allen Betriebssystemen und Geräten einsetzbar.

Ja, ein "Filtern" der Eingaben im "Text" Feld ist schon möglich. Mach doch mal ein Beispiel, was erlaubt oder verboten sein soll.

z. B. nur
1234
oder
12,34
oder
-120

dann wären wir bei einer manuellen SendCommand() Fernsteuerung ;-) oder so was

Grüße
Thomas

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

Re: SchreibWas - Eingabe von Freitexten in OpenHAB Basic-UI

Beitrag von udo1toni »

Na ja, meine Idee dahinter: Wenn man so ein Feld in ein Number Item quetschen will, kommt es ziemlich sicher zu einem Fehler, wenn der eingegebene Wert nicht numerisch ist.
Grundsätzlich kann ein String Item ja "beliebig" lange Zeichenketten als Status halten. Da Du die Eingabe aber schon auf 160 Zeichen begrenzt hast, wird z.B. html oder eine sql injection vielleicht weniger wahrscheinlich. Wobei ein persistiertes String Item hier potentiell Angriffsfläche böte. Ich denke, das ist einer der Gründe, warum es bisher offiziell keine Freitexteingabe gibt. Für Zahlen ist das aber noch einigermaßen simpel (Erlaubte Zeichen 0-9 und , sowie . Als Dezimaltrenner sollten wenn, dann beide Zeichen erlaubt sein und automatisch ersetzt werden. wird mehr als ein Dezimaltrenner eingegeben, werden alle weiteren ignoriert. Wie sieht es mit Steuerzeichen aus, also Backspace oder Enter, muss man das getrennt erlauben, oder funktioniert das einfach wie gewohnt (also Eingabe korrigieren sowie Wert übernehmen)?
Auch eine Datums- und Zeiteingabe wäre nett, dann bräuchte man potentiell .-/, Leerzeichen und : als Trennsymbole, vermutlich noch a und p für a.m. und p.m.
Aber vielleicht wäre das einfacher als komplett separate Eingabemaske realisierbar, dann vielleicht mit einer Formatanzeige (also z.B. im leeren Feld gegraute Vorgabe, damit Anwendende wissen, wie das Feld auszufüllen ist).
Hach, lauter Ideen... :)
openHAB4.1.2 stable in einem Debian-Container (bookworm) (Proxmox 8.1.5, LXC), mit openHABian eingerichtet

thomas_w

Re: SchreibWas - Eingabe von Freitexten in OpenHAB Basic-UI

Beitrag von thomas_w »

udo1toni hat geschrieben: 26. Jul 2020 17:31 Da Du die Eingabe aber schon auf 160 Zeichen begrenzt hast, wird z.B. html oder eine sql injection vielleicht weniger wahrscheinlich. Wobei ein persistiertes String Item hier potentiell Angriffsfläche böte. Ich denke, das ist einer der Gründe, warum es bisher offiziell keine Freitexteingabe gibt. Für Zahlen ist das aber noch einigermaßen simpel (Erlaubte Zeichen 0-9 und , sowie . Als Dezimaltrenner sollten wenn, dann beide Zeichen erlaubt sein und automatisch ersetzt werden. wird mehr als ein Dezimaltrenner eingegeben, werden alle weiteren ignoriert. Wie sieht es mit Steuerzeichen aus, also Backspace oder Enter, muss man das getrennt erlauben, oder funktioniert das einfach wie gewohnt (also Eingabe korrigieren sowie Wert übernehmen)?
Auch eine Datums- und Zeiteingabe wäre nett, dann bräuchte man potentiell .-/, Leerzeichen und : als Trennsymbole, vermutlich noch a und p für a.m. und p.m.
Aber vielleicht wäre das einfacher als komplett separate Eingabemaske realisierbar, dann vielleicht mit einer Formatanzeige (also z.B. im leeren Feld gegraute Vorgabe, damit Anwendende wissen, wie das Feld auszufüllen ist).
Hach, lauter Ideen... :)
XSS (Cross-Site-Scripting) Probleme kann ich auf die schnelle nicht entdecken. Es scheint doch ein ordentliches Escaping zu existieren.

Bild 1: HTML Befehle werden nicht ausgeführt, sondern im Klartext angezeigt.
openhab-forum-schreibwas-3.JPG

Über weitere Eingabevarianten und filter denke ich mal nach. Mal schauen, was bis zum nächsten Wochenende fertig wird.

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

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

Re: SchreibWas - Eingabe von Freitexten in OpenHAB Basic-UI

Beitrag von udo1toni »

Ich bin da absoluter Laie :)
openHAB4.1.2 stable in einem Debian-Container (bookworm) (Proxmox 8.1.5, LXC), mit openHABian eingerichtet

thomas_w

Re: SchreibWas - Eingabe von Freitexten in OpenHAB Basic-UI

Beitrag von thomas_w »

Hier scheint sich nichts mehr zu tun, deshalb erkläre ich das Problem als gelöst...

Danke und Grüße
Thomas

RoRo
Beiträge: 2
Registriert: 24. Jan 2022 14:44

Re: [GELÖST] SchreibWas - Eingabe von Freitexten in OpenHAB Basic-UI

Beitrag von RoRo »

Ich habe diese Eingabemöglichkeit von Freitexten in opneHAB 2 intensiv genutzt und möchte dies auch in openHAB 3 nutzen.
Die Eingabemaske wird angezeigt, jedoch werden die Werte nicht übergeben. Weiss jemand ob dies überhaupt in openHAB 3 funktioniert und wenn ja wie?

edirk
Beiträge: 14
Registriert: 29. Aug 2019 19:53

Re: [GELÖST] SchreibWas - Eingabe von Freitexten in OpenHAB Basic-UI

Beitrag von edirk »

Hallo in die Runde,

hat das schon jemand bei OH4 gelöst? Seit umstieg von OH3 auf OH4 funktioniert keine Eingabe mehr.

LG

RoRo
Beiträge: 2
Registriert: 24. Jan 2022 14:44

Re: [GELÖST] SchreibWas - Eingabe von Freitexten in OpenHAB Basic-UI

Beitrag von RoRo »

edirk hat geschrieben: 19. Jan 2024 18:19 Hallo in die Runde,

hat das schon jemand bei OH4 gelöst? Seit umstieg von OH3 auf OH4 funktioniert keine Eingabe mehr.

LG
Bei mir funktionieren die Eingaben aktuell in der Version 4.1, haben aber auch schon in 4.03 funktioniert.
Hat sich bei Dir die IP-Adressse geändert und hast du vergessen die in der .js Datei zu ändern?
Ist mir schon mehrfach passiert seit den wechseln von 2.5 auf 3.4 usw.

Antworten