Web Components Introduction

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

Requirements:

The Demo app is using Import maps. Import maps are supported in the following web browser versions and above:

Browser Minimal Supported OS
Chrome 89
Edge 89
Firefox 108
Opera 76

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. Each of the components listed below is available as an HTML element.

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-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.
  • hoops-toolbar-camera-operator: A standalone dropdown to enable different camera operators.
  • hoops-toolbar-camera: A standalone dropdown to control the camera view (projection and builtin views).
  • hoops-toolbar-drawmode: A standalone dropdown to change the draw mode of the viewer.
  • hoops-toolbar-explode: A standalone dropdown with a slider to control the explode factor.
  • hoops-toolbar-home: A simple button that will reset the viewer to its initial state on click.
  • hoops-toolbar-layers: A simple button to toggle the layers view, logic needs to be implemented at application level.
  • hoops-toolbar-model-tree: A simple button to toggle the model tree, logic needs to be implemented at application level.
  • hoops-toolbar-properties: A simple button to show the properties panel, logic needs to be implemented at application level.
  • hoops-toolbar-snapshot: A simple button to trigger a snapshot, logic needs to be implemented at application level.
  • hoops-toolbar-views: A simple button to toggle the views panel, logic needs to be implemented at application level.

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.
  • hoops-accordion: A custom web component that implements an accessible accordion using LitElement.
  • hoops-switch: An input widget that allows users to choose one of two values: on or off.

CSS variables

To ensure a consistent and customizable design, our library includes a set of CSS variables. These variables allow you to easily adjust the appearance of various components to match your application’s style. The variables are defined in theme.css.

  • hoops-accent-foreground: Color used for accent elements in the foreground.
  • hoops-accent-foreground-active: Color for active accent elements in the foreground.
  • hoops-accent-foreground-disabled: Color for disabled accent elements in the foreground.
  • hoops-accent-foreground-hover: Color for accent elements in the foreground when hovered.
  • hoops-background: Base background color for the application.
  • hoops-body-font: Font used for the main body text.
  • hoops-foreground: Primary color for foreground elements.
  • hoops-icon-button-content-size-md: Size of the content within medium icon buttons.
  • hoops-icon-button-size-md: Overall size of medium icon buttons.
  • hoops-icon-button-content-size-sm: Size of the content within small icon buttons.
  • hoops-icon-button-size-sm: Overall size of small icon buttons.
  • hoops-svg-accent-color: Accent color used for SVG elements.
  • hoops-svg-fill-color: Fill color used for SVG elements.
  • hoops-icon-button-svg-stroke-color: Stroke color used for SVG elements within icon buttons.
  • hoops-icon-button-content-size-xl: Size of the content within extra-large icon buttons.
  • hoops-icon-button-size-xl: Overall size of extra-large icon buttons.
  • hoops-layout-panel-border: Border color for layout panels.
  • hoops-neutral-background: Neutral background color for the application.
  • hoops-neutral-background-20: Slightly darker neutral background color.
  • hoops-neutral-background-hover: Neutral background color when hovered.
  • hoops-neutral-foreground: Neutral color for foreground elements.
  • hoops-neutral-foreground-active: Neutral color for active foreground elements.
  • hoops-neutral-foreground-rest: Neutral color for resting foreground elements.
  • hoops-layout-panel-size: Size of layout panels.
  • hoops-layout-toolbar-size: Size of the toolbar in the layout.

React integration

To integrate our Web Components libraries into a React environment, HOOPS Communicator offers functional React components that encapsulate HOOPS Communicator UI Web Components. These components are available in the following dedicated libraries:

  • @hoops/web-viewer-components-react
  • @hoops/ui-kit-react

These libraries are essential for React integration and are utilized in our demo application.

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 COMPLETED 2025.3.0
Dark mode COMPLETED 2025.3.0
BCF TO DO 2025.4.0
Redline markups menu DOING 2025.4.0
Measurements menu TO DO 2025.4.0
Configurations panel TO DO 2025.4.0
IFC Releationship panel TO DO 2025.5.0
IFC Types Tree TO DO 2025.5.0
API Reference manual TO DO 2025.5.0
Programming 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. Please go to the next section for more information on using the new UI.