Web-basierte Benutzerschnittstellen für Embedded Systeme: Eine Benutzerschnittstelle drei Sichtweisen

Transkript

1 Web-basierte Benutzerschnittstellen für Embedded Systeme: Eine Benutzerschnittstelle drei Sichtweisen Klaus-Dieter Walter SSV Software Systems GmbH Dünenweg 5 D Hannover kdw@ssv-embedded.de 1

2 Agenda Kurze Vorstellung des Autors Was sind Embedded Systeme? Welche Benutzerschnittstellen gibt es und wie werden sie entwickelt? Der Web-basierte Lösungsansatz Wie erstellt man Web-basierte Benutzerschnittstellen Einige Anwendungsbeispiele für Web-basierte Benutzerschnittstellen Fragen und Antworten... 2

3 Wer ist SSV Software Systems? 1981 als Softwarehaus für Kommunikationslösungen in Hannover gegründet. Entwicklung und Vermarktung von Modulen, Systemen, Lösungsbausteinen und Dienstleistungen für die sichere Embedded IP-Kommunikation... 3

4 Wo finden Sie unsere Produkte? Unsere Produkte und Dienstleistungen kommen in der Regel an der Schnittstelle zwischen Feld- bzw. Prozess- und Managementebene zum Einsatz... 4

5 Was ist ein Embedded System (ES)? (Mikro-) Rechnersystem, dass in einen technischen Kontext eingebunden (embedded) ist, um bestimmte (MSR-) Aufgaben auszuführen... Embedded System 5

6 ES-Benutzerschnittstellen 1. Lokale Benutzerschnittstelle (Frontplatten-UI): Besteht in der Regel aus einem grafikfähigen LCD evtl. mit Touchscreen und/oder einigen Frontplattentasten (zum Beispiel vier Navigations- und eine OK-Taste)... Embedded System 6

7 ES-Benutzerschnittstellen 2. LAN-Fernsteuerschnittstelle: Ermöglicht den Zugriff per Webbrowser auf einen eingebetteten Webserver. Der Webserver bietet über statische und dynamische Webseiten eine sehr leistungsfähige HMI-Schnittstelle Embedded System 7

8 ES-Benutzerschnittstellen 3. Smartphone-Fernsteuerschnittstelle: Spezialanwendung für ein Smartphone (zum Beispiel eine iphone App), um das Smartphone als leistungsfähige HMI-Schnittstelle zu nutzen Embedded System 8

9 Wie entwickelt man Frontplatten-UIs? Lokale Benutzerschnittstellen in Frontplatten werden in der Regel manuell in C/C++ programmiert. Text- und Grafikressourcen werden durch den C/C++ Code erzeugt. Häufig werden Spezialbibliotheken eingesetzt... 9

10 Wie entwickelt man Webseiten? Web-basierte HMI-Schnittstellen bestehen aus HTML- (Web) Seiten. HTML steht für Hypertext Markup Language (Hypertext-Auszeichnungssprache). In solche HTML-Textseiten werden unterschiedliche Objekte eingebettet... 10

11 Wie entwickelt man eine iphone-app? 1. Mac beschaffen, 2. im iphone Developer Program anmelden, 3. Apple iphone SDK laden, 4. Objective-C lernen, 5. App programmieren und testen, 6. App an Apple senden und auf Veröffentlichung im App Store warten... Bildquellen: WIKIPEDIA 11

12 Eine Zwischenbilanz Für sehr viele Embedded Systeme müssen drei völlig unterschiedliche Benutzerschnittstellen entwickelt werden Frontplatten-UI, LAN- und Smartphone-Fernsteuerschnittstelle werden mit verschiedenen Konzepten, Technologien und Werkzeugen entwickelt Zu jeder Benutzerschnittstelle gehört (mindestens) ein Experte Bedenken Sie das Problem der Mehrsprachigkeit (wir sind eine Exportnation); drei Benutzerschnittstellen mal n-sprachen = 3n Probleme... Embedded-System-Anwendungen sind außerordentlich langlebig (10+ J. sind keine Seltenheit) Grafikbibliotheken, Entwicklungswerkzeuge und das Expertenwissen sind zum Teil deutlich kürzeren Lebenszyklen ausgesetzt Und dann gibt es noch Webportale (Beispiel)... 12

13 Ein Lösungsansatz 100%-Web-basiert: Grundsätzlich lassen sich Frontplatten-UI, LAN- und Smartphone-Fernsteuerschnittstelle mit Hilfe von HMTL, CSS und Java- Script also auf Basis etablierter Standards realisieren Embedded System 13

14 Wie macht man das? Man erzeugt die einzelnen Bildelemente, erstellt den Hintergrund mit Hilfe von HTML- und CSS-Dateien und verbindet das Ganze mit JavaScript. Der Hardware-Zugriff erfolgt über in C/C++ geschriebene CGI-Programme Logo_ssv.png Extras0.gif Settings0.gif Extras1.gif Settings1.gif Info0.gif Info1.gif Dateien Home.html...(Beispiel) Style.css...(Beispiel) Menu.css...(Beispiel) Function.js.(Beispiel) 14

15 Einige Anwendungsbeispiele PV-Datenlogger: Frontplatten-UI und LAN-Fernsteuerschnittstelle basieren auf den gleichen Webseiten. Smartphone-Schnittstelle liefert nur Auszüge 15

16 Einige Anwendungsbeispiele Energiemanagementsystem: Frontplatten-UI wie zuvor als Beispiel beschrieben. LAN-Fernsteuerschnittstelle an PC-Browser angepasst 16

17 Zusammenfassung Frontplatten-UI, LAN- und Smartphone-Fernsteuerschnittstelle Zu jeder Schnittstelle gehört eine Technologie und (min.) ein Experte HTML, CSS und JavaScript viel mehr wird nicht benötigt Eine Webseite für drei Benutzerschnittstellen das reicht nicht Bei den Werkzeugen gibt es noch Optimierungsbedarf Fragen und Antworten Vielen Dank für Ihre Aufmerksamkeit 17

18 Webportal - Beispiele Zurück 18

19 Dateien - Beispiel Zurück 19