Haxie UI Newb Questions -- Mixing a regular UI with low level rendering

Hi

[I have also also asked this question in the Feathers UI forum]

Apologies for the long post – my questions require some context, and are somewhat open ended “shopping list” questions because I am a newbie to Haxie.

I am building a (non game) app to render S-57 navigation charts. The app has two distinct parts:

  • a regular UI with dialogs, buttons, text fields, etc
  • a (somewhat) low level vector based renderer to show the charts (the charts are all vector based, so not tiles, but polygon, line, and point geometries)

The chart renderer:

  • doesn’t have to be blazingly fast – I can maybe (?) live with 30-45 fps
  • does need to be embedded within the app as some sort of drawable surface (so not in a separate window – think of a Canvas node in Swing/JavaFx/HTML)

I have looked at Haxe UI for the regular UI part and it looks very nice.

But I am not sure how the embedding of the chart renderer part will work in Haxie UI. I have done this kind of thing in other UI toolkits before, doing one of two things:

  • using a “canvas-like” widget provided by the toolkit, which usually doesn’t give great performance because the “canvas” is too far abstracted from the GPU (e.g. usually uses (semi) immediate mode rendering, can’t do things such as OpenGL-like indirect rendering, shaders, etc).
  • hacking together two UI rendering loops, one for the UI part and one for the low level renderer (and this is always ugly-as and fragile).

So is there some sort of “drawing widget” in Haxe UI that can be embedded in a regular UI, and is either fast by default, or allows access to low level rendering techniques? Perhaps using HaxieUI with a Ka backend would work (although power consumption on mobile might be a problem)? And maybe Haxie UI with some sort of WebGL backend for the browser?

Also small questions – does Haxie UI:
use a scene graph approach to creating UIs? (I think it does …)
allow CSS skinning of components? (I think it does …)
have good text rendering? (a lot of UI toolkits do a poor job of this)

Finally where do Ceramic, SDL and Heaps fit into the UI picture in Haxie?

So haxeui comes with a canvas component: https://haxeui.org/explorer/#basic/canvas

but it may not fit your purposes (depending on the complexity)… You can also create (with relative easy) custom components that use some external lib (though it seems yours already exists and creates vector graphics), but it seems possible that you could wrap some lower level component into a haxeui component and use that for your graphs (i think)

what backend are we talking about here?

Cheers,
Ian

Sorry my answer is a bit vague but I am new to Haxe and HaxeUI …

I am not really sure. I am building an app that needs to work on mobile and desktop. My first thought was Kha since it has quite low level graphics capabilities, but to get access to them within HaxeUI I need some kind of low level rendering access.

Any idea how fast the HaxeUI canvas is? I am drawing say 40K polygons per frame, which after triangulation runs to a few 100K triangles per frame (and this number will grow). In OpenGL that is a breeze, but most Canvas style widgets I have used in the past can’t render that at more than 30fps.

And I actually mean drawing them – each frame cannot re-use stuff from the previous frame sadly.

i guess you could use haxeui-html with with your own canvas component using the webgl context? Im actually in hospital atm so will knock up an example when im discharged… hopefully tomorrow… maybe day after

basic idea: https://haxeui.org/builder/?3fa41bff

im no GL expert so most of that is LLM’d and slotted into a haxeui component (File → View Project to view all files)

and a fun / animated one: https://haxeui.org/builder/?e9623cd3 :slight_smile:

also FYI, a similar pattern should be perfectly doable on any / all backends - though ofc the implementation details would differ drastically since it would be very backend specific

Hopefully this helps somewhat?

Cheers,
Ian

alright… last one! :smiley:

https://haxeui.org/builder/?9adb74bb