ODB-UI on Google Web Toolkit (codename)What is this?We have launched our vision for semantic interface a for public at "OpenSource Conference Ukraine - 2007" (October 27, 2007, our short blog post about). And we have made a new prototype during spring 2008 and going to enter second round
... [More]
for a final product.
Currently it reassembles mind-map interface, but nodes would have own form-formatting rules and become more dynamic.
Prototype/alpha stage.
Demo videoComponentswritten on Java Google Web Toolkit that generates all javascript (v1.4) RDF database (Jena v2.5.5) Dojo to draw SVG/VML lines in all browsers (v1.0.2) Concepthttp://gwt.org.ua/odbui/manual/fluxb_layout.html
Live demo
http://gwt.org.ua/odbui/ui-prototype2/odbui.html
Demo manualMany of us have the need to present the information on the web visually. This mind-map ODB-UI component meets this demand by offering content presentation in the same way the human mind works by visually connecting concepts and organizing them on top of each other into a general knowledge base. it will be more natural and comfortable for users to organize and share/publish ideas with our tool, comparing to the common writing plain text content/post on the web. We enable users to discuss the content publicly, navigate and search for information that is interconnected, and aggregate various independent sources.
General overview
Just after opening ODB-UI, you'll get an interface similar to the picture above, saved graph would be restored from server. Look around, you'll see:
Main menu: Load - restore graph from server Save - actually saves the graph Reset - brings you back to the default graph, substituting the current one Dump RDF - open a new window with the RDF code of currently saved graph on the server Start autoalign - would auto-allocate nodes for an optimal view. While Autoalign is working, the manual control would be ignored, but you could stop it by pressing on Stop autoalign - the same button. Add node - would create a new node without connections Active node - a node currently under a mouse pointer, it shows a toolbar with the functional buttons: edit node button delete node create tool - to add new nodes or connections (usage example below) fold/unfold node Drag'n'drop - you could move a node around by holding it by the caption field Folded node - you could fold/unfold node pressing button in the caption field
How to create new nodes and connections
Drag-n-drop icon to create new connections or nodes. If you'll release mouse button on spare place - a new node will be created there, if you'll release on existing node - would be created a new connection between nodes
More mouse actions
Move whole graph together (pan) - press left mouse button on spare place and drag Delete connection or change its color - connection toolbar would appear, if you'll press on wrench icon closer to a center of line. There are delete and color buttons Change size - by holding node's right bottom corner
Edit mode
If you'll press edit button or double-click on caption field, node would be switched to edit mode. Edit button would be substituted by save and cancel changes buttons. Press on click to open sign under title to unfold hidden rich-editor panel.
Side Bar
This component works in single user mode. It have been tested on Firefox 2+ (Windows, Linux), Internet Explorer 6, Safari 3 (Windows). No performance optimizations have been conducted.
First prototype you could find on our site - http://gwt.org.ua/en/odb-ui-proto/ [Less]