I'm not proficient in C. Does this "just work" or do you need to provide some sort of rendering environment like SDL?
Clay – UI Layout Library
31–40 of 95 posts
Re: Clay – UI Layout Library
#32Serious question: am I the only one who finds writing a webpage like this to be a little too much (even if the concept is cool): void LandingPageDesktop() { CLAY(CLAY_ID("LandingPage1Desktop"), CLAY_LAYOUT({ .sizing = { .width = CLAY_SIZING_GROW(), .height = CLAY_SIZING_FIT({ .min = windowHeight - 70 }) }, .childAlignment = {.y = CLAY_ALIGN_Y_CENTER}, .padding = { .x = 50 } })) { CLAY(CLAY_ID("LandingPage1"), CLAY_LA…
If you don't use some kind of layouting language (like XML/HTML), this is inevitably what you will always end up with. See: AWT[1], SWT[2], Swing[3], Qt[4]†, Fyne[5], etc., etc., etc. [1] https://docs.oracle.com/javase/7/docs/api/java/awt/GridLayou... [2] https://github.com/eclipse-platform/eclipse.platform.swt/blo... [3] https://stackoverflow.com/a/12867862/243613 [4] https://stackoverflow.com/questions/37304684/qwi…
It's not difficult or disorganized to layout GUIs in a programming language. HTML exists as an alternative to having nothing. If you have a programming language you can give the data to the GUI library directly without having to learn a new markup language, have the bloat of a new markup language or learn the quirks a new markup language. You can also put format it and put newlines in there.
Re: Clay – UI Layout Library
#33I'm not proficient in C. Does this "just work" or do you need to provide some sort of rendering environment like SDL?
This is just a layout library, it doesn't do any rendering at all.
Re: Clay – UI Layout Library
#34Cool, so if i look for 'clay', i'll find your lib?
You mean, like, using a search engine? I don't think anyone here is in any special position to be able to answer that question.
Re: Clay – UI Layout Library
#35This is a delightful take on a style of UI I really love. Separating the UI logic from drawing with a set of draw commands is an excellent and very versatile idea - I first saw it in microui, and the separation allowed me to easily use the library in the browser using WASM and Canvas2D. (https://rxi.github.io/microui_v2_an_implementation_overview....)
Also, doing layout in WASM and rendering to HTML is a great idea that I can't believe I never thought of before.
Re: Clay – UI Layout Library
#36Nice! It's pretty cool what you can make in a few thousand lines. Though Flex isn't my favorite as I prefer full CSS Grid. So I ended up making a CSS Grid layout library that I'm proud of in pure Nim (1). Though I'll have to checkout Clay and compare some of the layout algorithms. It's neat to see boxes resizing themselves using an algorithm you implemented. Wonder if I could expose a C interface? The reason I like C…
Cool! I also have a standalone implementation of CSS Grid [1]. Implemented in Rust in my case (and we also support Flexbox and Block layout). Looks like the licenses are both MIT (although you may want to add a LICENSE file to make that easier to find) so feel free to steal bits if you want. We aim to be fully web compatible, although we're not quite there yet.
One thing we have that you may be particularly interested is a reasonably substantial test suite. The tests are defined as HTML snippets that we run through Chrome using webdriver in order the scrape (hopefully) correct assertions, and then format into pure-code unit tests. If you wanted to you could write your own test generator and reuse our snippets. (this test infrastructure is also partially shared with Yoga [2], the C++ Flexbox implementation that powers React Native)
Re: Clay – UI Layout Library
#37I'm not proficient in C. Does this "just work" or do you need to provide some sort of rendering environment like SDL?
No, the library is about doing the layout only.
Yes, the repo offers a couple of example renderers.
The idea is that you already have a rendering pipeline (e.g. in your game engine), but want to lay out more complex UIs in it. Then you can use this library to make nice settings / chat / stats / whatever screens, or even render realistic content onto screens of in-game computers, pages of books, etc.
Re: Clay – UI Layout Library
#38Nice! It's pretty cool what you can make in a few thousand lines. Though Flex isn't my favorite as I prefer full CSS Grid. So I ended up making a CSS Grid layout library that I'm proud of in pure Nim (1). Though I'll have to checkout Clay and compare some of the layout algorithms. It's neat to see boxes resizing themselves using an algorithm you implemented. Wonder if I could expose a C interface? The reason I like C…
Correct CSS grid layout calculation is about solving system of equations and constraints. In simple cases, when there are no spanned cells (like in flexbox), it can be done relatively trivially.
Otherwise solving that system is far from being trivial, you will need simplex solver or the like, for example https://constraints.cs.washington.edu/solvers/cassowary-toch...
Re: Clay – UI Layout Library
#39Nice! It's pretty cool what you can make in a few thousand lines. Though Flex isn't my favorite as I prefer full CSS Grid. So I ended up making a CSS Grid layout library that I'm proud of in pure Nim (1). Though I'll have to checkout Clay and compare some of the layout algorithms. It's neat to see boxes resizing themselves using an algorithm you implemented. Wonder if I could expose a C interface? The reason I like C…
Correct CSS grid layout calculation is about solving system of equations and constraints. In simple cases, when there are no spanned cells (like in flexbox), it can be done relatively trivially. Otherwise solving that system is far from being trivial, you will need simplex solver or the like, for example https://constraints.cs.washington.edu/solvers/cassowary-toch...
You definitely don't need a general constraint solver for CSS Grid. The algorithm (including for cases where there are spanned cells) is well defined in the spec [1], and can be translated directly into code.
Re: Clay – UI Layout Library
#40cool stuff! selectable text is a MUST in the browser for me. In clients and apps that do not need that or can provide it themselves, this seems to be a very nice and tiny solution.
it's weird to watch it break text selection/copy-and-paste : feels like it might be fixable, though. I'm a stuck record on this, but I really feel like the regressions in clipboard universality are one of most understated losses of UI shifts in the last few years (along with linkability and embedding)
Should that be part of a layout engine though? I’d expect to insert a tree of nodes with styling information that affect layout and receive a tree with calculated x, y, width and height for its elements.