ICON: Tutorial Teil 23: Vidgets und GUI-Entwicklungen mit VIB

  • Hallo Himbeerfreunde, Linux-Freaks und Forumsbewohner,


    im heutigen Tutorial geht es um Vidgets - virtual input gadgets - auf Deutsch: graphische Bedienelemente. Diese werden am einfachsten mit dem Virtual Interface Builder VIB erzeugt, auf dem Bildschirm platziert, an die entsprechenden Bedürfnisse angepasst (konfiguriert). VIB erzeugt den Quellcode einer lauffähigen GUI-Anwendung (GUI = Graphical User Interface, graphische Benutzschnittstelle). Wer es genauer wissen möchte: Quellcode in der Programmiersprache Icon - aber das war wohl klar, oder?


    In diesem Tutorial
    - werden die graphischen Bedienelemente der Programmiersprache Icon vorgestellt,
    - wird das Konzept der Callback-Routinen vorgestellt,
    - wird gezeigt, wie das Programm VIB bedient wird,
    - wird die Entwicklung einer Beispielanwendung gezeigt, die wohl jeder Raspbianer nützlich finden wird: ein Programm zum Ansteuern der GPIO-Pins per Mausklick,
    - werden Records und Prozeduren aus [font="Courier"]/home/pi/icon9_51/ipl/gprocs[/font] vorgestellt, mit denen Vidgets auch ohne VIB erstellt und angezeigt werden können sowie Ereignisse auf eigene Vidgets ausgedehnt werden können
    - wird gezeigt, wie man aus dem Icon-Code, der von VIB erzeugt wird, eine vollfunktionsfähige GUI-Anwendung erstellt,


    In der Übungsaufgabe bekommt Ihr die Aufgabe gestellt, ein GPIO-Kontrollzentrum zu kreieren - zunächst als VIB-Anwendung:
    - alle GPIOs auf einen Blick
    - 2 GPIOs werden mit einer DUO-LED belegt; über eine Checkbox wird ausgewählt, ob die LED automatisch blinken soll, über einen Rollbalken wird die Blinkfrequenz eingestellt
    - mehrere LEDs können angesteuert werden
    - eine 7Segment-Anzeige wird angesteuert


    Im nächsten Tutorial zeige ich dann, wie aus der VIB-Ausgabe ein richtiges GPIO-Kontrollzentrum wird - und auf der 7Segment-Anzeige nicht nur alle Ziffern sondern auch noch darstellbare Buchstaben angezeigt werden.


    Sollte ich jemanden jetzt neugierig gemacht haben, dieses Tutorial als Gelegenheit zu nutzen, doch noch mit elektronischen Basteleien zu beginnen, habe ich auf den letzten 5 Seiten eine Überischt über eine Grundausstattung (Elektronik-Bauteile, Werkzeuge) zusammengestellt, die im nächsten Tutorial-Teil zum Einsatz kommen.


    In der nächsten Aufgabe zeige ich dann, wie man daraus
    - Jumperkabel und
    - mit Hilfe der Schneid-Klemmtechnik GPIO-Kabel
    herstellt


    Beides ist für das GPIO-Kontrollzenrum erforderlich.


    Ach ja, dieses Tutorial hat aufgrund
    - der Länge der Lösung der Übungsaufgabe (Alles mit Primzahlen machen),
    - begleitender Screenschots,
    - der ausführlichen Bedienungsanleitung der Anwendung VIB,
    - weiterer zahlreicher Screenshots zur Erläuterung der Dialogfenster von VIB,
    - der Vorstellung der mit den Vidgets zusammenhängenden Records,
    - der Vorstellung der mit den Vidgets zusammenhängenden Prozeduren
    Ü B E R L Ä N G E.


    Die Zusammenstellung der Bauteile und Werkzeuge inkl. Photos habe ich auf Extraseiten ausgelagert (da letztere jeglichen Rahmen sprengen).


    Egal, es war viel Arbeit - endlich mal sinnvolle Abende im Hotel, da ich einen Großteil dieses Tutorials auf meinem neuesten Raspberry Pi mit 7"-Touchscreen in den Abendstunden geschrieben habe.


    Ich wünsche Euch viel Spaß und viele neue Erkenntnisse.


    Gutes Gelingen!


    Andreas


    P.S.: Während der etwas längeren Berabeitung dieses Tutorial-Teil kam mir eine Idee, Buttons relativ zur Bildschrimgröße zu positionieren und auch deren Größe anzupassen. Herausgekommen ist folgendes kleines Programm.


    Das Programm würde ich heute allerdings anders schreiben, denn man kann der Prozedur [font="Courier"]ProcessEvent()[/font] eine Routine mit auf den Weg geben, die sich mit Resizing-Ereignissen (also Größen-Änderung von Fenstern) beschäftigt. Diese Resizing-Funktion ruft automatisch die Resizing-Funktionen jedes Vidget-Typs auf. Aus meiner Resizing-Funktion wird dann ein Einzeiler... bzw. wird ganz überflüssig. Daran kann man erkennen, dass die Icon-Entwickler nicht nur den Ansatz verfolgten, eine Programmiersprache zu erdichten - sondern ursprünglich die Absicht im Vordergrund stand, ein komplettes Betriebssystem zu erschaffen. Denn dafür gab es mal Fördermittel für den Fachbereich Computer Science der Uni in Arizona in Höhe von 640.000 $. Lang, lang ist's her...


    Hier das Progarmm in der ursprünglichen Version:




    [hr]
    Inhaltsangabe:
    1. Icon Tutorial Teil 1: Die Programmiersprache Icon - Installation
    2. Icon Tutorial Teil 2: Geany: Installation und Konfiguration der IDE Geany
    3. Icon Tutorial Teil 3: Eingabe und Ausgabe
    4. Icon Tutorial Teil 4: Programmierer-definierte Kontrollstrukturen: Schleifen und Fallentscheidungen


    5. Icon tutorial Teil 5: Numerische Datentypen, ihre Funktionen und Operatoren
    6. Icon Tutorial Teil 6: Zeichen-basierte Datentypen, ihre Funktionen ud Operatoren
    7. Icon Tutorial Teil 7: Struktureirte Datentypen, ihre Funktionen und Operatoren
    8. Icon Tutorial Teil 8: Die Datentypen procedure und co-expression
    9. Icon Tutorial Teil 9: Konzept des Zeichenketten-Scannens


    10. Icon Tutorial Teil 10: Ausdrucks-Auswertung, Typ-Umwandlung, Strukturen sortieren
    11. Icon Tutorial Teil 11: Sammelsurium: Zeichenkettennamen, Zeichenketten-Anrufungen, Speichermanagement, Sonstige Fähigkeiten
    12. Icon Tutorial Teil 12: Bibliotheken
    13. Icon Tutorial Teil 13: Präprozessor
    14. Icon Tutorial Teil 14: Fehler & Fehlerbeseitigung


    15. Icon Tutorial Teil 15: Graphik I: Window-Datentyp
    16. Icon Tutorial Teil 16: Graphik II: Zeichnen und Füllen
    17. Icon Tutorial Teil 17: Graphik III: Turtle-Graphik
    18. Icon Tutorial Teil 18: Graphik IV: Text
    19. Icon Tutorial Teil 19: Graphik V: Farben und Images
    20. Icon Tutorial Teil 20: Graphik VI: Fenster


    21. Icon Tutorial Teil 21: Interaktion
    22. Icon Tutorial Teil 22: Standard-Dialoge
    23. Icon Tutorial Teil 23: Vidgets und GUI-Entwicklungen mit VIB (Visual Interface Builder)


    24. Icon Tutorial Teil 24: Hardware-Basteleien & Vervollständigung der GPIO-Kommandozentrale


    25. Icon-Tutorial Teil 25: Ereignisbehandlung bei Anwendungen mit mehr als einem Fenster - Individuelle Dialoge mit VIB ersellen und programmieren
    26. Icon Tutorial Teil 26: Individuelle Dialoge mit VIB


    27. Icon Tutorial Teil 27: Ein Spiel entwickeln: Mastermind - Entwurf und GUI-Layout
    28. Icon Tutorial Teil 28: Ein Spiel entwickeln: Mastermind - Ereignisbehandlung & Auswertelogik
    29. Icon Tutorial Teil 29: Ein Spiel entwickeln: Mastermind - Der Code


    Ideen, Block I (in Entwicklung)
    30. Icon Tutorial Teil 30: Von Icon auf C-Bibliotheken zugreifen
    31. Icon Tutorial Teil 31: Von Icon auf C++-Bibliotheken zugreifen
    32. Von Icon auf Prolog-Bibliotheken zugreifen


    Ideen, Block II (Software läuft!)
    33: Text-to-Speech - Speech-to-Text: Sprachsynthese und Sprachanalyse auf dem Raspberry Pi in Icon


    Ideen, Block III (Software für #35 läuft!)
    34: GUI mit dem Event-Multiplexor (EVMUX) gestalten inkl. Programmierung der Ereignisbehandlung
    35: Symbolizer für Bi-Level-Graphiken
    36: Symbolizer für Grafiken mit Icon-Farbpaletten


    Ideen, Block IV (Software läuft!)
    37: Pseudo-Code-Compiler


    Ideen, Block V (Software läuft)
    38: Dia-Shower


    Ideen, Block VI (Ideensammlung)
    39: Hardware-Basteleien: A/D-Wandler und dessen Programmierung in Icon

    Files

    Ich bin wirklich nicht darauf aus, Microsoft zu zerstören. Das wird nur ein völlig unbeabsichtigter Nebeneffekt sein.
    Linus Torvalds - "Vater" von Linux

    • Icon-Tutorials (IDE: Geany) - GPIO-Library - µController-Programmierung in Icon! - ser. Devices - kein Support per PM / Konversation

    Linux is like a wigwam, no windows, no gates, but with an apache inside dancing samba, very hungry eating a yacc, a gnu and a bison.

    Edited once, last by Andreas ().