{"id":337,"date":"2017-11-23T21:13:15","date_gmt":"2017-11-23T20:13:15","guid":{"rendered":"http:\/\/mikrocontroller.bplaced.net\/wordpress\/?page_id=337"},"modified":"2017-12-31T01:52:45","modified_gmt":"2017-12-31T00:52:45","slug":"27-simple_gui-library-stm32f429","status":"publish","type":"page","link":"https:\/\/mikrocontroller.bplaced.net\/wordpress\/stm32f429\/komplette-library-liste-stm32f429\/27-simple_gui-library-stm32f429\/","title":{"rendered":"27-Simple_GUI-Library (STM32F429)"},"content":{"rendered":"

\u2190<\/span> 26-LCD_VGA-Mode-Library (STM32F429)<\/a><\/div><\/div>
28-uBasic-Library (STM32F429) →<\/span><\/a><\/div><\/div><\/p>\n

Diese Library erm\u00f6glicht es eine \u201ceinfache\u201d Graphische Benutzeroberfl\u00e4che
\nmit dem STM32F429 und einem Grafik-Display (mit Touch) zu realisieren.<\/p>\n

Hier ein paar Bilder wie das ganze aussieht :<\/p>\n

\n
\n
\"Simple<\/a><\/dt>\n
Simple GUI<\/dd>\n<\/dl>\n
\n
\"Texte\"<\/a><\/dt>\n
Texte<\/dd>\n<\/dl>\n
\n
\"Slider\"<\/a><\/dt>\n
Slider<\/dd>\n<\/dl>\n

 <\/p>\n

\n
\"Select-Buttons\"<\/a><\/dt>\n
Select-Buttons<\/dd>\n<\/dl>\n
\n
\"Radio-Buttons\"<\/a><\/dt>\n
Radio-Buttons<\/dd>\n<\/dl>\n
\n
\"Panels\"<\/a><\/dt>\n
Panels<\/dd>\n<\/dl>\n

 <\/p>\n

\n
\"Listbox\"<\/a><\/dt>\n
Listbox<\/dd>\n<\/dl>\n
\n
\"LEDs\"<\/a><\/dt>\n
LEDs<\/dd>\n<\/dl>\n
\n
\"Label\"<\/a><\/dt>\n
Label<\/dd>\n<\/dl>\n

 <\/p>\n

\n
\"Integer-Edit\"<\/a><\/dt>\n
Integer-Edit<\/dd>\n<\/dl>\n
\n
\"Gauge\"<\/a><\/dt>\n
Gauge<\/dd>\n<\/dl>\n
\n
\"Float-Edit\"<\/a><\/dt>\n
Float-Edit<\/dd>\n<\/dl>\n

 <\/p>\n

\n
\"DropDown-Box\"<\/a><\/dt>\n
DropDown-Box<\/dd>\n<\/dl>\n
\n
\"Checkbox\"<\/a><\/dt>\n
Checkbox<\/dd>\n<\/dl>\n
\n
\"Buttons\"<\/a><\/dt>\n
Buttons<\/dd>\n<\/dl>\n

 <\/p>\n

\n
\"Picture\"<\/a><\/dt>\n
Picture<\/dd>\n<\/dl>\n
\n
\"Graph\"<\/a><\/dt>\n
Graph<\/dd>\n<\/dl>\n

 <\/p>\n<\/div>\n

File-Aufbau :<\/strong><\/p>\n

Die SGUI-Library besteht aus mehreren Files.
\nAls Hierachiebaum sieht das ganze so aus :<\/p>\n

User-Projekt\r\n  |\r\n  +stm32_ub_sgui\r\n    |\r\n    +ub_sgui_screen\r\n    +ub_sgui_window\r\n    +ub_sgui_text\r\n    |\r\n    +ub_sgui_panel\r\n    +ub_sgui_button\r\n    +ub_sgui_led\r\n    +ub_sgui_label\r\n    +ub_sgui_checkbox\r\n    +ub_sgui_gauge\r\n    +ub_sgui_radiobtn<\/pre>\n
Wie zu sehen ist, muss der User nur ein File includen \u201cstm32_ub_sgui\u201d
\nder Rest wird automatisch \u201cangeh\u00e4ngt\u201d<\/p>\n
\u201cSGUI_SCREEN\u201d , \u201cSGUI_Window\u201d und \u201cSGUI_Text\u201d muss im Projekt vorhanden sein
\ndie anderen Objekte (Button, LED usw) k\u00f6nnen falls nicht ben\u00f6tigt
\nauch weggelassen werden.<\/p>\n
Funktionsweise :<\/strong><\/p>\n
Der User muss folgende Dinge in seinem Programm einbauen :
\n1. Die Init-Funktion von SGUI muss als erstes nach Power-On aufgerufen werden
\n2. Alle Seiten (Windows) die sp\u00e4ter zu sehen sein sollen,
\nm\u00fcssen einmal \u201cerstellt\u201d werden. (Erkl\u00e4rung folgt)
\n(das muss bzw. darf nur einmal nach Power-On gemacht werden)
\n3. Die Funktion \u201cSGUI_DO\u201d muss zyklisch aufgerufen werden
\n(die k\u00fcmmert sich um das zeichen\/touchabfrage usw)<\/p>\n
Hello-World Beispiel :<\/strong><\/p>\n
#include \"stm32_ub_sgui.h\"\r\n\r\nint main(void) {\r\n  SBUTTON_t* btn;\r\n\r\n  SystemInit();\r\n\r\n  SGUI_Init();\r\n\r\n  SGUI_WindowCreateMain(1);\r\n  btn=SGUI_ButtonCreate(10,20,100,50);\r\n  SGUI_ButtonSetText(btn,\"Hello\");\r\n\r\n  while(1) {\r\n    SGUI_Do();\r\n  }\r\n}\r\n<\/pre>\n
Hier ein miminal Beispiel das ein leeres Fenster erzeugt (mit Nr. 1),
\ndarauf einen Button platziert und die Beschriftung vom Button \u00e4ndert.<\/p>\n
Der Button hat zwar keine Funktion aber die SGUI-Library k\u00fcmmert sich
\n(durch die SGUI_DO) das man den Button per Touch dr\u00fccken kann.<\/p>\n
Allgemeine Hinweise :<\/strong><\/p>\n
Alle Objekte besitzen Parameter die beim \u201cCreate\u201d erstmal auf einen
\nStandardwert gesetzt werden (z.B. Farbe, Schriftart, Rahmendicke usw)<\/p>\n
Alle Parameter k\u00f6nnen aber nachtr\u00e4glich (auch w\u00e4hrend dem Programmlauf)
\nge\u00e4ndert werden. Falls der User einen Parameter von einem Objekt \u00e4ndert,
\nund dieses gerade sichtbar ist, wird es automatisch neu gezeichnet.<\/p>\n
Die Software reserviert erst beim \u201cCreate\u201d Speicherplatz im RAM f\u00fcr das Objekt.
\nSo das es eigentlich (au\u00dfer der RAM-Gr\u00f6\u00dfe) kein oberes Limit f\u00fcr die Anzahl
\nder Objekte gibt. Ich habe aber eine \u201cmaximal Anzahl\u201d f\u00fcr die Objekte
\nim jeweiligen H-File festgelegt (im Moment 100 von jeder Art). nur zur Info.<\/p>\n
Wer das Display im Landscape-Mode betreiben will, muss den Define
\nim \u00a0File \u201cub_sgui_screen.h\u201d \u00e4ndern.<\/p>\n
Objekt : Window<\/strong><\/p>\n
Ein \u201cWindow\u201d ist die Zeichenunterlage f\u00fcr alle anderen Objekte (au\u00dfer andere Windows)
\nEs gibt zwei Typen : \u201cMain\u201d und \u201cChild\u201d
\nMain-Windows f\u00fcllen den kompletten Screen (Gr\u00f6\u00dfe kann nicht eingestellt werden)
\nChild-Windows k\u00f6nnen eine beliebige Gr\u00f6\u00dfe und Position besitzen.<\/p>\n
Wenn ein Child-Window angezeigt wird, bleibt das darunter liegende Main-Window
\nzum Teil sichtbar. Das Child liegt also im Vordergrund.<\/p>\n
Hinweis : ohne ein Window , kann kein anderes Objekt erzeugt werden.
\nJedes Objekt wird beim erzeugen dem aktuellen Window zugeordnet.<\/p>\n
Beim zeichnen von einem Window werden alle Objekte gezeichnet,
\ndie diesem Window zugeordnet sind. Und nur diese Objekte reagieren
\nauf Touch eingaben.<\/p>\n
Objekt-Liste :<\/strong><\/p>\n
Hier eine Liste aller im Moment verf\u00fcgbaren Objekte
\ndie auf einem Window platziert werden k\u00f6nnen.
\nEinige davon k\u00f6nnen per Touch gesteuert werden.
\n(Eine Doku zu allen Objekten ist in der Library dabei)<\/p>\n
> Text
\n> Panel
\n> Button
\n> LED
\n> Label
\n> Checkbox
\n> Radio-Button
\n> Gauge
\n> Slider
\n> Select-Button
\n> Listbox
\n> DropDown-Box
\n> IntEdit
\n> FloatEdit
\n> Picture
\n> Graph<\/p>\n
Beispiel :<\/strong><\/p>\n
\/\/--------------------------------------------------------------\r\n\/\/ File     : main.c\r\n\/\/ Datum    : 17.01.2015\r\n\/\/ Version  : 1.0\r\n\/\/ Autor    : UB\r\n\/\/ EMail    : mc-4u(@)t-online.de\r\n\/\/ Web      : www.mikrocontroller-4u.de\r\n\/\/ CPU      : STM32F429\r\n\/\/ IDE      : CooCox CoIDE 1.7.4\r\n\/\/ GCC      : 4.7 2012q4\r\n\/\/ Module   : CMSIS_BOOT, M4_CMSIS_CORE\r\n\/\/ Funktion : Demo der SGUI\r\n\/\/ Hinweis  : Diese zwei Files muessen auf 8MHz stehen\r\n\/\/              \"cmsis_boot\/stm32f4xx.h\"\r\n\/\/              \"cmsis_boot\/system_stm32f4xx.c\"\r\n\/\/ In Configuration diese Define hinzuf\u00fcgen :\r\n\/\/ \"STM32F429_439xx\" , \"__ASSEMBLY__\" , \"USE_STDPERIPH_DRIVER\"\r\n\/\/--------------------------------------------------------------\r\n\r\n#include \"main.h\"\r\n#include \"stm32_ub_sgui.h\"\r\n\r\nSLABEL_t *label;\r\nSBUTTON_t *btn1, *btn2;\r\n\r\n\/\/--------------------------------------------------------------\r\nvoid create_Window1(void);\r\nvoid create_Window2(void);\r\n\/\/--------------------------------------------------------------\r\nvoid btn1_fkt(bool aktiv);\r\nvoid btn2_fkt(bool aktiv);\r\n\/\/--------------------------------------------------------------\r\n\r\n\/\/--------------------------------------------------------------\r\n\/\/ Demoprogramm der \"Simple-GUI\"\r\n\/\/ es werden zwei Fenster erzeugt mit jeweil einem Button\r\n\/\/ mit den Buttons kann zwischen den Fenstern gewechselt werden\r\n\/\/--------------------------------------------------------------\r\nint main(void)\r\n{\r\n  SystemInit(); \/\/ Quarz Einstellungen aktivieren\r\n\r\n  \/\/ init der SGUI\r\n  SGUI_Init();\r\n\r\n  \/\/ Fenster erzeugen\r\n  create_Window1();\r\n  create_Window2();\r\n\r\n  \/\/ Window-1 anzeigen\r\n  SGUI_WindowShow(1);\r\n\r\n  while(1)\r\n  {\r\n\t  SGUI_Do(); \/\/ SGUI bearbeiten\r\n  }\r\n}\r\n\r\n\/\/--------------------------------------------------------------\r\nvoid create_Window1(void)\r\n{\r\n  \/\/ ein Window erstellen (Nr. 1)\r\n  SGUI_WindowCreateMain(1);\r\n  \/\/ ein Label platzieren und beschriften\r\n  label=SGUI_LabelCreate(10,10,220,50);\r\n  SGUI_LabelSetText(label,\"Window-1\");\r\n  \/\/ einen Button platzieren und beschriften\r\n  btn1=SGUI_ButtonCreate(10,100,100,50);\r\n  SGUI_ButtonSetText(btn1,\"Btn-1\");\r\n  \/\/ einen Handler fuer den Button einrichten\r\n  SGUI_ButtonSetHandler(btn1,btn1_fkt);\r\n}\r\n\/\/--------------------------------------------------------------\r\nvoid create_Window2(void)\r\n{\r\n  \/\/ ein Window erstellen (Nr. 2)\r\n  SGUI_WindowCreateMain(2);\r\n  \/\/ ein Label platzieren und beschriften\r\n  label=SGUI_LabelCreate(10,10,220,50);\r\n  SGUI_LabelSetText(label,\"Window-2\");\r\n  \/\/ einen Button platzieren und beschriften\r\n  btn2=SGUI_ButtonCreate(10,100,100,50);\r\n  SGUI_ButtonSetText(btn2,\"Btn-2\");\r\n  \/\/ einen Handler fuer den Button einrichten\r\n  SGUI_ButtonSetHandler(btn2,btn2_fkt);\r\n}\r\n\r\n\/\/--------------------------------------------------------------\r\nvoid btn1_fkt(bool aktiv) {\r\n  \/\/ beim verlassen von Button-1 das Window-2 anzeigen\r\n  if(aktiv==false) SGUI_WindowShow(2);\r\n}\r\n\/\/--------------------------------------------------------------\r\nvoid btn2_fkt(bool aktiv) {\r\n  \/\/ beim verlassen von Button-2 das Window-1 anzeigen\r\n  if(aktiv==false) SGUI_WindowShow(1);\r\n}\r\n<\/pre>\n
Hier die komplette Doku als PDF-File<\/strong> (Danke an Michael daf\u00fcr) :<\/p>\n
SGUI_13<\/a><\/p>\n
Hier die Library zum\u00a0Download :<\/strong><\/p>\n
sgui_f429_v103<\/a><\/p>\n
Hier der komplette CooCox-Projektordner zum\u00a0Download : (Hello-World)<\/strong><\/p>\n
Demo_F429_27<\/a><\/p>\n
Hier der komplette CooCox-Projektordner zum\u00a0Download : (Demo aller Objekte)<\/strong><\/p>\n
Demo_F429_27b<\/a><\/p>\n
\n
53 Antworten auf 27-Simple_GUI-Library (STM32F429)<\/em><\/h3>\n
    \n
  1. \n
    \n
    \"\"Cortex-Einsteiger<\/cite> sagt:<\/span><\/div>\n
    <\/p>\n
    17. Januar 2015 um 17:25<\/div>\n
    <\/p>\n
    \n
    wow, das ist wirklich cool!
    \nAllerdings muss man sich dort definitiv mehr einlesen und probieren als in andere Projekte, nur includen und loslegen ist da nicht m\u00f6glich.<\/p>\n
    Ist die gr\u00fcne Led PG13 unabh\u00e4ngig von der blinkenden Led auf dem Display?
    \nDie sind n\u00e4mlich je nach Zustand nicht synchron.<\/p>\n<\/div>\n<\/div>\n
    <\/p>\n