https://github.com/lee88688/quickgl

https://github.com/lee88688/quickgl

jerryscript lvgl react reactjs

Last synced: 7 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/lee88688/quickgl
• Owner: lee88688
• Created: 2021-09-18T09:11:45.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2021-12-27T09:22:49.000Z (about 4 years ago)
• Last Synced: 2025-07-02T10:05:27.497Z (7 months ago)
• Topics: jerryscript, lvgl, react, reactjs
• Language: TypeScript
• Homepage:
• Size: 855 KB
• Stars: 2
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Quickgl

Quickgl is project for empowering LVGL with React. Our goal is using LVGL and reactjs to quickly build UI in embeded devices.

## Simulate

currently you can compile code to wasm, and simulate, I create a [repo](https://github.com/lee88688/react-webpack-typescript-starter) for this.

you can create this

![](./artworks/screenshot.png)

by jsx

```jsx

// App.tsx

import React, {useEffect, useState} from 'react';

import styles from './index.lv.css';

export default function App() {

  const [cnt, setCnt] = useState(0);

  return (

     setCnt(cnt + 1)}>

      {/*  */}

      

        {`1hello${cnt}\nsecond`}

      

      {`2hello${cnt}`}

    

  );

}

```

and css

```css

/* index.lv.css */

.s1 {

  left: 100px;

  top: 0px;

  width: 500px;

  height: 300px;

  display: flex;

  flex-direction: column;

  padding-top: 0px;

  border-color: rgb(226, 226, 208);

  border-width: 5px;

}

.s2 {

  left: 50%;

  transform: translate(50px, 50px);

}

.s3 {

  height: 100px;

  background-color: salmon;

}

```

## Framework

![](./artworks/quickgl-framework.svg)