Skip to content
Twinnoverse
  • Documentation
Twinnoverse
Search
  • About
  • Blog
  • Contact
  • DigitalTwinSelection
  • Documentation
  • Home – twinnoverse – digital twin

Getting Started

  • Protected: Welcome to Twinnoverse!
  • Protected: Quick Start: Your First 3D Real-Time Scene in 5 Minutes

Asset Management

  • Protected: Uploading and Preparing 3D Models
  • Protected: Using the Asset Editor
  • Protected: Supported 3D Formats & Best Practices

Datasource Management

  • Protected: Datasource Types Explained
  • Protected: Setting Up an API Ingest Datasource
  • Protected: Understanding API Keys & Security

Widget System

  • Creating Alerts
  • Adding Widgets to a 3D Asset
  • Widget Library Reference
    • LineChart Widget
    • BarChart Widget
    • DoubleData Widget
    • Single Data Widget

The Scene Engine

  • How to navigate the 3D scene
  • Scene Editor vs. Scene Viewer
  • Building a Scene in the Editor

Developer & API

  • Ingest API Reference

Usecase & Examples

  • Data Connectors
    • from Excel TO 3D visualization
  • Usecases
    • pharmacetical manifactre shop floor
View Categories
  • Home
  • Docs
  • Widget System
  • Adding Widgets to a 3D Asset

Adding Widgets to a 3D Asset

1 min read

Widgets are the heart of your digital twin, bringing your 3D models to life with real-time data. This guide explains the correct workflow for adding and configuring widgets in the Asset Editor.

Table Of Contents
  • Understanding the Interface
  • Step 1: Add a New Widget
  • Step 2: Select a Widget Type
  • Step 3: Configure the Widget’s Settings
    • Common Settings
    • Widget-Specific Settings
  • Step 4: Save Your Configuration

Prerequisite: You must be in the Asset Editor. To get here, navigate to the Assets tab from the main dashboard and click the “Configure” button on the asset you wish to edit.


Understanding the Interface #

In the Asset Editor, you will see your 3D model in the center. On the left and right sides are two vertical Widget Panels. This is where your configured widgets will live.


Step 1: Add a New Widget #

  1. Decide which side of the asset you want to add a widget to.
  2. Click the “+ Add Widget” button on either the Left or Right panel.
  3. This will open the Widget Library, which displays all the available widget types (e.g., “Single Value Display”, “Bar Chart”).

Step 2: Select a Widget Type #

  1. In the Widget Library, click on the type of widget you want to add.
  2. The library will close, and the Widget Settings Panel will slide into view, ready for configuration.

Step 3: Configure the Widget’s Settings #

This panel contains all the settings required to make your widget work. While specific options change per widget, the top section is always the same.

Common Settings #

  • Datasource: A dropdown menu listing all the datasources you have created. Select the one you want this widget to receive data from.
  • Data Key: This is the most critical field. It’s the top-level key in your JSON data that this widget should look for. For example, if your JSON is {"temperature": 45}, your Data Key would be temperature.

Widget-Specific Settings #

Below the common settings, you will find fields unique to the widget you chose. For example, a DoubleData widget will ask for a Primary Title and Primary Sub-Key, while a BarChart widget will ask for a Labels Key and Values Key.

For a detailed breakdown of the settings for each widget, refer to the Widget Library Reference.


Step 4: Save Your Configuration #

  1. Once you have filled out all the required settings, click the “Save” button at the bottom of the panel.
  2. The settings panel will close, and you will see a new Widget Card appear in the left or right panel where you added it.

This widget is now successfully attached to your asset. When you place this asset in a scene and data is sent to the linked datasource, the widget will update automatically.

Updated on October 14, 2025

What are your Feelings

  • Happy
  • Normal
  • Sad

Share This Article :

  • Facebook
  • X
  • LinkedIn
  • Pinterest
Creating Alerts

Powered by BetterDocs

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Table of Contents
  • Understanding the Interface
  • Step 1: Add a New Widget
  • Step 2: Select a Widget Type
  • Step 3: Configure the Widget's Settings
    • Common Settings
    • Widget-Specific Settings
  • Step 4: Save Your Configuration

Menu

  • Documentation
Email

Copyright © 2025 Twinnoverse