Welcome to GUI-lite

<p align="center"> </p> <p align="center"> </p> <p align="center">The smallest header-only GUI library (4 KLOC) for all platforms.</p> <p align="center"> </p>

• 中文

Lightweight

• ✂️Small: 4,000+ lines of C++ code, zero dependency, header-only(GuiLite.h)

• ⚡Fast: High Rendering performance, even work on MCU

• 👫🏻Compatible: Work smoothly with 3rd party frameworks(Qt/MFC/Winform/Cocoa/Web)

• ⚙️️Hardware Minimum Requirements:

  Processor	Disk/ROM space	Memory
  24 MHZ	29 KB	9 KB

Cross platform

• Supported OSes: iOS/macOS/WatchOS, Android, Linux, Windows, RTOS... or MCU without OS
• Supported languages: C/C++, Swift, Java, Javascript, C#, Golang...
• Supported 3rd party libraries: Qt, MFC, Winforms, CoCoa...

Hero features

• ☁️Cloud + IoT Solution: master your IoT business all over the world
• 🔣Multi-language, supports UTF-8;📀Playback Video
• 🔨Toolkit for building font/image resources
• 📐Layout GUI WYSIWYG
• 📊Code Telemetry and Analysis in real time
• 📦Supports 3D and Web
• 🐋Run in docker with a single command: sudo docker run -it --privileged -v /dev:/dev-share idea4good/gui-lite:latest bash /run.sh

Easy to learn and support

Even a C beginner could master GUI-lite quickly. The source code only uses basic C++ features (class, virtual function). We chose C++ as it could make the code size significantly smaller and easier to read.

• 📚Documentation
  • How to use GUI-lite?
  • Design specification
  • How to Layout widgets?
  • How to build unicode font/bitmap resource?
  • How to switch theme?
  • How to dispatch messages?
  • UML chart of GUI-lite core
• 📈Learning steps
  1. Build GUI-lite library
  2. Build/Debug HelloXXX demos
  3. Read/Modify HelloXXX/UIcode/UIcode.cpp code
  4. Read/Modify widgets code
  5. Read/Modify core code
  6. Build your GUI framework
• 📞Reach out us if you have any questions you are welcomed to our developer family.
• 🀄️Mirror repository in China

Demo wall

• Zero dependency, 100% build pass & runnable
• Click the demo you like, and run it on your hardware
• Most of the demos have about 100 lines of UI code, the code repository is GuiLiteSamples

---

MCU platform

---

<table> <tr> <td align="center"><a href="https://github.com/idea4good/GuiLiteSamples/tree/master/Hello3D"> _{<b>3D on STM32</b>}</a> <td align="center"><a href="https://github.com/idea4good/GuiLiteSamples/tree/master/HelloWave"> _{<b>Wave on STM32</b>}</a> <td align="center"><a href="https://github.com/idea4good/GuiLiteSamples/tree/master/HelloParticle"> _{<b>Particle on STM32</b>}</a> <td align="center"><a href="https://github.com/idea4good/GuiLiteSamples/tree/master/HelloStar"> _{<b>Star on STM32</b>}</a> </tr> <tr> <td align="center"><a href="https://github.com/idea4good/GuiLiteSamples/tree/master/Hello3Dwave"> _{<b>3D wave on STM32</b>}</a> <td align="center"><a href="https://github.com/idea4good/GuiLiteSamples/tree/master/HelloNoTouch"> _{<b>Keyboard on STM32</b>}</a> <td align="center"><a href="https://github.com/idea4good/GuiLiteSamples/tree/master/HelloMario"> _{<b>Mario on STM32</b>}</a> <td align="center"><a href="https://github.com/idea4good/GuiLiteSamples/tree/master/HelloCircle"> _{<b>3D circle on STM32</b>}</a> </tr> <tr> <td align="center"><a href="https://github.com/idea4good/GuiLiteSamples/tree/master/Hello3Ddonut"> _{<b>3D donut on STM32</b>}</a> <td align="center"><a href="https://github.com/idea4good/GuiLiteSamples/tree/master/HelloTimer"> _<b>Timer</b></a> <td align="center"><a href="https://github.com/idea4good/GuiLiteSamples/tree/master/HelloMolecule"> _{<b>Molecule move</b>}</a> <td align="center"><a href="https://github.com/idea4good/GuiLiteSamples/tree/master/HelloPendulum"> _{<b>Pendulum effect</b>}</a> </tr> </table>

---

IoT feature

---

<table> <tr> <td align="center"><a href="https://github.com/idea4good/GuiLiteSamples/tree/master/HostMonitor"> _{<b>Monitor IoT device on cloud</b>}</a> <td align="center"><a href="https://github.com/idea4good/GuiLiteSamples/tree/master/HostMonitor"> _{<b>Code Telemetry & Analysis in real time</b>}</a> </tr> <tr> <td align="center"><a href="https://github.com/idea4good/GuiLiteSamples/tree/master/HelloAzureIoT"> _{<b>Track IoT device over the world</b>}</a> </tr> </table>

---

Multi-language, Design tool and video

---

<table> <tr> <td align="center"><a href="https://github.com/idea4good/GuiLiteSamples/tree/master/HelloFont"> _{<b>Lattice Font</b>}</a> <td align="center"><a href="https://github.com/idea4good/GuiLiteSamples/tree/master/HelloFreetype"> _{<b>Freetype Font</b>}</a> </tr> <tr> <td align="center"><a href="https://github.com/idea4good/GuiLitePreviewer"> _{<b>Layout GUI</b>}</a> <td align="center"><a href="https://github.com/idea4good/GuiLiteSamples/tree/master/HelloJPG"> _{<b>Render JPG file quickly</b>}</a> </tr> <tr> <td align="center"><a href="https://github.com/idea4good/GuiLiteSamples/tree/master/HelloFFmpeg"> _{<b>Play video with FFmpeg</b>}</a> </tr> </table>

---

Widgets & Controller

---

<table> <tr> <td align="center"><a href="https://github.com/idea4good/GuiLiteSamples/tree/master/HelloGuiLite"> _{<b>Emulate Windows UI</b>}</a> <td align="center"><a href="https://github.com/idea4good/GuiLiteSamples/tree/master/HelloScroll"> _{<b>Scroll widget</b>}</a> </tr> <tr> <td align="center"><a href="https://github.com/idea4good/GuiLiteSamples/tree/master/HelloWidgets"> _{<b>How to use widgets</b>}</a> <td align="center"><a href="https://github.com/idea4good/GuiLiteSamples/tree/master/HelloNets"> _{<b>3D Nets on Windows/Linux</b>}</a> </tr> <tr> <td align="center"><a href="https://github.com/idea4good/GuiLiteSamples/tree/master/HelloTransparent"> _{<b>Transparent dialog</b>}</a> <td align="center"><a href="https://github.com/idea4good/GuiLiteSamples/tree/master/HelloSlide"> _{<b>Swipe view</b>}</a> </tr> </table>

---

Cross platform

---

<table> <tr> <td align="center"><a href="https://github.com/idea4good/GuiLiteSamples/tree/master/HostMonitor"> _{<b>HostMonitor on Windows</b>}</a> <td align="center"><a href="https://github.com/idea4good/GuiLiteSamples/tree/master/HostMonitor"> _{<b>HostMonitor on Mac</b>}</a> <td align="center"><a href="https://github.com/idea4good/GuiLiteSamples/tree/master/HostMonitor"> _{<b>HostMonitor on Android</b>}</a> </tr> <tr> <td align="center"><a href="https://github.com/idea4good/GuiLiteSamples/tree/master/HostMonitor"> _{<b>HostMonitor on Windows Mixed Reality</b>}</a> <td align="center"><a href="https://github.com/idea4good/GuiLiteSamples/tree/master/HostMonitor"> _{<b>HostMonitor on Linux</b>}</a> <td align="center"><a href="https://github.com/idea4good/GuiLiteWeb"> _{<b>3D on Web</b>}</a> </tr> <tr> <td align="center"><a href="https://github.com/idea4good/GuiLiteWeb"> _{<b>3D on Web</b>}</a> <td align="center"><a href="https://github.com/idea4good/GuiLiteSamples/tree/master/HostMonitor"> _{<b>HostMonitor on iPhone</b>}</a> <td align="center"><a href="https://github.com/idea4good/GuiLiteWeb"> _{<b>How display work</b>}</a> </tr> </table>

---

Apple platform

---

<table> <tr> <td align="center"><a href="https://github.com/idea4good/GuiLiteSamples/tree/master/Hello3D"> _{<b>3D on Apple Watch</b>}</a> <td align="center"><a href="https://github.com/idea4good/GuiLiteSamples/tree/master/HelloWave"> _{<b>Wave on Apple Watch</b>}</a> <td align="center"><a href="https://github.com/idea4good/GuiLiteSamples/tree/master/HelloParticle"> _{<b>Particle on iPhone</b>}</a> </tr> </table>

📞Community Channel

Thanks for the help from the community, you all make GUI-lite better! And welcome to any new friend to join us.

• @Twitter
• QQ group:

<table> <tr> <td align="center"> _{<b>開發群🔑：875721211</b>}</a> </tr>