B4J Question How to Create a Network Diagram

[BillMeyer]

Good Day B4X'ers
Any ideas how one would go about creating something like the image below - or do you know of an API that one could use ???

All ideas and help appreciated...

Thanks in Advance

 

[Magma]

Good Day B4X'ers
Any ideas how one would go about creating something like the image below - or do you know of an API that one could use ???

All ideas and help appreciated...

View attachment 133673

Thanks in Advance

You can create a table or any string array... with at least two columns...
id and childofid... if chiofid is null,"" is the root

You can make a canvas with scrollpane and draw all these easy or you can use layouts and scrollpane to be easier...

 

[peacemaker]

Interesting task, it's interesting if any code solution will be published here, when and if developed...

 

[Magma]

I think is simple as idea... may could be difficult in design if tree has many childs in a row...

 

[Mashiane]

[BANanoVuetifyAD3] Organogram Lite FireBase WebApp Source Code @ $11

Ola See on GitHub With this project one is able to create multiple projects with multiple child elements. The back-end database is Firebase. This means one has to create a FB profile to store the contents. What you will learn? Firebase CRUD (Create, Read, Update, Delete) Loading...

www.b4x.com

 

[mcqueccu]

Take a look at this.

"How to draw S-curved arrows between boxes / rectangles"

https://dragonman225.js.org/curved-arrows.html (Usually I think I tend to post things like this in Chit Chat, but that's not searchable from the forum search engine so I suppose it's better posting it here.)

www.b4x.com

 

[epiCode]

Graphviz

Please join the Graphviz forum to ask questions and discuss Graphviz. What is Graphviz? Graphviz is open source graph visualization software. Graph visualization is a way of representing structural information as diagrams of abstract graphs and networks. It has important applications in...

graphviz.org

 

[William Lancee]

The class described HERE made it easy and quick to create the demo below. Zip includes class.

 

[William Lancee]

Version 2 has specs for nodes and arrows, as well as touch sensitivity for both nodes and arrows. It is still less than 150 lines of code.

' LOGGED TEST TOUCHES
'CEO: Hans DeVoort
'The Company
'Root---->CEO
'VP-HR: Emelia Hartman
'Root---->VP-HR
'VP-Finance: Michael Rocher

 

[SJQ]

A number of years ago I created a couple of projects in B4A... one an interactive fiction creator for a school, the other for our site engineers for Wire and Network schematics... Its Similar to the previous post.
I created these in B4A, I've used a Canvas with Labels and drawn lines and the Pinch and Zoom Lib.
So the user can tap and hold on a node, then move it around keeping the connecting lines connected to the relevant nodes.

 

[William Lancee]

The NetChart project has evolved into a cross-platform B4XPages class.

https://www.b4x.com/android/forum/t...-network-of-nodes-connected-by-arrows.143069/