README.md · 376262974/GuiLite

# Welcome to GUI-lite

 <img src="documents/logo.png" alt="Logo"/>


 <img src="https://img.shields.io/badge/build-passing-brightgreen.svg">
 <img src="https://img.shields.io/badge/platform-Windows%20%7C%20Linux%20%7C%20macOS%20%7C%20iOS%20%7C%20Android%20%7C%20MCU-brightgreen.svg">
 <img src="https://img.shields.io/badge/architecture-amd64%20%7C%20arm%20%7C%20arm64-blue.svg">
 <img src="https://img.shields.io/badge/license-Apache%202-blue.svg">

The smallest header-only GUI library (4 KLOC) for all platforms.

 <img src="documents/WhyGuiLite.png" alt="Why GuiLite"/>

- [中文](README_zh.md)

## 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](https://github.com/idea4good/GuiLiteToolkit) for building font/image resources
- 📐[Layout GUI WYSIWYG](https://github.com/idea4good/GuiLitePreviewer)
- 📊Code Telemetry and Analysis in real time
- 📦Supports 3D and [Web](https://github.com/idea4good/GuiLiteWeb)
- 🐋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?](documents/HowToUse.md)
    - [Design specification](documents/HowToWork.md)
    - [How to Layout widgets?](documents/HowLayoutWork.md)
    - [How to build unicode font/bitmap resource?](https://github.com/idea4good/GuiLiteToolkit)
    - [How to switch theme?](https://gitee.com/idea4good/GuiLiteSamples/blob/master/HostMonitor/UIcode/source/resource/resource.cpp)
    - [How to dispatch messages?](documents/HowMessageWork.md)
    - [UML chart of GUI-lite core](documents/UML.md)
- 📈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](#community-channel) if you have any questions you are welcomed to our developer family.
- 🌐[GitHub link](https://github.com/idea4good/GuiLite)

## 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, code repository is [here.](https://gitee.com/idea4good/GuiLiteSamples)
---
### MCU platform
---
<table>
 <tr>
 <td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/Hello3D"><img src="documents/Hello3D.gif" width="200px;"/> 3D on STM32</a>
 <td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HelloWave"><img src="documents/HelloWave.gif" width="200px;"/> Wave on STM32</a>
 <td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HelloParticle"><img src="documents/HelloParticle.gif" width="200px;"/> Particle on STM32</a>
 <td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HelloStar"><img src="documents/HelloStar.gif" width="200px;"/> Star on STM32</a>
 </tr>
 <tr>
 <td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/Hello3Dwave"><img src="documents/Hello3Dwave.gif" width="200px;"/> 3D wave on STM32</a>
 <td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HelloNoTouch"><img src="documents/HelloNoTouch.gif" width="200px;"/> Keyboard on STM32</a>
 <td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HelloMario"><img src="documents/HelloMario.gif" width="200px;"/> Mario on STM32</a>
 <td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HelloCircle"><img src="documents/HelloCircle.gif" width="200px;"/> 3D circle on STM32</a>
 </tr>
 <tr>
 <td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/Hello3Ddonut"><img src="documents/Hello3Ddonut.gif" width="200px;"/> 3D donut on STM32</a>
 <td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HelloTimer"><img src="documents/HelloTimer.gif" width="200px;"/> Timer</a>
 <td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HelloMolecule"><img src="documents/HelloMolecule.gif" width="200px;"/> Molecule move</a>
 <td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HelloPendulum"><img src="documents/HelloPendulum.gif" width="200px;"/> Pendulum effect</a>
 </tr>
</table>

---
### IoT feature
---
<table>
 <tr>
 <td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HostMonitor"><img src="documents/data_on_cloud.png" width="600px;"/> Monitor IoT device on cloud</a>
 <td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HostMonitor"><img src="documents/BuildInfo.png" width="600px;"/> Code Telemetry & Analysis in real time</a>
 </tr>
 <tr>
 <td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HelloAzureIoT"><img src="documents/HelloAzureIoT.jpg" width="600px;"/> Track IoT device over the world</a>
 </tr>
</table>

---
### Multi-language, Design tool and video
---
<table>
 <tr>
 <td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HelloFont"><img src="documents/HelloFont.gif" width="600px;"/> Lattice Font</a>
 <td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HelloFreetype"><img src="documents/HelloFreetype.gif" width="600px;"/> Freetype Font</a>
 </tr>
 <tr>
 <td align="center"><a href="https://github.com/idea4good/GuiLitePreviewer"><img src="documents/Previewer.gif" width="600px;"/> Layout GUI</a>
 <td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HelloJPG"><img src="documents/HelloJPG.gif" width="600px;"/> Render JPG file quickly</a>
 </tr>
 <tr>
 <td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HelloFFmpeg"><img src="documents/HelloFFmpeg.jpg" width="600px;"/> Play video with FFmpeg</a>
 </tr>
</table>

---
### Widgets & Controller
---
<table>
 <tr>
 <td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HelloGuiLite"><img src="documents/HelloGuiLite.gif" width="600px;"/> Emulate Windows UI</a>
 <td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HelloScroll"><img src="documents/HelloScroll.gif" width="600px;"/> Scroll widget</a>
 </tr>
 <tr>
 <td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HelloWidgets"><img src="documents/HelloWidgets.gif" width="600px;"/> How to use widgets</a>
 <td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HelloNets"><img src="documents/HelloNets-pc.gif" width="600px;"/> 3D Nets on Windows/Linux</a>
 </tr>
 <tr>
 <td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HelloTransparent"><img src="documents/HelloTransparent.gif" width="600px;"/> Transparent dialog</a>
 <td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HelloSlide"><img src="documents/HelloSlide.gif" width="600px;"/> Swipe view</a>
 </tr>
</table>

---
### Cross platform
---
<table>
 <tr>
 <td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HostMonitor"><img src="documents/HostMonitor.gif" width="300px;"/> HostMonitor on Windows</a>
 <td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HostMonitor"><img src="documents/Mac.gif" width="300px;"/> HostMonitor on Mac</a>
 <td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HostMonitor"><img src="documents/Android.gif" width="300px;"/> HostMonitor on Android</a>
 </tr>
 <tr>
 <td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HostMonitor"><img src="documents/WinMR.gif" width="300px;"/> HostMonitor on Windows Mixed Reality</a>
 <td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HostMonitor"><img src="documents/Linux.gif" width="300px;"/> HostMonitor on Linux</a>
 <td align="center"><a href="https://github.com/idea4good/GuiLiteWeb"><img src="documents/GuiLite3D.gif" width="300px;"/> 3D on Web</a>
 </tr>
 <tr>
 <td align="center"><a href="https://github.com/idea4good/GuiLiteWeb"><img src="documents/GuiLiteCube.gif" width="300px;"/> 3D on Web</a>
 <td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HostMonitor"><img src="documents/iOS.gif" width="300px;"/> HostMonitor on iPhone</a>
 <td align="center"><a href="https://github.com/idea4good/GuiLiteWeb"><img src="documents/GuiLiteGraphic.gif" width="300px;"/> How display work</a>
 </tr>
</table>

---
### Apple platform
---
<table>
 <tr>
 <td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/Hello3D"><img src="documents/iWatch.hello3D.gif" width="300px;"/> 3D on Apple Watch</a>
 <td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HelloWave"><img src="documents/iWatch.helloWave.gif" width="300px;"/> Wave on Apple Watch</a> 
 <td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HelloParticle"><img src="documents/iOS.particle.gif" width="300px;"/> Particle on iPhone</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**](https://twitter.com/idea4good)
- QQ group code:
<table>
 <tr>
 <td align="center"><a href="https://jq.qq.com/?_wv=1027&k=tFsZvoeQ"><img src="documents/qq.group-4.jpg" width="240px;"/> 開發群🔑：938682319</a>
 </tr>
</table>

376262974/GuiLite

简介

发行版

贡献者

近期动态

376262974/GuiLite .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

376262974/GuiLite