Schlagwort-Archive: Dashboard

Mit Hilfe von prometheus Daten sammeln

Neben dem zuvor erstellen collectd lassen sich mit Hilfe von Prometheus weitere Daten aus der Fritzbox sammeln, die über Grafana ausgegeben werden können. Zunächst Prometheus installieren.

apt-get install prometheus

Prometheus dient dazu die Daten abzurufen, jedoch werden für die verschiedenen Systeme Exporter benötigt.

Für den hier verwendeten Exporter wird docker und go benötigt, beides wurde nach den folgenden Anleitungen installiert.

Docker: https://docs.docker.com/engine/install/debian/

Go: https://phoenixnap.com/kb/debian-install-go

Für den Export der Daten kommt der Fritzbox_Exporter zum Einsatz, der nach der Anleitung von https://github.com/sberk42/fritzbox_exporter installiert wurde.

Bei der Installation das Exporters mit go install github.com/sberk42/fritzbox_exporter@latest  docker build --tag fritzbox-prometheus-exporter:latest . kam es zu einem Fehler. Die Installation konnte mit docker build --tag fritzbox-prometheus-exporter:latest go/pkg/mod/github.com/sberk42/fritzbox_exporter@v0.0.0-20230106183717-d39a1d30d4cf fortgesetzt werden.

Zugriff auf die Fritzbox

Für den Zugriff auf die Fritzbox über den Exporter, muss zunächst ein Benutzer angelegt werden. Die Einrichtung erfolgt unter System => Fritzbox Benutzer, der Benutzer benötigt das Recht das Einstellungen eingesehen werden können.

Nach der Einrichtung kann der Exporter gestartet werden.

docker run -e 'USERNAME=Benutzername' \
    -e 'PASSWORD=Kennwort' \
    -e 'GATEWAY_URL="http://192.168.178.1:49000"' \
    -e 'LISTEN_ADDRESS="0.0.0.0:9042"' \
    -p 9042:9042 \
    fritzbox-prometheus-exporter:latest

Exporter in prometheus hinterlegen

In der Datei  /etc/prometheus/prometheus.yml wird der Exporter wie folgt hinterlegt:

- job_name: fritzbox

    static_configs:

      - targets: ['ipadresse:9042']

Ob der Exporter erfolgreich im prometheus eingerichtet wurde, kann innerhalb des prometheus unter Status => Targes geprüft werden.

Jetzt muss nur noch im Grafana das Dashboard https://grafana.com/grafana/dashboards/12579-fritz-box-status/ importiert werden und als Datenquelle prometheus auswählen.

Was soll auf einem Display angezeigt werden

In vielen Unternehmen beziehungsweise auch an öffentlichen Stellen hängen Display, die die verschiedensten Inhalte ausgeben. Es werden die nächsten Besucher angekündigt, das aktuelle Wetter, der Speiseplan oder andere verschiedene Dashboards. Die womöglich billigste Variante ist vermutlich einen Monitor / Fernseher zu verwenden, der an einem Raspberry Pi angeschlossen ist. Auf dem Raspberry Pi wird der Browser in dem Kiosk Modus gestartet und gibt die gewünschte Seite aus. Soll die Seite gewechselt werden, so wird die Konfiguration auf dem Raspberry Pi angepasst und der Browser wird neu gestartet. Gibt es mehrere Display die verwaltet werden müssen, so ist dies vermutlich ein gewisser Aufwand. Die kleine in Ruby on Rails geschriebene Webapplikation übernimmt die Verteilung der URL.

In der Webapplikation werden die Rasperry Pis hinterlegt und auf dem Raspberry Pis werden entsprechende Scripte eingerichtet. Damit die Webapplikation auf die Raspberry Pis zugreifen kann, muss der Public Key des Benutzers unter dem die Webapplikation läuft, auf dem Pi hinterlegt werden. Nun kann per Mausklick eine neue Url hinterlegt oder der Pi heruntergefahren bzw. neugestartet werden.

In der Webapplikation können Gruppen angelegt werden, Benutzer und Raspberry Pis werden der Gruppe zugeordnet. Die angelegten Benutzer können nur Raspberry Pis verwalten, die sich in der gleichen Gruppe befinden.

Verwaltung der Raspberry Pis

Git Repository https://github.com/Ostfriese26802/DashboardViewController

Raum-Temperatur auf dem Dashboard

Temperatur und Feuchtigkeit mit dem Wemos D1 Mini werden gemessen und auf dem Dashboard ausgegeben

Ich beschäftige mich aktuell mit dem Wemos D1 Mini und dem messen von Temperaturen sowie dem versenden der Daten. Ursprünglich bin ich auf das Thema gestoßen, da ich auf dem Boot verschiedene Stellen überwachen möchte, wie bspw. die Temperatur im Motorraum. Unter anderem bestellte ich mir dafür den bereits genannten Wemos D1 Mini und dazu unterschiedliche Sensoren wie bspw. den DHT22. Der DHT22 ist ein Temperatur- und Feuchtigkeitssensor. Der Wemos D1 Mini bringt auch gleich einen WLAN-Chip mit.

Um an Bord die gemessenen Werte an den Raspberry zu senden und nicht quer durchs Boot neue Kabel verlegen zu müssen, war die Übertragung mittels WLAN eine charmante Alternative.
Bis hierhin war das eigentlich nur die Vorgeschichte.
Interessant finde ich auch daheim die Temperatur und Feuchtigkeit, um zu erkennen wann wieder gelüftet werden muss. Die Darstellung auf dem Dashboard bot sich dafür an.
Keine Kabel verlegen zu müssen, bis auf für die Stromversorgung ggf. (3.3V oder 5V für den Betrieb werden benötigt), ist zu Hause genauso von Vorteil.

Da ich (aktuell) keinen Bedarf habe eine Historie der Werte zu speichern, kam mir die Idee die Werte direkt mittels API-Aufruf vom Wemos auf dem Dashboard aktualisieren zu lassen.
Das war die perfekte Übung für spätere Projekte an Bord.

Später kommt das ganze in ein Gehäuse.
Der Versuchsaufbau sieht wie folgt aus:

Auf dem Dashboard sieht die Kachel dann so aus:

Das ganze habe ich im Git gepflegt und ihr findet es mit entsprechender Anleitung zum nachbauen hier: https://github.com/janneshecht/Room-temperature

[dashing] globale Variablen

Ich nutze zwei verschiedene Systemen für die Dashboards. Das eine System wird zur Entwicklung von Widgets bzw. Anpassung von Scripts verwendet, das andere System für die Produktive Darstellung. Bislang mussten die Scripte nachdem sie auf das Prodsystem kopiert wurden angepasst werden, da teilweise absolute Pfade hinterlegt wurden.

Das ganze muss durch das setzen einer globalen Variable nicht mehr erfolgen. In dem Jobs Verzeichnis wurde die Datei variable.rb abgelegt, in der Datei sind die benötigten Variablen wie folgt angegeben: $GPFAD=“testsystem“
Damit in den Ruby Dateien darauf zugegriffen werden kann, muss zunächst die variable.rb eingebunden werden.

require_relative(‚variable.rb‘)
Nun kann innerhalb der rb Datei über $GPFAD auf die Variable zugegriffen werden.

[dashing] Willkommen Firma xyz über den gesamten Bildschirm

Das dashing.io Dashboard kann unter anderem in Empfangsbereichen von Firmen eingesetzt werden. Steht nun zum Beispiel ein Besuch eines Kunden an, so könnte man Ihn auf dem Dashboard willkommen heißen. Damit die Willkommensnachricht nicht nur unscheinbar in einer Kachel erscheint, habe ich dieses Widget erstellt. Die job Datei(rb) prüft ob es einen zeitlich passenden Eintrag in der csv Datei gibt und setzt das Widget per css auf Display Block. Das Widget legt sich über den gesamten Bildschirm, ist die Zeit des hinterlegten Kundenbesuchs abgelaufen so wird das Widget wieder ausgeblendet.

Folgende Dateien müssen in einem Verzeichnis Namens overlay abgelegt werden

overlay.coffee
class Dashing.Overlay extends Dashing.Widget
constructor: ->
super
onData: (data) ->
schalter = @schalter
node = $(@node)
if schalter == false then node.css(‚display‘,’none‘) else node.css(‚display‘,’block‘)
ready: ->
@onData(null)

overlay.html
<span data-bind=“titel“></span>
<div class=“bild“ ><img data-bind-src=“kunde“ ></div>
<div class=“text“ data-bind=“text | raw“></div>

overlay.scss
// —————————————————————————-
// Sass declarations
// —————————————————————————-
$background-color: #ec663c;
$title-color: rgba(255, 255, 255, 0.7);
$moreinfo-color:rgba(255, 255, 255, 0.7);
// —————————————————————————-
// Widget-text styles
// —————————————————————————-
.widget-overlay {
position: fixed;
bottom: 1px;
z-index:1000;
width:100%;
height:95%;
background-color: $background-color;
.title {
color: $title-color;
}
.more-info {
color: $moreinfo-color;
}
.updated-at {
color: rgba(255, 255, 255, 0.7);
}
.text{
color:#ffffff;
font-weight:bold;
margin-top:20%;
}
.bild{
height:100px;
width:95%;
text-align:right;
}
&.large h3 {
font-size: 65px;
}
}

Die rb Datei muss unter dem Verzeichnis jobs abgelegt werden, natürlich muss der Pfad zur CSV Datei angepasst werden.
overlay.rb
require ‚csv‘
require ‚json‘
require ‚date‘
require ‚time‘
ENV[‚TZ‘] = ‚Europe/Berlin‘
schalter = false
kunde = „x“
text = „x“
SCHEDULER.every ’30s‘ do
zeit = Time.now.to_i
schalter_zaehler = 0
ausgabe = {}
idx = 0
CSV.foreach(‚/home/dashing/sweet_dashboard_project/jobs/overlay.csv‘, col_sep: ‚;‘) do |row|
start = Time.parse(„#{row[0]} #{row[1]}:00 „).to_i
stop = Time.parse(„#{row[0]} #{row[2]}:00 „).to_i
if zeit.between?(start, stop)
schalter_zaehler += 1
kunde = row[3]
text = row[4]
ausgabe[0] = {:kunde => row[3],:text => row[4]}
end
end
if schalter_zaehler == 1
schalter = true
else
schalter = false
end
send_event(„overlay“,{ kunde: kunde , text: text, schalter: schalter })
#puts JSON.pretty_generate(ausgabe)
end

Aufbau der overlay.csv
2017-01-02;10:00;12:00;/assets/logo.png;Moin zusammen;
2017-05-08;20:00;21:51;/assets/logo.png;Willkommen Firma Kassupke<br/>bei der Tagung;

Die Logos der Firmen müssen unter dem Verzeichnis assets/images abgelegt werden.

Die Einbindung des Widgets erfolgt in der erb Datei in der letzten Zeile wie folgt:
<div data-id=“overlay“ data-view=“Overlay“ ></div>

Hier kann alles heruntergeladen werden.