Comments (5)
Hi rybon,
Thanks for your suggestion!
Flexbox is nice when you need to target multiple devices/screen resolutions. But the main purpose of this framework is developing UIs on embedded devices and there the screen resolution is usually fixed. Also, the current layout system is tightly integrated with the rest of the framework and has a lot of specific optimizations. Using Flexbox would bring a bigger learning curve, more complexity and will not improve performance. So, to be honest, we think that it's not the way to go for us.
Kind regards,
Bas
from lightning.
Rybon, we started to realise that we needed a layout solution after all. I looked into Yoga but it’s written in C++ and compiled to wasm. Introducing a black box like that doesn’t feel right. I opted for writing my own to keep control over performance and features.
from lightning.
Cool. I was merely suggesting it, as it is used in React Native and other projects and has a familiar CSS flexbox API.
There might be other solutions out there as well. I think, having a drawing engine (Cairo / Skia), a text rendering engine (Pango or similar), a layouting engine such as Yoga and binding it all together in Node.js to an OpenGL drawing surface is all you really need. The only thing I'm not sure about is how to obtain FPS syncing with the display when something like requestAnimationFrame
is not available in Node.js. I see you are using setTimeout
, which works, but having direct access to the refresh rate via the display port and syncing to that would be preferable. Does Linux have support for that that Node.js can hook into?
Have you looked into Flutter and what can be learned from their approach? They basically use Skia and the Chrome text tendering engine and bind it to an OpenGL drawing context. They use Dart, but a have a sufficiently smart compiler that can compile the UI code down to assembly, making it very fast and efficient. My only gripe with it is that it isn't quite React-like enough (JSX syntax for example). But otherwise, very intriguing.
from lightning.
Your basic idea is right, though you will also need to provide textures, opengl commands and features such as z indexing and clipping.
As for vsync in opengl, that’s solved by the eglSwapBuffers command. We can simply use setImmediate and only fall back to setTimeout if no rendering needed to be performed (no changes on screen).
from lightning.
Implemented flexbox on master. See https://github.com/WebPlatformForEmbedded/Lightning/blob/master/examples/layout/layout.html
from lightning.
Related Issues (20)
- Regression with advanced text renderer and line height. HOT 1
- Regression with rendering text that uses normal spaces HOT 3
- Tree shaking HOT 3
- Unable to run lightning on QT5 browser HOT 3
- Bind attempt of recently deleted buffers and textures
- Alpha channel heuristic when not using ImageWorker doesn't deal with uppercase file extensions HOT 6
- Unnecessary allocations per frame HOT 3
- Enable to use webgl2 when webgl is not enabled in device. HOT 2
- Calling `chidlList.add` to add an element that's already in the childList throws "out of bounds" error
- Issue with dynamic width and height HOT 4
- Font renderer smoothness issues on EOS STBs HOT 1
- Duplicate call for `_cleanupLookupMap`
- Draw function crashing because of undefined texture
- Version 2.12.1 not including typescript types HOT 4
- Double texture freeing bug
- Text Truncated with advancedRenderer but Ellipsis Included in New Line
- Wrong calculation for `getRoundRect` stroke width HOT 2
- Lightning Core > 2.11.0 Unsupported on older browsers HOT 2
- Unable to use `monospace` system font HOT 1
- Arabic Text with English Numbers Not Rendering Correctly in RTL Format
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from lightning.