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 Bild 2: Text wirde versendet
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>
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