Projektidee:
Mit nmap eine Liste der im eingen Netz angemeldeten Geräte ermitteln und als HTML Liste zur Verfügung stellen. So ähnlich wie es der Router kann.
openhab-nmap-ausgabe.jpg
Verzeichnisstruktur für das Projekt auf dem OH Server
openhab-nmap-html.jpg
.things
Damit wird jede Minute das Script getScan.sh ausgeführt und das Ergebnis als CSV Datei im Verzeichnis /html/temp abgelegt (überschrieben).
Code: Alles auswählen
Thing exec:command:getscan "OH2 NMAP SCAN" @ "Admin"
[command="/bin/bash /etc/openhab2/scripts/getScan.sh > $OPENHAB_CONF/html/temp/getscan.csv", interval=60, timeout=30, autorun=true]
Damit dies funktionieren kann, muss der User openhab Schreibrechte auf das Verzeichnis /html/temp bekommen. Ob das fachlich so ganz korrekt gelöst ist, weiß ich nicht.
Code: Alles auswählen
cd html
mkdir temp
sudo chown -cR openhab:openhab temp
sudo chmod -v 777 temp
Hiermit wird der Netzwerk scan durchgeführt und das Ergebnis im CSV Format ausgegeben. Die IP muss angepaßt werden
Verzeichnis: scripts/getScan.sh
Code: Alles auswählen
#!/bin/bash
HEADER="ip;name;status
"
SCAN=$(nmap -PE -sn -oG - 192.168.2.1/24 | awk '/Host/ { gsub("[()]","",$3); print $2 ";" $3 ";" $5 }')
echo "$HEADER$SCAN"
Das exec Command muss über die Whitelist erlaubt werden
Verzeichnis: misc/exec.whitelist
.whiteliste
Code: Alles auswählen
/bin/bash /etc/openhab2/scripts/getScan.sh > $OPENHAB_CONF/html/temp/getscan.csv
Hier kommen nun zwei externe Bibliotheken für JavaSCript (AngularJS) und CSS (Bootstrap). Ich speichere beide auf dem OH Server,
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
Diese beiden Libraries sind in der angehängten .zip Datei.
Im /html Verzeichnis kommt nun das Script liste.html. Das liste.html Script wird später über ein WebView in der Sitemap geladen
liste.html
Code: Alles auswählen
<html>
<head>
<title>OpenHAB Webview-Liste mit AngularJS</title>
<link rel="stylesheet" href="lib/bootstrap-4.1.1/bootstrap.min.css">
</head>
<body>
<div ng-app="listeApp" ng-controller="listeCtrl" class="div-table" ng-cloak="ng-cloak">
<table class="table table-hover table-striped table-bordered" >
<thead>
<tr>
<th class="alert alert-dark">IP</th>
<th class="alert alert-dark">Name</th>
<th class="alert alert-dark">Status</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in nmap" >
<td class="">{{row.ip}}</td>
<td class="">{{row.name}}</td>
<td class="">{{row.status}}</td>
</tr>
</tbody>
</table>
<button ng-click="fetch()">Geräte im Netz...</button>
</div>
<script type="text/javascript" src="lib/angular-1.7.8/angular.min.js"></script>
<script type="text/javascript" src="app/liste.js"></script>
</body>
</html>
Im /html/app Verzeichnis kommt nun das Script liste.ls. Das liste.js JavaScript steuert mit Hilfe von AngularJS die Anzeige in liste.html. Die IP muss angepaßt werden.
liste.js
Code: Alles auswählen
/**
* AngularJS App
* liste.js
*
* CSV2JSON
* http://techslides.com/convert-csv-to-json-in-javascript
*
* Schreibrechte für Verzeichnis html/temp an User openhab
* sudo chown -cR openhab:openhab temp
* sudo chmod -v 777 temp
* https://www.shellbefehle.de/befehle/chmod/
*/
var app = angular.module( 'listeApp', [] );
/* AngularJS Controller */
app.controller(
"listeCtrl",
function( $scope, $timeout ) {
$scope.nmap = {};
/* Daten holen mit native Fetch API */
$scope.fetch = function() {
/* 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': 'text/plain',
'Accept': 'text/plain'
});
/* fetch request - Daten vom OpenHAB Server holen */
const request = new Request('http://192.168.2.122:8080/static/temp/getscan.csv', {
headers: headers
});
/* fetch startet ...*/
fetch(request, options)
.then(res => res.text())
.then(res => {
// console.log(res);
$scope.csv2json(res);
})
.catch(error => {
console.log('upload error', error);
});
}
// Datenumwandlung CSV zu JSON
$scope.csv2json = function(csv) {
var lines=csv.split("\n");
var result = [];
var headers=lines[0].split(";");
for(var i=1;i<lines.length;i++){
var obj = {};
var currentline=lines[i].split(";");
for(var j=0;j<headers.length;j++){
obj[headers[j]] = currentline[j];
}
result.push(obj);
}
// Datenübergabe an AngularJS mit Verzögerung wegen native fetch api
$timeout( function(){
$scope.nmap = result; //JSON
// console.log(typeof $scope.nmap);
// console.log($scope.nmap.length);
// console.log($scope.nmap);
},10);
};
});
Zum Schluß die Sitemap. Die IP muss angepaßt werden.
.sitemap
Code: Alles auswählen
Webview url="http://192.168.2.122:8080/static/liste.html" icon="none" height=18
So, irgendwas habe ich jetzt bestimmt vergessen.
Bei Fragen fragen...
Bin gespannt ob es Euch gefällt und bestimmt gibt es reichlich Verbesserungsvorschläge... So sol les ein.
Grüße
Thomas
