hero image

Nlview Live Demos

This page gives an overview on live demos using the powerful NlviewJS engine, each demonstrating the benefit of Nlview for a specific use case in the EDA design flow.

The NlviewJS demos require an HTML5 capable web browser with JavaScript enabled, and – depending on your browser – most demos load either the pure JavaScript version or a highly optimized binary WebAssembly version of the drawing engine. The web browser must transfer approx. 5 MB JavaScript code (2.5 MB for WebAssembly) which can take a moment, depending on the speed of your internet connection. Additionally, for some demos a double-click may request more data from the web server (located at concept.de) which triggers network communication.

The demos require a customer login – you can get an account as part of an Nlview software evaluation.

Mobile Live Demos

Basic Features

This live demo shows some very basic features of NlviewJS and the Nlview core in general optimized for mobile devices. It allows the user to control NlviewJS using both a mouse device and/or touch gestures.

Basic Features Demo

E-engine Live Demos

E/E Architecture

E-engine uses built-in symbols e.g. for ECUs and splices to visualize complex cable harnesses as they occur in the automotive and aerospace domain. On the basis of some simple harness designs the E/E architecture demo gives an impression of how electronic components can be represented and interconnected. An incremental mode allows a stepwise exploration of the currently loaded harness design.

E/E Architecture Visualization Demo

KBL Visualization

A server-side parser reads a set of sample KBL files and fills the EDB database, which is dedicated to store visualization relevant data of vehicle harness designs. The web application queries this database and uses E-engine to display the vehicle harness data. It allows to search for components and add them to the schematic. Selecting two components at the same time enables the Path button which calculates and displays a shortest path. At each point in time, the vehicle electronics can be explored incrementally by double-clicking not yet connected cavities/connectors.

KBL Visualization Demo

Desktop Live Demos

Schematic Editing

This application demonstrates the editing capabilities of the Nlview schematic generation engine. It allows the user to select a symbol from a symbol library, configure its interface, name and other properties, and then drag and drop it into the schematic editing canvas. Nets are added interactively by connecting two pins (resp. one pin and a net) using the mouse.

Schematic Editing Demo

Design Exploration

The top Nlview instance shows the hierarchical view of the Aquarius processor from OpenCores. A double-click on an (hierarchical) instance loads its module into the top canvas and its primary input and output ports into the lower Nlview. There, the current module can then be incrementally explored by double-clicking on yet unconnected pins and not fully expanded (dashed) nets. Additionally, this application demonstrates advanced features like highlighting, page splitting, the magnify window, and a schematic history.

Design Exploration Demo

Incremental Navigation

This demo shows Nlview's incremental navigation feature, which allows the user to explore a design step by step through hierarchy borders. This application uses the Aquarius design from OpenCores and starts with an initial schematic containing the IO ports of the top module. Each double click on a pin or net loads connected logic from the server database and integrates the requested data into the current schematic.

Incremental Navigation Demo

Basic Features

The user can start several sub demos each showing selected basic features of the Nlview schematic generation engine (e.g. folding/unfolding of hierarchy blocks, path highlighting, page splitting). This demo is the NlviewJS port of the outdated Java Webdemo.

Basic Features Demo

CSS Transformation

This demo is based on the demo for incremental navigation described above and shows how CSS transformations can be used to rotate, scale and skew the canvas element. A back calculation of the mouse coordinates from the CSS coordinate space to NlviewJS' coordinate space still allows to use the incremental features even in transformed mode.

CSS Transformation Demo

EEvision: Smart Electronic System Visualization (Demo Video)

This demo video highlights the features of EEvision, Concept Engineering's visualization platform to accelerate automotive and aerospace development, manufacturing, and service.

EEvision: Smart Electronic System Visualization (Demo Video)