Demos / Experience

See some of the powerful capabilities of the InfiView framework.
The demos are not finished products (although they can be used to quickly develop such products).

Flight Browser

INTRODUCTION

One of InfiView's strengths is its ability to show subsets of large contents of data in an efficient way by swapping data in and out of memory. The Flight Browser demo demonstrates InfiView's ability to integrate with third party components (in this case - Google Maps). The Flight Browser demo shows randomized airline routes between airports.

TECHNICAL DETAILS

A standard InfiView application was created in a normal manner, and then Google Maps was placed into the background of the view port. A glass pane was put on top of everything to capture any mouse events.

The airline routes are drawn using SVG in Firefox and VML in Internet Explorer. Airports are taken from a collection of airport positions. The airline routes are created by randomly connecting pairs of airports.

When many airlines are going between the same airports the lines are not drawn on top of each other. Curved lines are drawn instead.

CONCLUSION

The Flight Browser demonstrates how third party providers can be integrated into the InfiView platform. The integration can be made virtually seamless.

CLICK to run the Flight Browser demo

CLICK to run the Flight Browser demo

Network Topology

CLICK to run the Network Topology demo

CLICK to run the Network Topology demo

This application demostrates: (1) how third party providers can be integrated seamlesly into the InfiView platform. (2) InfiView unique layering system - the map is controlled by InfiView. (3) How InfiView applications can be extended with any Bindows components (in this case - the live gauge).

A standard InfiView application was created in a normal manner, and then Google Maps was placed into the background of the view port. A glass pane was put on top of everything to capture any mouse events.

Try to:

Live Flow

CLICK to run the Live Flow demo

CLICK to run the Live Flow demo

Live animated flow between multiple elements.

Try to:

Network Topology with Layers

CLICK to run the Networks Layers

CLICK to run the Networks Layers demo

Multiple networks displayed using our Layers technology.

Try to:

Live Motion & Flow

CLICK to run the Live Motion demo

<--- CLICK to run
Inside the demo, click the Start button, move the slider to change the speed.

InfiView supports live graphical presentation of movements and flow (technical term: moving edges).

You can use this to develop applications presenting actual process flow and live location and movement.

Several examples, a live metro/subway application, showing location and movement of all the train cars (or buses) in real time, or money flow in a corporation, and how much is currently available in every site, or, live supply chain application, etc.

As a programmer you have full control over the weight of the edges (lines or any polygon), their color, the speed and direction of the animation, you can tie it to real life events - and of course, the whole layout could be programatically generated and updated from database(s).

40,000 Interactive Nodes

Click to run

<--- CLICK to run

Showing how InfiView can present in a browser, a large data set, stored on a remote server, while enabling users interaction.

Features

Implementation

The InfiView application is the view layer that runs in the browser. It uses client-side technologies like HTML, JavaScript, SVG and VML to render the graphical diagram.

The data for the network resides in a server-side database. The server exposes this data through a JSON web service interface.

We used JSON as the transfer format because it is a good fit for JavaScript web clients; However, XML could also be used.

The application takes advantage of InfiView's memory management technology so that only the part of the network that is visible on the screen needs to be transferred over the network. As the user pans or zooms the viewport, InfiView intelligently fetches more data from the server as needed (and at the same time, releases unused data from memory).

The backend holds the network database, including the positions and properties of all the nodes, and the links between the nodes. It uses a spatial index to efficiently find all the nodes within a certain rectangle. The demo backend is implemented using the Grails framework.

Balloon Tree

CLICK to run the Balloon Tree demo

CLICK to run the Balloon Tree demo

The Balloon Tree demonstrates InfiView's automatic layout capabilities. It is using the InfiView balloon tree layout algorithm. If a 'node' is selected (by clicking) it becomes the root node of the tree and the balloon tree layout algorithm recalculates the positions and the position of the root node is centered. Leaf nodes are not selectable.

Flowchart

CLICK to run the Flowchart demo

CLICK to run the Flowchart demo

The Flowchart demonstrates how a flowchart editor (created with InfiView, of course) may look. You can drag and drop symbols from the left panel onto the viewport area ( the dominating area under the InfiView logo). After symbols have been added, you can select them by mouse clicking, and move them by clicking a symbol while draging it. If the chain tool is checked (toggle key) you can connect symbols by by clicking a symbol and while keeping the mouse button pressed, drag the mouse cursor to another symbol, then release.

Network Topology

CLICK to run the Network Topology demo

CLICK to run the Network Topology demo

The Network Topology is similar to the Flowchart Demo, using different symbols. In addition, it demonstrates InfiView plowing capabilities: when symbols intersect, InfiView recalculates their positions.

Edge Demo

CLICK to run the Edge demo

CLICK to run the Edge demo

The Edge Demo demonstrates how InfiView actually displays multiple edges (technical term for connector lines). You can move the small rectangle in the preview box (bottom right of the demo) and notice the speed in which InfiView generates the display.

Components

CLICK to run the Components demo

CLICK to run the Components demo

The Components Demo is a simple demonstration of how InfiView displays multiple plain components. You can move the small rectangle in the preview box (bottom right of the demo) and notice the speed in which InfiView generates the display.

InfiView Wizard

CLICK to run the InfiView Wizard

CLICK to run the InfiView Wizard

The InfiView Wizard application demonstrates how easy it is to create your own InfiView application. Choose your symbols, edges and tools. At every stage you can modify them (and of course, add your own). Then press Preview and see the fully functional InfiView application you just generated - in action.

Download the FREE developer kit Features - Must See!