Web Components

General Information

The WebViewer user interface is undergoing significant changes with the introduction of Web Components. Web Components are a suite of technologies that allow developers to create reusable custom elements with encapsulated functionality, enhancing modularity and reusability in web development.

The new user interface is offered as a beta feature.

This release introduces three key innovations: a new demo app, a comprehensive library of Web Components, and a UI-kit with essential elements.

For more information on Web Components, please refer to the Mozilla documentation here.

Our New User Interface

The current UI approach is being modernized to align with contemporary web development standards. Web Components offer a modular and reusable approach to building web interfaces, enhancing both development efficiency and the user experience.

This initiative aims to satisfy users discovering our technology with ready-to-use modules, as well as web developers who wish to slightly modify the interface or fully control every detail and integrate it into their existing projects.

By adopting these modern standards, we ensure that our user interface remains flexible, scalable, and easier to maintain, ultimately providing a more robust and user-friendly experience for all stakeholders.

Introduction to Our Projects

Demo App

The new user interface is showcased in our latest demo app, providing a practical example of how the new components can be utilized. Built using React but with agnostic technologies, it reproduces the features of the previous UI with additional demo features such as a layout, a top menu with new interactivity, new dropdown menus, and refresh icons.

../../../_images/webviewer_web_components.png

Library of Web Components

A comprehensive library of independent Web Components has been developed, encompassing all known interfaces of our product. This library is used extensively in the demo app to demonstrate its capabilities.

Viewer Components and Utilities:

  • hoops-web-viewer: Encapsulated HoopsWebViewer within an HTML tag. It provides a seamless way to integrate the viewer into your web application.
  • hoops-model-tree: Displays the AssemblyTree structure. Can be bound to the Viewer for selection events and visibility management, enhancing interaction with the model hierarchy.
  • hoops-layer-tree: Displays the layers from the AssemblyTree with associated nodes. Can be bound to the Viewer for selection events and visibility management, allowing for detailed layer control.
  • hoops-view-tree: Displays the views from the AssemblyTree with associated nodes. Can be bound to the Viewer for selection events and visibility management, facilitating view management.
  • hoops-toolbar-buttons: A set of buttons to control events for the WebViewer. It provides easy access to common viewer functions.
  • react.ts: A React adapter that wraps all components for event handling. It is only needed for React projects and ensures seamless integration with React’s event system.
  • hoops-webviewer-context-manager: A state manager for shared behavior between components. It is necessary for managing the state of toolbar buttons and other shared functionalities.

UI-kit

A modest yet essential UI-kit has been created to support the development of the Web Components library and the demo app. This kit includes basic but necessary elements to ensure a cohesive and functional user interface. It provides simple UI widgets, plus a layout with menus and panels for containers, and a tree generic enough for all components to use.

UI Components and Utilities:

  • hoops-layout: A comprehensive layout manager featuring top, down, right, and left panels, toolbars, a menu bar, a status bar, and a central widget. It provides a structured and organized interface for your application.
  • hoops-button: A customizable button component that includes text. It can be used to trigger actions or navigate within your application.
  • hoops-dropdown: A dropdown menu component that allows users to select from a list of options. It enhances the interactivity and usability of your application.
  • hoops-icon: A web component that stores and manages all the icons used in your application. It ensures consistency and easy access to icons.
  • hoops-icon-button: A button component that includes an icon and text. It combines visual appeal with functionality, making it easy for users to understand its purpose.
  • hoops-list: This class implements a list view as an HTML custom element. You can integrate it into your application using the hoops-list tag. It provides a structured way to display a list of items.
  • hoops-node-properties: A panel designed to display properties in a key-value format. It is useful for showing detailed information about selected items in your application.
  • hoops-toolbar: A basic vertical toolbar that allows you to stack buttons. It provides a convenient way to group and organize tools and actions.
  • hoops-tree: This class implements a tree view as an HTML custom element. You can integrate it into your application using the hoops-tree tag. It is ideal for displaying hierarchical data.
  • hoops-separator: A separator component used in toolbars to visually divide groups of buttons or tools. It helps in organizing the toolbar layout.
  • react.ts: A React adapter that wraps all components for event handling. It is only needed for React projects and ensures seamless integration with React’s event system.

Introduction to Using Our Demo App

How to Launch

Instructions on how to launch the demo app within our demo program, including system requirements and expectations.

Requirements:

  • NodeJs 18.20.7 or more recent installed
  • Folder %APPDATA%/Roaming/npm/ must exist

To launch the demo, in the folder /quick_start/beta-demo-app/.

npx http-server -c-1 . -o "/?scs=arboleda.scs"

Note

All required dependencies will be downloaded and installed and a web page will be launched in your default web browser.

Introduction to the Development Environment

New Features

Sharing the source code used in the demo app, the Web Components library, and the UI-kit. The goal is to accelerate adoption, specific developments, and integrations.

Important:

This is a beta program. Our final target is to provide npm packages through a registry ready to be install. The following recommendations are workarounds until the final state.

  • copy /web_viewer/@hoops to your /dependencies folder from your application project
  • npm install ./dependencies/@hoops/web-viewer-components

Build our new demo app

In /web_viewer/@hoops/beta-demo-app-src, following commands to manage the project:

Important:

This is a beta program. yarn usage is temporary, npm will be the final tool.

yarn install
yarn dev

Beta Program Timeline

Current Coverage

As of now, the demo roughly covers 75% of existing features. The missing features are planned for the commercial release and are currently under development. They will be added progressively throughout the beta program.

UI feature Status Release target
Context menu COMPLETED 2025.3.0
Cutting planes UI IN PROGRESS 2025.3.0
Dark mode IN PROGRESS 2025.3.0
BCF TO DO 2025.4.0
API Reference manual TO DO 2025.5.0
Programing Guide IN PROGRESS all until commercial release
Tutorial TO DO 2025.6.0
Commercial release TO DO 2025.6.0

We encourage you to get familiar with our new tools and share all feedback with us to improve the user experience with our product.