fschutt
commented
6 years ago Short answer: no, this isn't possible yet.
Long answer:
The only thing azul is very good at (right now) is drawing SVG lines and shapes (filled and stroked polygons) to a screen and/or loading them asynchronously from a database or file - because that's the main purpose I wrote it for and that part works somewhat.
However, right now there is no layout. Every div is simply stretched to the full window size because I haven't had the time to implement layout.
Theoretically, how you'd implement an input field is rather simple:
fn layout(&self, _: WindowInfo) -> Dom<MyAppData> {
Label::new(&self.text).with_event(On::KeyDown, add_character_to_text).dom()
}
// on key press, update self.text with the received characters
fn add_character_to_text(app_state: AppState<MyAppData>, event: WindowEvent) -> UpdateScreen {
// what keys are currently pressed on the keyboard?
let keys_pressed = app_state.windows[event.window_id].get_keyboard_state().current_keys.iter().cloned();
// append the pressed keys to self.text
app_state.modify(|state| state.text.extend(keys_pressed.into_iter()));
}At least that's the theory of it, On::KeyDown doesn't exist yet, this is just the theoretical API. Rendering to a canvas - well, you kind of have to do it via a CPU-backed image, then upload the buffer to the GPU by using AppState::add_image() - this returns an ImageKey, which you can use to cache the drawn GPU texture, to minimize the traffic between CPU and GPU. Or did you mean just drawing graphical shapes - that would be very simple, the debug example should give you an idea on how to create SvgLayerResource structs.
For OpenGL drawing, you can simply insert an OpenGL texture into the dom:
fn layout(&self, window: WindowInfo) -> Dom<MyAppData> {
// get the current size of the window
let (window_width, window_height) = window.get_physical_size();
// create a texture that is the size of the window
let tex = window.create_texture(window_width as u32, window_height as u32);
// draw to the texture
tex.as_surface().clear_color(1.0, 1.0, 1.0, 1.0);
// Add the texture to the DOM
Dom::new(NodeType::GlTexture(tex))
}OpenGL textures are a direct part of the 4 fundamental building blocks of a UI: divs (rectangles), images, text and GlTextures. Every other UI component is merely a composition of these 4 core elements.
But as I said - no layout yet, so the texture will simply stretch to the whole window size. You can draw anything you want to that texture, of course. I used that for the SVG drawing component, for example.
I don't think you'll have much luck with creating an input field, it's simply too early.
Yes, I do use caching internally, but only for the purpose of tracking layout variables. Every DOM node has a unique hash, so I can compare DOM trees for equality if necessary. However, keep in mind that this is Rust, not JavaScript. Rebuilding the DOM is lighting fast, not like in JavaScript. It takes a few microseconds to rebuild the entire DOM, it's simply not a performance bottleneck. In a browser, that's not the case, so people have to build complex virtual DOMs to get the performance they need since browsers weren't built with these abstractions in mind.
Hope that answers your question.
Yatekii
linonetwo
Evidlo
Hi!
I have eagerly been following your project. It looks very promising.
I am looking into using azul for my project where I use my own 2D renderer for the main canvas. Atm I use relm with gtk-rs. but GTK is really suboptimal, especially when it comes to rendering to an OGL canvas.
Now, I am well aware that azul is in a pretty early stage, but I am very willing to take all the bugs and maybe even fix them if the base features work.
So what I need is basic text-input like
<input>in HTML and rendering to a canvas. How well is this doable atm? I saw the explanations concerning my own 2D rendering in the README.md but that code doesn't seem to do anything with OGL at all.Can you tell me if those two features work in a base form and maybe point me to it?
Btw, do you use caching like a vdom internally? Or do you just calculate the entire UI each frame?
Best, Yatekii