HMI-Design und Entwicklung

Wie soll’s denn aussehen? Wie wichtig ist Ihnen fehlerfreie Funktionalität?

User Interface Design und Implementierung mit optimaler Usability.

Je nach Aufgabe und Plattform nutzen wir verschiedene Frameworks zur Erstellung von User Interfaces.

Dazu gehören Qt/QML im Bereich nativer C++ Anwendungen, typischerweise unter Linux.

C# und WPF ermöglichen uns, UI Design und Code Implementierung in .NET Anwendungen und Projekten klar voneinander abzugrenzen.

WEB-basierte User Interfaces erstellen wir mit HTML5/CSS3 und tangierenden Frameworks, Bibliotheken und Protokollen wie z.B. jQuery, Angular, Vue.js, Websocket.

Test Driven Development und Unit Tests, das sind unsere Strategien für sicher funktionierende Software.

User Interfaces für Geräte mit Touch Screen

Beim Design und der Entwicklung von Bedieneroberflächen für Geräte, welche vom Bediener über Touch Screen bedienbar sind, müssen eine ganze Reihe Aspekte in das Konzept und das Design der Benutzeroberfläche einfließen.

Die Art und Weise der Bedienung ist teilweise grundverschieden zu einer Desktop Benutzeroberfläche einer PC Applikation.

Folgendes gilt es besonders zu beachten:

  • Limitierte Bildschirmgröße
  • Format und Lage des Display (Querformat oder Hochkant, Format 16:9 oder 4:3)
  • Größe des Displays, das hat Einfluss auf die gute Lesbarkeit von Text und Icons
  • Typ des Touch, klassischer resistiver Touch oder PCAP (Projected Capactive Touch)
  • Lässt die Touch Technologie Multitouch und Gesture zu?
  • Werden Touch LCD Display “Rear Mount” oder “Panel Mount” im Gehäuse verbaut?
  • Es gibt keine Funktion “Rechte Maustaste“ für Kontextmenüs, muss anders gelöst werden
  • Wie ist das Einsatzgebiet des Gerätes beschaffen?
  • Hat der Bediener des Gerätes dicke Handschuh an?
  • Müssen die Eingaben möglichst schnell gehen oder eher präzise sein?
  • Sind Wischbewegungen wie beim Smartphone gewünscht oder eher kontraproduktiv?
  • Wie löst man Texteingaben, denn es gibt keine Tastatur? Software-Keyboard.
  • Die Nutzung von Software-Keyboards beeinflusst das Layout von Eingabemasken.
  • Software-Keyboard darf das aktuelle Eingabefeld möglichst nicht verdecken.
  • und vieles mehr…

Die Bedieneroberflächen des Qt Frameworks mit Qt/QML Benutzeroberflächen sind z.B. sehr gut zugeschnitten auf den Einsatz in industriellen Geräten oder Dashboards.

Gestensteuerungen, Wischbewegungen können sehr gut erkannt und verarbeitet werden.

Funktionen wie Drag & Drop, Software-Keyboard, Animationen, Scrolling sind ebenfalls verfügbar.

Wir haben jahrelang Erfahrungen bei der Konzeption und dem Design von Touch Benutzeroberflächen durch unsere zahlreichen Projekte sammeln können. Dieses Know-how bringen wir in Ihre Projekte ein.

User Interfaces für den Desktop PC

Bei der Konzeption von Benutzeroberflächen für den Desktop PC stehen eine Vielzahl von geeigneten Frameworks zur Verfügung.

Cross Plattform Frameworks wie zum Beispiel das Qt Framework besitzen eine Abstraktionsschicht für Betriebssystem und UI Funktionalität und docken sich über einen konkreten Adapter dann an Betriebssysteme wie Windows Desktop oder Linux Desktop an. Somit ist es möglich, mit Qt auch Desktop-Applikationen zu erstellen. Das ist insbesondere für Projekte interessant, wo eine Software-Applikation mit identischem Backend-Quellcode einerseits auf einer Geräteplattform und andererseits auf dem Desktop PC laufen soll. Bei einer derart klassischen Cross Plattform Entwicklung nutzt man die meisten Quellcode Teile einer Software Applikation unverändert auf verschiedenen Systemen und die Anpassung der Software besteht im Wesentlichen in der Adaption des User Interfaces auf die jeweilige Plattform.

Neben den Cross Plattform Umgebungen werden unter Windows häufig folgende Frameworks für die Entwicklung von Benutzeroberflächen benutzt:

  • WinUI UWP, neuste Generation Windows Desktop Entwicklung
  • WPF Framework (Windows Presentation Foundation), .NET, C#
  • Windows Forms, klassische GUI Desktop Entwicklung, .NET, C#
  • Rapid Development Frameworks, z.B. Embarcadero RAD Studio, Delphi, C++

Bei der Auswahl des Frameworks berücksichtigen wir die individuellen Anforderungen unserer Kundenprojekte.

Für Projekte mit oberster Priorität der schnellen Verfügbarkeit und Fertigstellung setzen wir auf Rapid Development Frameworks. Die Entwicklungsdauer ist hierbei sehr kurz. Allerdings erkauft man sich diesen Vorteil mit einer Architektur, welche funktionellen Code (Business Logic) und visuellen Code (User Interface, Views) stark miteinander vermischt. Falls dies für ein Projekt kein Problem darstellt, ist ein Rapid Development Framework die richtige Wahl für schnelle und kostensparende Softwareentwicklung.

Aufgrund der Komplexität heutiger Softwareprojekte geht der Trend aktuell jedoch immer mehr in Richtung der Frameworks, welche eine starke und saubere Trennung von funktionellem Code und dem User Interface ermöglichen und eine bessere Testbarkeit erlauben.

Für Projekte mit derartigen Anforderungen setzen wir auf WinUI oder WPF basierte Entwicklung und implementieren eine saubere Architektur wie MVC oder MVVM innerhalb der Software-Applikation und setzen automatisches Binding der User Interface Elemente an bestehende Datenmodelle ein. Ein Beispiel hierfür ist die Nutzung des Entity Framework innerhalb von C# Applikationen.

WEB basierte User Interfaces mit HTML5/CSS3

Seit einigen Jahren sind WEB basierte User Interfaces auch für industriellen Einsatz und für Messgeräte interessant geworden.

Der neuere Standard HTML5 und die guten Layoutgestaltungsmöglichkeiten mit Hilfe der Scriptsprache CSS3 ermöglichen die Erstellung moderner und gut aussehender Bedieneroberflächen auch für technische Geräte.

Interessant ist dies insbesondere für Dashboards, welche die Daten eines Produktionsprozesses oder die Messwerte verschiedener Messgeräte und Sensoren in einer geeigneten Übersicht visualisieren sollen.

Im Produktionsumfeld kann dann zum Beispiel ein Prozessleitsystem einfach über das Netzwerk einen HTML-Server bereitstellen und die Visualisierung kann auf einem oder mehreren Standard WEB-Browsern (Firefox, Opera, Chrome, Edge) auf dem Windows Desktop erfolgen.

Im Umfeld von Geräten mit begrenzten Ressourcen und kleineren Touch Displays gibt es auch einen Trend in diese Richtung, jedoch bieten aktuelle Standard WEB Browser nur begrenzte Möglichkeiten für einen Einsatz auf einem Touch basierten Gerätedisplay.

Neben bei der häufig fehlenden Software-Keyboard Funktionalität und der schlechten Unterstützung von Multitouch Gestensteuerung stellt auch die Interaktion zwischen funktioneller (C++) Applikation und WEB-Browser-UI (Javascript und co.) eine echte Herausforderung für die Entwickler dar.
Frameworks für eine optimale Verbindung von HTML-Code mit C++ Applikationscode sind rar, oft mit teuren Lizenzkosten verbunden und funktionelle Abstriche irgendwelcher Art gibt es immer.

Dennoch hat diese Technologie einen guten und hohen Zukunftswert.

Aus diesem Grund betreiben und entwickeln wir auch ein eigenes Toolbox Projekt VUIC++ (Virtual User Interface Controls for modern C++), welches sich genau mit dieser Thematik auseinandersetzt. Das Framework versucht eine universell einsetzbare Brücke zu schlagen zwischen C++ Code und Javascript Code und HTML-Elementen im WEB-Browser. Über Websocket Verbindungen und JSON Datenpakete erreicht das Framework ein einfaches, universelles und automatisches Binding auf die Events und Daten der HTML-Elemente des WEB-Browsers mit C++ Klassen und Eventhandlern auf der anderen Seite. VUIC++ betreiben wir als OpenSource Projekt, nutzen es für eigene Kundenprojekte. Sie sind herzlich eingeladen, dieses Know-how gemeinsam mit uns für Ihre Projekte zu nutzen.