mirror of
https://gitee.com/idea4good/GuiLite.git
synced 2025-01-15 17:02:52 +08:00
add en/cn readme
This commit is contained in:
idea4good
parent
2373970881
commit
80e2c3e197
215
README.md
215
README.md
@ -1,106 +1,109 @@
|
||||
# GuiLite（超轻量UI框架） - 最轻量/最易懂/最稳定的GUI库
|
||||
    
|
||||
- [功能介绍](#功能介绍)
|
||||
- [快速上手](#快速上手)
|
||||
- [开发文档](#开发文档)
|
||||
- [学习方法](#学习方法)
|
||||
- [视频链接](#视频链接)
|
||||
- [致谢](#致谢)
|
||||
***
|
||||
## GuiLite是什么鬼？
|
||||
- GuiLite是5千行代码的**全平台UI框架**，可以完美运行在: iOS，Android，Linux（ARM/x86-64），Windows（包含VR），Mac，Docker和**有(无)操作系统的MCU**上。
|
||||
- GuiLite可以嵌入在iOS、Android、MFC、QT等其他UI系统中，让你的界面集百家之长，又不失个性。
|
||||
- GuiLite与操作系统及第三方图形库无关，甚至也可以运行在无OS的单片机环境。
|
||||
- GuiLite鼓励混合编程，开发者可以用GuiLite接管UI部分，用Swift，Java，Golang，C#，Python开发业务部分。
|
||||
- 🔧不鼓励大家全盘接受GuiLite，更愿意大家自主定制GuiLite
|
||||
- ⚙️希望GuiLite小到足够帮助大家掌握UI工作原理，从而摆脱UI框架的束缚，构建自己独一无二的UI
|
||||
- 👑任何UI框架都不为你我而生，你才是自己真正的主人
|
||||
|
||||
## 🔥新功能：GuiLite Previewer(即写即见)
|
||||
[GuiLite Previewer](https://github.com/idea4good/GuiLitePreviewer)是一个Visual Studio Code插件，它可以直接从开发者的代码中读取“布局”信息，并直接展示在预览页面上；从而，让开发者用最熟悉的（代码）方式，进行GUI设计。
|
||||
|
||||
|
||||
|
||||
## 功能介绍
|
||||
### 卓越的跨平台能力
|
||||
| ARM Linux | STM32 Without OS |
|
||||
| --- | --- |
|
||||
|  |   |
|
||||
|
||||
| Windows Mixed Reality | Android |
|
||||
| --- | --- |
|
||||
|  |  |
|
||||
|
||||
| macOS | iOS |
|
||||
| --- | --- |
|
||||
|  |  |
|
||||
***
|
||||
### 支持Docker容器
|
||||
我们把GuiLite demo做成了Docker映像，只需一行命令，就可以将最新的GuiLite demo升级/部署/运行在你的设备上了。
|
||||
- `sudo docker run -it --privileged -v /dev:/dev-share idea4good/gui-lite:latest bash /run.sh`
|
||||
***
|
||||
### 易于定制界面
|
||||
|
||||
***
|
||||
### 万国语(unicode)：
|
||||
|
||||
***
|
||||
### “换肤”功能
|
||||
|
||||
***
|
||||
### IoT（物联网）功能
|
||||
- 上报“编译/运行”情况至“云端”：<br>
|
||||
- 同步“运行数据”至“云端”：<br>
|
||||
***
|
||||
## 快速上手
|
||||
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) | ★|
|
||||
| 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群获得帮助
|
||||
- [软件设计说明](doc/HowToWork-cn.md)
|
||||
- [如何编译?](doc/HowToBuild.md)
|
||||
- [如何布局UI?](doc/HowLayoutWork.md)
|
||||
- [如何制作多种文字/位图资源?](https://github.com/idea4good/GuiLiteToolkit)
|
||||
- [如何“换肤”？](https://gitee.com/idea4good/GuiLiteSamples/blob/master/HostMonitor/UIcode/source/resource/resource.cpp)
|
||||
- [如何传递消息?](doc/HowMessageWork.md)
|
||||
- [核心UML示意图](doc/UML.md)
|
||||
|
||||
## 学习方法
|
||||
1. **外围** - 成功编译GuiLite库
|
||||
2. **前戏** - 成功运行HelloXXX实例程序
|
||||
3. **交流** - 研读/修改100+行的`HelloXXX/UIcode/UIcode.cpp`源代码
|
||||
4. **深交** - 研读`gui`目录下的代码
|
||||
5. **攻核** - 研读`core`目录下的代码
|
||||
6. **分家** - 丰富，扩展自己的UI功能
|
||||
|
||||
## 视频链接:
|
||||
- [GuiLite简介](https://v.youku.com/v_show/id_XMzA5NTMzMTYyOA)
|
||||
- [3D GuiLite](https://v.youku.com/v_show/id_XMzYxNTE3MTI0MA)
|
||||
- [GuiLite + 单片机](https://v.youku.com/v_show/id_XNDAwNzM5MTM3Ng)
|
||||
|
||||
## 镜像代码仓库
|
||||
[GitHub链接](https://github.com/idea4good/GuiLite)
|
||||
|
||||
## 致谢
|
||||
- 感谢开发者群的所有同学，是你们塑造了今天的GuiLite！也欢迎新的大神/小白加入我们。<br>[<img src="doc/qq.group.jpg">](https://jq.qq.com/?_wv=1027&k=5EO8D9i)
|
||||
- 感谢来自码云用户的捐赠，您的每一分钱都会用来帮助急需帮助的中国儿童或家庭。
|
||||
# GuiLite - The smallest/simplest/stablest GUI library
|
||||
    
|
||||
- [中文](README_zh.md)
|
||||
- [Features](#Features)
|
||||
- [Start with Demo](#Start-with-Demo)
|
||||
- [Documents](#Documents)
|
||||
- [How to Learn?](#How-to-Learn)
|
||||
- [Videos](#Videos)
|
||||
- [Thanks](#Thanks)
|
||||
***
|
||||
## Introduction
|
||||
- GuiLite is the smallest GUI library with 5000 lines of C++ code, it runs on **all platforms**(e.g, iOS, Android, Linux, Windows, macOS, Docker and **MCU with or without OS**).
|
||||
- GuiLite is embeddable, it runs inside other UI frameworks(e.g, Qt, MFC, Winform, Cocoa). You could use GuiLite features and host UI features simultaneously.
|
||||
- GuiLite render UI by itself, independent of OS & Graphic library.
|
||||
- GuiLite could work with many languages(e.g. Swift, Java, C#, Golang).
|
||||
- 🔧We want people to customize GuiLite.
|
||||
- ⚙️We hope GuiLite is small enough to help you understand how UI works.
|
||||
- 👑You should be the master of your UI and not be tied to a specific framework.
|
||||
|
||||
## 🔥New feature：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)
|
||||
- No need for drag-and-drop widgets, everything (e.g. code/design/build/debug) could be done by coding
|
||||
- No need for special GUI editor(e.g. Android Studio, Qt designer)
|
||||
- No need for Extensible Markup Language(e.g. xml, xaml)
|
||||
|
||||
|
||||
## Features
|
||||
### Cross platform
|
||||
| ARM Linux | STM32 Without OS |
|
||||
| --- | --- |
|
||||
|  |   |
|
||||
|
||||
| Windows Mixed Reality | Android |
|
||||
| --- | --- |
|
||||
|  |  |
|
||||
|
||||
| macOS | iOS |
|
||||
| --- | --- |
|
||||
|  |  |
|
||||
***
|
||||
### Support Docker Container
|
||||
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`
|
||||
***
|
||||
### Easy customization
|
||||
|
||||
***
|
||||
### Multi-language:
|
||||
|
||||
***
|
||||
### Multi-theme
|
||||
|
||||
***
|
||||
### IoT Solution & Code Telemetry
|
||||
- Report build activities to cloud:<br>
|
||||
- Sync running data to cloud:<br>
|
||||
***
|
||||
## Start with Demo
|
||||
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) | ★ |
|
||||
| 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](doc/HowToWork.md)
|
||||
- [How to build?](doc/HowToBuild.md)
|
||||
- [How to Layout widgets?](doc/HowLayoutWork.md)
|
||||
- [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 dispatch messages?](doc/HowMessageWork.md)
|
||||
- [UML chart of GuiLite core](doc/UML.md)
|
||||
|
||||
## How to learn?
|
||||
1. Build/Run GuiLite library
|
||||
2. Build/Run HelloXXX demos
|
||||
3. Read/Modify `HelloXXX/UIcode/UIcode.cpp` code
|
||||
4. Read/Modify `gui` code
|
||||
5. Read/Modify `core` code
|
||||
6. Build your UI framework
|
||||
|
||||
## Videos
|
||||
- [GuiLite introduction](https://www.youtube.com/watch?v=grqXEz3bdC0)
|
||||
- [3D GuiLite](https://v.youku.com/v_show/id_XMzYxNTE3MTI0MA)
|
||||
- [GuiLite + STM32](https://v.youku.com/v_show/id_XNDAwNzM5MTM3Ng)
|
||||
|
||||
## Mirror repository
|
||||
[Gitee in China](https://gitee.com/idea4good/GuiLite)
|
||||
|
||||
## Thanks
|
||||
- Thanks the help from QQ group, you guys make GuiLite better! And welcome new friend to join us.<br>[<img src="doc/qq.group.jpg">](https://jq.qq.com/?_wv=1027&k=5EO8D9i)
|
||||
- Thanks the donations from [Gitee users](https://gitee.com/idea4good/GuiLite), every penny of donations will be used for needy children or family of China.
|
||||
|
||||
108
README_zh.md
Normal file
108
README_zh.md
Normal file
@ -0,0 +1,108 @@
|
||||
# GuiLite（超轻量UI框架） - 最轻量/最易懂/最稳定的GUI库
|
||||
    
|
||||
- [功能介绍](#功能介绍)
|
||||
- [快速上手](#快速上手)
|
||||
- [开发文档](#开发文档)
|
||||
- [学习方法](#学习方法)
|
||||
- [视频链接](#视频链接)
|
||||
- [致谢](#致谢)
|
||||
***
|
||||
## GuiLite是什么鬼？
|
||||
- GuiLite是5千行代码的**全平台UI框架**，可以完美运行在: iOS，Android，Linux（ARM/x86-64），Windows（包含VR），Mac，Docker和**有(无)操作系统的MCU**上。
|
||||
- GuiLite可以嵌入在iOS、Android、MFC、QT等其他UI系统中，让你的界面集百家之长，又不失个性。
|
||||
- GuiLite与操作系统及第三方图形库无关，甚至也可以运行在无OS的单片机环境。
|
||||
- GuiLite鼓励混合编程，开发者可以用GuiLite接管UI部分，用Swift，Java，Golang，C#，Python开发业务部分。
|
||||
- 🔧不鼓励大家全盘接受GuiLite，更愿意大家自主定制GuiLite
|
||||
- ⚙️希望GuiLite小到足够帮助大家掌握UI工作原理，从而摆脱UI框架的束缚，构建自己独一无二的UI
|
||||
- 👑任何UI框架都不为你我而生，你才是自己真正的主人
|
||||
|
||||
## 🔥新功能：GuiLite Previewer(所见即所得的GuiLite开发插件)
|
||||
- [GuiLite Previewer](https://github.com/idea4good/GuiLitePreviewer)是一个Visual Studio Code插件，它可以自动提取源代码的GUI布局信息，并实时显示在“预览”页面上(所见即所得)
|
||||
- **不需要**“拖拽”控件，仅通过敲代码，就可以完成所有工作（例如：代码，UI编辑，编译，运行，调试）
|
||||
- **不需要**使用庞大的GUI编辑工具（或IDE，例如：Android Studio, Qt designer）
|
||||
- **不需要**使用可扩展标记语言（例如：xml, xaml）
|
||||
|
||||
|
||||
## 功能介绍
|
||||
### 卓越的跨平台能力
|
||||
| ARM Linux | STM32 Without OS |
|
||||
| --- | --- |
|
||||
|  |   |
|
||||
|
||||
| Windows Mixed Reality | Android |
|
||||
| --- | --- |
|
||||
|  |  |
|
||||
|
||||
| macOS | iOS |
|
||||
| --- | --- |
|
||||
|  |  |
|
||||
***
|
||||
### 支持Docker容器
|
||||
我们把GuiLite demo做成了Docker映像，只需一行命令，就可以将最新的GuiLite demo升级/部署/运行在你的设备上了。
|
||||
- `sudo docker run -it --privileged -v /dev:/dev-share idea4good/gui-lite:latest bash /run.sh`
|
||||
***
|
||||
### 易于定制界面
|
||||
|
||||
***
|
||||
### 万国语(unicode)：
|
||||
|
||||
***
|
||||
### “换肤”功能
|
||||
|
||||
***
|
||||
### IoT（物联网）功能
|
||||
- 上报“编译/运行”情况至“云端”：<br>
|
||||
- 同步“运行数据”至“云端”：<br>
|
||||
***
|
||||
## 快速上手
|
||||
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) | ★|
|
||||
| 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群获得帮助
|
||||
- [软件设计说明](doc/HowToWork-cn.md)
|
||||
- [如何编译?](doc/HowToBuild.md)
|
||||
- [如何布局UI?](doc/HowLayoutWork.md)
|
||||
- [如何制作多种文字/位图资源?](https://github.com/idea4good/GuiLiteToolkit)
|
||||
- [如何“换肤”？](https://gitee.com/idea4good/GuiLiteSamples/blob/master/HostMonitor/UIcode/source/resource/resource.cpp)
|
||||
- [如何传递消息?](doc/HowMessageWork.md)
|
||||
- [核心UML示意图](doc/UML.md)
|
||||
|
||||
## 学习方法
|
||||
1. **外围** - 成功编译GuiLite库
|
||||
2. **前戏** - 成功运行HelloXXX实例程序
|
||||
3. **交流** - 研读/修改100+行的`HelloXXX/UIcode/UIcode.cpp`源代码
|
||||
4. **深交** - 研读`gui`目录下的代码
|
||||
5. **攻核** - 研读`core`目录下的代码
|
||||
6. **分家** - 丰富，扩展自己的UI功能
|
||||
|
||||
## 视频链接:
|
||||
- [GuiLite简介](https://v.youku.com/v_show/id_XMzA5NTMzMTYyOA)
|
||||
- [3D GuiLite](https://v.youku.com/v_show/id_XMzYxNTE3MTI0MA)
|
||||
- [GuiLite + 单片机](https://v.youku.com/v_show/id_XNDAwNzM5MTM3Ng)
|
||||
|
||||
## 镜像代码仓库
|
||||
[GitHub链接](https://github.com/idea4good/GuiLite)
|
||||
|
||||
## 致谢
|
||||
- 感谢开发者群的所有同学，是你们塑造了今天的GuiLite！也欢迎新的大神/小白加入我们。<br>[<img src="doc/qq.group.jpg">](https://jq.qq.com/?_wv=1027&k=5EO8D9i)
|
||||
- 感谢来自码云用户的捐赠，您的每一分钱都会用来帮助急需帮助的中国儿童或家庭。
|
||||
102
doc/HowToWork.md
Normal file
102
doc/HowToWork.md
Normal file
@ -0,0 +1,102 @@
|
||||
# How GuiLite work
|
||||
- [What GuiLite do?](#What-GuiLite-do-)
|
||||
- [How to customize/extend GuiLite?](#How-to-customize/extend-GuiLite-)
|
||||
- [Code intro](#Code-intro)
|
||||
- [Widgets management](#Widgets-management)
|
||||
- [Rendering](#Rendering)
|
||||
***
|
||||
## What GuiLite do?
|
||||
GuiLite do 2 things only: widgets management and rendering.
|
||||
|
||||
Widgets management include:
|
||||
- Add/Remove GUI element(e.g, button, label, dialog), set caption and location.
|
||||
- Dispatch/Response intput message: By analysis the location information from the message, GuiLite would find the widget which should be reponse, and call response function(e.g, on_mouse_click, on_keyboard_click)
|
||||
- Dispatch/Response customer message: By analysis the ID of message, GuiLite would find response funciotn, and calll it(: on_timer, on_custmer_refresh)
|
||||
|
||||
Rendring include:
|
||||
- Draw pixel, line, rect
|
||||
- Set frame layer; While your drawing, you should input frame layer index to make your drawing at a specific layer
|
||||
- Update frame layer; While frame layer changed(e.g, open/close dialog), GuiLite would determine which pixel of frame layer should be display on screen
|
||||
|
||||
👉Note: Rendering do not depend on Widgets management, In some case, you would render line/text/bitmap directly without any widgets in your GUI system. For example: Limted resource MCU platform.
|
||||
|
||||
## How to customize/extend GuiLite?
|
||||
In order to make GuiLite simple and clear, GuiLite only provide basic widgets(e.g, button, label, keyboard, spinx etc) implementation. If you want do more things on widgets, you can do it like this:
|
||||
- Update widgets code in GuiLite directly
|
||||
- Add new widgets file, and implement new widgets by reference GuiLite widgets code.
|
||||
|
||||
If you would extend drawing method(e.g, draw circle/eclipse etc.), you can add your method in surface.cpp directly.
|
||||
|
||||
How to render?
|
||||
See function draw_xxx() in surface.cpp word.cpp bitmap.cpp.
|
||||
|
||||
## Code intro
|
||||
core folder:
|
||||
- Implement message dispatch/response, multi frame layer management and rendering for all platforms
|
||||
- Adapter GuiLite on Windows/Linux/Android/iOS/macOS or none OS in adapter folder
|
||||
|
||||
widgets folder:
|
||||
- Here are code for controllers(eg. button, lable, keyboard) and containers(eg. view, dialog, flip pages); You can redraw your own widget by modify this code.
|
||||
- Here are code for message transition(eg. finger press/release), it will pass finger press/release message to widget which been touched, and call callback function if defined.
|
||||
|
||||
## Widgets management
|
||||
Widgets include button, spinbox, label, keyboard, dialog, view; GuiLite will link all widgets by function: connect, then GuiLite will easy to find/add/remove any widget quickly. All the connections looks like a tree.
|
||||
|
||||
For example: When you click a button, device get your finger location(x, y) will be send the root of the tree, GuiLite would find the button you click by comparing location information, then call the response function(e.g, repaint the button/change button status)
|
||||
|
||||
### How to create widgets?
|
||||
All widgets derived from class c_wnd. The widget will be created when the class has been instanced, at this time, the widget still alone, has nothing to do with UI system, could not response any user operation.
|
||||
|
||||
### How to link/unlink widgets
|
||||
By using "connect()" function, we can link this widget into widgets tree, then the widgets could response user touch/keyboard action.
|
||||
|
||||
By using "disconnect()" function to unlink this widget from UI system. then the widget still live in memory, but could not response user touch/keyboard action any more.
|
||||
|
||||
## Rendering
|
||||
Rendering include rendering method and graphic management.
|
||||
- All rendering method base on draw_pixel() function
|
||||
- GuiLite support 3 frame layers so far, could handle 3 layers overlap senarios
|
||||
|
||||
### Rendering method
|
||||
- Basic rendering function: surface_cpp.cpp::draw_xxx()
|
||||
- Bitmap rendering function: bitmap.cpp::draw_bitmap_xxx()
|
||||
- For take GPU advantage, you can refactor draw_xxx() by using GPU feature
|
||||
|
||||
### Graphic layer
|
||||
|
||||
- display layer：This layer for physical display device, one UI has only one display layer
|
||||
- surface layer: One display layer have many surface layers, one surface layer represent one flip page
|
||||
- frame layer: One surface layer has many frame layers, one frame layer represent one layer in Z direction
|
||||
|
||||
## Source file annotation
|
||||
| core Importance/File name | Introduction | Time cost |
|
||||
| --- | --- | --- |
|
||||
| ★★★ wnd.cpp | Basic class for widgets; connect/disconnect widgets; response user on_touch, on_key action | 1.5 hour |
|
||||
| ★★ cmd_target.cpp | map/dispatch GUI/user custom message | 0.5 hour |
|
||||
| ★★ display.cpp | Initialize display device, create surface, | 0.5 hour |
|
||||
| ★★ surface.cpp| Draw piexel/line/rect, and multi-layer management | 0.5 hour |
|
||||
| word.cpp | Draw text | < 1 hour |
|
||||
| bitmap.cpp | Draw bitmap | < 0.5 hour |
|
||||
| rect.cpp | Rect for basic use(e.g, widgets location) | < 0.5 hour |
|
||||
| api_linux.cpp | Adapter for Linux | < 0.5 hour |
|
||||
| api_win.cpp | Adapter for Windows | < 0.5 hour |
|
||||
| api_unknow.cpp | Adapter for other OS or none OS | < 0.5 hour |
|
||||
| audio_linux.cpp | Adapter for Linux audio | < 0.5 hour |
|
||||
| audio_win.cpp | Adapter Windows audio | < 0.5 hour |
|
||||
| msg_linux.cpp | Implement message pipe on Linux | < 0.5 hour |
|
||||
| msg_win.cpp | Implement message pipe on Windows | < 0.5 hour |
|
||||
| msg_unknow.cpp | Implement message pipe on other OS or none OS | < 0.5 hour |
|
||||
***
|
||||
| widgets Difficulty/File name | Introduction | Time cost |
|
||||
| --- | --- | --- |
|
||||
| label.cpp | Source code for label | < 0.5 hour |
|
||||
| button.cpp | Source code for button | < 0.5 hour |
|
||||
| table.cpp | Source code for table | < 0.5 hour |
|
||||
| dialog.cpp | Source code for dialog | < 0.5 hour |
|
||||
| ★ gesture.cpp | Recognize finger gesture(e.g, press/release/slip) | 0.5 hour |
|
||||
| ★ keyboard.cpp | Source code for keyboard | 0.5 hour |
|
||||
| ★★ list_box.cpp | Source code for list box | 1.5 hour |
|
||||
| ★★ spinbox.cpp | Source code for spin box | 1.5 hour |
|
||||
| ★★ edit.cpp | Source code for edit widget | 1.5 hour |
|
||||
| ★★★ wave_buffer.cpp | Source code for wave buffer | 1.5 hour |
|
||||
| ★★★ wave_ctrl.cpp | Source code for wave widget | 1.5 hour |
|
||||
Loading…
x
Reference in New Issue
Block a user