Scrawl-canvas VS egui

I don't like Typescript because it forces me to think about types and data structures and stuff. Which is a Good Thing because I absolutely have to think about that stuff when working on large codebases with a team of colleagues: without the inline documentation and text editor help TS gives me when working on those codebases I'd be (at least!) 10x slower when refactoring old code or adding new code. And nobody wants to pay a slow developer!

However ... the one place I refuse to use Typescript is in my side project - a JS canvas library. I can justify this because: 1. it's a big codebase, but I know every line of it intimately having spent the last 10 years (re-)writing it; 2. nobody else contributes (and I kinda like it that way); and 3. I keep a close eye on competing canvas libraries and I've watched several of them go through the immense (frustrating!) work of converting their codebases to TS over the past few years and, seriously, I don't need that pain in my not-paid-for life.

Even so, I do maintain a .d.ts file for the library's 'API' (the functions devs would use when building a canvas using my library) because the testing, documentation and autocompletion help it offers is too useful to ignore. It is additional work, but it's just one file[1] and I can live with that.

[1] https://github.com/KaliedaRik/Scrawl-canvas/blob/v8/source/s...

> working with glyphs and iterating them in reverse for RTL is brain-breaking. And line wrapping gets really complicated. It's also the most obscure because nobody has written down everything you need to know in one place

I can confirm this. I've been working on a (much simpler!) text layout engine for my canvas library over the past couple of months and the amount of complexity associated with just stamping some glyphs onto a canvas has left me screaming at my laptop on an almost daily basis. Getting a decent underline was a proud moment!

Question: did you ever find out what algorithm the various browsers are using to calculate how many words can fit on a given line? I'm almost there, except words will occasionally jump between lines when I scale the text. Really annoying!

The PR's still a work in progress, but I've got all the functionality I want in there (shaping lines to fit in non-rectangular containers, styling text, text along a non-straight line, dynamic updates, etc). Just need to test and document it all now ... https://github.com/KaliedaRik/Scrawl-canvas/pull/75

I've got myself organised and prepared a List Of Things To Do[1] to make my 2D Javascript library even better than it already is. Given that I've been working on the library for over 10 years now, and have never before set out such a list, I call this Progress!

[1] https://github.com/KaliedaRik/Scrawl-canvas/discussions/cate...

'Kay, I don't know if this anywhere close to what the OP wants, but this sort of live browser tab manipulation is possible to do using a mix of a a canvas element and the browser's Screen Capture API[1] (plus my JS canvas library, once I merge and publish the changes into its next release[2]).

This solution[3] shows the modified browser tab in a separate browser tab. I've got no idea whether it's possible to do the same sort of trick in the same tab (but probably not). I also have no idea how secure the Screen Capture API is - I'd get very nervous about doing this sort of thing when looking at my bank's online portal!

[1] https://developer.mozilla.org/en-US/docs/Web/API/Screen_Capt...

[2] https://github.com/KaliedaRik/Scrawl-canvas/pull/57

[3] Youtube video of the effect: https://www.youtube.com/watch?v=hCi6LmKMAo0

My canvas library's README[1] has a video embedded in it. FWIW I'm not convinced it adds anything to the library's sales pitch.

[1] https://github.com/KaliedaRik/Scrawl-canvas

> And I’m just mentioning some of the unfixable problems with this approach

I agree that using a canvas instead of leveraging existing accessibility supplied by HTML/CSS/JS and the DOM is an accessibility nightmare.

However, I disagree that canvas accessibility issues are "unfixable". Difficult? Yes. But not unfixable. In my view, the element works best in partnership with its wider environment (HTML/CSS/JS and the DOM), not as a replacement for it. With that in mind, we can start to tackle the accessibility issues you raise - fonts, links, interactions, etc.[1][2]

I have an ambition to one day become intelligent enough to understand/code in Rust, and I'm really glad to see that people are thinking about accessibility as a fundamental part of UIs being developed in Rust.

[1] - Which is what my JS 2d canvas library tries to do: https://scrawl-v8.rikweb.org.uk/

[2] - My thoughts on accessibility, and how I try to fix them using my library: https://scrawl-v8.rikweb.org.uk/learn/eleventh-lesson/

If, however, your company is set on this course, I very strongly suggest you use a canvas library - if only for the MVP. Here's my canvas library (spam alert!) ... even if you don't use it in your product, the library might help give you some ideas on how to overcome some of the responsive, interactive and accessibility issues you'll be facing.

Scrawl-canvas - example and another example (links to code at bottom of each page)

Probably the hardest part, if you are new to egui, is to work out how to display the widgets you want. The egui demo site is quite handy in this regard. It features the egui widgets, and has GitHub links to the Rust code used to make each widget. This will help you replicate them in your own project.

Thanks for the feedback!

It is definitely fixable. Take a look at https://github.com/emilk/egui/issues/996 for some examples of how others have styled egui, or try out https://app.rerun.io/

Styling is done with `ctx.set_style`, but creating a nice style isn't very easy at the moment (basically you'll have to tweak constants in code, and then recompile). I'm working on making it easier as we speak though!

Nothing is wrong with that, it’s rather a workaround, ultimately I am trying to have one language only including the UI too (been playing with egui),so I don’t have to use JavaScript.

https://github.com/emilk/egui

FWIW, I opened an issue: https://github.com/emilk/egui/issues/4046

That's fair. I don't have experience with other immediate mode libraries. It's good to hear that it's not an intrinsic limitation

https://github.com/emilk/egui?tab=readme-ov-file#layout Here the author discusses the issue directly. They note that there are solutions to the issue, but that they all come with (in their opinion) significant drawbacks.

For my use case, if I have to do a lot of manual work to achieve what I consider behavior that should be handled by the framework, then I don't find that compelling and am inclined to use a retained mode implementation.

It totally depends on what IoT and what purpose, for example:

IIoT/PLC/industrial automation: most likely you will have to use vendors software, most if the time it’s crap, and a mix of several tech stacks like MSSQL/C#/C++

Sensors and such: depends on what are you building or using the sensors: the protocol mostly is MQTT, and if you would store it in a db postrrsql, elasticsearch, surreldb, influxdb among the most I used.

Robots/drones: on what I build, I use protobuf/grpc for performance and cross-language and direct linux socket io, and where needed websocket but mostly for any web interaction rather than the protocol itself. The tech stack for those, the embedded side is up to you or sometimes based on the sdk you are dealing with, the backend/frontend however, I used to use go/nodejs and for frontend svelte or a simple js library/framework, but recently I’m shifting and redoing everything in rust, embedded, backend and frontend (using something like egui https://github.com/emilk/egui).

When it comes to IoT, I try as much as possible to stay away from python unless you are scripting something else done in go/c++/rust, look at python as a glorified bash script, it’s useful for that or other data science work, but not in IoT.

Same goes with other tech you mentioned, it might suit one case but not another, for example, MQTT is good for sensor IoT type, but good luck controlling a drone with it, mongodb might be great to store a fleet of robots with its access credentials and such, but if you try to use it to store realtime data, it might not perform as expected, and so on.

AFAIK the Rust equivalent to C++'s Dear ImGui is egui.

The creator of Rerun (Emil Ernerfeldt) also created egui [1], an immediate GUI library for Rust. The library is similar to Dear ImGui but it is written in Rust and can be used for desktop and web apps (compiles to WASM and uses WebGL, demo [2]). Desktop apps can target OpenGL (does not display correct colors on macOS, does not work in VirtualBox on Windows) or WGPU (uses native APIs for each platform, works without any problems, but the binary is a big larger).

[1] https://github.com/emilk/egui

> [...] you can build UIs that are snappy and keyboard driven.

That's not an advantage that is exclusive to TUIs; after all, you're running your TUI inside a graphical application that emulates a terminal. (Unless you're rocking an actual VT102, in which case I bow down to you.)

In fact there's an entire class of applications that are extremely snappy and keyboard driven, by their very nature: games.

Some people have taken to writing GUI apps like you'd write a game, and the effects range from OK to fantastic. Check out Lagrange (https://gmi.skyjake.fi/lagrange/), AppManager (https://tildegit.org/solene/AppManager), Dear ImGUI (https://github.com/ocornut/imgui), egui (https://github.com/emilk/egui), and many others.