# GuiLiteWeb

**Repository Path**: idea4good/GuiLiteWeb

## Basic Information

- **Project Name**: GuiLiteWeb
- **Description**: ㊙GuiLite 3D探索
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: https://v.youku.com/v_show/id_XNDI3NjU2MzkxMg
- **GVP Project**: No

## Statistics

- **Stars**: 19
- **Forks**: 17
- **Created**: 2019-07-12
- **Last Updated**: 2025-05-19

## Categories & Tags

**Categories**: hardware

**Tags**: None

## README

<p align="center">
    <img src="doc/GuiLiteCube.gif" alt="Image" width="600" height="200"/>
</p>

# GuiLiteWeb
- [GuiLite](https://gitee.com/idea4good/GuiLite)是最轻量，最简单，最稳定的GUI库，它只有5千行C++代码
- GuiLiteWeb可以把GuiLite注入到网页中

## CubeEx
![GuiLiteCube](doc/GuiLite3D.gif)
- Inject HelloParticle & HelloWave into Cube
- [Source code](CubeEx/main.js)
- Run it by open "CubeEx/index.html" with Microsoft Edge

## HelloParticle
- Inject Guilite Sample(HelloParticle) into Web page
- Run it by open "HelloParticle/src/main.html" with Microsoft Edge

## HelloWave
- Inject Guilite Sample(HelloWave) into Web page
- Run it by open "HelloWave/src/main.html" with Microsoft Edge

## Tutorial: How GuiLite graphic work?
![GuiLiteGraphic](doc/GuiLiteGraphic.gif)
- This 3D programm is used to show how GuiLite multi-layers work.
- [Video](https://www.youtube.com/watch?v=QzZJnU5KmDQ)
- [Source code](Graphic/main.js)
- Run it by open "Graphic/index.html" with Microsoft Edge

## 教程：GuiLite底层绘制原理
![GuiLiteGraphic](doc/GuiLiteGraphic.gif)
- 通过3D程序，解释GuiLite滑动，及多层叠加原理
- [视频](https://v.youku.com/v_show/id_XNDI4ODE1ODcwOA)
- [Source code](Graphic/main.js)

## GuiLite 立方体
![GuiLiteCube](doc/GuiLiteCube.gif)
- [Source code](Cube/main.js)