7 ms·
Clay (short for C Layout) is a high performance 2D UI layout library
- whateveracct 2y agoThis looks quite nice! Conceptually it reminds me of microui. But a bit more fleshed out and a nicer API.
- ngcc_hk 2y agoCan one use it with love2d I wonder?
- ofrzeta 2y agoNot an answer to your question but the repo contains a Raylib example :)
- andrewmcwatters 2y agoYes, you'd probably want to generate bindings using https://github.com/Planimeter/lffiutils https://github.com/Planimeter/lffiutils or something similar, but then you can use it in Lua.
- cyco130 2y agoHey, that's 6502 code!
- ofrzeta 2y agoWhat is? Is there a compiler with 6502 target that has uint64_t? :)
- 082349872349872 2y agolooks like https://www.riverlanguage.org https://www.riverlanguage.org > River is an experimental assembly-like programming language.
- cyco130 2y agoHmm, I don't think so, doesn't seem similar. I see a mario.chr in the next tab, seems NES-related. Pretty sure it's our beloved 6502 :)
- nicbarkeragain 2y agoAuthor here - yes you caught me. I'm building an asm IDE in C (which is why I ended up building this layout library in the first place) and the screenshot is from that application, specifically while building a NES game for Pikuma's NES/6502 course :)
- teruakohatu 2y agoGreat work Nick. My email is in my profile, could you send me an email I would like to get in touch.
- cyco130 2y agoBoth Clay and the IDE look awesome!
- michelreij 2y agoWould this work on a microcontroller like an ESP32?
- b3orn 2y agoProbably, but you'd have to write a custom renderer for it.
- rizky05 2y ago[dead]
- torlok 2y agoHas anybody made an attempt at making a library like this, but with cross platform user input, and support for accessibility? From personal experience, if you can output triangles and text, writing a UI library like this is maybe 2-3 days of work. The fun starts when you consider that younger people are touch-first.
- kevingadd 2y agoThe accessibility is the hardest part. My custom library (in C# atop a weird rendering stack) has partial narration support and full touch/gamepad/mouse/keyboard navigation, but getting all the way to integrating with native screen readers is basically impossible at this point - from investigating it, it'd probably take me at least 3 months to get it working at all, and it wouldn't be portable. One thing you have to do for reasonable accessibility is maintain a retained model behind the scenes even if you have an immediate mode API, so that's what I did. The immediate mode API does a bunch of caching in order to construct and maintain an appropriate retained mode tree across frames, which makes it possible to cleanly handle things like focus, selection and narration for invisible controls, etc. You also have to bake accessibility into the API from the start, for example by making certain every single widget has a description or a reasonable approximation of one, and by making sure there is an approximation of roles for every widget too. A simple 'read a text description of the focused/clicked control' also doesn't get you far enough for narration - for example if there's a slider or textarea, you don't want to read the description and then the new value every time it changes, your narration has to be 'smart' and know to only read the description initially. I'm hoping eventually AccessKit (https://github.com/AccessKit/accesskit https://github.com/AccessKit/accesskit) will be mature enough to use though.
- 0x0203 2y agoHave you seen libAgar (https://libagar.org https://libagar.org)? Cross platform support is certainly there, covering everything from windows XP (and earlier) to *bsd and SGI IRIX. I'm not sure what all having support for accessibility requires as I've never had to worry about it, but am curious if 1, agar has what's needed, and 2, what exactly is required of a GUI library for accessibility. Screen reader support? (Are there SR standards for desktop applications)? Dynamic scaling? High contrast? (For embedded and/or touch first UI, LVGL is pretty nice, but probably lacking any semblance of accessibility features apart from keyboard navigation, but you could hook that yourself).
- agentcooper 2y agoI wonder if you can get better performance than the built-in browser engine for certain complex layouts by first calculating the layout using Clay and then absolutely positioning the elements with HTML/CSS. There was some news feed web app that used <canvas /> for better scrolling performance.
- chii 2y agoif you can guarantee that layouts don't change during interactions, i guess it _might_ save some time for the browser (and thus battery, for low power devices). If layouts change during interaction (e.g., orientation swap), then you will have a roundtrip to the server to recalculate. I assume this would cost more time than letting the browser css engine do their thing.
- agentcooper 2y agoIn my comment I assumed that Clay layout is running in the browser as well, but your idea of running it before serving the HTML is quite interesting!
- chii 2y agoI wonder if this would be more efficient than the browser's impl. But i guess if clay does less complex layouts (but which is still sufficient for applications) than css, it might be faster than the browser's own. Very curious train of thought.
- codr7 2y agoVery interesting indeed, score one more for server side generation.
- sevnin 2y agoQuite a lot of work went into those docs. I won't use it (because I don't have a need for it) but the examples look quite pleasing, nice work!
- pistoleer 2y agoA big improvement over CSS, but still seems pretty manual and finnicky, I wonder if a constraint solver based system and syntax would be ideal for laying out UI. For instance, being able to set the constraint "element.[x,y] = other.[x,y]+other.[width,height]/2;", instead of working with "attachment" objects.
- loa_in_ 2y agoI think there already are existing mature solutions like you described. Isn't QT constraint based?
- 1oooqooq 2y agoqt lost it's golden momentum taking way too long to relax licensing in the 90s. had they done it before the gtk shift the world would be very different. btw, gtk is based on tcl/tk which i believe is the, or one of the, original auto layout engines
- nine_k 2y agoQt is C++, while GTK is pure C. These are very different languages, and exposing a C interface for C++ code as rich and complicated as Qt is not easy.
- adastra22 2y agoAd yet TFA is kinda an example of that, no?
- nine_k 2y agoQt without slots and signals is a poorer experience. IDK if the Qt Designer can work without them.
- PaulDavisThe1st 2y ago
- doodpants 2y agoIt seems that the Clay website (https://www.nicbarker.com/clay https://www.nicbarker.com/clay) can't be scrolled via keyboard.
- shakna 2y agoIt's worse than that. The site isn't accessible at all. I can't get my screenreader to make heads or tails of it.
- lelandfe 2y agoThat's because all the text is inside <div> elements, so there is no hierarchy for a screenreader to latch on to: https://imgur.com/a/D78Tbgk https://imgur.com/a/D78Tbgk ...And the three nav links are made via empty, transparent <a> containers absolutely positioned over <div> text. Focusing, therefore, has nothing to read. N.b both left- and right-clicking activates these anchors, because navigation is implemented as a delegated `mousedown` event on the document.
- codethief 2y agoKeep in mind that Clay is a layouting library, the rendering as HTML, as OP mentions elsewhere, is just a demo.
- shakna 2y agoThat's true... But... The fact is, I can't read the page. Can't tell what the project is, because I can't read the page. The demo should at least have a noscript tag, to tell me why I can't read the page.
- codethief 2y agoSorry, maybe I should have phrased this differently: Of course that should be fixed! (I have spent the last half year or so fixing a11y issues on a highly frequented website, mainly thanks to the EU Accessibility Act, so I'm starting to get a feeling for how awful non-accessible websites must be.) What I meant to say was: The lack of a11y doesn't seem to be a deficiency of the library itself but rather of a hastily written demo application/renderer.
- deleted 2y ago[deleted]
- jb1991 2y agoThe website says: > Fast enough to recompute your entire UI every frame Yet, when I scroll the front page, made with Clay, it stutters and feels like it can barely handle smooth scrolling, even on a modern Apple Silicon laptop.
- xyst 2y agoOn mobile, iPhone 15 PM, feels janky as well. It’s subtle but it’s there. Thought it was just me, but checked the comments to find similar experiences. Also, poor accessibility as well.
- kragen 2y agoi'm guessing that this is because safari doesn't allow the layout code (or anything else) to run while it's scrolling, which with normal websites (which don't use fixed positioning for everything) results in less janky experiences, and was famously critically important to get reasonable scrolling on the original iphone. it doesn't matter how fast clay's algorithms are if they're not allowed to run (otoh when i try to load the web page it doesn't work at all, not even jankily, if we're talking about https://www.nicbarker.com/clay https://www.nicbarker.com/clay)
- nicbarkeragain 2y agoAuthor here. I'm sorry that it performs poorly on your machine - if it makes any difference, it's the rendering that is slow, not the layout. The HTML examples are more meant as a demo than anything else, as the library actually doesn't do any rendering itself at all, it's exclusively a layout tool. I'm honestly not sure why the performance differs significantly between machines - I'm on an M1 mbp / firefox and it scrolls at 120 fps for me.
- zoogeny 2y agoI literally thought of building this kind of thing recently, although I have some differing ideas on how to implement it. But the general idea of a single header C-like file that compiles to wasm and outputs primitive drawing commands is exactly what I was thinking. What I really want is something like the old Flash/ActionScript display list. Just a 2d scene graph with the option to output draw commands, text or sprites. Things like containers (with things like border/backgrounds/etc.) and layouts can be built on top of that, so you could have two separate header files, one for the display list and another for a layout library.
- aarongeisler 2y agoThis looks great! I am a big fan of the single header format. I've linked Clay from my list of game resources for C developers. Cheers! https://github.com/aaron9000/c-game-resources https://github.com/aaron9000/c-game-resources
- mottosso 2y agoI was looking for exactly this about two weeks ago for a 3D editor UI and ended up with Facebook's Yoga library. So far things are running smooth. I would look closer at this library too, if it wasn't for: "Clay UI hierarchies are built using C macros" Yikes :S
- jacobp100 2y agoYoga is pretty good. Used to have a few bugs that stayed around way too long when it was abandoned for a few years. Development has picked up again though
- jasonjmcghee 2y agoFor what it's worth, my experience with the linked website was: - Text selection isn't possible, except on the final slide when I change to HTML Renderer and then it works very strangely (randomly selects all texts sometimes) - The page crashed: "Error code: STATUS_ACCESS_VIOLATION" - Also rounded corners look very strange
- nicbarkeragain 2y agoAuthor here - apologies that the site didn't work correctly for you. Just OOI did it default to the Canvas renderer when you first opened it?
- codethief 2y ago2000 loc, no dependencies, well-documented — this looks very nice! Kudos to the author!
- zelcon 2y agoNice work. Love the arena allocators. Show those Rust weenies that memory management doesn't need all that ceremony.