SchreibWas II - Using HTML5 Input-Type in OpenHAB Basic-UI - good or not

OH 2.5.5

SchreibWas II - Using HTML5 Input-Type in OpenHAB Basic-UI - good or not?

(translated from germany with a little help from deepl.com)

Projectidea:
How can numbers, date and time be entered in the OpenHAB Basic UI and passed to items? HTML, CSS and JavaScript libraries are used to make this all work.

In this SchreibWas2 Form are five fields:
a) Datepicker
b) Time
c) Range Slider
d) Manual input of numbers 10-99 or with spin field
e) A [Send] button with form validation to pass the input values to the item using the OH REST API

schreibwas2.items

// 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>

The actual presentation is outsourced to a web view. This means into a .html file, which is displayed by OH within an iFrame in the sitemap.

schreibwas2.html

<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>

As can be seen in the .html file, both CSS and JavaScript libraries (angular, moment) are included.

CSS und JavcaScript

All required JavaScript and CSS libraries see lib.zip

Directory: html/lib/bootstrap-4.1.1

CSS Libraries
bootstrap css 4.1.1

ATTENTION: Currently my Firefox reports a certificate Error: Error code with this LINK: SSL_ERROR_BAD_CERT_DOMAIN (Download at your own risk)
https://cdn.usebootstrap.com/bootstrap/4.1.1/css/bootstrap.min.css

JavaScript Library
AngularJS 1.7.8
Directory: html/lib/angular-1.7.8

moment-2.27.0 a JavaScript that takes care of the display of date and time fields (with localiation ‘de’).

The /html directory now contains the script schreibwas2.html. The schreibwas.html script will be loaded later via a web view in the sitemap

The /html/app directory now contains the script schreibwas.js. The schreibwas.js JavaScript controls the display in schreibwas.html using AngularJS.
The IP address must be adjusted here.
schreibwas2.js

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

Finally the sitemap. The IP of the Openhab server must be adjusted here

.sitemap

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
}

Is this a good idea or not
?

Enjoy it.

Thank you and best wishes
Thomas

P.S. Sorry I can only upload one image and no .zip
Maybe download here:
https://openhabforum.de/viewtopic.php?f=25&t=3835

5 Likes

There is no input control for basic ui, so you have to use a web view element for this. I’m doing this as well.
So without testing yours I would say thank you for sharing it! Always great to see input from individual solutions which help others that are not so familiar with this

Many thanks for the support. I have created another example of HTML5 input for the Basic UI. Looks like a simple messenger. The HTML5 input form has two input fields (radio button) for a priority and a free text field (textarea).

See it in the german OpenHAB Forum
https://openhabforum.de/viewtopic.php?f=25&t=3803

HTML5 with JavaScript and CSS is now very powerful and stable interfaces generate.

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.