SmartGraphUI is an adapted version of the SmartGraph library, developed to implement new user-experience features in a stable user-friendly interface.
If you need a ready-to-use library for user-side representing path graphs in which there are nodes, edges, and associated weights, which offers a user-friendly interface to represent, manage, and interact with path graphs, then SmartGraphUI is the right solution for you.
This library is a fork based on the source code of the SmartGraph v2.0.0 library on which existing classes have been modified and new ones have been added. SmartGraphUI is therefore the adaptation of SmartGraph to improve the user-experience in a user-firendly interface.
| Node | Edge | Graph |
|---|---|---|
| new node | new edge | screenshot |
| delete node | delete edge | display path found |
| rename edge | upload graph | |
| rotate edge | download graph | |
| fork edge |
- Now method parameters are generic and independent of internal classes.
- The logic has been made more high-level so as to more easily manipulate the components of the graph
- Graph management requires as parameters only the labels of the nodes involved in the method
| Hover | Click | Drag | Scroll | |
|---|---|---|---|---|
| Node | Yes | Yes | Yes | |
| Edge | Yes | Yes | ||
| Background | Yes | Yes | Yes |
Empty callbacks disable graph interactions so set actions in your components to manage the graph (e.g. button to create new edge)
Note
The features of the forked repository can be found at SmartGraph
An effective and minimal user interface has been designed based on the Less-is-More principle.
It is possible to choose whether to use the default UI or configure custom actions for the associated events.
Ability to display the found path with an animation to highlight the edge nodes associated with it
Ability to upload json file of the graph or to download json file of the graph
- Completely responsive container
- Smooth and stable Zoom and Drag
- Node create/delete
- Edge create/delete/rename/rotate/fork
- Display the found path
- Upload and download of graphs
| Left | Right | Bidirectional |
|---|
Max two edges with different directions connected with two nodes
The user make Douple Click on one of this components of the graph to do:
| Background | Node | Edge |
|---|---|---|
 |
 |
 |
| New Node | New Edge | Delete Edge |
| Delete Node | Direct Edge | |
| Split Edge | ||
| Edit Edge |
Gifs from SmartGraphUI
The user interactions with graph container can be:
| Scroll to Zoom | Drag to Move | Zoom and Drag |
|---|---|---|
 |
 |
 |
Gifs from SmartGraphUI
- Dragging control to automatically reposition the graph when it goes out of bounds
- Responsive container available to fit into any external container.
| Component | Version | Copyright | License |
|---|---|---|---|
| SmartGraphUI | Not released | 2024 Vittorio Piotti (GitHub page) (Personal page) | GPL-3.0 |
| JavaFXSmartGraph | v2.0.0 | 2019 - 2024 Bruno Silva (GitHub page) (Personal page) | MIT |
| Bootstrap | v4.0.0 | 2011-2018 The Bootstrap Authors | MIT |
Note
SVG icons from Bootstrap