architwin 1.0.53 → 1.0.60

package/README.md

@@ -13,17 +13,14 @@ ArchiTwin Library
       - [Import the library](#import-the-library)
       - [Setup your proxy](#setup-your-proxy)
       - [Connect to a Space](#connect-to-a-space)
-  - [Connection Parameters](#connection-parameters)
-  - [Config Options](#config-options)
-    - [Minimap Config](#minimap-config)
-  - [Space Navigation and Camera Control](#space-navigation-and-camera-control)
-      - [Moving Around](#moving-around)
-    - [Rotate, Pan and Tilt Camera](#rotate-pan-and-tilt-camera)
+  - [Executing methods on specific App Phases](#executing-methods-on-specific-app-phases)
   - [Space Overview](#space-overview)
+  - [Subscribing to Space Events](#subscribing-to-space-events)
+    - [Subscribing a method to an event](#subscribing-a-method-to-an-event)
+    - [Subscribing multiple methods to an event](#subscribing-multiple-methods-to-an-event)
+    - [Unsubscribing a method from an event](#unsubscribing-a-method-from-an-event)
+    - [Creating Custom Events](#creating-custom-events)
   - [Points of Interest](#points-of-interest)
-  - [Loading and Interacting with 3D/2D Objects](#loading-and-interacting-with-3d2d-objects)
-    - [What is an Object?](#what-is-an-object)
-    - [Loading Objects](#loading-objects)
     - [Accessing List of Rendered Objects and Object Structure](#accessing-list-of-rendered-objects-and-object-structure)
     - [Transforming Objects](#transforming-objects)
       - [Transforming Object by clicking it](#transforming-object-by-clicking-it)
@@ -38,20 +35,90 @@ ArchiTwin Library
     - [Setting Animation Control in the Space](#setting-animation-control-in-the-space)
     - [Copying object To Your Space](#copying-object-to-your-space)
     - [Adding Object, Getting Object, Updating Object, Deleting Object in the Database](#adding-object-getting-object-updating-object-deleting-object-in-the-database)
+    - [Navigate to Object](#navigate-to-object)
     - [Deleting Object To Your Space](#deleting-object-to-your-space)
     - [Replacing Object To Your Space](#replacing-object-to-your-space)
     - [Creating Text Markup Screen in the space](#creating-text-markup-screen-in-the-space)
       - [Setting Content to Text Markup Screen](#setting-content-to-text-markup-screen)
+  - [Typescript Interface Reference](#typescript-interface-reference)
+    - [Tag Interfaces](#tag-interfaces)
+    - [Object Interfaces](#object-interfaces)
+    - [Meeting Interfaces](#meeting-interfaces)
+  - [Meeting Guide](#meeting-guide)
+    - [Create Meeting](#create-meeting)
+    - [Start Meeting](#start-meeting)
+    - [Stop Meeting](#stop-meeting)
+    - [Meeting Utility Methods](#meeting-utility-methods)
+    - [Update Meeting Details](#update-meeting-details)
+    - [Meeting Info](#meeting-info)
+    - [Meeting Config Options](#meeting-config-options)
+      - [Meeting Custom Colors](#meeting-custom-colors)
+      - [Meeting Custom Avatar](#meeting-custom-avatar)
+      - [Meeting Device Control](#meeting-device-control)
+      - [Meeting Bar Position](#meeting-bar-position)
+      - [Meeting Status](#meeting-status)
   - [Function Reference](#function-reference)
-      - [Tags](#tags)
+    - [Space](#space)
+      - [connectSpace()](#connectspace)
+      - [disconnectSpace()](#disconnectspace)
+    - [Tags](#tags)
+      - [getTags()](#gettags)
+      - [gotoTag()](#gototag)
     - [Sweeps](#sweeps)
+      - [getSweeps()](#getsweeps)
+      - [moveToSweep()](#movetosweep)
+      - [getNearbySweeps()](#getnearbysweeps)
+      - [getCurrentSweep()](#getcurrentsweep)
     - [Video](#video)
+      - [playVideo()](#playvideo)
+      - [pauseVideo()](#pausevideo)
+      - [setVideoPlayback()](#setvideoplayback)
     - [Navigation](#navigation)
+      - [moveInDirection()](#moveindirection)
     - [Camera](#camera)
+      - [getCurrentCameraPose()](#getcurrentcamerapose)
+      - [getCameraPosition()](#getcameraposition)
+      - [cameraPan()](#camerapan)
+      - [cameraRotate()](#camerarotate)
+      - [getViewMode()](#getviewmode)
+      - [setViewMode()](#setviewmode)
+      - [cameraLookAt()](#cameralookat)
+      - [captureSpaceScreenshot()](#capturespacescreenshot)
     - [Objects](#objects)
+      - [getNearbyObjects()](#getnearbyobjects)
+      - [addObjectToSpace()](#addobjecttospace)
+      - [addMediaScreen()](#addmediascreen)
+      - [setTransformMode()](#settransformmode)
+      - [revertTransform()](#reverttransform)
+      - [removeTransformControls()](#removetransformcontrols)
+      - [setAnimationState()](#setanimationstate)
+      - [showObjectDimensions()](#showobjectdimensions)
+      - [copyObject()](#copyobject)
+      - [addObject()](#addobject)
+      - [getObject()](#getobject)
+      - [updateObject()](#updateobject)
+      - [deleteObject()](#deleteobject)
+      - [goTo3dx()](#goto3dx)
+      - [deleteObjectFromSpace()](#deleteobjectfromspace)
+      - [replaceObject()](#replaceobject)
+      - [addTextMarkupScreen()](#addtextmarkupscreen)
+      - [setTextMarkupScreenContent()](#settextmarkupscreencontent)
+  - [Meeting](#meeting)
+    - [createMeeting()](#createmeeting)
+    - [startMeeting()](#startmeeting)
+    - [stopMeeting()](#stopmeeting)
+    - [getMeeting()](#getmeeting)
+    - [getMeetingParticipants()](#getmeetingparticipants)
+    - [getSpaceMeetings()](#getspacemeetings)
+    - [generateMeetingURL()](#generatemeetingurl)
+    - [isMeetingExists()](#ismeetingexists)
+    - [isMeetingActive()](#ismeetingactive)
+    - [updateMeetingTitle()](#updatemeetingtitle)
+    - [updateMeetingStart()](#updatemeetingstart)
+    - [updateMeetingStatus()](#updatemeetingstatus)
+    - [updateMeetingSpace()](#updatemeetingspace)
 
 ## Installation
----------------------
 ### Install Using NPM
 To install the latest ArchiTwin package:
 ````bash
@@ -59,7 +126,6 @@ npm i architwin
 ````
 
 ## Getting Started
-------------------------
 
 #### Prerequisites
 
@@ -181,6 +247,7 @@ export default defineConfig(({ command, mode }) => {
 
 #### Connect to a Space
 
+In order to connect to space you may use [connectSpace()](#connectspace) method.
 ````typescript
 <script lang="ts">
 
@@ -224,6 +291,44 @@ You should be able to move around the Space using keyboard and mouse.
 
 Or programmatically using methods defined in this library.
 
+## Executing methods on specific App Phases
+
+Your application may need to execute certain methods during the initialization of your 3D space. For example, you may want to use`addObjectToSpace()` method to render a model to your 3D space the moment the 3D space becomes interactive. While you can always just invoke the function after the `connectSpace()` method there may be times where this will cause an error as the `connectSpace()` method which is an async method, may have not finished initializing the necessary internal variables that allow other methods to work properly. When you invoke the `connectSpace()` method, the library does some internal validation and then goes to several phases to render your 3D space and make it interactive. These phases are the following:
+
+**ARCHTWIN APP PHASES**
+
+- **LOADING:** Initial fetch request to matterport. This is where the bundle downloads the 3D space from matterport and starts rendering it
+- **STARTING:** Matterport begins the transition to the start location
+- **PLAYING** The 3D space is now ready for user interaction
+
+You can also view the technical diagram of how this work below:
+
+<img src="https://drive.google.com/uc?id=1I_NuuI_PWkRzB0DueCmBCBH-1V_upiOB" width="400" height="300" />
+
+To invoke a function from your application during one of the phases. Simple pass the function name as a parameter in the `connectSpace()` method. Make sure to not add a parenthesis to your function name when you pass it as a parameter to avoid invoking the function prematurely.
+
+*Example:*
+
+```typescript
+//Your application side function
+async function runThisOnPlayState(){
+const tags = await axios.get('my-custom-endpoint')
+
+//Keep in mind that you should map the data from your endpoint into an object structure that the library supports
+
+await atwin.showTags(tags)
+}
+
+await atwin.connectSpace(spaceUrl, auth, config,{onPlay:runThisOnPlayState})
+```
+
+In this example, the method named `runThisOnPlayState` is passed as a value to the `onPlay` key of an object. This will invoke the function during the PLAYING phase of the library. To invoke your function in a different phase, simply pass it to a different key in the object. You can pass your functions to onLoad,onStart, and onPlay. Async and synchronous functions are valid. Refer to the table below for more information
+
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| onLoad | Function | no | none | async or non-async function|
+| onStart | Function | no | none | async or non-async function|
+| onPlay | Function | no | none | async or non-async function|
 <!-- #### Setup for other frameworks
 
 Vue is the framework we use in the code snippets provided above. If your team intends to use other frameworks like Svelte or React.
@@ -343,7 +448,7 @@ console.log('Hello console')
 
 Please take note that you **must** setup the appropriate proxy configuration as stated in [this section](#setup-your-proxy) otherwise it will not work. -->
 
-## Connection Parameters
+<!-- ## Connection Parameters
 connectSpace has three important parameters:
 
 | parameter | type | required | default | values |
@@ -370,9 +475,263 @@ await atwin.connectSpace(url, auth, config)
 - apiKey: (string) sets the required apiKey that is inserted into the authorization headers of each API request
 - user: (IUser | Object) an object that contains the `email` and `password` of the user.
 
-**config** - a config object to set some default space behavior. You can learn more about the config object and its keys by going to the [config options](#config-options) section
+**config** - a config object to set some default space behavior. You can learn more about the config object and its keys by going to the [config options](#config-options) section -->
+
+## Space Overview
+
+**Space** - Space is an immersive and realistic Digital Twin model of a physical space, with virtual custom objects like animated 3D objects, Video Screens, Slideshow Screens and Tags, co-existing and enhancing the real objects.
+
+A user should be able to navigate around using PC or devices (keyboard and mouse), measure real object dimensions and interact with the virtual objects as if you are actually visiting the physical space.
+
+**Sweeps** - Space have static sweep markers (white circles on floor) which serves as primary navigation points. Users can go to sweeps (or click), stand and look around. 
+
+**Tags** - Space also have tags which are virtual markers attached to Objects or Locations in space. Tags can be clicked which will render and display relevant contents like
+web pages, videos, images or text descriptions. It is possible to go directly to any specifig tag ([gotoTag](#gototag))  from anywhere in Space.
+
+It can be used as quick way to navigate around the space.
+
+**3D Objects** - Space usually contains 3D objects or three-dimentional models. Some 3D objects may have some simple animations. 
+
+**Video Screens** - Another interesting objects that can be found inside the space are Video Screens. They practially look like TV 
+screens placed at selected locations. The Video screens will automatically play when a User is nearby (2 meters). And automatically turns off when the User leaves.
+
+
+**Slideshow Screens** - Space can also contain Image Slideshow Screens. This is similar to the Video Screen, but uses static images. 
+Clicking on the right section of the current slide image will display the next slide. 
+Clicking on the the left section will display the previous slide. 
+
+The slideshow can be auto played in whole by clicking the lower-right corner.
+
+
+**Note**: We use the word Space and Showcase interchangeably.
+
+## Subscribing to Space Events
+Your 3D space allows your users to move around and interact with objects loaded into that space. Interactions such as clicking and dragging 3D objects in a space are events that your app may need to listen to and subsequently trigger the appropriate function for such an event.
+
+You can subscribe to a particular event and pass callback method or methods to trigger when a subscribed event is fired using the `subscribeSpaceEvent()` method.
+
+The method accepts the following as its parameters:
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| eventType | SPACE_EVENTS or string | yes | none | valid event type |
+| callback | Function or Array of Functions | yes | none | function or async function |
+
+### Subscribing a method to an event
+To subscribe to an event, simpley call the `subscribeSpaceEvent()` and pass the event you want to subscribe to and the method you want to trigger. Subscribing to an event will also return to you the data of an object if you are interacting with one. Said object data will implement the `IShowcaseObject` interface.
+
+*Example:*
+```typescript
+function myFunction(objectData){
+  console.log("I will run during a DRAG_END event",objectData)
+}
+
+atwin.subscribeSpaceEvent('DRAG_END',myFunction)
+```
+
+You can subscribe your method to more than one event. Currently, we support subscribing only the following events but we are working to add more events in the future.
+
+**SUPPORTED EVENTS**
+
+- CLICK
+- DRAG_END
+- LOADING_PHASE
+- STARTING_PHASE
+- PLAYING_PHASE
+
+For more information regarding the loading,starting, and playing phase events. Please refer to [this section](#executing-methods-on-specific-app-phases)
+
+### Subscribing multiple methods to an event
+If you wish to subscribe multiple methods to an event. You can use the folliwing methods listed below
+
+**Method 1:**
+Subscribing each method one at a time
+
+```typescript
+function myFunction(objectData){
+  console.log("Function 1")
+}
+
+function myFunction2(objectData){
+  console.log("Function 2")
+}
+
+atwin.subscribeSpaceEvent('DRAG_END',myFunction)
+atwin.subscribeSpaceEvent('DRAG_END',myFunction2)
+```
+
+**Method 2:**
+Placing multiple methods in a parent method and passing it to the `subscribeSpaceEvent` method
+
+```typescript
+function myFunction(){
+  console.log("Function 1")
+}
+
+function myFunction2(){
+  console.log("Function 2")
+}
+
+function parentFunction(objectData) {
+  myFunction()
+  myFunction2()
+}
+
+atwin.subscribeSpaceEvent('DRAG_END',parentFunction)
+```
+
+**Method 3:**
+Inserting multiple methods into an array and passing it to the `subscribeSpaceEvent` method.
+
+```typescript
+function myFunction(){
+  console.log("Function 1")
+}
+
+function myFunction2(){
+  console.log("Function 2")
+}
+
+const functionArray = [myFunction,myFunction2]
+
+atwin.subscribeSpaceEvent('DRAG_END',functionArray)
+```
+
+Keep in mind that the library's event system utilizes an FIFO algorithm. Your functions will always be executed in chronological order meaning functions that were subscribed first will be executed first.
+
+### Unsubscribing a method from an event
+If you wish to unsubscribe your method from a subscribed event, simply call the `unsubscribeSpaceEvent()` method to so. The method accepts the following parameters:
+
+The method accepts the following as its parameters:
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| eventType | SPACE_EVENTS or string | yes | none | valid event type |
+| callback | Function or Array of Functions | yes | none | function or async function |
+
+*Example:*
+```typescript
+function myFunction(){
+  console.log("I will be unsubscribed and no longer trigger during the next DRAG_END event")
+}
+
+atwin.unsubscribeSpaceEvent('DRAG_END',myFunction)
+```
+
+If you used **Method 3** in subscribing multiple methods. You can pass the same array to the `unsubscribeSpaceEvent()` method and they will all be unsubscribed from the event.
+
+```typescript
+const functionArray = [myFunction,myFunction2]
+
+atwin.unsubscribeSpaceEvent('DRAG_END',functionArray)
+```
+
+### Creating Custom Events
+The library has a list of default event types you can subscribe to but you may at times need to create your own event type to use for a specific task. You can easily create and subscribe to your own custom event by using `registerCustomSpaceEvent()` and `subscribeSpaceEvent()` respectively. Here is how to do it.
+
+**IMPORTANT:** Your custom event type name must **not** be the same as an existing custom event type or a default event type. Doing so will return an error and the registration will fail.
+
+**STEP 1:**
+Register your event type name. As a convention, the name of your event type should be in uppercase and use snake_case (e.g. FOO_BAR). It is important to register you custom event type first before subscribing a method to it. You can register one or multiple events using the method.
+
+```typescript
+//Register one custom event type
+atwin.registerCustomSpaceEvent('MY_EVENT')
+
+//Register multiple custom events
+const newEvents = ['FOO','BAR','MY_EVENT']
+atwin.registerCustomSpaceEvent(newEvents)
+```
+
+**STEP 2:**
+Subscribe to your custom event
+
+```typescript
+function myFunction(objectData){
+  console.log("Function 1")
+}
+
+atwin.subscribeSpaceEvent('MY_EVENT',myFunction)
+```
+
+To trigger your custom event, you can use the `dispatchSpaceEvent()` in your app. You can also optionally pass a data payload with said event. Just make sure that you have done steps 1 and 2 before doing so.
+
+The `dispatchSpaceEvent()` method accepts the following as its parameters:
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| eventType | SPACE_EVENTS or string | yes | none | valid event type |
+| payload | any | no | none | any |
+
+```typescript
+const someData = {
+  //some data here
+}
+
+atwin.dispatchSpaceEvent('MY_EVENT',someData)
+```
+
+
+## Points of Interest
+
+Tags are primarily use to mark locations or objects in space for quick and direct navigation.
+Tags usually contain additional content that will be rendered when hovered. Contents can be web pages, 
+text descriptions, videos, or images.
+
+You may use the [getTags()](#gettags) method in order to get a list of Tags found in the space.
+
+You may use the [goToTag()](#gototag) method in order to navigate to specific Tag
+
+You may use the [getSweeps()](#getsweeps) method in order get a list of Sweeps found in the Space. 
+
+You may use the [moveToSweep()](#movetosweep) method in order to move to a specific Sweep
+
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| sweepId | string | yes |  | Id of the sweep |
+
+````typescript
+import * as atwin from 'architwin';
+
+...
+
+const spaceUrl = "https://basic-dev.rev-kitten.com/showcase/model3d_public/1?token=e707880f-0fc5-48a6-b3f6-643a19f81464"
+
+const ispace = {
+  id: 1;
+  name: "mySpace";
+  space_url: spaceUrl;
+  tagpin_image: null;
+} as ISpace
+
+const tagId = "5"
+const sweepId = "10"
+
+// returns a list of Tags found in the Space
+await atwin.getTags(ispace)
+
+// to navigate to specific Tag and accepts a Tag's ID
+await atwin.goToTag(tagId)
+
+// returns a list of Sweeps found in the Space
+await atwin.getSweeps()
+
+// to move to a specific Sweep
+await atwin.moveToSweep(sweepId)
+
+...
+````
+
+**More Examples:**
+````typescript
+import * as atwin from 'architwin';
+
+...
+
+// get current sweep data
+await atwin.getCurrentSweep()
 
-## Config Options 
+...
+````
+
+<!-- ## Config Options 
 
 ```typescript
 export interface IMPConfig{
@@ -382,8 +741,18 @@ export interface IMPConfig{
     viewMode?: string 
     play?: 0 | 1,
     qs?: 0 | 1,
+    brand?: 0 | 1,
+    dh?: 0 | 1,
     tour?: 0 | 1 | 2 | 3,
+    hr?: 0 | 1,
+    mls?: 0 | 1 | 2,
+    mt?: 0 | 1,
+    tagNav?: 0 | 1,
+    f?: 0 | 1,
+    fp?: 0 | 1,
+    title?: 0 | 1 | 2,
     vr?: 0 | 1,
+    search?: 0 | 1,
     mapConfig?: {
       mapId: string
       position?: string //topRight | topLeft | bottomRight | bottomLeft
@@ -494,19 +863,54 @@ Example:
 ```
 - **zIndex** - (optional) Set the z-index of the map. In cases where you have UI elements that coincide with the position of the minimap. You set the z-index value of the minimap to determine what order the minimap should be rendered.
 
+## Executing methods on specific App Phases
+
+Your application may need to execute certain methods during the initialization of your 3D space. For example, you may want to use`addObjectToSpace()` method to render a model to your 3D space the moment the 3D space becomes interactive. While you can always just invoke the function after the `connectSpace()` method there may be times where this will cause an error as the `connectSpace()` method which is an async method, may have not finished initializing the necessary internal variables that allow other methods to work properly. When you invoke the `connectSpace()` method, the library does some internal validation and then goes to several phases to render your 3D space and make it interactive. These phases are the following:
+
+**ARCHTWIN APP PHASES**
+
+- **LOADING:** Initial fetch request to matterport. This is where the bundle downloads the 3D space from matterport and starts rendering it
+- **STARTING:** Matterport begins the transition to the start location
+- **PLAYING** The 3D space is now ready for user interaction
+
+You can also view the technical diagram of how this work below:
+
+<img src="https://drive.google.com/uc?id=1I_NuuI_PWkRzB0DueCmBCBH-1V_upiOB" width="400" height="300" />
+
+To invoke a function from your application during one of the phases. Simple pass the function name as a parameter in the `connectSpace()` method. Make sure to not add a parenthesis to your function name when you pass it as a parameter to avoid invoking the function prematurely.
+
+*Example:*
+
+```typescript
+//Your application side function
+async function runThisOnPlayState(){
+const tags = await axios.get('my-custom-endpoint')
+
+//Keep in mind that you should map the data from your endpoint into an object structure that the library supports
+
+await atwin.showTags(tags)
+}
+
+await atwin.connectSpace(spaceUrl, auth, config,{onPlay:runThisOnPlayState})
+```
+
+In this example, the method named `runThisOnPlayState` is passed as a value to the `onPlay` key of an object. This will invoke the function during the PLAYING phase of the library. To invoke your function in a different phase, simply pass it to a different key in the object. You can pass your functions to onLoad,onStart, and onPlay. Async and synchronous functions are valid. Refer to the table below for more information
+
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| onLoad | Function | no | none | async or non-async function|
+| onStart | Function | no | none | async or non-async function|
+| onPlay | Function | no | none | async or non-async function|
+
 ## Space Navigation and Camera Control
------------------------------
+
 #### Moving Around
 
 You can navigate around the space using keyboard arrow keys or using a mouse.
 
-Progmmatically, you also can navigate the space. You may use `moveInDirection()` method to move around inside the space. 
+Progmmatically, you also can navigate the space. You may use [moveInDirection()](#moveindirection) method to move around inside the space. 
 This will move the user to the nearest Sweep marker in the indicated direction.
 
-| parameter | type | required | default | values |
-| :----: | :----: | :---: | :---: | :---: |
-| direction | string | yes |  | "FORWARD" or "BACKWARD" or "LEFT" or "RIGHT" or "UP" or "DOWN" |
-
 ````typescript
 import * as atwin from 'architwin';
 
@@ -532,16 +936,6 @@ async function moveLeft() {
   await atwin.moveInDirection("LEFT")
 }
 
-// this function moves you to the nearest sweep above you
-async function moveUp() {
-  await atwin.moveInDirection("UP")
-}
-
-// this function moves you to the nearest sweep below you
-async function moveDown() {
-  await atwin.moveInDirection("DOWN")
-}
-
 ...
 ````
 
@@ -549,7 +943,7 @@ async function moveDown() {
 
 While inside the space, you can control the camera rotation and panning to have a better view around you.
 
-You may use the `cameraRotate()` to rotate the camera view.
+You may use the [cameraRotate()](#camerarotate) to rotate the camera view.
 
 | parameter | type | required | default | values |
 | :----: | :----: | :---: | :---: | :---: |
@@ -571,7 +965,7 @@ await atwin.cameraRotate(0,45,5)
 ...
 ```
 
-You may use `cameraPan()` method to tilt and pan the Camera.
+You may use [cameraPan()](#camerapan) method to tilt and pan the Camera.
 
 | parameter | type | required | default | values |
 | :----: | :----: | :---: | :---: | :---: |
@@ -591,148 +985,47 @@ await atwin.cameraPan(30,0)
 
 ...
 ````
-**Note:** cameraPan will work only in *Dollhouse* mode.
+**Note:** [cameraPan()](#camerapan) will work only in *Dollhouse* mode.
 
-## Space Overview
-(Note that we use the word Space and Showcase interchangeably)
 
-**Space** - Space is an immersive and realistic Digital Twin model of a physical space, with virtual custom objects like animated 3D objects, Video Screens, Slideshow Screens and Tags, co-existing and enhancing the real objects.
 
-A user should be able to navigate around using PC or devices (keyboard and mouse), measure real object dimensions and interact with the virtual objects as if you are actually visiting the physical space.
+## Loading and Interacting with 3D/2D Objects
 
-**Sweeps** - Space have static sweep markers (white circles on floor) which serves as primary navigation points. Users can go to sweeps (or click), stand and look around. 
+Architwin allows you to load and interact with 3D or 2D objects into a 3D showcase. Architwin has internal functions that performs GET requests from an API enpoint, parses it, and then renders it to your 3D showcase. The result fetched data implement the `IShowcaseObject` type interface which matches the schema of the response of the API. Please take note that this guide assumes that you have implemented the recommended database schema for storing your showcase objects.
 
-**Tags** - Space also have tags which are virtual markers attached to Objects or Locations in space. Tags can be clicked which will render and display relevant contents like
-web pages, videos, images or text descriptions. It is possible to go directly to any specifig tag (gotoTag) from anywhere in Space.
+### What is an Object?
 
-It can be used as quick way to navigate around the space.
+We define objects as 3D or 2D assets that have or will be loaded into a space. This could be a 3D model of a statue or  a 2D video or image. An object can be static or interactive. Static objects are objects that the user cannot interact with (e.g. clickable or playable). An example of a static object would be 3D statue with no animations. Interactive objects are objects that the user can interact with by either clicking the object directly or just by being near it (e.g. videos). Architwin currently supports the following file types:
 
-**3D Objects** - Space usually contains 3D objects or three-dimentional models. Some 3D objects may have some simple animations. 
+**3D Models**
 
-**Video Screens** - Another interesting objects that can be found inside the space are Video Screens. They practially look like TV 
-screens placed at selected locations. The Video screens will automatically play when a User is nearby (2 meters). And automatically turns off when the User leaves.
+- GTLF/GLB
+- FBX
 
+**2D Objects**
 
-**Slideshow Screens** - Space can also contain Image Slideshow Screens. This is similar to the Video Screen, but uses static images. 
-Clicking on the right section of the current slide image will display the next slide. 
-Clicking on the the left section will display the previous slide. 
+- MP4 (Videos)
+- WMV (Videos)
+- PNG (Images)
+- JPEG (Images)
+- ZIP (Image/Image slideshows)
 
-The slideshow can be auto played in whole by clicking the lower-right corner.
+We add support for more file types in future updates
 
-<!-- **Meeting** - Space meeting feature introduces immersive way to conduct virtual gatherings and collaborative sessions. This innovative feature allows users to convene inside a Space, where participants represented by an avatar and can interact, communicate, and share ideas in a more lifelike and engaging manner.
+### Loading Objects
 
-Please check [Meeting Guide](#meeting-guide) to know how to use Meeting feature. -->
+Objects come in many shapes and sizes. Loading objects may sometimes take a lot of resources especially if you intend to load a lot of objects in your space. Architwin is optimized to load your 3D spaces and its associated objects as fast and efficiently as possible to reduce the TTI. 
 
-## Points of Interest
-Tags are primarily use to mark locations or objects in space for quick and direct navigation.
-Tags usually contain additional content that will be rendered when hovered. Contents can be web pages, 
-text descriptions, videos, or images.
+To achieve this, instead of loading all of your objects at the same time at the start which causes long initial load times, Architwin eagerly renders objects in the space when the user is at a certain distance from the objects intended position. We call this feature **Render On Demand**.
 
-You may use the `getTags()` method in order to get a list of Tags found in the space.
+By default, objects are rendered in the space when objects are within a **2 meters** diameter from the Camera (User view). You can increase or decrease this distance by setting the render distance using the `setRenderDistance()` method.
 
 | parameter | type | required | default | values |
 | :----: | :----: | :---: | :---: | :---: |
-| space | ISpace | yes |  | |
+| distance | number | yes |  | number in meters |
 
-You may use the `goToTag()` method in order to navigate to specific Tag
-
-| parameter | type | required | default | values |
-| :----: | :----: | :---: | :---: | :---: |
-| tag_id | string | yes |  | Id of the tag |
-
-You may use the `getSweeps()` method in order get a list of Sweeps found in the Space. This method doesn't have a parameter.
-
-You may use the `moveToSweep()` method in order to move to a specific Sweep
-
-| parameter | type | required | default | values |
-| :----: | :----: | :---: | :---: | :---: |
-| sweepId | string | yes |  | Id of the sweep |
-
-````typescript
-import * as atwin from 'architwin';
-
-...
-
-const spaceUrl = "https://basic-dev.rev-kitten.com/showcase/model3d_public/1?token=e707880f-0fc5-48a6-b3f6-643a19f81464"
-
-const ispace = {
-  id: 1;
-  name: "mySpace";
-  space_url: spaceUrl;
-  tagpin_image: null;
-} as ISpace
-
-const tagId = "5"
-const sweepId = "10"
-
-// returns a list of Tags found in the Space
-await atwin.getTags(ispace)
-
-// to navigate to specific Tag and accepts a Tag's ID
-await atwin.goToTag(tagId)
-
-// returns a list of Sweeps found in the Space
-await atwin.getSweeps()
-
-// to move to a specific Sweep
-await atwin.moveToSweep(sweepId)
-
-...
-````
-
-**More Examples:**
-````typescript
-import * as atwin from 'architwin';
-
-...
-
-// get current sweep data
-await atwin.getCurrentSweep()
-
-
-// get current sweep position
-await atwin.getSweepPosition()
-
-...
-````
-
-## Loading and Interacting with 3D/2D Objects
-
-Architwin allows you to load and interact with 3D or 2D objects into a 3D showcase. Architwin has internal functions that performs GET requests from an API enpoint, parses it, and then renders it to your 3D showcase. The result fetched data implement the `IShowcaseObject` type interface which matches the schema of the response of the API. Please take note that this guide assumes that you have implemented the recommended database schema for storing your showcase objects.
-
-### What is an Object?
-
-We define objects as 3D or 2D assets that have or will be loaded into a space. This could be a 3D model of a statue or  a 2D video or image. An object can be static or interactive. Static objects are objects that the user cannot interact with (e.g. clickable or playable). An example of a static object would be 3D statue with no animations. Interactive objects are objects that the user can interact with by either clicking the object directly or just by being near it (e.g. videos). Architwin currently supports the following file types:
-
-**3D Models**
-
-- GTLF/GLB
-- FBX
-
-**2D Objects**
-
-- MP4 (Videos)
-- WMV (Videos)
-- PNG (Images)
-- JPEG (Images)
-- ZIP (Image/Image slideshows)
-
-We add support for more file types in future updates
-
-### Loading Objects
-
-Objects come in many shapes and sizes. Loading objects may sometimes take a lot of resources especially if you intend to load a lot of objects in your space. Architwin is optimized to load your 3D spaces and its associated objects as fast and efficiently as possible to reduce the TTI. 
-
-To achieve this, instead of loading all of your objects at the same time at the start which causes long initial load times, Architwin eagerly renders objects in the space when the user is at a certain distance from the objects intended position. We call this feature **Render On Demand**.
-
-By default, objects are rendered in the space when objects are within a **2 meters** diameter from the Camera (User view). You can increase or decrease this distance by setting the render distance using the `setRenderDistance()` method.
-
-| parameter | type | required | default | values |
-| :----: | :----: | :---: | :---: | :---: |
-| distance | number | yes |  | number in meters |
-
-```typescript
-import * as atwin from 'architwin'
+```typescript
+import * as atwin from 'architwin'
 
 ...
 
@@ -744,9 +1037,9 @@ atwin.connectSpace(url, auth, config)
 ...
 ```
 
-You only need to set the render distance once. Make sure to invoke the function before running `connectSpace()`
+You only need to set the render distance once. Make sure to invoke the function before running [connectSpace](###connectSpace) method.
 
-Architwin also allows you to get **rendered** objects near the user by calling the `getNearbyObjects()` method which will return an array of nodes of the rendered objects within the target range.
+Architwin also allows you to get **rendered** objects near the user by calling the [getNearbyObjects()](#getnearbyobjects) method which will return an array of nodes of the rendered objects within the target range.
 
 | parameter | type | required | default | values |
 | :----: | :----: | :---: | :---: | :---: |
@@ -880,7 +1173,7 @@ The `atwin.selectedObject` variable is an example of a variable that implements
 
 Transformation such as translate, scale, and rotate are actions used to manipulate objects in a 3D space. These transformations allow you to change an object's position, size, and orientation respectively. 
 
-**NOTE:** Please be aware that transform controls are disabled when viewMode in the [config object](#config-options) you pass into connectSpace is undefined or is set to public. To enable transform controls in your 3D space. Make sure to set viewMode to 'interactive'.
+**NOTE:** Please be aware that transform controls are disabled when viewMode in the [config object](#config-options) you pass into [connectSpace](###connectSpace) is undefined or is set to public. To enable transform controls in your 3D space. Make sure to set viewMode to 'interactive'.
 
 **Translate** - Translation refers to moving an object from one position to another in space. It involves shifting the object's entire coordinate system without altering its orientation.
 
@@ -896,7 +1189,7 @@ Clicking on any object in the space will attach the axis controls to it. By defa
 
 <img src="https://matterport.github.io/showcase-sdk/images/sdkbundle-components-transform-controls.png" width="300" height="200" />
 
-You can switch the transform mode on the currently selected object by using the `setTransformMode()` method. 
+You can switch the transform mode on the currently selected object by using the [setTransformMode()](#settransformmode) method. 
 
 Please take note that transform controls can only be attached to one object at a time. Clicking on another object will remove the transform controls in the previous object and add it the currently selected object. It is impractical to attach multiple transform controls on more than one object. If you wish to programmatically transform multiple methods, then the next method offers a solution.
 
@@ -914,7 +1207,7 @@ console.log("Selected object data", atwin.selectedObject)
 
 **Switching Transform Modes**
 
-If you wish switch transformation mode, you can pass either 'translate' or 'scale' or 'rotate' as parameters to the `setTransformMode()` method. This will switch the transform controls on the currently selected object
+If you wish switch transformation mode, you can pass either 'translate' or 'scale' or 'rotate' as parameters to the [setTransformMode()](#settransformmode) method. This will switch the transform controls on the currently selected object
 
 | parameter | type | required | default | values |
 | :----: | :----: | :---: | :---: | :---: |
@@ -1020,7 +1313,7 @@ Redo and undo are actions that allow you to revert or replay previous transforma
 
 Assuming that you have already selected an object and already performed different transformation actions. You can use the methods in the library to redo and undo the changes. 
 
-In order to do this, you may use the `revertTransform()` method to revert changes. By default, the action is set to 'undo'.
+In order to do this, you may use the [revertTransform()](#reverttransform) method to revert changes. By default, the action is set to 'undo'.
 
 ```typescript
 import * as atwin from 'architwin';
@@ -1048,7 +1341,7 @@ atwin.revertTransform('redo')
 
 Adding an object to your space refers to the process of incorporating a pre-existing 2D or 3D object from the database into the 3D space. It allows for the creation of visualizations, simulations, and interactive experiences in your space.
 
-In order to add an object, you may use the `addObjectToSpace()` method. 
+In order to add an object, you may use the [addObjectToSpace()](#addobjecttospace) method. 
 
 | parameter | type | required | default |values |
 | :----: | :----: | :---: | :---: | :---: |
@@ -1056,11 +1349,11 @@ In order to add an object, you may use the `addObjectToSpace()` method.
 | objectType | string | yes | none | valid supported file type (GLB,FBX) |
 | config | ObjectConfig | yes | | valid config object |
 
-There are two ways you can use the `addObjectToSpace()` method. We will go through each one 
+There are two ways you can use the [addObjectToSpace()](#addobjecttospace) method. We will go through each one 
 
 **Method 1: Adding Programmatically**
 
-If you wish to add new object to your space to a pre-defined position, you can use the `addObjectToSpace()` method and pass the `objectConfig` along.
+If you wish to add new object to your space to a pre-defined position, you can use the [addObjectToSpace()](#addobjecttospace) method and pass the `objectConfig` along.
 
 ```typescript
 import * as atwin from 'architwin';
@@ -1091,7 +1384,7 @@ atwin.addObjectToSpace(objectUrl,objectType, objectConfig)
 
 **Method 2: Adding with click method using getTargetPosition**
 
-The library has several helper methods that provide a range of commmon functionalities to help you achieve certain actions easier. If for example, you do not have your intended position coordinates stored in the database or in a local area and wish to click a specific area of the 3D space and get that the coordinates of the area you clicked, you may do some by using the `getTargetPosition()` helper method in tangent with the `addObjectToSpace()` method to do so. You can [click here](#getting-the-coordinates-of-a-clicked-area-in-the-3d-space) to know more about the `getTargetPosition()` method
+The library has several helper methods that provide a range of commmon functionalities to help you achieve certain actions easier. If for example, you do not have your intended position coordinates stored in the database or in a local area and wish to click a specific area of the 3D space and get that the coordinates of the area you clicked, you may do some by using the `getTargetPosition()` helper method in tangent with the [addObjectToSpace()](#addobjecttospace) method to do so. You can [click here](#getting-the-coordinates-of-a-clicked-area-in-the-3d-space) to know more about the `getTargetPosition()` method
 
 Here is an example of how you can use the two methods together. This is just one example, it is up to you on how you wish to combine different methods provided by the library
 
@@ -1127,7 +1420,7 @@ A Media Screen is a customizable 2D object whose content can be used to display
 
 #### Adding a Media Screen
 
-In order to add a media screen, you may use the `addMediaScreen()` method. The `addMediaScreen()` method accepts the following parameters:
+In order to add a media screen, you may use the [addMediaScreen()](#addmediascreen) method. The [addMediaScreen()](#addmediascreen) method accepts the following parameters:
 
 #### Media Screen Parameter Reference 
 
@@ -1146,7 +1439,7 @@ The **transform** object is an object that contains the following key-value pair
 | scale | Vector3 | no | {x:1,y:1,z:1} | valid numeric x,y,z values|
 | rotation | Vector3 | no | {x:0,y:0,z:0} | valid numeric x,y,z values|
 
-By default, your media screen will show a blank white canvas if you set the mediaUrl parameter of the `addMediaScreen()` method as an empty string or `undefined`.
+By default, your media screen will show a blank white canvas if you set the mediaUrl parameter of the [addMediaScreen()](#addmediascreen) method as an empty string or `undefined`.
 
 **IMPORTANT:** The link to your media you provide to the mediaUrl **MUST** be publicly accessible and have the appropriate CORS headers, otherwise, your media will not load into the media screen.
 
@@ -1186,7 +1479,7 @@ If done correctly, you should be able to see your media screen in your intended
 
 **Method 2: Adding with click method using getTargetPosition**
 
-The library has several helper methods that provide a range of commmon functionalities to help you achieve certain actions easier. If for example, you do not have your intended position coordinates stored in the database or in a local area and wish to click a specific area of the 3D space and get that the coordinates of the area you clicked, you may do some by using the `getTargetPosition()` helper method in tangent with the `addMediaScreen()` method to do so. You can [click here](#getting-the-coordinates-of-a-clicked-area-in-the-3d-space) to know more about the `getTargetPosition()` method
+The library has several helper methods that provide a range of commmon functionalities to help you achieve certain actions easier. If for example, you do not have your intended position coordinates stored in the database or in a local area and wish to click a specific area of the 3D space and get that the coordinates of the area you clicked, you may do some by using the `getTargetPosition()` helper method in tangent with the [addMediaScreen()](#addmediascreen) method to do so. You can [click here](#getting-the-coordinates-of-a-clicked-area-in-the-3d-space) to know more about the `getTargetPosition()` method
 
 Here is an example of how you can use the two methods together. This is just one example, it is up to you on how you wish to combine different methods provided by the library
 
@@ -1257,9 +1550,9 @@ await atwin.attachMediaScreenContent(targetMediaScreenId, validUrl, 'video')
 ...
 ```
 
-When setting a video as the media screen content. You can use the `setVideoPlayback()` method to programmatically play,pause,mute,and unmute a video. You can navigate to the [playback controls section](#setting-video-playback-in-the-space) to learn more about the method. Here is an example on how to use it. 
+When setting a video as the media screen content. You can use the [setVideoPlayback()](#setvideoplayback) method to programmatically play,pause,mute,and unmute a video. You can navigate to the [playback controls section](#setting-video-playback-in-the-space) to learn more about the method. Here is an example on how to use it. 
 
-In this example, we are getting a random media screen from the `atwin._3DXObject` array which contains all the objects rendered in the space. Media screens whose media type is a video will have a variable called `planeElement` inside the object's `component` which contains an HTML video element that we can manipulate using the [setVideoPlayback()`](#setting-video-playback-in-the-space) method. Please take note that this variable is not acessible if the media type of the media screen content is an image.
+In this example, we are getting a random media screen from the `atwin._3DXObject` array which contains all the objects rendered in the space. Media screens whose media type is a video will have a variable called `planeElement` inside the object's `component` which contains an HTML video element that we can manipulate using the [setVideoPlayback()](#setvideoplayback) method. Please take note that this variable is not acessible if the media type of the media screen content is an image.
 
 *Interface used*
 ```typescript
@@ -1302,7 +1595,7 @@ Setting video playback refers to the act of adjusting various controls associate
 
 Assuming that you have already selected a video, you can now set the playback of the video.
 
-Inorder to set the playback of a video, you may use the `setVideoPlayback()` method.
+Inorder to set the playback of a video, you may use the [setVideoPlayback()](#setvideoplayback) method.
 
 | parameter | type | required | default | values |
 | :----: | :----: | :---: | :---: | :---: |
@@ -1343,7 +1636,7 @@ Setting animation control refers to the process of manipulating the playback of
 
 Assuming that you have already selected an animated 3D object, you can now control the setting of the animation.
 
-In order to set the animation control of a 3D object, you may use the `setAnimationState()` method. By default the action is set to 'play'. 
+In order to set the animation control of a 3D object, you may use the [setAnimationState()](#setanimationstate) method. By default the action is set to 'play'. 
 
 **NOTE:** Please take note that the 3D object MUST be fully rendered first in the space before you can manipuate its animation state. This method will have no affect on 3D objects that do not have any animations in them.
 
@@ -1378,7 +1671,7 @@ atwin.setAnimationState('pause', modelID)
 ### Copying object To Your Space
 Copying an object refers to creating a duplicate or clone of an object. When an object is copied in the space, it means that the object's data is duplicated.
 
-Assuming that you have already selected an object to be copied, you may now copy the object by calling `copyObject()` method. You may also specify a custom offset position and rotation of the object to be cloned.
+Assuming that you have already selected an object to be copied, you may now copy the object by calling [copyObject()](#copyobject) method. You may also specify a custom offset position and rotation of the object to be cloned.
 
 | parameter | type | required | default | values |
 | :----: | :----: | :---: | :---: | :---: |
@@ -1406,7 +1699,7 @@ if (atwin.selectedObject.object) {
 
 **Adding Object**: Adding an object in the database refers to the process of creating and inserting a new record into a data table. This involves providing the necessary data and attributes that define the object, and then store the object in the database. The newly added object becomes a part of the dataset and can be retrieved and manipulated as needed.
 
-In order to add an object in the database, you may use the `addObject()` method. Assuming that you have already setup to have an event listener for file upload.
+In order to add an object in the database, you may use the [addObject()](#addobject) method. Assuming that you have already setup to have an event listener for file upload.
 
 | parameter | type | required | default | values |
 | :----: | :----: | :---: | :---: | :---: |
@@ -1476,7 +1769,7 @@ async function handleAddObject() {
 
 **Getting Object**: Getting an object in the database refers to the action of retrieving a specific record from a data table. Once retrieved, the object's information and attributes can be utilized for various purposes, such as displaying data to the user or displaying the object into the space.
 
-In order to get an object in the database, you may use the `getObject()` method.
+In order to get an object in the database, you may use the [getObject()](#getobject) method.
 
 | parameter | type | required | default | values |
 | :----: | :----: | :---: | :---: | :---: |
@@ -1504,7 +1797,7 @@ async function handleGetObject() {
 ...
 ```
 
-Now that you already get the object and store it in the variable objectPayload, you may now place the object in the space by using `addObjectToSpace()` method and pass the objectPayload in the parameter.
+Now that you already get the object and store it in the variable objectPayload, you may now place the object in the space by using [addObjectToSpace()](#addobjecttospace) method and pass the objectPayload in the parameter.
 
 ```typescript
 import * as atwin from 'architwin';
@@ -1519,7 +1812,7 @@ if (objectPayload) {
 ```
 **Updating Object**: Updating an object in the database involves modifying the attributes or properties of an existing record from a data table.
 
-In order to update an object in the database, you may use the `updateObject()` method.
+In order to update an object in the database, you may use the [updateObject()](#updateobject) method.
 
 | parameter | type | required | default | values |
 | :----: | :----: | :---: | :---: | :---: |
@@ -1560,7 +1853,7 @@ async function handleUpdateObject() {
 ```
 **Deleting Object**: Deleting an object in the database refers to the process of removing a specific record from a data table. This operation permanently erases the object from the database, making its data and attributes no longer accessible.
 
-In order to delete an object in the databse, you may use the `deleteObject()` method.
+In order to delete an object in the databse, you may use the [deleteObject()](#deleteobject) method.
 
 | parameter | type | required | default | values |
 | :----: | :----: | :---: | :---: | :---: |
@@ -1585,11 +1878,32 @@ async function handleDeleteObject() {
 ...
 ```
 
+### Navigate to Object
+
+Navigating to an object in space refers to the process of moving the camera's location near to the object.
+
+Assuming that you have already selected an object to navigate to, you may now navigate to the object by using [goTo3dx()](#goto3dx) method.
+
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| objectId | number | yes |  |  |
+
+```typescript
+import * as atwin from 'architwin';
+
+....
+
+await atwin.goTo3dx(objectId)
+
+....
+
+```
+
 ### Deleting Object To Your Space
 
 Deleting an object in space refers to the process of removing a pre-existing 2D or 3D object from the 3D environment or space. This action results in the elimination of the visual representation and physical presence of the object within the virtual space. By removing the object, users can maintain control over the composition and contents of their space, allowing for more dynamic and tailored virtual experiences. 
 
-Assuming that you have already selected an object to be deleted, you may now delete the object by using `deleteObjectFromSpace()` method. 
+Assuming that you have already selected an object to be deleted, you may now delete the object by using [deleteObjectFromSpace()](#deleteobjectfromspace) method. 
 
 | parameter | type | required | default | values |
 | :----: | :----: | :---: | :---: | :---: |
@@ -1614,7 +1928,7 @@ async function handleDeleteObjectFromSpace() {
 
 Replacing an object in space refers to the process of substituting a pre-existing 2D or 3D object within a 3D environment or space with another object. This action involves removing the original object and introducing a new one in its place, while maintaining the object's location and any associated properties or attributes.
 
-Assuming that you have already selected an object to be replaced, you may now delete the object by using `replaceObject()` method.  
+Assuming that you have already selected an object to be replaced, you may now delete the object by using [replaceObject()](#replaceobject) method.
 
 | parameter | type | required | default | values |
 | :----: | :----: | :---: | :---: | :---: |
@@ -1646,7 +1960,7 @@ async function handleReplaceObject() {
 
 A text markup screen is a graphical user interface objecet that allows users to input and display formatted text in the 3D space. The method internally generates elements and programmatically applies CSS styling. You can use this method to display text messages to the 3D screen.
 
-In order to add a text markup screen in your space, you may use the `addTextMarkupScreen()` method.
+In order to add a text markup screen in your space, you may use the [addTextMarkupScreen()](#addtextmarkupscreen) method.
 
 | parameter | type | required | default | values |
 | :----: | :----: | :---: | :---: | :---: |
@@ -1685,7 +1999,7 @@ atwin.addTextMarkupScreen(title, message, transform)
 
 #### Setting Content to Text Markup Screen
 
-If you wish to update the style and content for the text frame, you may use the `setTextMarkupScreenContent()` method. You can customize the text content as well as the foreground and background color of the target text markup screen.
+If you wish to update the style and content for the text frame, you may use the [setTextMarkupScreenContent()](#settextmarkupscreencontent) method. You can customize the text content as well as the foreground and background color of the target text markup screen.
 
 | parameter | type | required | default | values |
 | :----: | :----: | :---: | :---: | :---: |
@@ -1711,7 +2025,276 @@ atwin.setTextMarkupScreenContent(id, title, text, textColor, backgroundColor)
 ...
 ```
 
-<!-- ## Meeting Guide
+## Typescript Interface Reference
+We encourage that you use typescript for any new project you intend to use the library with. With typescript, you can take advantage of the type interfaces provided by the library. This helps you catch errors more easily on your IDE instead of seeing it on production. If you do intend to just use vanilla JS for your project, you can still use this section as reference on how how to structure the javascript objects in yours project 
+
+You can use the library's type interfaces by importing it using the following import path
+
+```typescript
+import type {IShowcaseObject} from 'architwin/lib/types'
+
+const spaceObject:IShowcaseObject = {}
+```
+
+The library also exports a couple enums that you can use in your project too. Here are a few ways of importing enums
+
+```typescript
+//Method 1: Import interface and enums in one line
+import {type IShowcaseObject,SPACE_EVENTS} from 'architwin/lib/types'
+
+//Method 2: Import interface and enums separately
+import type {IShowcaseObject} from 'archtwin/lib/types'
+import {SPACE_EVENTS} from 'architwin/lib/types'
+
+const spaceObject:IShowcaseObject = {}
+```
+
+As a convention, interfaces provided by the library are written in PascalCase while enums are written in an uppercase SNAKE_CASE. We recommend that you follow this convention for your own interfaces for uniformity.
+
+### Tag Interfaces
+
+```typescript
+interface ITag {
+  id: number,
+  tag_name: string, // required
+  showcase_id: number, // required
+  floor_id: number, // required
+  color_id: number, // required
+  details?: string,
+  remarks?: string,
+  json_data: MpSdk.Tag.TagData, // required (mp tag data)
+  tag_type_id?: number,
+  sid: string,
+  bid?: string,
+  filename?: string,
+  tag_image?: string,
+  tag_url?: string,
+  tag_order?: number,
+  label: number, // required
+}
+```
+
+```typescript
+interface ITagPublic {
+  id: string;
+  name: string;
+}
+```
+
+### Object Interfaces
+
+```typescript
+interface IShowcaseObject {
+  id: number;
+  showcase_id: number;
+  object_id: number;
+  user_id: number;
+  uuid?: string;
+  space_uuid?: string;
+  object_uuid?: string;
+  object_position: {
+    x: number;
+    y: number;
+    z: number;
+  };
+  object_rotation: {
+    x: number;
+    y: number;
+    z: number;
+  };
+  object_scale: {
+    x: number;
+    y: number;
+    z: number;
+  };
+  autoplay: boolean;
+  autoplay_distance: number;
+  offset_position: number;
+  offset_rotation: number;
+  position_unit: string;
+  showcase_object_name: string;
+  is_deleted: boolean;
+  is_read: boolean;
+  is_new: boolean;
+  object_data: I3DObject;
+}
+```
+
+```typescript
+interface I3DObject {
+  id: number;
+  uuid?: string;
+  upload_file: string;
+  upload_filename: string;
+  filename: string;
+  user_id: number;
+  name: string;
+  description: string;
+  object_type: string;
+  object_key: string;
+  amazon_uri: string;
+  object_thumbnail?: string;
+  thumbnail_key?: string;
+  thumbnail_type?: string;
+}
+```
+
+```typescript
+interface IObjectData {
+  collider?: any
+  object: IShowcaseObject
+  component: Scene.IComponent
+  node: Scene.INode
+  type?: string
+}
+```
+
+```typescript
+interface NearbyObjects {
+  x3d: Array<IObjectData>
+  videos: Array<IObjectData>
+  slideshows: Array<IObjectData>
+}
+```
+
+```typescript
+interface ObjectConfig {
+  options?: {
+    name?: string | undefined
+    title?: string | undefined
+    type?: string | undefined
+    url?: string | undefined
+    iframeId?: string | undefined
+    wrapperId?: string | undefined
+    textColor?: string | undefined
+    backgroundColor?: string | undefined
+    visible?: boolean | undefined
+    aspectRatio?: number | undefined
+    text?: string | undefined
+    fontSize?: number | undefined
+    background?: boolean | undefined
+    centered?: boolean | undefined
+    height?: number | undefined
+    curveSegments?: number | undefined
+    bevelEnabled?: boolean | undefined
+    bevelThickness?: number | undefined
+    bevelSize?: number | undefined
+    bevelOffset?: number | undefined
+    bevelSegments?: number | undefined
+  }
+  position?: Vector3
+  scale?: Vector3
+  rotation?: Vector3
+}
+```
+
+```typescript
+interface MediaScreenConfig {
+  mediaUrl?: string
+  mediaType?:string
+  transform?: VectorCoords
+  readonly?: boolean
+  autoplay?:boolean
+}
+```
+
+```typescript
+export interface VectorCoords {
+  object_position: Vector3
+  object_rotation: Vector3
+  object_scale:Vector3
+}
+```
+
+### Meeting Interfaces
+
+```typescript
+interface MeetingInfo {
+  space_id: string;
+  meeting_id?: string;
+  host_name?: string;
+  title?: string;
+  meeting_start?: Date;
+  meeting_status?: MeetingStatus;
+  duration?: number;
+  password?: string;
+}
+```
+
+```typescript
+interface MeetingConfig {
+  customColors?: MeetingCustomColors;
+  customAvatars?: Avatar[];
+  deviceControl?: MeetingDeviceControl;
+  meetingBarPosition?: MeetingBarPosition;
+}
+```
+
+```typescript
+interface MeetingDeviceControl {
+  videoInput: boolean;
+  audioInput: boolean;
+  audioOutput: boolean;
+}
+```
+
+```typescript
+interface Avatar {
+  model: string;
+  thumbnail: string;
+}
+```
+
+```typescript
+interface MeetingConfig {
+  customColors?: MeetingCustomColors;
+  customAvatars?: Avatar[];
+  deviceControl?: MeetingDeviceControl;
+  meetingBarPosition?: MeetingBarPosition;
+}
+```
+
+```typescript
+interface MeetingDeviceControl {
+  videoInput: boolean;
+  audioInput: boolean;
+  audioOutput: boolean;
+}
+```
+
+```typescript
+interface IParticipant {
+  id?: string;
+  name?: string;
+  type?: IParticipantType;
+  color?: string;
+  avatar?: Avatar;
+  shapeNum?: number;
+}
+```
+
+```typescript
+interface IMpParticipant{
+  avatar: {
+    model: string,
+    thumbnail: string,
+  },
+  avatarConfig: {
+    height: number,
+    scale: number,
+    laserOrigin: {x: number, y: number, z: number}
+  },
+  id: string,
+  name: string,
+  color?: string,
+  shape?: PShapes,
+  position: {x: number, y: number, z: number},
+  rotation: {x: number, y: number, z: number},
+}
+```
+
+
+## Meeting Guide
 
 Hosting Live Virtual Meetings in 3D Space
 
@@ -1735,7 +2318,7 @@ atwin.createMeeting(
 )
 ````
 
-The `createMeeting` method requires the following parameters to work.
+The [createMeeting()](#createmeeting) method requires the following parameters to work.
 
 | parameter | type | required | values |
 | :----: | :----: | :---: | :---: |
@@ -1781,7 +2364,7 @@ Note: `duration` can accept floating numbers like `1.5`. `1.5` is equivalent to
 </script>
 ````
 
-Successfuly invoking the `createMeeting` method will return an object containing the meeting password, and meeting URL for host and guest which is used in another method called [startMeeting](#start-meeting).
+Successfuly invoking the [createMeeting()](#createmeeting) method will return an object containing the meeting password, and meeting URL for host and guest which is used in another method called [startMeeting()](#startmeeting).
 
 *Return Example:*
 ````json
@@ -1795,11 +2378,11 @@ Successfuly invoking the `createMeeting` method will return an object containing
 
 ### Start Meeting
 
-Star the meeting using `startMeeting` method. 
+Star the meeting using [startMeeting()](#startmeeting) method. 
 ````typescript
 atwin.startMeeting(meetingUrl: string, meetingPassword?: string, meetingConfig?: MeetingConfig)
 ````
-The `startMeeting` method requires the following parameters to work.
+The [startMeeting()](#startmeeting) method requires the following parameters to work.
 
 | parameter | type | required | values |
 | :----: | :----: | :---: | :---: |
@@ -1807,9 +2390,9 @@ The `startMeeting` method requires the following parameters to work.
 | meetingPassword | string | no | any string|
 | meetingConfig | MeetingConfig | no | MeetingConfig object |
 
-This `startMeeting` method will initialize the meeting and display pre-meeting settings.
+This [startMeeting()](#startmeeting) method will initialize the meeting and display pre-meeting settings.
 
-`meetingUrl` : string - The URL that is generated from `createMeeting` method.
+`meetingUrl` : string - The URL that is generated from [createMeeting()](#createmeeting) method.
 
 `meetingPassword` : string - The password set during creation of the meeting.
 
@@ -1837,17 +2420,17 @@ atwin.startMeeting(
   }
 )
 ````
-Successfuly invoking the `startMeeting` method will start the meeting.
+Successfuly invoking the [startMeeting()](#startmeeting) method will start the meeting.
 
 ### Stop Meeting
 ````typescript
 atwin.stopMeeting()
 ````
-To end the current or initialized meeting use `stopMeeting` method.
+To end the current or initialized meeting use [stopMeeting()](#stopmeeting) method.
 
-Note: `stopMeeting` method will have the same result of using hang-up button in meeting session control.
+Note: [stopMeeting()](#stopmeeting) method will have the same result of using hang-up button in meeting session control.
 
-### Utility Methods
+### Meeting Utility Methods
 
 **Get Meeting Participants**
 ````typescript
@@ -2138,423 +2721,1648 @@ export const enum MeetingStatus {
   STOPPED = 2,
   CANCELLED = 3,
 }
-```` -->
+````
 
 ## Function Reference
-
 Some Functions are **async**; when invoking them, Use keyword **await** or **.then** syntax
+_______
+
+### Space
+
+#### connectSpace()
+Connect and load a 3D space into an HTML iframe asynchronously using this function. It initializes various configuration settings and view modes based on the provided parameters.
 
---------------------------
 ```typescript
-disconnectSpace() 
-    // disconnects and clear currently displayed Space
-    // this is an async function that returns a Promise
+async function connectSpace(
+  url: string,
+  auth: { apiURL?: string; apiKey: string; user: IUser } | null,
+  config: IMPConfig,
+  callbacks: { onLoad: Function; onStart: Function; onPlay: Function } | undefined = undefined
+): Promise<void>
 ```
 
-#### Tags
-````typescript
-gotoTag(space: ISpace)  
-    // returns an array of an array of ITag containing information of all tags in the space. Please take note that this function is executed internally when the space is loaded and you can access the tag data via calling atwin.tags
-    // this is an async function that requires a Tag ID param and returns a Promise
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| url | string | yes | | valid space URL |
+| auth | { string; string; IUser } | yes | | |
+| config | IMPConfig | yes | | |
 
-atwin.tags - // variable containing an array of ITag
+**url** - the URL of the space you wish to connect to.
 
-gotoTag(tagId: number) 
-    // transport navigate directly to the tag with given ID
-    // this is an async function that requires a Tag ID param and returns a Promise
+ - The [connectSpace](#connectSpace) method can also accomodate the following URL parameters: 
+    - "objectId" : ID of the object
+      * If the 'objectId' is present in the URL with a value, the camera location will immediately navigate to the specific object within the 3D space after loading. This specific object will be identified using the value of the 'objectId' parameter.
 
-goToRandomTag() 
-    // go to a random tag inside the space
-    // this is a void function
-````
-### Sweeps
-````typescript
-getSweeps() 
-    // returns an array of ISweep, please note that this function is executed internally upon starting the space and you can just get the sweep data by calling the atwin.sweeps
-    // this is an async function that requires a Sweep ID then returns a Promise
+    - "tag" : ID of the tag
+      * In cases where the 'tag' is included in the URL with an assigned value, the camera location will swiftly adjust to the specified tag within the 3D space once the loading is complete. The particular tag to focus on will be determined by the value of the 'tag' parameter.
 
-atwin.sweeps
-    // variable containg an array of ISweep data
+    - "sweep" : ID of the sweep
+      * If the 'sweep' is present in the URL with a value, the camera location will immediately navigate to the specific sweep within the 3D space after loading. This specific sweep will be identified using the value of the 'sweep' parameter.
 
-moveToSweep(sweepId: string)
-    // transport navigate directly to the Sweep with given ID. 
-    // this is an async function that requires a Sweep ID then returns a Promise
+    - "brand" : 0 | 1
+      *  0 : Remove the 'Presented By' information upon model launch. Additionally, hide contact details within the "About" panel located in the upper-left corner of the 3D Showcase interface.
+      * 1 (Default) : Show all branding-related information within the "About" panel positioned at the top-left corner of the 3D Showcase interface.
 
-moveToSweep(sweepId: string) 
-    // transport navigate directly to the Sweep with given ID. 
-    // this is an async function that requires a Sweep ID then returns a Promise
+    - "hr" : 0 | 1
+      * 0 : Hide the highlight reel located at the bottom of the 3D Showcase user interface.
+      * 1 (Default) : Dispaly highlight reel
 
-getNearbySweeps(sweepId: string) 
-    // returns the nearby or neighbors of a given sweep. 
-    // this is an async function that requires a Sweep ID then returns a Promise
+    - "tour" : 0 | 1 | 2 | 3
+       * 0 : Tour controls and highlight reel will not be visible.
+       * 1 (Default) : The saved tour mode within the model is used.
+       * 2 : Story mode tour is used.
+       * 3: Highlight reel mode tour is used.
 
-getCurrentSweep() 
-    // returns the current sweep detail
-    // this is a function
+    - "dh" : 0 | 1
+      * 0 : Hide the Dollhouse View during the introductory fly-in. Additionally, hide the Dollhouse Button located in the bottom left corner of the 3D Showcase user interface. Moreover, remove the snapshots of the Dollhouse and Floorplan views from the highlight reel.
+      * 1 (Default) : Display Dollhouse View
 
-getSweepPosition(): {x: number, y: number, z: number} 
-    // returns the position of the current sweep:
-    // this is a function
+    -  "tagNav" : 0 | 1
+        * 0 : Removes the < and > buttons from Tags and disables navigation through Tags using the "," and "." keys.
+        * 1 (Default): Displays the < and > buttons for Tags and permits navigation through Tags using the "," and "." keys.
 
-goToRandomSweep() 
-    // move to a random sweep inside the space
-    // this is a void function
-````
+    - "mt" : 0 | 1
+      * 0 : Conceal Mattertags and "Mattertag™ Content" toggle in the "About" panel.
+      * 1 (Default) : Display Mattertag™ Posts
 
-**Example:**
-````typescript
-<script lang="ts">
-  import * as atwin from 'architwin';
+    - "mls": 0 | 1 | 2
+      * 0 (Default) : Show branding information, links in Mattertag™ Posts, and VR.
+      * 1 : Show the MLS-friendly version of the Matterport model. This hides branding, hides links in Mattertag™ Posts, and hides VR.
+      * 2 : Same behavior as &mls=1 but also hides the "About" panel in the top-left corner after loading.
 
-  ...
- 
-  // get current sweep data
-  atwin.getCurrentSweep()
+    - "f" : 0 | 1
+      * 0 : Hide the option to switch floors. This treats the Matterport model as "all one floor".
+      * 1 (Default) : Allow the user navigate the 3D model floor by floor.
 
-  // get current sweep position
-  atwin.getSweepPosition()
+    - "fp" : 0 | 1
+      * 0 : Hide the floor plan view button from the bottom-left corner of the 3D Showcase UI. 
+      * 1 (Default) : Display the floor plan view button in the bottom-left corner of the 3D Showcase UI.
 
-  // moving to a Sweep
-  await atwin.moveToSweep('mfj45ligf')
+    - "search" : 0 | 1
+      * 0 : Hide the magnifying glass (search) icon from the upper-left corner of the 3D Showcase UI.
+      * 1 (Default) : Display the magnifying glass (search) icon in the upper-left corner of the 3D Showcase UI. If Space Search is disabled at the account level, this parameter has no effect.
+    
+    - "title" : 0 | 1
+      * 0 : The space title is not being shown, and the top-left about panel is also not visible.
+      * 1 (Default) : "The space title is being shown. The top-left about panel is visible."
 
-  // get nearby sweeps from current Sweep
-  await atwin.getNearbySweeps('mfj45ligf')
+    - "vr" : 0 | 1
+      * 0 : Remove the VR button.
+      * 1 (Default) : Display the VR button.
 
-  // move to a random sweep
-  goToRandomSweep()
-  
-  ...
 
-</script>
-````
+If the parameters 'objectId,' 'tag,' and 'sweep' are present in the URL with values, the first parameter among the three will be accommodated based on the URL structure.
 
-### Video
-````typescript
-playVideo(videoId: number) 
-    // play a video screen
-    // this is a function
-
-pauseVideo(videoId: number) 
-    // pause a video screen
-    // this is a function
-
-setVideoPlayback(action: 'play' | 'pause' | 'mute' | 'unmute', element: HTMLVideoElement) -  
-    // action - can be play, pause, mute or unmute
-    // element - can be HTMLVideoElemens such as
-    // this is a function
-````
+**auth** - an authentication object with the apiKey and user credentials. Default user credentials will be provided by ArchiTwin for testing which you can change anytime to your own user credentials. The auth object passed to the `connectSpace` method may consist of the following keys:
 
-**Example:**
-````typescript
-<script lang="ts">
-  import * as atwin from 'architwin';
+- apiURL: (string) an optional key which if set, will point all internal API calls to the api endpoint or base URL you assign. If this is not set, all api calls will be directed to the proxy address set in the `vite.config.ts` file during **local development**. Example: `apiURL: "apps.awesomesite.com/api"` will resolve internally to `apps.awesomesite.com/api/cas/tickets?someparams` or `apps.awesomesite.com/api/v1/showcase/id/1`. It is important to add `/api` to the base url of your custom apiURL to ensure the api requests are properly sent. There is no need to add a forward slash at the end of our custom apiURL. Please take note that you *may* have to setup a proxy server to bypass CORS issues when you deploy your application on your production servers
+- apiKey: (string) sets the required apiKey that is inserted into the authorization headers of each API request
+- user: (IUser | Object) an object that contains the `email` and `password` of the user.
 
-  ...
+**config** - a config object to set some default space behavior. You can learn more about the config object below.
 
-  // play a video
-  atwin.playVideo(1)
+**Config Options**
 
-  // pause a video
-  atwin.pauseVideo(2)
+```typescript
+export interface IMPConfig{
+    iframeId: string, // required
+    appKey?: string,
+    bundlePath?: string,
+    viewMode?: string 
+    play?: 0 | 1,
+    qs?: 0 | 1,
+    tour?: 0 | 1 | 2 | 3,
+    vr?: 0 | 1,
+    mapConfig?: {
+      mapId: string
+      position?: string //topRight | topLeft | bottomRight | bottomLeft
+      fixedSized: {
+        width: number //Numerical pixel values
+        height?: number //Numerical pixel values
+      } 
+      zIndex?: number
+    }
+}
+```
 
-  // play a video screen
-  atwin.setVideoPlayback('play', atwin.selectedObject.component.planeElement)
+**iframeId:** string: The `id` of the target iframe where the 3D space will be loaded into. 
 
-  // pause a video screen
-  atwin.setVideoPlayback('pause', atwin.selectedObject.component.planeElement)
+**appKey:** your appKey is used to authenticate your connection when loading the 3D showcase. For security purposes, the appKey can only be used by a domain (e.g. awesomesite.com) it is associated with. This key is important especially when you launch your app in production and utilize your own site domain. Please contact us to request your appKey
 
-  // mute a video screen
-  atwin.setVideoPlayback('mute', atwin.selectedObject.component.planeElement)
+**bundlePath?:** string: bundlePath is an optional key that can be set for projects whose project structure requires a custom path to the bundle SDK provided by matterport. If not set, the package will by default set the bundle path to the bundle SDK found inside the architwin package in node_modules.
 
-  // unmute a video screen
-  atwin.setVideoPlayback('unmute', atwin.selectedObject.component.planeElement)
+**viewMode** string: viewMode is an optional key that enables and disables [transform controls](#transforming-objects) in your 3D space. If the value of viewMode is not set, it will default to setting the viewMode to 'public' which disables transform controls. To enable the ability to transform objects using the transform control axis UI, you must set viewMode to 'interactive'
 
-  ...
+*Example:*
 
-</script>
-````
-### Navigation 
-````typescript
-cameraLookAt(x: number,y: number)
-    // set camera view at coordinate in SCREEN. 
-    // x and y is in pixel valuews from top left corner of the space canvas
-    // this is an async function and returns a Promise
-
-moveInDirection(direction: string)
-    // move in DIRECTION, can be LEFT, RIGTH, UP, DOWN, FORWARD, BACKWARD
-    // this is an async function and returns a Promise
-
-getViewMode() 
-    // returns the current View Mode of the space.
-    // there are three modes:
-    // "mode.inside" - shows the interior view of the space
-    // "mode.floorplan" - shows the floor plan of the space
-    // "mode.dollhouse" - shows the doll house view
-    // this is a function
-
-setViewMode(mode: string)
-    // to set the viewing mode to "INSIDE", "FLOORPLAN" or "DOLLHOUSE"
-    // this is an async function and returns a Promise
-````
+`bundlePath: "assets/customBundleName"`
 
+This will resolve internally to `"assets/customBundleName/showcase.html?someparams"`
 
-### Camera
-````typescript
-getCurrentCameraPose()
-    // returns the current camera Pose object
-    // this is a function
-
-getCameraPosition()
-    // returns the current camera Position {x,y,z}
-    // this is a function
-
-cameraPan(x: number, z: number) 
-    // pan (z-axis) makes the camera look left and right.  tilt (x-axis) the camera look up and down. 
-    // x and z are angles in degrees
-    // this is an async function and returns a Promise
-
-cameraRotate(x: number, y: number, speed: number) 
-    // rotates the camera view, x and y is rotation in horizontal
-    // and vertical rotation in degrees
-    // this is an async function and returns a Promise
-````
+**play?:** 0 | 1, default = 0
+
+- 0     Shows a Play button ▶️️  on the iframe. The user must press the Play button ▶️️  to open the Matterport model. 
+- 1	    Automatically opens the Matterport model when the iframe loads on the page. If the 3D Showcase is opened via a link (not embedded in an iframe), this option is chosen automatically. When embedding Showcase within an iframe, play=1 will only work if the iframe is large enough on the user’s screen to provide a good user experience. Specifically, on mobile devices, the iframe has to cover at least 60% of the screen.
+
+**qs?:** 0 | 1, default = 0
+ 
+- 0 	Disable Quickstart (when the Matterport model first opens, zoom in from Dollhouse View).
+- 1	    Enable Quickstart (when the Matterport model first opens, go straight into Inside View). Learn more. Only works if Start Position is Inside View.
+
+**tour?:** 0 | 1 | 2 | 3, default = 1
+- 0	 No tour controls or highlight reel appear.
+- 1	 The tour mode saved in the model is used.
+- 2	 Story mode tour is used.
+- 3	 Highlight reel mode tour is used.
+
+**vr?:** 0 | 1, default = 1
+- 0  Hide the VR button.
+- 1	 Default Show the VR button.
 
 **Example:**
-````typescript
-<script lang="ts">
-  import * as atwin from 'architwin';
+```javascript
+import * as atwin from 'architwin'
 
-  ...
+// public URL for the space, you will be provided an API Endpoint for the list of public spaces
+const spaceUrl = "https://basic-dev.rev-kitten.com/showcase/model3d_public/1?token=e707880f-0fc5-48a6-b3f6-643a19f81464"
+
+const auth = {
+    apiURL: "YOUR-API-URL", //Set the url to make api requests to
+    apiKey: "YOUR-API-KEY", //xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
+    user: {
+        email: 'su@email.com',
+        password: 'su123'
+    }
+}
+
+const config = {
+    iframeId: "mp-showcase", // this is required
+    // ... other config options. 
+}
 
-  // get current Camera Pose
-  atwin.getCurrentCameraPose()
+await atwin.connectSpace(url, auth, config)
+```
 
-  // get current camera position
-  atwin.getCameraPosition()
+**Minimap Config**
 
-  // set Camera View
-  await atwin.cameraLookAt(0, 10)
+You can enable a minimap display of your 3D space by setting the following key-values in your config object that you pass into the `connectSpace` method
 
-  // move in different Directions
-  await atwin.moveInDirection("FORWARD")
+```typescript
+  const config = {
+    //Other config values...
+    mapConfig: {
+      mapId: 'at-map', //required
+      position: 'topLeft',
+    }
+  } as IMPConfig;
+```
 
-  // pan around z axis (pan and tilt only works in Dollhouse mode)
-  await atwin.cameraPan(0,20)
+To ensure that you will not encounter any errors. Make sure to follow the prescribed markup structure under the [defining an iFrame section](#define-an-iframe-as-target-for-the-showcase). All CSS classes or ids used internally by the library will have an `at_` prefix for classes and an `at-` for ids. The classes and ids are named this way to avoid any naming conflicts with your apps own CSS classes or ids.
 
-  // tilt abpout x axis
-  await atwin.cameraPan(30,0)
+You can technically forego the at_showcase_container class of the parent div with your own class. Just make sure it has the `position` attribute set to `relative` otherwise things may not position correctly.
 
-  // rotate around X axis, last parameter is the Speed of rotation in seconds
-  await atwin.cameraRotate(20,0,2)
+**mapConfig Options**
 
-  // rotate around Y axis
-  await atwin.cameraRotate(20,5,2)
+- **mapId** - The id attribute value of the div element that will hold the map.
+- **position** - (optional) Specify where to place the minimap. Valid positions are topLeft, topRight, bottomRight, bottomLeft. By default, the map is placed at the topRight corner if this value is not set.
+- **fixedSized** - (optional) Specify a fixed width of the minimap. By default, the minimap has width of 100px and expands to 250px upon mouse hover. Please take note that setting a fixed width of your minimap will disable the hover-to-expand animation. Any numberic value you provide will be translated into pixel units
 
-  // get current View
-  atwin.getViewMode()
+Example:
 
-  // set View Mode
-  await atwin.setViewMode("INSIDE")
-  await atwin.setViewMode("FLOORPLAN")
-  await atwin.setViewMode("DOLLHOUSE")
+```typescript
+  const config = {
+    //Other config values...
+    mapConfig: {
+      mapId: 'at-map', //required
+      position: 'topLeft',
+      fixedSized:{
+        width: 300
+      }
+    }
+  } as IMPConfig;
+```
+- **zIndex** - (optional) Set the z-index of the map. In cases where you have UI elements that coincide with the position of the minimap. You set the z-index value of the minimap to determine what order the minimap should be rendered.
 
-  ...
 
-</script>
-````
+#### disconnectSpace()
 
-### Objects
+Utilize this asynchronous function for disconnecting and efficiently cleaning up resources linked to the connected 3D space. It stops any playing videos, disposes of tags, clears objects and states, and ultimately disconnects while clearing the currently displayed Space.
 
+*Function Signature*
+```typescript
+async function disconnectSpace(): Promise<void>
+```
 
+*Example*
 ````typescript
-getNearbyObjects(type?: '3DX' | 'SLIDESHOW' | 'VIDEO', distance?: number = 2)
-    // returns a list of nearby objects
-    // type - can be 3Dx, Slideshow or Video; parameter is optional. if no parameter is passed, it returns all objects
-    // distance - is optional but with a default of 2 meters
-    // this is a function
-
-addObjectToSpace(object:I3DObject | undefined, option:Object)
-    // object - accepts I3DObject or undefined
-    // option - accepts an Object. Default is null
-    // this is an async function that returns a Promise
-
-addMediaScreen(mediaUrl?: string, transform:Object3DPosition, readonly?:boolean, autoplay?:boolean) 
-    // creates a 2D object that can be used to display a wide variety images or videos dynamically
-    // mediaUrl - optional but default is empty string
-    // transform - optional but default is null
-    // readonly - optional but default is false
-    // autoplay - optional but default is false
-    // this is an async function
-
-setTransformMode(mode: 'translate' | 'scale' | 'rotate')
-    // sets the transform mode of the selected object
-    // mode - can be translate, scale or rotate
-    // this is an async function
-
-revertTransform(action: 'undo' | 'redo')
-    // action - can be undo or redo
-    // returns a boolean
-
-clearTransformControls()
-    // clears the transform component attached to the selected object
-
-setAnimationState(action: 'play' | 'stop', target:I3DObject)
-    // sets the animation state of a 3D model
-    // action - can be play or stop
-    // this is a function
-
-showObjectDimensions(selected:IObjectData)
-    // shows the width, height, depth of a 3D model
-    // this is a function
-
-copyObject(payload:IShowcaseObject, position_offset:Vector3 | undefined, rotation_offset:Vector3 | undefined)
-    // copies the the selected objecte
-    // payload - the payload of the selected object
-    // position_offset - optional; the offset of the position on where to add the object in the space
-    // rotation_offset - optional; the offset of the rotation of the object 
-    // this is an async function
-
-addObject(payload:FileUpload)
-    // adds object from the database
-    // payload - payload for the file to be uploaded
-    // this is an async function that returns a Promise<I3DObject>
-
-getObject(id:number)
-    // retrieves object from the database
-    // id - the unique id of the object
-    // this is an async function that returns a Promise<I3DObject>
-
-updateObject(id:number,payload:FileUpload)
-    // updates object from the database
-    // id - the unique id of the object
-    // payload - payload for the file to be uploaded
-    // this is an async function that returns a Promise<I3DObject>
-
-deleteObject(id:number)
-    // deletes object from the database
-    // id - the unique id of the object
-    // this is an async function
-
-deleteObjectFromSpace(selected:IObjectData)
-    // deleted object from space
-    // selected - the selected or target object to be removed
-    // this is an async functon
-
-replaceObject(payload:I3DObject, target:IObjectData, options:Object = null)
-    // replaces the object in the space with another object
-    // payload - the new object to replace the target object
-    // target - the object to be replaced
-    // options - optional; options to pass into the loader
-    // this is an async function
-
-addTextMarkupScreen(title:string, message:string, textScreenName:string, transform:Object3DPosition, textColor:string, backgroundColor:string
-)
-    // adds a text frame in the pace
-    // title - title of the message
-    // message - message content
-    // textScreenName - name of the text frame. 
-    // transform - x,y,x values for position, rotation, and scale
-    // textColor - optional; valid color value
-    // backgroundColor - optional; valid background color value
-    // this is an async function
-
-setTextMarkupScreenContent(showcase_id:string, title:string, text:string, textColor:string, backgroundColor:string)
-    // updates the style and content of the text frame
-    // showcase_id - showcase id of the target object
-    // title - title of your content
-    // text - body of the text content
-    // textColor - optional; set the color of the text
-    // backgroundColor - optional; set the color of the background
-    // this is a function
+import * as atwin from 'architwin'
 
+atwin.disconnectSpace();
 ````
+-----
+### Tags
 
-**Example**
-````typescript
-<script lang="ts">
-  import * as atwin from 'architwin';
-  import type { Object3DPosition } from '../../architwin/src/types';
-  ...
+#### getTags()
+
+This method returns an array of `ITag` containing information of all tags in the space.
 
-  // get all nearby objects
-  atwin.getNearbyObjects()
+*Function Signature*
+```typescript
+async function getTags(space: ISpace): Promise<ITag[] | null>;
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| space | ISpace | yes |  | |
 
-  // get all nearby 3dx objects
-  atwin.getNearbyObjects('3DX')
+*Example*
+```typescript
+import * as atwin from 'architwin'
 
-  // get all slideshow objects
-  atwin.getNearbyObjects('SLIDESHOW')
+const space = /* specify the space object */;
+const tags = await atwin.getTags(space);
+if (tags) {
+  console.log('Tags:', tags);
+} else {
+  console.log('No tags found or an error occurred.');
+}
+```
 
-  // get all video screen objects
-  atwin.getNearbyObjects('VIDEO')
 
-  // get all video screen objects with distance
-  atwin.getNearbyObjects('3DX', 3)
+#### gotoTag()
 
-  // creates pre-existing 2D/3D from the DB to the 3D space
-  await atwin.addObjectToSpace(objectPayload)
+This method enables direct navigation to the tag within the space, identified by a specific ID. 
 
-  // creates a 2D Frame Object 
-  atwin.addMediaScreen()
+*Function Signature*
+```typescript
+async function gotoTag(tagId: string): Promise<void>
+```
 
-  // translates object
-  atwin.setTransformMode('translate')
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :---: | :---: | :---: | :---: |
+| tagId | string | yes |  | any string |
 
-  // scales object
-  atwin.setTransformMode('scale')
+*Example*
+```typescript
+import * as atwin from 'architwin'
 
-  // rotates object
-  atwin.setTransformMode('rotate')
+const tagId = /* specify the tag ID */;
+await atwin.gotoTag(tagId);
+```
 
-  // undo object transformation
-  atwin.revertTransform('undo')
-  
-  // redo object transformation
-  atwin.revertTranform('redo')
+-----
 
-  // clears the transform component
-  atwin.clearTransformControls()
+### Sweeps
 
-  // play object animation 
-  atwin.setAnimationState('play', atwin.selectedObject.object.object_data)
+#### getSweeps()
 
-  // pause object animation
-  atwin.setAnimationState('pause', atwin.selectedObject.object.object_data)
+Retrieve information about the sweeps (viewpoints) within the loaded 3D space using this asynchronous method.
 
-  // show object dimension
-  atwin.showObjectDimensions(atwin.selectedObject)
+*Function Signature*
+```typescript
+async function getSweeps(): Promise<ISweep[] | null>
+```
 
-  // create a duplicate to an existing object in the space
-  await atwin.copyObject(objectPayload)
+*Example*
+```typescript
+import * as atwin from 'architwin'
 
-  // adds an object to the database
-  await atwin.addObject(objectPayload)
+const sweeps = await atwin.getSweeps();
+if (sweeps) {
+  console.log('Sweeps:', sweeps);
+} else {
+  console.log('No sweeps found in the loaded space.');
+}
+```
 
-  // gets an object from the database
-  await atwin.getObject(objectID)
+#### moveToSweep()
 
-  // updates an existing object from the database
-  await atwin.updateObject(objectID, objectPayload)
+This asynchronous function moves the camera location to a specific sweep (viewpoint) within the loaded 3D space. 
 
-  // deletes an object from the database
-  await atwin.deleteObject(objectID)
+*Function Signature*
+```typescript
+async function moveToSweep(sweepId: string): Promise<void>
+```
 
-  // deletes an object from the space
-  await atwin.deleteObjectFromSpace(atwin.selectedObject)
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| sweepId | string | yes |  | Id of the sweep |
 
-  // replaces an object in the space
-  await atwin.replaceObject(objectData, atwin.selectedObject)
+*Example*
+```typescript
+import * as atwin from 'architwin'
 
-  // adds a text frame in the pace
-  await atwin.addTextMarkupScreen(title, message, transform, textColor, backgroundColor)
+const sweepId = /* specify the sweep ID */;
+await atwin.moveToSweep(sweepId);
+console.log('Camera view moved to sweep ' + sweepId);
+```
 
-  // updates the style and content of the text frame
-  atwin.setTextMarkupScreenContent(id, title, text, textColor, backgroundColor)
 
-  ...
+#### getNearbySweeps()
 
-</script>
-````
+Retrieve information about nearby sweeps (viewpoints) for a given sweep within the loaded 3D space using this asynchronous function.
+
+*Function Signature*
+```typescript
+async function getNearbySweeps(sweepId: string): Promise<string[] | undefined>
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| sweepId | string | yes |  | Id of the sweep |
+
+*Example*
+```typescript
+import * as atwin from 'architwin'
+
+const sweepId = /* specify the sweep ID */;
+const nearbySweeps = await atwin.getNearbySweeps(sweepId);
+console.log('Nearby Sweeps:', nearbySweeps);
+```
+
+#### getCurrentSweep()
+
+Obtain information about the current sweep that the camera view is focused on within the loaded 3D space using this function.
+
+*Function Signature*
+```typescript
+function getCurrentSweep(): ISweep
+```
+
+*Example*
+```typescript
+import * as atwin from 'architwin'
+
+const currentSweep = atwin.getCurrentSweep();
+console.log('Current Sweep:', currentSweep);
+```
+
+-----
+
+### Video
+
+#### playVideo()
+
+Initiate playback of a video object with a specified ID in the loaded 3D space using this function. It fetches the video object using the provided video ID and starts playback.
+
+*Function Signature*
+```typescript
+function playVideo(videoId: number): void
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| videoId | number | yes |  | Id of the video |
+
+*Example*
+```typescript
+import * as atwin from 'architwin'
+
+const videoId = /* specify the video ID */;
+atwin.playVideo(videoId);
+```
+
+#### pauseVideo()
+
+Pause playback of a video object with a specified ID in the loaded 3D space using this function. It retrieves the video object using the provided video ID and halts its playback.
+
+*Function Signature*
+```typescript
+function pauseVideo(videoId: number): void;
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| videoId | number | yes |  | Id of the video |
+
+*Example*
+```typescript
+import * as atwin from 'architwin'
+
+const videoId = /* specify the video ID */;
+atwin.pauseVideo(videoId);
+```
+
+#### setVideoPlayback()
+
+This function enables you to control the playback and mute state of an HTML video element by specifying an action. Supported actions include "play," "pause", "mute," and "unmute." The function modifies the playback and mute settings of the provided video element based on the action.
+
+*Function Signature*
+```typescript
+function setVideoPlayback(action: string, element: HTMLVideoElement): void;
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| action | string | yes |  | 'play' or 'pause' or 'mute' or 'unmute' |
+| element | HTMLVideoElement | yes |  | HTML video element |
+
+*Example*
+```typescript
+import * as atwin from 'architwin'
+
+const action = "play"; // Specify the desired action
+const videoElement = /* Specify the HTML video element */;
+atwin.setVideoPlayback(action, videoElement);
+```
+
+-----
+
+### Navigation
+
+#### moveInDirection()
+
+Move the camera within the space in a specified direction using this asynchronous function. Supported directions comprise 'LEFT,' 'RIGHT,' 'UP,' 'DOWN,' 'FORWARD,' and 'BACKWARD'.
+
+*Function Signature*
+```typescript
+async function moveInDirection(direction: string): Promise<void>;
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| direction | string | yes |  | "FORWARD" or "BACKWARD" or "LEFT" or "RIGHT" |
+
+*Example*
+```typescript
+import * as atwin from 'architwin'
+
+const desiredDirection = "LEFT"; // Specify the desired direction
+atwin.moveInDirection(desiredDirection)
+  .then(() => {
+    console.log("Camera moved successfully!");
+  })
+  .catch(() => {
+    console.error("Error occurred while moving the camera.");
+  });
+```
+
+-----
+
+### Camera
+
+#### getCurrentCameraPose()
+
+Retrieve the current camera pose, including the details about the camera's spatial orientation and position within the space. The camera pose provides details about the camera's spatial location and orientation, allowing you to understand its position in the virtual environment.
+
+*Function Signature*
+```typescript
+function getCurrentCameraPose(): any;
+```
+
+*Example*
+```typescript
+import * as atwin from 'architwin'
+
+const cameraPose = atwin.getCurrentCameraPose();
+console.log("Current Camera Pose:", cameraPose);
+```
+
+#### getCameraPosition()
+
+Retrieve the present camera position within the 3D space using this function. The function provides the coordinates (x, y, z) that signify the camera's placement in the 3D space.
+
+*Function Signature*
+```typescript
+function getCameraPosition(): Vector3;
+```
+
+*Example*
+```typescript
+import * as atwin from 'architwin'
+
+const cameraPosition = atwin.getCameraPosition();
+console.log("Current Camera Position:", cameraPosition);
+```
+
+#### cameraPan()
+
+Pan the camera view adjustments by specifying rotation angles along both the horizontal and vertical axes using this function. The panning action simulates looking sideways left and right (horizontal) and looking up and down (vertical).
+
+*Function Signature*
+```typescript
+async function cameraPan(x: number, z: number): Promise<void>;
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| x | number | yes |  | number of degrees will pan the camera to the right |
+| y | number | yes |  | number of degrees will tilt the camera upward |
+
+*Example*
+```typescript
+import * as atwin from 'architwin'
+
+// Pan the camera by 30 degrees to the right and tilt by 10 degrees upward
+atwin.cameraPan(30, 10)
+  .then(() => {
+    console.log("Camera pan success");
+  })
+  .catch((error) => {
+    console.error("Camera pan error:", error);
+  });
+```
+
+#### cameraRotate()
+This function allows you to rotate the camera's view by specifying rotation angles along the horizontal and vertical axes. The rotation action simulates changing the direction the camera is facing.
+
+*Function Signature*
+```typescript
+async function cameraRotate(x: number, y: number, speed: number): Promise<void>;
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| x | number | yes |  | number of degrees will pan the camera to the right |
+| y | number | yes |  | number of degrees will tilt the camera upward |
+| speed | number | yes |  | number of second will camera animate to specified angle ( x , y) |
+
+*Example*
+```typescript
+import * as atwin from 'architwin'
+
+// Rotate the camera by 45 degrees horizontally and 15 degrees vertically at a speed of 0.5
+cameraRotate(45, 15, 0.5)
+  .then(() => {
+    console.log("Camera rotate success");
+  })
+  .catch((error) => {
+    console.error("Camera rotate error:", error);
+  });
+```
+
+#### getViewMode()
+
+Obtain the existing view mode of the Matterport scene using this function. The view mode illustrates the manner in which the scene is presented, which includes 3D walkthrough mode, dollhouse mode, or floor plan mode.
+
+*Function Signature*
+```typescript
+function getViewMode(): string | null;
+```
+
+*Example*
+```typescript
+import * as atwin from 'architwin'
+
+const currentViewMode = atwin.getViewMode();
+console.log("Current view mode:", currentViewMode);
+```
+
+#### setViewMode()
+
+Change the current view mode of the 3D space scene to the designated mode using this function. The chosen view mode dictates the presentation style of the space, including options like 3D walkthrough mode, dollhouse mode, or floor plan mode.
+
+*Function Signature*
+```typescript
+async function setViewMode(mode: string): Promise<void>;
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| mode | string | yes |  | "dollhouse" or "floorplan" or "inside" or "outside" or "transitioning"  |
+
+*Example*
+```typescript
+import * as atwin from 'architwin'
+
+async function changeToDollhouseMode() {
+  await atwin.setViewMode("dollhouse");
+  console.log("Changed to Dollhouse mode");
+}
+```
+
+#### cameraLookAt()
+
+This function adjusts the camera's view to focus on a specific point in the Matterport scene. The point is defined in screen coordinates, where x and y represent the pixel coordinates from the upper-left corner of the screen.
+
+*Function Signature*
+```typescript
+async function setViewMode(mode: string): Promise<void>;
+```
+
+*Example*
+```typescript
+import * as atwin from 'architwin'
+
+async function focusOnPoint(x, y) {
+  await atwin.cameraLookAt(x, y);
+  console.log("Camera focused on point", x, y);
+}
+
+```
+
+#### captureSpaceScreenshot()
+
+This function takes a screenshot (JPEG) of the user’s current space view. It creates a temporary download link for the screenshot image with the filename 'image.png', and then triggers the download.
+
+*Function Signature*
+```typescript
+async function captureSpaceScreenshot(resolution:Renderer.Resolution, visibility: Renderer.Visibility);
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| resolution | Renderer.Resolution | optional | { width : 1920, height : 1080 }  | { width : 600, height : 800 } or any values exceed to 4096 |
+| visibility | Renderer.Visbility | optional | { mattertags : false, measurements : false, sweeps: false, views : false }  | {mattertags : true, measurements : false, sweeps: false, views : true}   |
+
+*Example*
+```typescript
+import * as atwin from 'architwin'
+
+async function captureSpace() {
+  // The desired resolution for the screenshot. For example: {width: 1920, height: 1080} If no resolution is specified, then the resolution of the size of Showcase (the current window or the iframe embed) is used. Maximum 4096 x 4096.
+  const resolution = {
+    width : 1920,
+    height : 1080
+  } 
+
+  // Toggles certain scene objects such as Mattertag Posts and sweep markers. If no visibility object is specified, then all scene objects are hidden.
+  const visibility = {
+    mattertags : true, 
+    measurements : false,
+    sweeps: true, 
+    views : false
+  }
+
+  // With Parameters: 
+  await atwin.captureSpaceScreenshot(resolution, visibility);
+
+  // Without Parameters
+  await atwin.captureSpaceScreenshot();
+
+
+}
+```
+-----
+
+### Objects
+
+#### getNearbyObjects()
+The [getNearbyObjects()](#getnearbyobjects) method retrieves nearby rendered objects based on a given payload containing type and distance parameters. It calculates the distance between the camera position and the objects' positions and returns a categorized list of nearby objects.
+
+*Function Signature*
+```typescript
+function getNearbyObjects(payload: NearbyPayload): NearbyObjects
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| payload | NearbyPayload | yes | none  | '3DX' or 'SLIDESHOW' or 'VIDEO' |
+
+*Example*
+```typescript
+import * as atwin from 'architwin'
+
+...
+const payload = {
+  type: "ALL",
+  distance: 10
+} as NearbyPayload
+
+// gets ALL object types within a 10 meter range
+const nearByObjects:NearbyObjects = atwin.getNearbyObjects(payload) 
+...
+```
+
+#### addObjectToSpace()
+Use this asynchronous void function to add a showcase object into a space. It accepts a media URL, object type, and optional configuration, and returns a promise resolving to the added showcase object. This function logs details about the process and validates the provided parameters.
+
+*Function Signature*
+```typescript
+async function addObjectToSpace(
+  mediaUrl: string,
+  objectType: string,
+  config: ObjectConfig = undefined
+): Promise<IShowcaseObject>
+```
+
+*Parameter Table*
+| parameter | type | required | default | values | 
+| :----: | :----: | :---: | :---: | :---: |
+| mediaUrl | string | yes | none | |
+| objectType | string | yes | none | |
+| config | ObjectConfig | no | undefine | | 
+
+*Example*
+```typescript
+import * as atwin from 'architwin'
+
+const mediaUrl = 'https://example.com/media/sample.mp4';
+const objectType = 'VIDEO';
+const config = {
+  /* configuration properties here */
+};
+
+atwin.addObjectToSpace(mediaUrl, objectType, config)
+  .then(showcaseObject => {
+    console.log('Showcase object added:', showcaseObject);
+  })
+  .catch(error => {
+    console.error('Error adding showcase object:', error);
+  });
+```
+
+#### addMediaScreen()
+The [addMediaScreen()](#addmediascreen) method is asynchronous function allows you to add a media screen to the space. The media screen displays a media content specified by the mediaUrl parameter. You can customize the media screen's position, scale, and rotation using the transform parameter. Additional options such as readonly mode and autoplay can also be configured. This function logs information about the provided parameters and performs media handling.
+
+*Function Signature*
+```typescript
+async function addMediaScreen(
+  mediaUrl?: string,
+  transform?: { position: Vector3, scale: Vector3, rotation: Vector3 },
+  readonly?: boolean,
+  autoplay?: boolean
+): Promise<IShowcaseObject>
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| mediaUrl | string | no |  | | 
+| transform | { position: Vector3, scale: Vector3, rotation: Vector3 } | no |  | 
+| readonly | boolean | no |  | |
+| autoplay | boolean | no |  | |
+
+
+*Example*
+```typescript
+import * as atwin from 'architwin'
+
+const mediaUrl = 'https://example.com/media/sample.mp4';
+const transform = {
+  position: new Vector3(0, 0, 0),
+  scale: new Vector3(1, 1, 1),
+  rotation: new Vector3(0, 0, 0)
+};
+const readonly = true;
+const autoplay = false;
+
+awtwin.addMediaScreen(mediaUrl, transform, readonly, autoplay)
+  .then(showcaseObject => {
+    console.log('Media screen added:', showcaseObject);
+  })
+  .catch(error => {
+    console.error('Error adding media screen:', error);
+  });
+```
+
+#### setTransformMode()
+The [setTransformMode()](#settransformmode) asynchronous void function sets the transform mode for a specific type of transformation. The mode parameter defines the transformation mode, which can be translation, rotation, or scaling.
+
+*Function Signature*
+```typescript
+async function setTransformMode(mode: TRANSFORM_TYPE | string): Promise<void>
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| mode | TRANSFORM_TYPE or string | yes | none |'translate' or 'scale' or 'rotate' |
+
+*Example*
+```typescript
+import * as atwin from 'architwin'
+
+const desiredMode = TRANSFORM_TYPE.ROTATE;
+
+atwin.setTransformMode(desiredMode)
+  .then(() => {
+    console.log('Transform mode set successfully:', desiredMode);
+  })
+  .catch(error => {
+    console.error('Error setting transform mode:', error);
+  });
+```
+
+#### revertTransform()
+The [revertTransform()](#reverttransform) function allows you to revert transformations applied to a selected object. The function retrieves previous or next transformation data from the history, applies it to the selected object, and updates the internal state.
+
+*Function Signature*
+```typescript
+function revertTransform(action: string = 'undo'): boolean
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| action | string | yes | none |'undo' or 'redo'|
+
+*Example*
+```typescript
+import * as atwin from 'architwin'
+
+// Revert to the previous state
+if (awtwin.revertTransform('undo')) {
+  console.log('Reverted to previous state.');
+} else {
+  console.log('No further undo actions available.');
+}
+
+// Reapply a reverted state
+if (atwin.revertTransform('redo')) {
+  console.log('Reapplied a reverted state.');
+} else {
+  console.log('No further redo actions available.');
+}
+```
+
+#### removeTransformControls()
+
+Use this function to remove transformation controls and associated components from the scene. It stops the transformation control node and potentially cancels any input control component, if available. The function ensures that the transformation controls are properly removed to maintain the integrity of the scene.
+
+*Function Signature*
+```typescript
+function removeTransformControls(): void
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| none | none | none | none |none|
+
+*Example*
+```typescript
+import * as atwin from 'architwin'
+
+atwin.removeTransformControls();
+```
+
+#### setAnimationState()
+This function is used to set the animation state of a specific model object in the scene. It allows you to play or stop the animation associated with the specified model using the provided action parameter. The function locates the animation state path corresponding to the given modelId and updates it accordingly.
+
+*Function Signature*
+```typescript
+function setAnimationState(action: string, modelId: number): void
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| action | string | yes | none |'play' or 'stop'|
+| modelId | number | yes | none |ID of the model|
+
+*Example*
+```typescript
+import * as atwin from 'architwin'
+const action = 'play';
+const modelId = 123;
+
+setAnimationState(action, modelId);
+```
+
+#### showObjectDimensions()
+
+Use this function to display the dimensions of a chosen object within a 3D space. The function computes the object's width, height, and depth through its bounding box and showcases this data as 3D text labels strategically positioned around the object.
+
+*Function Signature*
+```typescript
+function showObjectDimensions(selected: IObjectData): void
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| selected | IObjectData | yes | | |
+
+*Example*
+```typescript
+import * as atwin from 'architwin'
+
+atwin.showObjectDimensions(selectedObject)
+```
+
+#### copyObject()
+
+Generate a duplicate of a showcase object asynchronously, with the option to include positional and rotational offsets. The function generates a fresh ID for the duplicated object, applies provided positional and rotational adjustments, and integrates the object into the scene.
+
+*Function Signature*
+```typescript
+async function copyObject(
+  payload: IShowcaseObject,
+  position_offset: Vector3 = undefined,
+  rotation_offset: Vector3 = undefined
+): Promise<IShowcaseObject>
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| payload | IShowcaseObject | yes | | |
+| position_offset | Vector3 | yes | undefined | |
+| rotation_offset | Vector3 | yes | undefined | |
+
+*Example*
+```typescript
+import * as atwin from 'architwin'
+
+const objectToCopy = /* the object to be copied */;
+const positionOffset = new Vector3(1, 0, 1);
+const rotationOffset = new Vector3(0, Math.PI / 2, 0);
+
+awtwin.copyObject(objectToCopy, positionOffset, rotationOffset)
+  .then(copiedObject => {
+    console.log('Object copied:', copiedObject);
+  })
+  .catch(error => {
+    console.error('Error copying object:', error);
+  });
+```
+
+#### addObject()
+This asynchronous function is used to upload and add a new 3D object to the scene. It receives a file upload payload, checks the validity of the file type, uploads the file to an external service, and returns the resulting object's data.
+
+*Function Signature*
+```typescript
+async function addObject(payload: FileUpload): Promise<I3DObject>
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| payload | FileUpload | yes | | |
+
+*Example*
+```typescript
+import * as atwin from 'architwin'
+
+const uploadPayload = /* construct the upload payload */;
+addObject(uploadPayload)
+  .then(addedObject => {
+    console.log('Object added:', addedObject);
+  })
+  .catch(error => {
+    console.error('Error adding object:', error);
+  });
+
+```
+
+#### getObject()
+
+Retrieve the data of a 3D object by using this asynchronous function with the provided object ID.
+
+*Function Signature*
+```typescript
+async function getObject(id: number): Promise<I3DObject>
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| id | number | yes | | |
+
+*Example*
+```typescript
+import * as atwin from 'architwin'
+
+const objectId = /* specify the object's ID */;
+awtwin.getObject(objectId)
+  .then(retrievedObject => {
+    console.log('Object retrieved:', retrievedObject);
+  })
+  .catch(error => {
+    console.error('Error retrieving object:', error);
+  });
+```
+
+#### updateObject()
+
+The [updateObject()](#updateobject) function used to refresh a pre-existing 3D object by uploading a fresh file payload. Supply the object's ID along with the file upload payload. The function validates the file type, executes an update and returns the resulting object's data.
+
+*Function Signature*
+```typescript
+async function updateObject(id: number, payload: FileUpload): Promise<I3DObject>
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| id | number | yes | none | |
+| payload | FileUpload | yes | | |
+
+*Example*
+```typescript
+import * as atwin from 'architwin'
+
+const objectId = /* specify the object's ID */;
+const uploadPayload = /* construct the upload payload */;
+
+atwin.updateObject(objectId, uploadPayload)
+  .then(updatedObject => {
+    console.log('Object updated:', updatedObject);
+  })
+  .catch(error => {
+    console.error('Error updating object:', error);
+  });
+```
+
+#### deleteObject()
+
+Use asynchronous function to delete an existing 3D object. The deletion target is determined by the `id` parameter value.
+
+*Function Signature*
+```typescript
+async function deleteObject(id: number): Promise<void>
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| id | number | yes | | |
+
+*Example*
+```typescript
+import * as atwin from 'architwin'
+
+const objectId = /* specify the object's ID */;
+atwin.deleteObject(objectId)
+  .then(() => {
+    console.log('Object deleted successfully.');
+  })
+  .catch(error => {
+    console.error('Error deleting object:', error);
+  });
+```
+
+#### goTo3dx()
+
+Use the [goTo3dx()](#goto3dx) asynchronous function to navigate to a specific 3D object or point of interest within a 3D environment. Provide an object ID as input, and the function will search for the closest associated sweep. If a suitable sweep is found, the function will initiate navigation to that specific point
+
+*Function Signature*
+```typescript
+async function goTo3dx(objectId: number): Promise<void>
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| objectId | number | yes | | |
+
+*Example*
+```typescript
+import * as atwin from 'architwin'
+
+const targetObjectId = /* specify the object's ID */;
+atwin.goTo3dx(targetObjectId)
+  .then(() => {
+    console.log('Navigation to the object completed.');
+  })
+  .catch(error => {
+    console.error('Error navigating to the object:', error);
+  });
+```
+
+#### deleteObjectFromSpace()
+
+To remove a designated object from a 3D space use [deleteObjectFromSpace()](#deleteobjectfromspace). Provide an `IObjectData` object as input, and the function will eliminate the object from the scene. Additionally, it undertakes essential cleanup tasks like halting animations and removing linked markup elements.
+
+*Function Signature*
+```typescript
+async function deleteObjectFromSpace(target: IObjectData): Promise<number>
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| target | IObjectData | yes | | |
+
+*Example*
+```typescript
+import * as atwin from 'architwin'
+
+const targetObject = /* specify the target object */;
+atwin.deleteObjectFromSpace(targetObject)
+  .then(deletedObjectId => {
+    console.log(`Object with ID ${deletedObjectId} deleted from the space.`);
+  })
+  .catch(error => {
+    console.error('Error deleting object:', error);
+  });
+```
+
+#### replaceObject()
+
+To replace a particular object within a 3D space with a fresh one use [replaceObject()](#replaceobject) method. Provide an `I3DObject` payload for the new object, an IObjectData target for the object to be replaced, and optional configuration choices. The function eliminates the target object from the scene and introduces the new object in its designated position.
+
+*Function Signature*
+```typescript
+async function replaceObject(payload: I3DObject, target: IObjectData, options: Object = null): Promise<IShowcaseObject>
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| payload | I3DObject | yes | | |
+| target | IObjectData | yes | | |
+| options | Object | yes | null | |
+
+*Example*
+```typescript
+import * as atwin from 'architwin'
+
+const newObjectPayload = /* specify the new object's payload */;
+const targetObject = /* specify the target object to be replaced */;
+const replacementOptions = /* specify optional replacement options */;
+
+atwin.replaceObject(newObjectPayload, targetObject, replacementOptions)
+  .then(replacedObject => {
+    console.log('Object replaced:', replacedObject);
+  })
+  .catch(error => {
+    console.error('Error replacing object:', error);
+  });
+```
+#### addTextMarkupScreen()
+
+To introduce a text markup screen into the 3D space use the [addTextMarkupScreen()](#addtextmarkupscreen) method. The function generates a 3D object based on the supplied title and message. The screen's placement, scaling, and rotation align with the designated transformation parameters.
+
+*Function Signature*
+```typescript
+async function addTextMarkupScreen(
+  title: string = '',
+  message: string,
+  textScreenName: string,
+  transform: { position: Vector3, scale: Vector3, rotation: Vector3 },
+  textColor: string = 'black',
+  backgroundColor: string = '#fff'
+): Promise<IShowcaseObject>
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| title | string | yes | ' ' | |
+| message | string | yes | | |
+| textScreenName | string | yes | | |
+| transform | { position: Vector3, scale: Vector3, rotation: Vector3 } | yes | | |
+| textColor | string | yes | 'black' | |
+| backgroundColor | string | yes | '#fff' | |
+
+*Example*
+```typescript
+import * as atwin from 'architwin'
+```
+
+#### setTextMarkupScreenContent()
+
+To set the content of a text markup screen within a 3D space use the [setTextMarkupScreenContent()](#settextmarkupscreencontent). The function modifies multiple properties of the screen, including its title, text content, text color, and background color.
+
+*Function Signature*
+```typescript
+function setTextMarkupScreenContent(
+  showcase_id: number,
+  title: string = '',
+  text: string = '',
+  textColor: string = '',
+  backgroundColor: string = ''
+): void
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| title | string | yes | ' ' | |
+| message | string | yes | | |
+| textScreenName | string | yes | | |
+| transform | { position: Vector3, scale: Vector3, rotation: Vector3 } | yes | | |
+| textColor | string | yes | 'black' | |
+| backgroundColor | string | yes | '#fff' | |
+
+*Example*
+```typescript
+import * as atwin from 'architwin'
+
+const showcaseId = /* specify the showcase ID */;
+const newTitle = 'New Title';
+const newText = 'Updated content.';
+const newTextColor = 'blue';
+const newBackgroundColor = 'white';
+
+atwin.setTextMarkupScreenContent(showcaseId, newTitle, newText, newTextColor, newBackgroundColor);
+```
+-----
+
+## Meeting
+
+### createMeeting()
+
+Facilitates the creation of a virtual meeting within the specified 3D space. It allows the host to provide details such as the space ID, host's name, meeting title, start time, duration, and password protection.
+
+*Function Signature*
+```typescript
+async function createMeeting(
+  spaceId: string,
+  hostName: string,
+  title: string,
+  meetingStart: any,
+  duration: number,
+  password: string
+): Promise<MeetingURLs | undefined>;
+```
+
+*Parameter Table*
+| parameter | type | required | values |
+| :----: | :----: | :---: | :---: |
+| spaceId | string | yes | any string |
+| hostName | string | yes | any string|
+| title | string | yes | any string |
+| meetingStart | string | yes | any string |
+| meetingStatus | string | yes | '0', '1', '2', or '3'|
+| duration | number | yes | any number |
+| password | string | no | any string|
+
+*Example*
+```typescript
+import * as atwin from 'architwin'
+
+async function scheduleMeeting(spaceId, hostName, title, meetingStart, duration, password) {
+  try {
+    const meetingUrls = await atwin.createMeeting(spaceId, hostName, title, meetingStart, duration, password);
+    console.log("Meeting URLs:", meetingUrls);
+  } catch (error) {
+    console.error("Error creating meeting:", error);
+  }
+}
+
+const spaceId = "your-space-id";
+const hostName = "John Doe";
+const title = "Team Meeting";
+const meetingStart = new Date(); // Current time
+const duration = 60; // Duration in minutes
+const password = "secret123";
+
+await scheduleMeeting(spaceId, hostName, title, meetingStart, duration, password);
+```
+
+### startMeeting()
+
+Initiate a virtual meeting within the 3D space using this function. The function examines the meeting URL and conditions before launching the meeting with the specified configuration.
+
+*Function Signature*
+```typescript
+async function startMeeting(meetingUrl: string, meetingPassword?: string, meetingConfig?: MeetingConfig): Promise<void>
+```
+
+*Parameter Table*
+| parameter | type | required | values |
+| :----: | :----: | :---: | :---: |
+| meetingUrl | string | yes | valid public URL |
+| meetingPassword | string | no | any string|
+| meetingConfig | MeetingConfig | no | MeetingConfig object |
+
+*Example*
+```typescript
+import * as atwin from 'architwin'
+
+// Example usage of startMeeting function
+async function joinMeeting(meetingUrl, meetingPassword, meetingConfig) {
+  try {
+    await atwin.startMeeting(meetingUrl, meetingPassword, meetingConfig);
+    console.log("Joining the meeting...");
+  } catch (error) {
+    console.error("Error starting/joining the meeting:", error);
+  }
+}
+
+// Call the function with example values
+const meetingUrl = "https://your-meeting-url.com/?meetingId=your-meeting-id&role=guest";
+const meetingPassword = "secret123";
+const meetingConfig = {
+  videoEnabled: true,
+  audioEnabled: true,
+  screenSharingEnabled: false
+};
+
+await joinMeeting(meetingUrl, meetingPassword, meetingConfig);
+```
+
+### stopMeeting()
+
+This function is used to stop ongoing virtual meeting session.
+
+*Function Signature*
+```typescript
+async function stopMeeting(): Promise<void> 
+```
+
+
+*Example*
+```typescript
+import * as atwin from 'architwin'
+
+// Example usage of stopMeeting function
+async function endMeeting() {
+  try {
+    await atwin.stopMeeting();
+    console.log("Meeting has been stopped and cleaned up.");
+  } catch (error) {
+    console.error("Error stopping the meeting:", error);
+  }
+}
+
+// Call the function
+endMeeting();
+```
+
+### getMeeting()
+
+Retrieve details about a particular virtual meeting by utilizing its distinct meeting ID with this function.
+
+*Function Signature*
+```typescript
+async function getMeeting(meetingId: string): Promise<any>
+```
+
+*Parameter Table*
+| parameter | type | required | values |
+| :----: | :----: | :---: | :---: |
+| meetingId | string | yes | valid meeting Id |
+
+*Example*
+```typescript
+import * as atwin from 'architwin'
+
+// Example usage of getMeeting function
+async function fetchMeetingDetails(meetingId) {
+  try {
+    const meetingInfo = await atwin.getMeeting(meetingId);
+    console.log("Meeting Details:", meetingInfo.data);
+  } catch (error) {
+    console.error("Error fetching meeting details:", error);
+  }
+}
+
+// Call the function with a specific meeting ID
+fetchMeetingDetails("exampleMeetingId123");
+```
+
+### getMeetingParticipants()
+
+Obtain a list of meeting participants and their associated colors from the ongoing meeting session using this function. 
+
+*Function Signature*
+```typescript
+function getMeetingParticipants(): IMpParticipant[]
+```
+
+
+*Example*
+```typescript
+import * as atwin from 'architwin'
+
+// Example usage of getMeetingParticipants function
+function displayMeetingParticipants() {
+  const participants = atwin.getMeetingParticipants();
+  if (participants.length > 0) {
+    console.log("Meeting Participants:", participants);
+  } else {
+    console.log("No participants in the meeting.");
+  }
+}
+
+// Call the function to display meeting participants
+displayMeetingParticipants();
+```
+
+### getSpaceMeetings()
+
+Retrieve a compilation of meetings linked to a designated space by using its space ID through this function.
+
+*Function Signature*
+```typescript
+async function getSpaceMeetings(spaceId: number): Promise<any> 
+```
+
+*Parameter Table*
+| parameter | type | required | values |
+| :----: | :----: | :---: | :---: |
+| spaceId | string | yes | valid space Id |
+
+*Example*
+```typescript
+import * as atwin from 'architwin'
+
+const meetingsResponse = await atwin.getSpaceMeetings(spaceId);
+```
+
+### generateMeetingURL()
+
+Generate URLs for hosting and joining a meeting using the provided meeting ID through this function. The function additionally verifies the validity of the meeting ID before generating the URLs
+
+*Function Signature*
+```typescript
+async function generateMeetingURL(meeting_id: string): Promise<any> 
+```
+
+*Parameter Table*
+| parameter | type | required | values |
+| :----: | :----: | :---: | :---: |
+| meeting_id | string | yes | valid meeting Id |
+
+*Example*
+```typescript
+import * as atwin from 'architwin'
+
+const meetingUrls = await atwin.generateMeetingURL(meetingId);
+console.log("Generated Meeting URLs:", meetingUrls);
+```
+
+### isMeetingExists()
+
+Determine the existence of a meeting with the provided meeting ID. The function yields 'true' if the meeting exists and 'false' if it doesn't.
+
+*Function Signature*
+```typescript
+async function isMeetingExists(meetingId: string): Promise<boolean> 
+```
+
+*Parameter Table*
+| parameter | type | required | values |
+| :----: | :----: | :---: | :---: |
+| meetingId | string | yes | valid meeting Id |
+
+*Example*
+```typescript
+import * as atwin from 'architwin'
+
+const exists = await atwin.isMeetingExists(meetingId);
+```
+
+### isMeetingActive()
+
+Verify the status of a meeting with the provided meeting ID to ascertain its activity. 
+
+*Function Signature*
+```typescript
+async function isMeetingActive(meetingId: string): Promise<boolean>
+```
+
+*Parameter Table*
+| parameter | type | required | values |
+| :----: | :----: | :---: | :---: |
+| meetingId | string | yes | valid meeting Id |
+
+*Example*
+```typescript
+import * as atwin from 'architwin'
+
+const isActive = await atwin.isMeetingActive(meetingId);
+```
+
+### updateMeetingTitle()
+
+Revise the title of a meeting using the provided meeting ID with this function. Initially, the function will retrieve the meeting object, thus acquiring the essential ID for the update process.
+
+*Function Signature*
+```typescript
+async function updateMeetingTitle(meetingId: string, meetingTitle: string): Promise<any>
+```
+
+*Parameter Table*
+| parameter | type | required | values |
+| :----: | :----: | :---: | :---: |
+| meetingId | string | yes | valid meeting Id |
+| meetingTitle | string | yes | new meeting title |
+
+*Example*
+```typescript
+import * as atwin from 'architwin'
+
+// Example usage of updateMeetingTitle function
+async function handleUpateMeetingTitle() {
+  const meetingId = "your_meeting_id"; // Replace with actual meeting ID
+  const newTitle = "New Meeting Title"; // Replace with the desired new title
+  try {
+    const response = await atwin.updateMeetingTitle(meetingId, newTitle);
+    console.log("Meeting title updated:", response.data.data.title);
+  } catch (error) {
+    console.error("An error occurred:", error);
+  }
+}
+
+// Call the function
+handleUpateMeetingTitle();
+```
+
+### updateMeetingStart()
+
+Change the start time of a meeting using the provided meeting ID through this function.
+
+*Function Signature*
+```typescript
+async function updateMeetingStart(meetingId: string, meetingStart: string): Promise<any> 
+```
+
+*Parameter Table*
+| parameter | type | required | values |
+| :----: | :----: | :---: | :---: |
+| meetingId | string | yes | valid meeting Id |
+| meetingStart | string | yes | new date when the will start |
+
+*Example*
+```typescript
+import * as atwin from 'architwin'
+
+// Example usage of updateMeetingStart function
+async function changeMeetingStart() {
+  const meetingId = "your_meeting_id"; // Replace with actual meeting ID
+  const newStartTime = "2023-09-01T10:00:00"; // Replace with the desired new start time
+  try {
+    const response = await atwin.updateMeetingStart(meetingId, newStartTime);
+    console.log("Meeting start time updated:", response.data.data.meeting_start);
+  } catch (error) {
+    console.error("An error occurred:", error);
+  }
+}
+
+// Call the function
+changeMeetingStart();
+```
+
+### updateMeetingStatus()
+
+Modify the status of a meeting using the provided meeting ID using this function.
+
+*Function Signature*
+```typescript
+async function updateMeetingStatus(meetingId: string, meetingStatus: number): Promise<any> 
+```
+
+*Parameter Table*
+| parameter | type | required | values |
+| :----: | :----: | :---: | :---: |
+| meetingId | string | yes | valid meeting Id |
+| meetingStatus | number | yes | 0 or 1 or 2 or 3 |
+
+*Example*
+```typescript
+import * as atwin from 'architwin'
+
+// Example usage of updateMeetingStatus function
+async function handleChangeMeetingStatus() {
+  const meetingId = "your_meeting_id"; // Replace with actual meeting ID
+  const newStatus = 1; // Replace with the desired new status value
+  try {
+    const response = await atwin.updateMeetingStatus(meetingId, newStatus);
+    console.log("Meeting status updated:", response.data.data.meeting_status);
+  } catch (error) {
+    console.error("An error occurred:", error);
+  }
+}
+
+// Call the function
+handleChangeMeetingStatus();
+```
+
+
+### updateMeetingSpace()
+
+Modify the associated space of a meeting using the provided meeting ID with this function.
+
+*Function Signature*
+```typescript
+async function updateMeetingSpace(meetingId: string, spaceId: string): Promise<any>
+```
+
+*Parameter Table*
+| parameter | type | required | values |
+| :----: | :----: | :---: | :---: |
+| meetingId | string | yes | valid meeting Id |
+| spaceId | string | yes | valid space Id |
+
+*Example*
+```typescript
+import * as atwin from 'architwin'
+
+// Example usage of updateMeetingSpace function
+async function changeMeetingSpace() {
+  const meetingId = "your_meeting_id"; // Replace with actual meeting ID
+  const newSpaceId = "new_space_id";   // Replace with the new space ID
+  try {
+    const response = await atwin.updateMeetingSpace(meetingId, newSpaceId);
+    console.log("Meeting space updated:", response.data.data.space_id);
+  } catch (error) {
+    console.error("An error occurred:", error);
+  }
+}
+
+// Call the function
+changeMeetingSpace();
+``` 
+
+-----
 
 **To Do:**