Project for User Interface & Layout

[simplygreatwork]

I've been working on a side project for UI and layout in Pixi.js named: GoodShow. I began a new implementation (not yet posted to GitHub) using a DOM scenegraph where each node is backed with a canvas - so I'd be able to incorporate HTML content layers more easily. And then a couple of weeks ago I discovered Scenery.js

I'm interested in finding collaborators to create robust UI entities and components (ECS) for Scenery - or in my existing DOM+Canvas implementation. Let me know if you have any interest in working with me in this space. Thank you, Philip Weaver

[simplygreatwork]

Looking at the source code, I noticed some recently updated source files pertaining to layout. Is this new? Do examples exist? Do you need any help?

[jonathanolson]

DOM scenegraph where each node is backed with a canvas

Sounds interesting. Are the "painted" nodes the only ones with Canvases?

so I'd be able to incorporate HTML content layers more easily

If you haven't Scenery's "DOM.js" node (potentially renamed in the future) allows embedding external content in a node. There is currently some complication with how to display Canvas content in front of HTML elements in a way that won't block allowing input events through to the HTML content, particularly in IE9-11 if I recall correctly. When you incorporate HTML content, is it interactive?

We have already had the need for many UI components, but didn't want our choices to always be included directly in Scenery. https://github.com/phetsims/sun contains a repository of components that we believe should be generally useful and extensible. https://github.com/phetsims/scenery-phet contains components that are much more specific to the PhET project's and look-and-feel.

Is this the type of components that you were thinking of working on?

If you are interested in collaborating, I would recommend contacting @ariel-phet. There are many types of user interface components that we haven't had the need for yet!

Please let me know if you have any questions.

[jonathanolson]

http://phetsims.github.io/scenery/doc/#dom I believe is an example of using the 'DOM' node that allows including HTML content (where you can click and interact with the embedded textbox).

[simplygreatwork]

@jonathanolson In my project, my goal was to render everything/as much as possible using multiple canvases - but also allow each canvas element to have an HTML element positioned above if I wanted to incorporate markdown or a browser native text editor. So by default, each entity/node would/could have both. So my HTML element is only above the canvas element for now. When I was originally using a single Pixi canvas, it was very tricky to incorporate HTML content layered properly.

I have been mainly focused on simple components in my project and some are inspired by Material Design. I have painters, layout managers, miller panels, lists, buttons, labels, message notifications, drawers, dialogs, extents, margin, padding, and so forth... I'm also using procedural vector drawing ("turtle") for composing shapes.

I think it's great that you all have scenery split out into different units:: kite, dot, sun, ... I will reach out to @ariel-phet. The main question I have right now is: are there any public examples for sun which I can run and evaluate? Edit: I'll study the PHET Development Overview.

[samreid]

We don't have a kitchen sink, but if you checkout the PhET source code, you can launch http://localhost/sun/sun_en.html (you may have a different path or relative port) to see some sun demos.

There are also other reusable components in "scenery-phet":

Unfortunately, these demos don't have 100% coverage of our components, but you can get a better sense of what exists and what's possible by launching various HTML5 PhET simulations from https://phet.colorado.edu/en/simulations/category/new