SchreibWas II - HTML5 Eingabefelder (Datepicker, Slider etc.) in OpenHAB Basic-UI

GUI Relevanten, PaperUI, BasicUI, HabPanel ...

Moderatoren: seppy, udo1toni

Antworten
thomas_w

SchreibWas II - HTML5 Eingabefelder (Datepicker, Slider etc.) in OpenHAB Basic-UI

Beitrag von thomas_w »

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

In dem SchreibWas2 Formular sind fünf Felder:
a) Per Datepicker ein Datum auswählen
b) Per Zeitfeld eine gültige Uhrzeit eingeben
c) Range Slider eine Zahl zwischen 0 - 50 auswählen (wird von den verschiedenen Browser und Apps teils unterschiedlich dargestellt)
d) Manuelle Eingabe von Zahlen 10-99 oder mit Spin-Feld
e) Ein [Send] Knopf mit Formvalidation mit dem die Eingabewerte mit Hilfe der OH REST API an die Item übergeben werden
openhab-forum-schreibwas2-1.JPG

openhab-forum-schreibwas2-2.JPG


schreibwas2.items[/]

Code: Alles auswählen

// Items für Schreibwas2
DateTime SchreibWas2Datum "Datum [%1$td.%1$tm.%1$tY]" <none>
DateTime SchreibWas2Zeit "Zeit [%1$tI:%1$tM]" <none>
Number SchreibWas2Range "Range [%.0f]" <none>
Number SchreibWas2Zahl "Zahl [%.0f]" <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.

schreibwas2.html

Code: Alles auswählen

<html>
 <head>
  <link rel="stylesheet" href="lib/bootstrap-4.1.1/bootstrap.min.css">
  <style type="text/css">
  .label-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="schreibwas2App" ng-controller="schreibwas2Ctrl" >
  <fieldset ><label>Schreibwas II Formular</label>
   <div class="form-group">
    <label for="datum" class="label-space">Datum</label><input type="date" id="datum" title="Datum für den nächsten Backup" ng-model="schreibwas2.datum" name="datum"  >
   </div>     
   <div class="form-group">
    <label for="zeit" class="label-space">Zeit</label><input type="time" id="zeit" title="Uhrzeit für den nächsten Backup" ng-model="schreibwas2.zeit" name="zeit"  >
   </div>     
   <div class="form-group">
    <label class="label-space" for="typ">Temperatur (0-50)</label><span>{{schreibwas2.range}}</span><input title="Temperatur zwischen 0 und 50 Grad einstellen" type="range" class="form-control" ng-model="schreibwas2.range" value="{{schreibwas2.range}}" min="0" max="50" step="1" id="range" name="range" list="tickmarks">
    <datalist id="tickmarks">
     <option>0</option>
     <option>10</option>
     <option>20</option>
     <option>30</option>
     <option>40</option>
     <option>50</option>
    </datalist>
   </div>
   <div class="form-group">
    <label for="zahl" class="label-space">Zahl (10-99)</label><input type="number" id="zeit" title="Zahleneingabe (10-99)" ng-model="schreibwas2.zahl" name="zahl" min="10" max="99" step="1" >
   </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="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/schreibwas2.js"></script> 
 </body>
</html>
Wie in der .html Datei zu sehen ist, werden sowohl CSS als auch JavaScript Bibliotheken (angular, moment) 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

moment-2.27.0 eine JavaScript die sicht um die Darstellung von Datum und Zeitfelder (mit localiation 'de') kümmern.

Im /html Verzeichnis kommt nun das Script schreibwas2.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.
schreibwas2.js

Code: Alles auswählen

/**
* AngularJS App 
* schreibwas2.js  
* 01.08.2020
*/
var app = angular.module( 'schreibwas2App', [] ); 

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

  
  /* Angular Formular Felder */
  $scope.schreibwas2 = { datum: '', zeit: '', range: 0, zahl: 10};

  /* Liste meiner ScheibWas Items - @todo automatisieren */
  $scope.items = [
   { item: 'datum', oh_item: 'SchreibWas2Datum'},   
   { item: 'zeit', oh_item: 'SchreibWas2Zeit'},    
   { item: 'range', oh_item: 'SchreibWas2Range'},
   { item: 'zahl', oh_item: 'SchreibWas2Zahl'}   
  ];
  
  // 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);
    });    

  };
  
  // moment 2.27.0 
  // Datetime YYYY-MM-DDTHH:MM:SS => YYYY-MM-DD
  // https://momentjs.com/docs/#/displaying/
  $scope.getFormattedDate= function(stateValue) {
   var formattedDate = moment(stateValue).format('YYYY-MM-DD');
   // console.log(formattedDate);
   return formattedDate;
  };  
  
  // moment 2.27.0 
  // Datetime YYYY-MM-DDTHH:MM:SS => HH:mm
  // https://momentjs.com/docs/#/displaying/
  $scope.getFormattedTime= function(stateValue) {
   moment.locale('de');
   var formattedTime = moment(stateValue).format('HH:mm');
   // console.log(formattedTime);
   return formattedTime;
  };    

  // Datenübergabe an REST API für alle Formularfelder
  $scope.send = function() {
   
   console.log( $scope.getFormattedDate($scope.schreibwas2.datum));
   console.log( $scope.getFormattedTime($scope.schreibwas2.zeit));   
   console.log( $scope.schreibwas2.range);
   console.log( $scope.schreibwas2.zahl);
   
   if ($scope.schreibwas2.datum) {
    $scope.restApi($scope.items[0].oh_item, $scope.getFormattedDate($scope.schreibwas2.datum));
   }
   if ($scope.schreibwas2.zeit) {
    $scope.restApi($scope.items[1].oh_item, $scope.getFormattedTime($scope.schreibwas2.zeit));
   }   
   $scope.restApi($scope.items[2].oh_item, $scope.schreibwas2.range);
   $scope.restApi($scope.items[3].oh_item, $scope.schreibwas2.zahl);
  };
  
});


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

.sitemap

Code: Alles auswählen

Frame label="SchreibWas II" icon="none" {
	Default item=SchreibWas2Datum
	Default item=SchreibWas2Zeit
	Default item=SchreibWas2Range
	Default item=SchreibWas2Zahl
	Webview url="http://192.168.x.xxx:8080/static/schreibwas2.html" icon="none" height=12
}

Viel Spaß damit..

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

Benutzeravatar
OliverCJ
Beiträge: 404
Registriert: 29. Aug 2017 12:41
Answers: 3
Wohnort: Bergisch Gladbach

Re: SchreibWas II - HTML5 Eingabefelder (Datepicker, Slider etc.) in OpenHAB Basic-UI

Beitrag von OliverCJ »

Hallo,

das sieht ziemlich genial aus! Muss ich mir irgendwann mal antun. Danke!

Könnte ich das Formular mit visibility nur dann anzeigen, wenn ich ein switch-item auf ja gesetzt habe?
Und bei erreichen des gesetzten Datums (ich brauche nur das), den Switch per rule wieder auf nein setzen?

Idee dazu: wenn ich den Zustand “Urlaub“ auf ja setze, dann möchte ich danach eingeben, wann ich zurück komme... Dann kann für z. B. 10 Tage der Urlaubsmodus aktiv sein und am Rückkehrtag automatisch in den Normalmodus zurückkehren (Heizung wieder an, etc.)

Oliver

Gesendet von meinem SM-N975F mit Tapatalk


_______________________________________________
Homematic IP Komponenten an CCU 3 (wächst stetig)
Innogy Smarthome System (verabschiedet sich langsam)
Philips Hue Beleuchtung
Fritz!Box
VU+ Solo SAT-Receiver
2 Squeezeboxen
Denon Heos System

TomW80
Beiträge: 60
Registriert: 7. Mai 2021 19:11

Re: SchreibWas II - HTML5 Eingabefelder (Datepicker, Slider etc.) in OpenHAB Basic-UI

Beitrag von TomW80 »

Der Beitrag ist zwar schon etwas älter aber es ist genau das was ich gesucht habe. Ich habe die gleiche Idee mit dem Urlaub wie OliverCJ.
Ich habe das etwas angepasst und folgende Probleme:

- Wenn ich auf Senden klicke werden die Items nicht aktualisiert. Ichmuss die Seite neu laden damit ich die aktuellen Werte sehe.
- Wenn ich bei der Zeit 23:12 eingebe, erscheint im item dazu 11:12. Das item hat wohl nicht das 24h-Format.

Kann mir hier jemand helfen?

Gruß Tom

TomW80
Beiträge: 60
Registriert: 7. Mai 2021 19:11

Re: SchreibWas II - HTML5 Eingabefelder (Datepicker, Slider etc.) in OpenHAB Basic-UI

Beitrag von TomW80 »

Den zweiten Fehler konnte ich selbst beheben.
TomW80 hat geschrieben: 25. Aug 2022 19:18 - Wenn ich bei der Zeit 23:12 eingebe, erscheint im item dazu 11:12. Das item hat wohl nicht das 24h-Format.
Das Item muss so lauten:

Code: Alles auswählen

DateTime SchreibWas2Zeit "Uhrzeit [%1$tH:%1$tM]" <none>
Gruß Tom

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

Re: SchreibWas II - HTML5 Eingabefelder (Datepicker, Slider etc.) in OpenHAB Basic-UI

Beitrag von udo1toni »

Eventuell musst Du openHAB neu starten.
openHAB4.1.2 stable in einem Debian-Container (bookworm) (Proxmox 8.1.5, LXC), mit openHABian eingerichtet

TomW80
Beiträge: 60
Registriert: 7. Mai 2021 19:11

Re: SchreibWas II - HTML5 Eingabefelder (Datepicker, Slider etc.) in OpenHAB Basic-UI

Beitrag von TomW80 »

Es ging dann auf einmal wieder, habe aber openhab trotzdem mal neu gestartet. ;)

Andre_H_
Beiträge: 8
Registriert: 15. Apr 2022 08:16

Re: SchreibWas II - HTML5 Eingabefelder (Datepicker, Slider etc.) in OpenHAB Basic-UI

Beitrag von Andre_H_ »

Hallo zusammen,
kann man das Script auch in Hab-Panel verwenden?

Wenn ich es dort einbette, dann wird es zwar angezeigt - beim Drücken auf "senden" passiert allerdings nichts.

Eingebettet ist es als "template" wie folgt:

Code: Alles auswählen

<div>
<iframe style=" width: 100%;height: 500px;" src="https://192.168.0.111:8443/static/schreibwas2.html">
</iframe>
</div>
Danke euch!
VG André

Antworten