Centrifugal. A flexible user interface for creating standalone web applications

Hi everyone! Today I’d like to talk about another open-source project of mine for building web applications based on Angular.

Over the past few years, I have conducted numerous successful experiments with high-performance web interfaces, which has given me a clear understanding of the structure and architecture for the project discussed below.

So, meet Centrifugal. Check out the project’s official website—there are plenty of cool use cases there!

The project was originally conceived to create a set of high-performance, flexible tools and components for building web applications. However, during one of the development iterations, I decided to add support for creating “all-in-one” interfaces—specifically, a standalone application mode featuring a fully customizable virtual keyboard. This enabled full support for building user interfaces for applications such as self-service kiosks and similar systems.

Keyboard position, layouts, key sets, and styles are fully customizable. A custom mechanism for focusing on on-screen elements has been implemented. When a text field gains focus, the virtual keyboard slides out (depending on the configuration), and scroll containers undergo multi-level scrolling up to the keyboard’s actual edge, ensuring ease of input and readability.

Since custom scroll containers are used, the handling of standard interactive HTML components—such as <button/>, <a/>, <input/>, <textarea/>, and so on—changes slightly. To ensure correct handling, a special NtControl directive has been created; it must be applied to all standard interactive HTML components.

Example:

<button ntControl (onVirtualClick)="onVirtualClickHandler($event)">  My button</button>

Full support has been implemented for <input/> types such as text, password, number, email, tel, and URL. Additionally, you can specify a custom text field type and configure the corresponding keyboard layout for that type.

<input type="text" ntControl value"Text">

For an example of a custom type and keyboard layout, see the Virtual keyboard link. Using Centrifugal components is quite simple; take a look at the example of creating a scroll-view:

<nt-scroll-view #scrollView>  <div class="scroll-view__content" [style.width.px]="3000" [style.height.px]="3000"    [class.grabbing]="scrollView.$grabbing | async">    My content  </div></nt-scroll-view>

or a slider example:

<nt-slider [step]="1" [max]="100" [value]="value()" thumbSize="50%" (onChange)="onSliderChangeHandler($event)"></nt-slider>

Fluid UI

Now I would like to demonstrate the Fluid UI concept and the principles of how it works.

Each component of the user interface—developed using the Centrifugal library—interacts with the other components along a hierarchical chain, employing specific “physical” interactions. Forces of compression or tension may be applied, impulses transmitted, and so forth.

The library does not handle standard web scroll containers; instead, Centrifugal employs its own implementation of scroll containers featuring specific “physical” properties—such as scroll speed, acceleration, friction, and so on. This tool focuses entirely on working with standard HTML components, providing developers with familiar methods for building web applications.

In addition to the “physics” engine, each base component accepts a set of parameters to generate a motion blur effect. Motion blur is disabled by default, as it is a relatively resource-intensive post-processing effect.

In addition to motion blur, virtual lists can apply element transformations to create 3D list spaces, as well as depth of field and fog effects for list elements receding into the background.

Support is provided for complex component interactions—such as the example in the image above, which demonstrates a sectioned “Sheet” web component. In addition to controlling the component itself (opening or closing it), the user can simultaneously interact with its internal components.

Most importantly, notice how simple it is to use complex component implementations in the code:

<nt-sheet #sheet class="sheet" position="bottom">  <div class="sheet__content" [class.grabbing]="sheet.$grabbing | async">    Content  </div></nt-sheet>

It is designed with developer ease of use in mind.

All this and more enables you to create sophisticated next-gen web interfaces for your applications!

API

The API is available for extensions, enabling the creation of compelling components. See an example of a custom component built using the library’s standard API.

A full description of the API and usage examples are provided on the project’s official website.

Examples

The centrifugal/examples section features great examples of how to use the tool. You can view live demos on the project’s official website under “Advanced Examples.”