Tinkerforge UI mit Vaadin & MQTT

Klaus Pittig

Ziel

Schnell und einfach mit vorhandenen Programmierkenntnissen Sensoren/Aktoren mit einer ansprechenden Oberfläche versehen.

Verwendete quelloffene Technologien

  • Tinkerforge Komponenten (Hardware und API-Bindings)

  • MQTT mit Eclipse Paho (Client) und Mosquitto (Broker).

  • Python (Brick MQTT Proxy)

  • Java 8 (Anwendung)

  • Vaadin (Web-Framework)

TinkerForge

  • http://tinkerforge.de

  • Ein elektronisches Baukastensystem zum Rapid Prototyping mit einfachen Schnittstellen.

  • Bricks - Stapelbare Module zum Messen und Steuern über USB

  • Bricklets - Nicht stapelbare Sensor-/Aktormodule, die die Fähigkeiten von Bricks erweitern.

  • Master Extensions - Erweitern die Schnittstellen von Master Bricks (WLAN, Ethernet, RS485).

MQTT, Eclipse Paho, Mosquitto

  • http://eclipse.org/paho

  • MQTT ist ein leichtgewichtiges M2M Publish/Subscribe Connectivity Protokoll.

  • Eclipse Paho ist eine MQTT Client Bibliothek für verschiedene Programmiersprachen.

  • Mosquitto ist eine leichtgewichtige Server Implementierung für MQTT und MQTT-SN.

Vaadin

  • http://vaadin.com

  • Vaadin ist ein freies Web-Application Framework für Rich Internet Applications (RIA).

  • Vaadin-Anwendungen werden in Java geschrieben, ein Großteil der Programmlogik läuft auf dem Server.

  • Client-seitig baut Vaadin auf GWT zur Darstellung von Webseiten auf.

  • Vaadin Charts ist eine (kostenpflichtige) Bibliothek mit Komponenten für die Darstellung von animierten und interaktiven Diagrammen in Vaadin Apps.

Was lassen wir aus?

  • Persistenz

  • Sicherheit, Verschlüsselung

  • Minicomputer (Raspberry Pi, TF RedBrick etc.)

  • Verteilte bzw. kabellose Demos

  • Die letzte Weisheit zu Quellcode/Patterns/Frameworks

Signale der Sensoren mitverfolgen

Auf Eurem Gerät z.B. mit "MQTT Dashboard" (Android).

MQTT Broker (Mosquitto):

  • tcp://things.online:1883

Topic-Subscriptions:

  • tinkerforge/#

  • tinkerforge/bricklet/#

  • tinkerforge/bricklet/temperature/#

Nachrichteninhalte

Der Brick MQTT Proxy normalisiert in ein Json-Format

Beispiel Temperatursensor:

Topic
tinkerforge/bricklet/temperature/dzj/temperature
Message
{"_timestamp":1462706479.248,"temperature":2756}

Beispiel Aktor Segmentanzeige

Topic
tinkerforge/bricklet/segment_display_4x7/pUj/segments/set
Message
{ "segments": [ 0, 0, 0, 0 ], "brightness": 0, "colon": false}
Topic
tinkerforge/bricklet/segment_display_4x7/pUj/start_counter/set
Message
{ "value_from": 600, "value_to": 0, "increment": -1, "length": 1000}

Wunschvorstellung

shutterstock 383893378

Stand der Dinge

shutterstock 112600436

Ein Frontend Beispiel zum Farbsensor

tf vaadin demo color

Fragestellung

tfmqttv draft1

Schritt 1 (Abgrenzung)

tfmqttv draft2

Schritt 2 (TinkerForge)

tfmqttv draft3

Schritt 3 (Keine Hardware am Server!)

tfmqttv draft3b

Schritt 4 (Brick MQTT Proxy)

tfmqttv draft4

Schritt 5 (Finaler Aufbau)

tfmqttv

DEMO

Persönliches Fazit

  • Vergleichsweise teure TinkerForge Bausteine eignen sich zur schnellen Integration.

  • Fokus bleibt auf der Programmierung.

  • MQTT ist für die asynchrone Kommunikation bestens geeignet.

  • Broker ist schnell aufgesetzt, es gibt freie Alternativen.

  • Java-Anbindung ist mit Eclipse Paho sehr einfach.

Persönliches Fazit (2)

  • Vaadin bietet mit den (kostenpflichtigen) Charts sehr ansprechende GUI-Elemente.

  • Es lassen sich damit schnell und unkompliziert Daten visualisieren.

  • Die Programmierwelt Java wurde größtenteils nicht verlassen.

  • Für Hardware, Software, Datentransfer gibt es viel Optimierungspotenzial.

Ausblick / Weitere Entwicklungen

  • Mqtt.v Alpha konsolidieren → Github

  • Brick-Mqtt-Proxy for Java entwickeln (als 1:1 Port)

  • Device/Bricklet Abstraktion für automatische Charts

  • Mehr Hardware und Charts unterstüzen (Plugin-System)

  • Node-RED Prototyping

  • …​

Vielen Dank für Eure Aufmerksamkeit

Twitter: @jforge