lsm/GuiLite
1
0
Fork 0
mirror of https://gitee.com/idea4good/GuiLite.git synced 2025-06-28 13:34:07 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

redesign readme

Browse Source
This commit is contained in:
idea4good 2019-12-13 12:19:59 +08:00
parent a5b5ebbc82
commit 5110fb4e34
14 changed files with 198 additions and 214 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

206
README.md
View File

@ -1,128 +1,120 @@
# Welcome to GuiLite
<p align="center"> <p align="center">
<img src="documents/GuiLiteCube.gif" alt="Image" width="320" height="304"/> <img src="documents/logo.png" alt="Logo"/>
</p>
<p align="center">
<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">
</p>
<p align="center">Small-Fast-Embeddable GUI library(5 KLOC) for all platforms</p>
<p align="center">
<img src="documents/WhyGuiLite.png" alt="Why GuiLite"/>
</p> </p>
# GuiLite - The smallest GUI library
![badge_build](https://img.shields.io/badge/build-passing-brightgreen.svg) ![badge_docker](https://img.shields.io/badge/docker%20build-passing-brightgreen.svg) ![badge_platform](https://img.shields.io/badge/platform-Windows%20%7C%20Linux%20%7C%20macOS%20%7C%20iOS%20%7C%20Android%20%7C%20MCU-brightgreen.svg) ![badge_lincense](https://img.shields.io/badge/license-Apache%202-blue.svg) ![badge_lincense](https://img.shields.io/badge/architecture-amd64%20%7C%20arm%20%7C%20arm64-blue.svg)
- [中文](README_zh.md) - [中文](README_zh.md)
- [✨Features](#features)
- [🚀Quick Launch](#quick-launch) ## Lightweight
- [📚Documents](#documents) - ✂️Small: 5,000 lines of C++ code; 2 files: GuiLite.h, GuiLite.cpp
- [📈How to Learn?](#how-to-learn) - ⚡Fast: Render GUI within one invoking, independent of any OS & 3rd party library
- [📀Videos](#videos) - 💉Inject: Run inside Qt/MFC/Winform/Cocoa/Web - Keep legacy Qt/MFC code reusable
- [📞Community Channel](#community-channel)
***
## Introduction
GuiLite is the smallest GUI library with 5000 lines of code, could run on **all platforms**(e.g, iOS/macOS/WathOS, Android, Linux, Windows, Docker and MCU without OS), and work with **many languages**(e.g. Swift, Java, Javascript, C#, Golang).
- ✂️Small: 5,000 lines of C++ code, could be merged into 1 header & 1 source file(GuiLite.h/GuiLite.cpp) - Easy to [build & port](documents/HowToBuild.md)
- ⚡Fast: Render GUI within one invoking, independent of any OS and any third party library - Make GUI run quickly and smoothly
- 💉Inject: Run inside Qt/MFC/Winform/Cocoa/Web - Keep Qt/MFC code reusable, and speed it up by local GuiLite-optimization
- ⚙️️Hardware Minimum Requirment: - ⚙️️Hardware Minimum Requirment:
| Processor | Disk/ROM space | Memory | | Processor | Disk/ROM space | Memory |
| --- | --- | --- | | --- | --- | --- |
| 24 MHZ | 29 KB | 9 KB | | 24 MHZ | 29 KB | 9 KB |
## 🔥New feature：Apple Watch ## Cross platforms
Run GuiLite both on MCU and Apple Watch: Application base on GuiLite could run on **all platforms**(e.g, iOS/macOS/WathOS, Android, Linux, Windows, Docker and MCU without OS), and work with **many languages**(e.g. Swift, Java, Javascript, C#, Golang).
| MCU | Apple Watch | ## Useful features
| --- | --- | - 🔣Multi-language, support UTF-8
| ![Hello3D](documents/Hello3D.gif) | ![iWatch.hello3D](documents/iWatch.hello3D.gif) | - 🔨[Toolkit](https://github.com/idea4good/GuiLiteToolkit) for building font/image resource
| ![MCU](documents/HelloWave.gif) | ![iWatch.helloWave](documents/iWatch.helloWave.gif) | - 📐[Layout GUI WYSIWYG](https://github.com/idea4good/GuiLitePreviewer)
- ☁️Cloud + IoT Solution
- 📊Code Telemetry & Analysis in real time
- 📦Support 3D & [Web](https://github.com/idea4good/GuiLiteWeb)
- 🐋Run docker with single command: `sudo docker run -it --privileged -v /dev:/dev-share idea4good/gui-lite:latest bash /run.sh`
## ✨Features ## Easy to learn & Full support
### ⚔️Cross platform Even C beginner, could master GuiLite quickly. The source code only use basic C++ feature(e,g: class, virtual function). We choose C++ for it could make the code size small significantly, and easy to read.
| ARM Linux | STM32 Without OS | - 📚Documents
| --- | --- |
| ![ARM Linux](documents/Linux.gif) | ![MCU](documents/HelloParticle.gif) ![MCU](documents/HelloWave.gif) |
| Windows Mixed Reality | Android |
| --- | --- |
| ![Win MR](documents/WinMR.gif) | ![Android](documents/Android.gif) |
| macOS | iOS & Aplle Watch |
| --- | --- |
| ![macOS](documents/Mac.gif) | ![iOS.hostMonitor](documents/iOS.gif) ![iOS.particle](documents/iOS.particle.gif) ![iWatch.helloWave](documents/iWatch.helloWave.gif) |
***
### 🔍GuiLite previewer(WYSIWYG extension for GuiLite)
[GuiLite Previewer](https://github.com/idea4good/GuiLitePreviewer) is a Visual Studio Code extension, could extract GUI information from C++ code and preview GUI at preview page(What you see is what you get)
![GuiLitePreviewer](documents/Previewer.gif)
***
### 😎Gorgeous UI
![HostMonitor](documents/HostMonitor.gif)![HelloNets-pc](documents/HelloNets-pc.gif)
***
### 🔣Multi-language:
![unicode](documents/unicode.jpg)
***
### 🌐IoT Solution & 📊Code Telemetry
- Report build activities to cloud:<br>![BuildInfo](documents/BuildInfo.png)
- Sync running data to cloud:<br>![DataOnCloud](documents/data_on_cloud.png)
- ⚠️To stop telemetry, remove script files(e,g: sync_build.bat .sync.sh .sync_build.sh)
***
### 🐋Support Docker
We build GuiLite demo as docker image, you can update/deploy/run the latest GuiLite demo on your device with single command below:
- `sudo docker run -it --privileged -v /dev:/dev-share idea4good/gui-lite:latest bash /run.sh`
***
## 📦3D
- ![GuiLiteGraphic](documents/GuiLite3D.gif) ![Hello3D](documents/Hello3D.gif)
- Run GuiLite Samples[(HelloParticle, HelloWave)](https://gitee.com/idea4good/GuiLiteSamples) on Web and 3D scenario, [source code here](https://github.com/idea4good/GuiLiteWeb/blob/master/CubeEx/main.js)
- Run GuiLite-Sample-Hello3D on MCU and Windows/Linux/Qt platform
***
## 🚀Quick Launch
GuiLite is only a framework, could not create UI by itself. In order to show how to build UI App with it, We provide some samples for you.
- Sample code [here](https://github.com/idea4good/GuiLiteSamples)
- Sample introduction:
| Sample name | Platform | Description | Build guidance | Diffculty level |
| --- | --- | --- | --- | --- |
| HelloParticle | Windows, Linux, STM32F103, STM32F429 | Show how to develop particle effect | [Build](https://github.com/idea4good/GuiLiteSamples/blob/master/HelloParticle/README.md) | ★ |
| HelloStar | Windows, Linux, STM32F103, STM32F429 | Show how to develop star field effect | [Build](https://github.com/idea4good/GuiLiteSamples/blob/master/HelloStar/README.md) | ★ |
| Hello3D | Windows, Linux, STM32F103 | Lightweight(MCU level) 3D engine base on GuiLite | [Build](https://github.com/idea4good/GuiLiteSamples/blob/master/Hello3D/README.md) | ★★ |
| HelloNets | Windows, Linux, STM32F103 | Show how to build physics App with GuiLite | [Build](https://github.com/idea4good/GuiLiteSamples/blob/master/HelloNets/README.md) | ★★ |
| HelloGuiLite | Windows, Linux | Show how to Initialize UI, load resource, layout UI | [Build](https://github.com/idea4good/GuiLiteSamples/blob/master/HelloGuiLite/README.md) | ★★ |
| HelloWidgets | Windows, Linux | Show how to use GuiLite widgets | [Build](https://github.com/idea4good/GuiLiteSamples/blob/master/HelloWidgets/README.md) | ★★ |
| HelloMario | Windows, Linux, STM32F103, STM32F429 | Show how to develop multi-layer UI system | [Build](https://github.com/idea4good/GuiLiteSamples/blob/master/HelloMario/README.md) | ★★ |
| HelloNavigation | Windows, Linux, STM32F103, STM32F429 | Show how to navigate/click widgets by hard button in non-touch GUI scenario | [Build](https://github.com/idea4good/GuiLiteSamples/blob/master/HelloNavigation/README.md) | ★★|
| HelloFont | Windows, Linux | Show how to use multi-language feature(UTF-8) | [Build](https://github.com/idea4good/GuiLiteSamples/blob/master/HelloFont/README.md) | ★★ |
| HelloAnimation | Windows, Linux | Show how to make animation | [Build](https://github.com/idea4good/GuiLiteSamples/blob/master/HelloAnimation/README.md) | ★★ |
| HelloSlide | Windows, Linux | Show how to use sliding pages | [Build](https://github.com/idea4good/GuiLiteSamples/blob/master/HelloSlide/README.md) | ★★★ |
| HelloWave | Windows, Linux, STM32F103, STM32F429 | Show how to use wave widget | [Build](https://github.com/idea4good/GuiLiteSamples/blob/master/HelloWave/README.md) | ★★★ |
| HostMonitor | iOS, Mac, Android, Windows, Linux | Show how to build complex UI for all platforms | [Build](https://github.com/idea4good/GuiLiteSamples/blob/master/HostMonitor/README.md) | ★★★★ |
## 📚Documents
GuiLite is the smallest and simplest GUI library.
1. Just 5,000 line C++ code
2. Only use basic C++ feature(class, virtual function), no complex syntax
3. All rendering base on draw_pixel, no algorithm
4. Full documents and small live demos for reference
- [Design specification](documents/HowToWork.md) - [Design specification](documents/HowToWork.md)
- [How to build & port?](documents/HowToBuild.md) - [How to build & port?](documents/HowToBuild.md)
- [How to Layout widgets?](documents/HowLayoutWork.md) - [How to Layout widgets?](documents/HowLayoutWork.md)
- [How to build unicode font/bitmap resource?](https://github.com/idea4good/GuiLiteToolkit) - [How to build unicode font/bitmap resource?](https://github.com/idea4good/GuiLiteToolkit)
- [How to switch theme?](https://github.com/idea4good/GuiLiteSamples/blob/master/HostMonitor/UIcode/source/resource/resource.cpp) - [How to switch theme?](https://gitee.com/idea4good/GuiLiteSamples/blob/master/HostMonitor/UIcode/source/resource/resource.cpp)
- [How to dispatch messages?](documents/HowMessageWork.md) - [How to dispatch messages?](documents/HowMessageWork.md)
- [UML chart of GuiLite core](documents/UML.md) - [UML chart of GuiLite core](documents/UML.md)
- How GuiLite multi-layers work? - 📈Learning steps
- ![GuiLiteGraphic](documents/GuiLiteGraphic.gif) 1. Build GuiLite library
- [Full video](https://www.youtube.com/watch?v=QzZJnU5KmDQ) 2. Build/Run HelloXXX demos
- [Tutorial Source code](https://github.com/idea4good/GuiLiteWeb/blob/master/Graphic/main.js) 3. Read/Modify `HelloXXX/UIcode/UIcode.cpp` code
4. Read/Modify `gui` code
5. Read/Modify `core` code
6. Build your UI framework
- 📞[Reach out us](#community-channel) if you have any question, and welcome to our devloper family.
- 🌐[GitHub link](https://github.com/idea4good/GuiLite)
## 📈How to learn? ## Demo wall
1. Build/Run GuiLite library <table>
2. Build/Run HelloXXX demos <tr>
3. Read/Modify `HelloXXX/UIcode/UIcode.cpp` code <td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/Hello3D"><img src="documents/Hello3D.gif" width="200px;"/><br /><sub><b>3D on STM32</b></sub></a>
4. Read/Modify `gui` code <td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HelloWave"><img src="documents/HelloWave.gif" width="200px;"/><br /><sub><b>Wave on STM32</b></sub></a>
5. Read/Modify `core` code <td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HelloParticle"><img src="documents/HelloParticle.gif" width="200px;"/><br /><sub><b>Particle on STM32</b></sub></a>
6. Build your UI framework <td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HelloStar"><img src="documents/HelloStar.gif" width="200px;"/><br /><sub><b>Star on STM32</b></sub></a>
</tr>
<tr>
<td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HelloNets"><img src="documents/HelloNets-mcu.gif" width="200px;"/><br /><sub><b>Nets on STM32</b></sub></a>
<td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HelloNoTouch"><img src="documents/HelloNoTouch.gif" width="200px;"/><br /><sub><b>Keyboard on STM32</b></sub></a>
<td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HelloMario"><img src="documents/HelloMario.gif" width="200px;"/><br /><sub><b>Mario on STM32</b></sub></a>
<td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HelloSlide"><img src="documents/HelloSlide.gif" width="200px;"/><br /><sub><b>Swipe view</b></sub></a>
</tr>
<tr>
<td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/Hello3D"><img src="documents/iWatch.hello3D.gif" width="200px;"/><br /><sub><b>3D on Apple Watch</b></sub></a>
<td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HelloWave"><img src="documents/iWatch.helloWave.gif" width="200px;"/><br /><sub><b>Wave on Apple Watch</b></sub></a>
<td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HelloParticle"><img src="documents/iOS.particle.gif" width="200px;"/><br /><sub><b>Particle on iPhone</b></sub></a>
<td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HostMonitor"><img src="documents/iOS.gif" width="200px;"/><br /><sub><b>HostMonitor on iPhone</b></sub></a>
</tr>
<tr>
<td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HelloAnimation"><img src="documents/HelloAnimation.gif" width="200px;"/><br /><sub><b>Animation on STM32</b></sub></a>
</tr>
</table>
## 📀Videos <table>
- [GuiLite introduction](https://www.youtube.com/watch?v=grqXEz3bdC0) <tr>
- [3D GuiLite](https://v.youku.com/v_show/id_XMzYxNTE3MTI0MA) <td align="center"><a href="https://github.com/idea4good/GuiLitePreviewer"><img src="documents/Previewer.gif" width="600px;"/><br /><sub><b>Layout GUI</b></sub></a>
- [GuiLite + STM32](https://v.youku.com/v_show/id_XNDAwNzM5MTM3Ng) <td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HelloGuiLite"><img src="documents/HelloGuiLite.gif" width="600px;"/><br /><sub><b>Run Windows on Linux</b></sub></a>
</tr>
<tr>
<td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HelloFont"><img src="documents/HelloFont.gif" width="600px;"/><br /><sub><b>Multi-language</b></sub></a>
<td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HostMonitor"><img src="documents/BuildInfo.png" width="600px;"/><br /><sub><b>Code Telemetry & Analysis in real time</b></sub></a>
</tr>
</table>
## Mirror repository <table>
[Gitee in China](https://gitee.com/idea4good/GuiLite) <tr>
<td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HelloNets"><img src="documents/HelloNets-pc.gif" width="300px;"/><br /><sub><b>3D Nets on Windows/Linux</b></sub></a>
<td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HelloWidgets"><img src="documents/HelloWidgets.gif" width="300px;"/><br /><sub><b>How to use widgets</b></sub></a>
<td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HostMonitor"><img src="documents/unicode.jpg" width="300px;"/><br /><sub><b>Multi-language</b></sub></a>
</tr>
<tr>
<td align="center"><a href="https://github.com/idea4good/GuiLiteWeb"><img src="documents/GuiLite3D.gif" width="300px;"/><br /><sub><b>3D on Web</b></sub></a>
<td align="center"><a href="https://github.com/idea4good/GuiLiteWeb"><img src="documents/GuiLiteCube.gif" width="300px;"/><br /><sub><b>3D on Web</b></sub></a>
<td align="center"><a href="https://github.com/idea4good/GuiLiteWeb"><img src="documents/GuiLiteGraphic.gif" width="300px;"/><br /><sub><b>Tutorial on Web</b></sub></a>
</tr>
<tr>
<td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HostMonitor"><img src="documents/HostMonitor.gif" width="300px;"/><br /><sub><b>HostMonitor on Windows</b></sub></a>
<td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HostMonitor"><img src="documents/data_on_cloud.png" width="300px;"/><br /><sub><b>HostMonitor on IoT-Cloud</b></sub></a>
<td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HostMonitor"><img src="documents/Android.gif" width="300px;"/><br /><sub><b>HostMonitor on Android</b></sub></a>
</tr>
<tr>
<td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HostMonitor"><img src="documents/WinMR.gif" width="300px;"/><br /><sub><b>HostMonitor on Windows Mixed Reality</b></sub></a>
<td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HostMonitor"><img src="documents/Mac.gif" width="300px;"/><br /><sub><b>HostMonitor on Mac</b></sub></a>
<td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HostMonitor"><img src="documents/Linux.gif" width="300px;"/><br /><sub><b>HostMonitor on Linux</b></sub></a>
</tr>
</table>
## 📞Community Channel ## 📞Community Channel
Thanks for the help from community, you guys make GuiLite better! And welcome new friend to join us. Thanks for the help from community, you guys make GuiLite better! And welcome new friend to join us.

202
README_zh.md
View File

@ -1,99 +1,43 @@
# 欢迎莅临 GuiLite
<p align="center"> <p align="center">
<img src="documents/GuiLiteCube.gif" alt="Image" width="320" height="304"/> <img src="documents/logo.png" alt="Logo"/>
</p>
<p align="center">
<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">
</p>
<p align="center"> 大道至简 - 5千行/全平台GUI库 </p>
<p align="center">
<img src="documents/WhyGuiLite-cn.png" alt="Why GuiLite"/>
</p> </p>
# GuiLite（超轻量UI框架）- 最小的GUI库 ## 轻-快-灵
![badge_build](https://img.shields.io/badge/build-passing-brightgreen.svg) ![badge_docker](https://img.shields.io/badge/docker%20build-passing-brightgreen.svg) ![badge_platform](https://img.shields.io/badge/platform-Windows%20%7C%20Linux%20%7C%20macOS%20%7C%20iOS%20%7C%20Android%20%7C%20MCU-brightgreen.svg) ![badge_lincense](https://img.shields.io/badge/license-Apache%202-blue.svg) ![badge_lincense](https://img.shields.io/badge/architecture-amd64%20%7C%20arm%20%7C%20arm64-blue.svg) - ✂️轻量: 5千行C++代码，2个文件：GuiLite.h，GuiLite.cpp
- [✨功能介绍](#功能介绍) - ⚡超快: 一次调用就可以完成图形渲染，与操作系统及第三方库无关
- [🚀快速上手](#快速上手) - 💉灵活: 可注入在Qt/MFC/Winform/Cocoa/Web程序中运行 - 重用现有Qt/MFC代码
- [📚开发文档](#开发文档)
- [📈学习方法](#学习方法)
- [📀视频链接](#视频链接)
- [📞社区交流](#社区交流)
***
## GuiLite是什么鬼？
GuiLite是5千行的图形界面库，可以运行在**所有平台**（例如：iOS/macOS/WathOS，Android，Linux（ARM/x86-64），Windows（包含VR），Docker和MCU）上；也可以与**多种语言**（例如： Swift, Java, Javascript, C#, Golang）协同工作。
- ✂️轻量: 5千行C++代码，可合并在：1个头文件(GuiLite.h)，1个实现文件(GuiLite.cpp)中 - 轻松[编译/移植](documents/HowToBuild.md)
- ⚡超快: 一次调用就可以完成图形渲染，与操作系统及第三方库无关 - 程序更快速，UI更流畅
- 💉可注入: 可注入在Qt/MFC/Winform/Cocoa/Web程序中运行 - 充分利用现有Qt/MFC代码，局部GuiLite优化，亦可显著提升效率
- ⚙️️最低硬件要求: - ⚙️️最低硬件要求:
| Processor | Disk/ROM space | Memory | | Processor | Disk/ROM space | Memory |
| --- | --- | --- | | --- | --- | --- |
| 24 MHZ | 29 KB | 9 KB | | 24 MHZ | 29 KB | 9 KB |
## 🔥新功能：苹果手表 ## 跨平台
GuiLite程序，可以同时运行在单片机和苹果“手表”上： 基于GuiLite的应用程序，可以运行在**所有平台**（例如：iOS/macOS/WathOS，Android，Linux（ARM/x86-64），Windows（包含VR），Docker和MCU）上；也可以与**多种语言**（例如： Swift, Java, Javascript, C#, Golang）协同工作。
| MCU | Apple Watch | ## 实用的功能
| --- | --- | - 🔣支持多语言,采用 UTF-8 编码
| ![Hello3D](documents/Hello3D.gif) | ![iWatch.hello3D](documents/iWatch.hello3D.gif) | - 🔨[资源制作工具](https://github.com/idea4good/GuiLiteToolkit)为你定制自己的字体/图片资源
| ![MCU](documents/HelloWave.gif) | ![iWatch.helloWave](documents/iWatch.helloWave.gif) | - 📐[所见即所得的GUI布局工具](https://github.com/idea4good/GuiLitePreviewer)
- ☁️完美的“云” + “物联网”解决方案
- 📊编译活跃度统计，及实时分析
- 📦支持3D & [Web](https://github.com/idea4good/GuiLiteWeb)
- 🐋支持Docker，一条命令启动Docker: `sudo docker run -it --privileged -v /dev:/dev-share idea4good/gui-lite:latest bash /run.sh`
## ✨功能介绍 ## 易学习和全面的技术支持
### ⚔️卓越的跨平台能力 即使是C语言的初学者，也可以很快掌握GuiLite；代码只使用C++的基本特性（类和虚函数），选择C++语言，能让代码体积更小，更易阅读。
| ARM Linux | STM32 Without OS | - 📚开发文档
| --- | --- |
| ![ARM Linux](documents/Linux.gif) | ![MCU](documents/HelloParticle.gif) ![MCU](documents/HelloWave.gif) |
| Windows Mixed Reality | Android |
| --- | --- |
| ![Win MR](documents/WinMR.gif) | ![Android](documents/Android.gif) |
| macOS | iOS & Apple Watch |
| --- | --- |
| ![macOS](documents/Mac.gif) | ![iOS.hostMonitor](documents/iOS.gif) ![iOS.particle](documents/iOS.particle.gif) ![iWatch.helloWave](documents/iWatch.helloWave.gif) |
***
### 🔍GuiLite Previewer(所见即所得的GuiLite开发插件)
[GuiLite Previewer](https://github.com/idea4good/GuiLitePreviewer)是一个Visual Studio Code插件，它可以自动提取源代码的GUI布局信息，并实时显示在“预览”页面上(所见即所得)
![GuiLitePreviewer](documents/Previewer.gif)
***
### 😎浮夸的UI效果
![HostMonitor](documents/HostMonitor.gif)![HelloNets-pc](documents/HelloNets-pc.gif)
***
### 🔣万国语(unicode)：
![unicode](documents/unicode.jpg)
***
### 🌐IoT（物联网）和📊数据分析
- 上报“编译/运行”情况至“云端”：<br>![BuildInfo](documents/BuildInfo.png)
- 同步“运行数据”至“云端”：<br>![DataOnCloud](documents/data_on_cloud.png)
***
### 🐋支持Docker
我们把GuiLite demo做成了Docker映像，只需一行命令，就可以将最新的GuiLite demo升级/部署/运行在你的设备上了。
- `sudo docker run -it --privileged -v /dev:/dev-share idea4good/gui-lite:latest bash /run.sh`
***
## 📦3D
- ![GuiLiteGraphic](documents/GuiLite3D.gif) ![Hello3D](documents/Hello3D.gif)
- GuiLite实例[(HelloParticle, HelloWave)](https://gitee.com/idea4good/GuiLiteSamples)运行在Web及3D环境，[代码在这里](https://github.com/idea4good/GuiLiteWeb/blob/master/CubeEx/main.js)
- 在单片机上也能运行3D效果（具体参看GuiLiteSamples:Hello3D）
***
## 🚀快速上手
GuiLite只是一个框架，本身并不能生成UI。为了能够展示如何用GuiLite开发App，我们提供了一些实例程序给大家参考。
- 实例程序的代码在[这里](https://gitee.com/idea4good/GuiLiteSamples)
- 实例程序的功能说明：
| 实例名称 | 支持的平台 | 功能简介 | 编译方法 | 难度 |
| --- | --- | --- | --- | --- |
| HelloParticle | Windows, Linux, STM32F103, STM32F429 | 粒子效果的应用 | [编译/运行](https://gitee.com/idea4good/GuiLiteSamples/blob/master/HelloParticle/README.md) | ★|
| HelloStar | Windows, Linux, STM32F103, STM32F429 | 星空效果的应用 | [编译/运行](https://gitee.com/idea4good/GuiLiteSamples/blob/master/HelloStar/README.md) | ★|
| Hello3D | Windows, Linux, STM32F103 | 基于GuiLite的超轻量（单片机级别）3D引擎 | [Build](https://gitee.com/idea4good/GuiLiteSamples/blob/master/Hello3D/README.md) | ★★ |
| HelloNets | Windows, Linux, STM32F103 | 3D物理过程的应用 | [Build](https://gitee.com/idea4good/GuiLiteSamples/blob/master/HelloNets/README.md) | ★★ |
| HelloGuiLite | Windows, Linux | 初始化GuiLite，加载资源，布局界面元素，按钮响应 | [编译/运行](https://gitee.com/idea4good/GuiLiteSamples/blob/master/HelloGuiLite/README.md) | ★★|
| HelloWidgets | Windows, Linux | 用于演示基本控件的使用方法 | [编译/运行](https://gitee.com/idea4good/GuiLiteSamples/blob/master/HelloWidgets/README.md) | ★★|
| HelloMario | Windows, Linux, STM32F103, STM32F429 | 多图层的UI系统 | [编译/运行](https://gitee.com/idea4good/GuiLiteSamples/blob/master/HelloMario/README.md) | ★★|
| HelloNoTouch | Windows, Linux, STM32F103, STM32F429 | 用于非触摸屏场景，通过硬按键进行UI“导航” | [编译/运行](https://gitee.com/idea4good/GuiLiteSamples/blob/master/HelloNoTouch/README.md) | ★★|
| HelloFont | Windows, Linux | 显示多种语言（不限：中、英文） | [编译/运行](https://gitee.com/idea4good/GuiLiteSamples/blob/master/HelloFont/README.md) | ★★|
| HelloAnimation | Windows, Linux | 动画的应用 | [编译/运行](https://gitee.com/idea4good/GuiLiteSamples/blob/master/HelloAnimation/README.md) | ★★|
| HelloSlide | Windows, Linux | 滑屏界面的应用 | [编译/运行](https://gitee.com/idea4good/GuiLiteSamples/blob/master/HelloSlide/README.md) | ★★★|
| HelloWave | Windows, Linux, STM32F103, STM32F429 | 波形控件的应用，及单片机移植办法 | [编译/运行](https://gitee.com/idea4good/GuiLiteSamples/blob/master/HelloWave/README.md) | ★★★|
| HostMonitor | iOS, Mac, Android, Windows, Linux | 创建复杂界面，扩展自定义控件，适配全平台 | [编译/运行](https://gitee.com/idea4good/GuiLiteSamples/blob/master/HostMonitor/README.md) | ★★★★|
## 📚开发文档
GuiLite是最简单，易学的GUI库。
1. 只有5千行C++代码
2. 只使用C++的基本特性（类和虚函数），不涉及复杂语法
3. 图形绘制以描点为基础，不使用任何算法
4. 设计简单，配有丰富的文档和实例程序；遇到问题，可以在QQ群获得帮助
- [软件设计说明](documents/HowToWork-cn.md) - [软件设计说明](documents/HowToWork-cn.md)
- [如何编译和移植?](documents/HowToBuild.md) - [如何编译和移植?](documents/HowToBuild.md)
- [如何布局UI?](documents/HowLayoutWork.md) - [如何布局UI?](documents/HowLayoutWork.md)
@ -101,26 +45,74 @@ GuiLite是最简单，易学的GUI库。
- [如何“换肤”？](https://gitee.com/idea4good/GuiLiteSamples/blob/master/HostMonitor/UIcode/source/resource/resource.cpp) - [如何“换肤”？](https://gitee.com/idea4good/GuiLiteSamples/blob/master/HostMonitor/UIcode/source/resource/resource.cpp)
- [如何传递消息?](documents/HowMessageWork.md) - [如何传递消息?](documents/HowMessageWork.md)
- [核心UML示意图](documents/UML.md) - [核心UML示意图](documents/UML.md)
- GuiLite滑动，及多层叠加原理 - 📈学习方法
- ![GuiLiteGraphic](documents/GuiLiteGraphic.gif) 1. **外围** - 成功编译GuiLite库
- [完整视频](https://v.youku.com/v_show/id_XNDI4ODE1ODcwOA) 2. **前戏** - 成功运行HelloXXX实例程序
- [Source code](https://github.com/idea4good/GuiLiteWeb/blob/master/Graphic/main.js) 3. **交流** - 研读/修改100+行的`HelloXXX/UIcode/UIcode.cpp`源代码
4. **深交** - 研读`gui`目录下的代码
5. **攻核** - 研读`core`目录下的代码
6. **分家** - 丰富，扩展自己的UI功能
- 📞遇到任何问题，都可以[联系我们](#社区交流)，也欢迎加入我们的开发者大家庭
- 🌐[GitHub链接](https://github.com/idea4good/GuiLite)
## 📈学习方法 ## Demo展示墙
1. **外围** - 成功编译GuiLite库 <table>
2. **前戏** - 成功运行HelloXXX实例程序 <tr>
3. **交流** - 研读/修改100+行的`HelloXXX/UIcode/UIcode.cpp`源代码 <td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/Hello3D"><img src="documents/Hello3D.gif" width="200px;"/><br /><sub><b>3D on STM32</b></sub></a>
4. **深交** - 研读`gui`目录下的代码 <td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HelloWave"><img src="documents/HelloWave.gif" width="200px;"/><br /><sub><b>Wave on STM32</b></sub></a>
5. **攻核** - 研读`core`目录下的代码 <td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HelloParticle"><img src="documents/HelloParticle.gif" width="200px;"/><br /><sub><b>Particle on STM32</b></sub></a>
6. **分家** - 丰富，扩展自己的UI功能 <td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HelloStar"><img src="documents/HelloStar.gif" width="200px;"/><br /><sub><b>Star on STM32</b></sub></a>
</tr>
<tr>
<td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HelloNets"><img src="documents/HelloNets-mcu.gif" width="200px;"/><br /><sub><b>Nets on STM32</b></sub></a>
<td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HelloNoTouch"><img src="documents/HelloNoTouch.gif" width="200px;"/><br /><sub><b>Keyboard on STM32</b></sub></a>
<td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HelloMario"><img src="documents/HelloMario.gif" width="200px;"/><br /><sub><b>Mario on STM32</b></sub></a>
<td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HelloSlide"><img src="documents/HelloSlide.gif" width="200px;"/><br /><sub><b>Swipe view</b></sub></a>
</tr>
<tr>
<td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/Hello3D"><img src="documents/iWatch.hello3D.gif" width="200px;"/><br /><sub><b>3D on Apple Watch</b></sub></a>
<td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HelloWave"><img src="documents/iWatch.helloWave.gif" width="200px;"/><br /><sub><b>Wave on Apple Watch</b></sub></a>
<td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HelloParticle"><img src="documents/iOS.particle.gif" width="200px;"/><br /><sub><b>Particle on iPhone</b></sub></a>
<td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HostMonitor"><img src="documents/iOS.gif" width="200px;"/><br /><sub><b>HostMonitor on iPhone</b></sub></a>
</tr>
<tr>
<td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HelloAnimation"><img src="documents/HelloAnimation.gif" width="200px;"/><br /><sub><b>Animation on STM32</b></sub></a>
</tr>
</table>
## 📀视频链接: <table>
- [GuiLite简介](https://v.youku.com/v_show/id_XMzA5NTMzMTYyOA) <tr>
- [3D GuiLite](https://v.youku.com/v_show/id_XMzYxNTE3MTI0MA) <td align="center"><a href="https://github.com/idea4good/GuiLitePreviewer"><img src="documents/Previewer.gif" width="600px;"/><br /><sub><b>Layout GUI</b></sub></a>
- [GuiLite + 单片机](https://v.youku.com/v_show/id_XNDAwNzM5MTM3Ng) <td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HelloGuiLite"><img src="documents/HelloGuiLite.gif" width="600px;"/><br /><sub><b>Run Windows on Linux</b></sub></a>
</tr>
<tr>
<td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HelloFont"><img src="documents/HelloFont.gif" width="600px;"/><br /><sub><b>Multi-language</b></sub></a>
<td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HostMonitor"><img src="documents/BuildInfo.png" width="600px;"/><br /><sub><b>Code Telemetry & Analysis in real time</b></sub></a>
</tr>
</table>
## 镜像代码仓库 <table>
[GitHub链接](https://github.com/idea4good/GuiLite) <tr>
<td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HelloNets"><img src="documents/HelloNets-pc.gif" width="300px;"/><br /><sub><b>3D Nets on Windows/Linux</b></sub></a>
<td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HelloWidgets"><img src="documents/HelloWidgets.gif" width="300px;"/><br /><sub><b>How to use widgets</b></sub></a>
<td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HostMonitor"><img src="documents/unicode.jpg" width="300px;"/><br /><sub><b>Multi-language</b></sub></a>
</tr>
<tr>
<td align="center"><a href="https://github.com/idea4good/GuiLiteWeb"><img src="documents/GuiLite3D.gif" width="300px;"/><br /><sub><b>3D on Web</b></sub></a>
<td align="center"><a href="https://github.com/idea4good/GuiLiteWeb"><img src="documents/GuiLiteCube.gif" width="300px;"/><br /><sub><b>3D on Web</b></sub></a>
<td align="center"><a href="https://github.com/idea4good/GuiLiteWeb"><img src="documents/GuiLiteGraphic.gif" width="300px;"/><br /><sub><b>Tutorial on Web</b></sub></a>
</tr>
<tr>
<td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HostMonitor"><img src="documents/HostMonitor.gif" width="300px;"/><br /><sub><b>HostMonitor on Windows</b></sub></a>
<td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HostMonitor"><img src="documents/data_on_cloud.png" width="300px;"/><br /><sub><b>HostMonitor on IoT-Cloud</b></sub></a>
<td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HostMonitor"><img src="documents/Android.gif" width="300px;"/><br /><sub><b>HostMonitor on Android</b></sub></a>
</tr>
<tr>
<td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HostMonitor"><img src="documents/WinMR.gif" width="300px;"/><br /><sub><b>HostMonitor on Windows Mixed Reality</b></sub></a>
<td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HostMonitor"><img src="documents/Mac.gif" width="300px;"/><br /><sub><b>HostMonitor on Mac</b></sub></a>
<td align="center"><a href="https://gitee.com/idea4good/GuiLiteSamples/tree/master/HostMonitor"><img src="documents/Linux.gif" width="300px;"/><br /><sub><b>HostMonitor on Linux</b></sub></a>
</tr>
</table>
## 📞社区交流 ## 📞社区交流
- 感谢开发者群的所有同学，是你们塑造了今天的GuiLite！也欢迎新的大神/小白加入我们。<br>[<img src="documents/qq.group.jpg">](https://jq.qq.com/?_wv=1027&k=5EO8D9i) - 感谢开发者群的所有同学，是你们塑造了今天的GuiLite！也欢迎新的大神/小白加入我们。<br>[<img src="documents/qq.group.jpg">](https://jq.qq.com/?_wv=1027&k=5EO8D9i)

BIN
documents/HelloAnimation.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 275 KiB

BIN
documents/HelloFont.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 523 KiB

BIN
documents/HelloGuiLite.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 903 KiB

BIN
documents/HelloMario.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 153 KiB

BIN
documents/HelloNets-mcu.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 642 KiB

BIN
documents/HelloNoTouch.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

BIN
documents/HelloSlide.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 508 KiB

BIN
documents/WhyGuiLite-cn.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 825 KiB

BIN
documents/WhyGuiLite.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 830 KiB

BIN
documents/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

2
workspace/.sync.sh
View File

@ -4,7 +4,7 @@ if [ "$#" -ne 1 ]; then
fi fi
url="https://api.powerbi.com/beta/72f988bf-86f1-41af-91ab-2d7cd011db47/datasets/2ff1e8a8-2f6f-4d73-a75d-86829e3f4574/rows?key=8f5xLp1gP8%2FzSee4vCUBcyjR65I9zZ6nb%2B%2F7bbzex%2FSctLX3ntIlAR0sxWpDdguuYyDtLdHK%2Fxbxj%2FrSBkX7eQ%3D%3D" url="https://api.powerbi.com/beta/72f988bf-86f1-41af-91ab-2d7cd011db47/datasets/2ff1e8a8-2f6f-4d73-a75d-86829e3f4574/rows?key=8f5xLp1gP8%2FzSee4vCUBcyjR65I9zZ6nb%2B%2F7bbzex%2FSctLX3ntIlAR0sxWpDdguuYyDtLdHK%2Fxbxj%2FrSBkX7eQ%3D%3D"
build_time=`date +%Y-%m-%dT%H:%M:%S.000Z` build_time=`date +%Y-%m-%dT%H:%M:%S.000%z`
device_info=`uname -s -n -m` device_info=`uname -s -n -m`
curl --include --request POST --header "Content-Type: application/json" --data-binary "[{ curl --include --request POST --header "Content-Type: application/json" --data-binary "[{

2
workspace/sync_build.bat
View File

@ -13,7 +13,7 @@ set YY=%YYYY:~0,2%
if not "%YY%" == "20" (rem For Chinese date format if not "%YY%" == "20" (rem For Chinese date format
for /f "tokens=1-3 delims=/ " %%a in ("%date%") do (set YYYY=%%a& set MM=%%b& set DD=%%c)) for /f "tokens=1-3 delims=/ " %%a in ("%date%") do (set YYYY=%%a& set MM=%%b& set DD=%%c))
set datetime=%YYYY%-%MM%-%DD%T%time: =0%0Z set datetime=%YYYY%-%MM%-%DD%T%time: =0%0+0800
set devie_info=Win-%USERNAME% set devie_info=Win-%USERNAME%
set raw_data=[{^ set raw_data=[{^
\"device_info\" :\"%devie_info%\",^ \"device_info\" :\"%devie_info%\",^