The chat responses are generated using Generative AI technology for intuitive search and may not be entirely accurate. They are not intended as professional advice. For full details, including our use rights, privacy practices and potential export control restrictions, please refer to our Generative AI Service Terms of Use and Generative AI Service Privacy Information. As this is a test version, please let us know if something irritating comes up. Like you get recommended a chocolate fudge ice cream instead of an energy managing application. If that occurs, please use the feedback button in our contact form!
Skip to content
Siemens Xcelerator Marketplace
Walkinside Share llms optimized content

Walkinside Services offer a robust 3D visualization platform that transforms how enterprises interact with their digital twins. By enabling dynamic navigation through virtual asset models, Walkinside leverages immersive environments to enhance operational planning, training, and safety assessments.

Explore subscription options

UI Web Components

Table of Contents

  1. Introduction
  2. wi-joystick-navigation

Introduction

Web components in WalkinsideJS provide reusable and customizable UI elements that can be easily integrated into your application. These components are designed to enhance user interaction and simplify the development process by encapsulating functionality and styling.

To use web components, ensure the following file is included:

<script src="${WALKINSIDE-JS-LOCATION}/walkinside.js"></script>

This file provide the necessary backend support for the web components.

wi-joystick-navigation

The wi-joystick-navigation web component is a customizable joystick control designed for navigation within the Walkinside 3D viewer. It allows users to interact with the 3D environment using a virtual joystick.

Usage

To use the wi-joystick-navigation component, include it in your HTML file as follows:

<wi-joystick-navigation class="joystick-style" style="bottom: 5px; right: 5px;"></wi-joystick-navigation>

Features

  • Provides a virtual joystick for navigation.
  • Supports both mouse and touch interactions.
  • Emits keyboard-like events for seamless integration with the Walkinside 3D viewer.

Example

<!DOCTYPE html>
<html>
<head>
    <title>Joystick Navigation Example</title>
    <script src="${WALKINSIDE-JS-LOCATION}/walkinside.js"></script>
</head>
<body>
    <div id="wi-viewer-container"></div>
    <wi-joystick-navigation style="bottom: 5px; right: 5px;"></wi-joystick-navigation>
</body>
</html>

In this example, the wi-joystick-navigation component is added alongside the Walkinside viewer container. The joystick can be used to navigate the 3D environment interactively.

Contact us