Canvas component?

Hi,

First of all great library! I decided to use it in a tool I just started and so far so good.

Do you plan to support a Canvas component?

Kr

1 Like

Hi,

Yeah, this is certainly id like to add / abstract into haxeui-core. The last comment here outlines how i think i would like to do it: https://github.com/haxeui/haxeui-core/issues/108

To save you a few clicks :wink: :


I have a general idea for this, here is my outline (im only detailing openfl and html5 here, but the same idea applies to all):

  • CanvasView extends Component to become part of the haxeui-core system, this in turn extends ComponentBase that lives in the backend.
    • haxeui-html: ComponentBase contains an DOMElement use as a surface
    • haxeui-openfl: ComponentBase extends Sprite to use itself as a surface
  • A new Graphics class that will extend GraphicsBase that lives in the backend (as most backend type classes do)
    • Unlike most haxeui classes Graphics will take in a constructor param that is a haxeui Component, it will pass this up to the parent class (GraphicsBase)
    • Graphics will expose draw calls and simply pass them up to the parent class
  • CanvasView will encapsulate a Graphics instance and use this to acheive draw calls
  • CanvasView itself will be available to xml UIs, but actually drawing to it can only be done in code / script

Example Impl:

haxeui-core:

class Graphics extends GraphicsBase {
	public function new(component:Component) {
		super(component);
	}

	public function line(x1, y1, x2, y2) {
		super.line(x1, y1, x2, y2);
	}
}

class CanvasView extends Component {
	public function new() {
		_graphics = new Graphics(this);
	}

	public function line(x1, y1, x2, y2) {
		_graphics.line(x1, y1, x2, y2);
	}
}

haxeui-html5:

class GraphicsBase {
	public function new(component:Component) {
		_component = component;
	}

	public function line(x1, y1, x2, y2) {
		var context = _component.element.getContext("2d");
		context.beginPath();
		context.moveTo(x1, y1);
		context.lineTo(x2, y2);
		context.stroke();
	}
}

haxeui-openfl:

class GraphicsBase {
	public function new(component:Component) {
		_component = component;
	}

	public function line(x1, y1, x2, y2) {
		var graphics = _component.graphics;
		graphics.moveTo(x1, y1);
		graphics.lineTo(x2, y2);
	}
}
1 Like

Thanks for the info!

Very interesting !
Is there anymore advances in that regard ? And do you plan a native solution too ?

Thanks

Yeah, the idea would be support all current backends… at least as best as possible. As for progress on this, well, this is none. :smiley:

Its something that would be useful, for sure, but it is another (fairly large) sub system to support at the moment, so im wary about starting it.

The example implementation would be great but I understand it’s a fair amount of work to get all backends supported.
I’m looking into a way to add an OpenGL (or any 3d buffer view) inside a custom component for the hxwidgets backend.
I know it’s pretty easy in the kha backend thanks to your renderTo method

1 Like

For some reason I cannot build any samples from the kha backend can you provide one ?

The end goal would be to make a viewport widget like this: https://github.com/zauonlok/renderer

How soon can we expect Canvas to be available on either html5/hx-widgets?

What would be required if you only wanted to target and use the canvas from wx?

This still hasnt been implemented yet (i mean, canvas in haxeui in general), you can use “drawing” in wx widgets using graphics contexts (see: https://github.com/haxeui/hxWidgets/blob/master/samples/00-Showcase/src/views/DrawingView.hx) but this isnt expose to haxeui at all at this moment.

Though, once things settle down a little i think i might just implement it and be done with it - it seems like it could be useful

Thanks, Ian.

I would want it for using regular GUI widgets to set parameters for what is being drawn on the canvas (for creating custom animated images/models/etc.). I don’t know what other users would use it for.

I wonder what type of performance the graphics contexts have in wx widgets, i would guess not very good. What type of images / models? Do you have an example?

Ian

I’d like to be able to make something like this:

https://phet.colorado.edu/sims/html/blackbody-spectrum/latest/blackbody-spectrum_en.html

where you have some GUI controls (ex. move the slider up and down on the right) that affect the graphic drawn. No real performance required here.

I see that, for that example, there’s an additional level of interaction: if you click the “graph values” checkbox, you can then click and drag a spot on the curve in the drawing which would then be able to affect values in the GUI widgets.

Another example, this one is animated:

https://phet.colorado.edu/sims/html/diffusion/latest/diffusion_en.html

Why would you guess that the graphics contexts in wxWidgets don’t have very good performance?

Honestly, i have no reason to think that the Device Contexts in wx are slow, its just a hunch, i dont think they are hardware accelerated but i really dont have any experience with them at all (except for the panel above in the sample).

Have you tried maybe playing with a hxWidgets (no haxeui) example from the sample above just to see if its even suitable? The links you posted (to me) look entierly doable in the wxDC’s but again, i have no real experience in any of this stuff.

Cheers,
Ian

Thanks, Ian. No, I haven’t played with any hxWidgets example. I’d assumed that when using haxeui-core, you don’t access hxWidgets since haxeui-core wraps that.

look entierly doable in the wxDC’s

What are the wxDC’s?

I thinking using the haxeui components for html5 or the hxWidgets in combination with something like this will help you achieve what you are looking for.

https://tamats.com/projects/canvas2DtoWebGL/demo/

Check the begin path… bezier curve… and arc line examples there.

Edit: I have been playing with a variety of WebGL and OpenGl and Canvas code today… its how i came across that demo.

Hi Shaun,

I don’t understand. That code appears to be js using canvas. How is that connected with hxWidgets?

I see I can just compile to js and use canvas, but I thought it would be nice to have HaxeUI for the GUI widgets, rather than using html. Also would be good to use HaxeUI so I could compile to native.

I used that as an example. You could do it in haxe or one of the backends and still use haxeui for your interface.

So, in wxWidgets drawing is acheived via “device contexts”, which are sort of a buffered memory area for holding pixels (as far as i know). https://docs.wxwidgets.org/3.0/overview_dc.html

These are exposed to hxWidgets, but not yet to haxeui-hxwidgets. Ive just added a new sample that uses one of these device contexts: https://github.com/haxeui/hxWidgets/tree/master/samples/00-DC

        panel.bind(EventType.PAINT, function(e) {
            var dc:PaintDC = new PaintDC(panel);
            dc.background = StockBrushes.BRUSH_BLACK;
            dc.clear();
            
            var gc:GraphicsContext = new GraphicsContext(panel);
            // normal anti alias
            gc.setFont(panel.font, 0xFFFFFF);
            gc.drawText("AntialiasMode.DEFAULT", 10, 10);
            
            gc.antialiasMode = AntialiasMode.DEFAULT;
            gc.pen = new Pen(0xFF0000, 3);
            gc.brush = new Brush(0x880000);
            gc.drawRoundedRectangle(10, 30, 100, 50, 10);
            
            gc.pen = new Pen(0xFFFFFF, 3);
            gc.strokeLine(10, 120, 50, 160);
        });

image

So, it would be useful i think if you had a play with that example, and a) make sure it has the functionality you are after and b) make sure it has the speed you are after.

It would also be useful to get that test app if you do decide to make it. Then we can start looking at a haxeui-canvas to allow crossplatform / cross framework drawing.

:slight_smile:

2 Likes

This is great. Thank you. Looking into it.

1 Like