architwin 1.2.2 → 1.2.5

package/README.md

@@ -32,10 +32,10 @@ ArchiTwin Library
       - [Adding a Media Screen](#adding-a-media-screen)
       - [Media Screen Parameter Reference](#media-screen-parameter-reference)
       - [Attaching an image or video to a Media Screen](#attaching-an-image-or-video-to-a-media-screen)
+      - [Hiding expand/dock buttons of Media Screens](#hiding-expanddock-buttons-of-media-screens)
     - [Setting Video Playback in the Space](#setting-video-playback-in-the-space)
     - [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)
@@ -45,7 +45,7 @@ ArchiTwin Library
     - [Tag Interfaces](#tag-interfaces)
     - [Object Interfaces](#object-interfaces)
     - [Meeting Interfaces](#meeting-interfaces)
-  - [Meeting Guide](#meeting-guide)
+  <!-- - [Meeting Guide](#meeting-guide)
     - [Create Meeting](#create-meeting)
     - [Start Meeting](#start-meeting)
     - [Stop Meeting](#stop-meeting)
@@ -57,35 +57,47 @@ ArchiTwin Library
       - [Meeting Custom Avatar](#meeting-custom-avatar)
       - [Meeting Device Control](#meeting-device-control)
       - [Meeting Bar Position](#meeting-bar-position)
-      - [Meeting Status](#meeting-status)
+      - [Meeting Status](#meeting-status) -->
+  - [Meeting UI Guide](#meeting-ui-guide)
+      - [Enable Meeting Sidebar](#enable-meeting-sidebar)
+      - [Create Meeting](#create-meeting)
+      - [Pre-Meeting Setup](#pre-meeting-setup)
+      - [Join Meeting](#jpin-meeting)
+      - [In-Meeting](#in-meeting)
   - [Function Reference](#function-reference)
     - [Space](#space)
       - [connectSpace()](#connectspace)
         - [Config Options](#config-options)
         - [Minimap Config](#minimap-config)
+        - [Toolbar Config](#toolbar-config)
+        - [App Config](#app-config)
+        - [Restriction Config](#restriction-config)
+        - [Debug Config](#debug-config)
       - [disconnectSpace()](#disconnectspace)
     - [Tags](#tags)
       - [getTags()](#gettags)
       - [gotoTag()](#gototag)
-    - [renderTag()](#rendertag)
-    - [getMpTags()](#getmptags)
-    - [getMpTag()](#getmptag)
-    - [showTags()](#showtags)
-    - [disposeTags()](#disposetags)
-    - [disposeTag()](#disposetag)
-    - [attachTagMedia()](#attachtagmedia)
-    - [detachTagMedia()](#detachtagmedia)
-    - [moveTag()](#movetag)
-    - [editTagLabel()](#edittaglabel)
-    - [editTagDescription()](#edittagdescription)
-    - [editTagIcon()](#edittagicon)
-    - [editTagStem()](#edittagstem)
-    - [editTagColor()](#edittagcolor)
+      - [renderTag()](#rendertag)
+      - [getMpTags()](#getmptags)
+      - [getMpTag()](#getmptag)
+      - [showTags()](#showtags)
+      - [disposeTags()](#disposetags)
+      - [disposeTag()](#disposetag)
+      - [attachTagMedia()](#attachtagmedia)
+      - [detachTagMedia()](#detachtagmedia)
+      - [moveTag()](#movetag)
+      - [editTagLabel()](#edittaglabel)
+      - [editTagDescription()](#edittagdescription)
+      - [editTagIcon()](#edittagicon)
+      - [editTagStem()](#edittagstem)
+      - [editTagColor()](#edittagcolor)
     - [Sweeps](#sweeps)
       - [getSweeps()](#getsweeps)
       - [moveToSweep()](#movetosweep)
       - [getNearbySweeps()](#getnearbysweeps)
       - [getCurrentSweep()](#getcurrentsweep)
+      - [getCurrentSweepPosition()](#getcurrentsweepposition)
+      - [getAllSweeps()](#getallsweeps)
     - [Video](#video)
       - [playVideo()](#playvideo)
       - [pauseVideo()](#pausevideo)
@@ -103,7 +115,6 @@ ArchiTwin Library
       - [captureSpaceScreenshot()](#capturespacescreenshot)
     - [Objects](#objects)
       - [getNearbyObjects()](#getnearbyobjects)
-      - [addObjectToSpace()](#addobjecttospace)
       - [addMediaScreen()](#addmediascreen)
       - [setTransformMode()](#settransformmode)
       - [revertTransform()](#reverttransform)
@@ -111,30 +122,58 @@ ArchiTwin Library
       - [setAnimationState()](#setanimationstate)
       - [showObjectDimensions()](#showobjectdimensions)
       - [copyObject()](#copyobject)
-      - [addObject()](#addobject)
-      - [getObject()](#getobject)
-      - [updateObject()](#updateobject)
       - [deleteObject()](#deleteobject)
-      - [goTo3dx()](#goto3dx)
       - [deleteObjectFromSpace()](#deleteobjectfromspace)
       - [replaceObject()](#replaceobject)
       - [addTextMarkupScreen()](#addtextmarkupscreen)
       - [setTextMarkupScreenContent()](#settextmarkupscreencontent)
-    - [getNearestSweepFromObject()](#getnearestsweepfromobject)
-  - [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)
+      - [getNearestSweepFromObject()](#getnearestsweepfromobject)
+      - [setSelectedObject()](#setselectedobject)
+      - [getSelectedObject()](#getselectedobject)
+      - [clearSelectedObject()](#clearselectedobject)
+      - [goToModel()](#gotomodel)
+      - [get3DXObjects()](#get3dxobjects)
+      - [setLibrary()](#setlibrary)
+      - [getLibrary()](#getlibrary)
+      - [disposeModel()](#disposemodel)
+    <!-- - [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) -->
+    - [Virtual Meeting](#virtual-meeting)
+      - [createMeeting()](#createmeeting)
+      - [joinMeeting()](#joinmeeting)
+      - [leaveMeeting()](#leavemeeting)
+      - [startVideo()](#startvideo)
+      - [stopVideo()](#stopvideo)
+      - [startLocalVideo()](#startlocalvideo)
+      - [stopLocalVideo()](#stoplocalvideo)
+      - [startAudio()](#startaudio)
+      - [stopAudio()](#stopaudio)
+      - [muteAudio()](#muteaudio)
+      - [unMuteAudio()](#unmuteaudio)
+      - [muteLocalAudio()](#mutelocalaudio)
+      - [unMuteLocalAudio()](#unmutelocalaudio)
+      - [getDevices()](#getdevices)
+      - [switchMicrophone()](#switchmicrophone)
+      - [switchSpeaker()](#switchspeaker)
+      - [switchCamera()](#switchcamera)
+      - [getMicList()](#getmiclist)
+      - [getSpeakerList()](#getspeakerlist)
+      - [getCameraList()](#getcameralist)
+      - [createLocalVideoTrack()](#createlocalvideotrack)
+      - [createLocalAudioTrack()](#createlocalaudiotrack)
+      - [initializeHTMLElements()](#initializehtmlelements)
 
 ## Installation
 ### Install Using NPM
@@ -553,10 +592,40 @@ You can subscribe your method to more than one event. Currently, we support subs
 **SUPPORTED EVENTS**
 
 - CLICK
+- HOVER
+- DRAG
+- BRAG_BEGIN
 - DRAG_END
 - LOADING_PHASE
 - STARTING_PHASE
 - PLAYING_PHASE
+- PLACED_TAG
+- TAG_SAVED
+- TAG_DISPOSED
+- MEDIASCREEN_EXPANDED
+- MEDIASCREEN_MINIMIZED
+- MEDIA_PLAY
+- MEDIA_PAUSE
+- MEDIA_MUTE
+- MEDIA_UNMUTE
+- PARTICIPANT_ADDED
+- PARTICIPANT_REMOVED
+- PARTICIPANT_VIDEO_ON
+- PARTICIPANT_VIDEO_OFF
+- PARTICIPANT_AUDIO_STATE
+- MEETING_ENDED
+- SELECTED_TAG
+- MODEL_RENDERED
+- MODEL_DISPOSED
+- TAG_MESSAGE_OPENED
+- TAG_MESSAGE_SENT
+- TAG_MESSAGE_RETRIEVED
+- TAG_RECEPIENT_CHANGED
+- TAG_LINK_COPIED
+- TAG_LINK_GENERATED
+- SET_TAG_ICON
+- VIEW_TAG_MESSAGE
+- TOOLBAR_LOADED
 
 For more information regarding the loading,starting, and playing phase events. Please refer to [this section](#executing-methods-on-specific-app-phases)
 
@@ -1171,7 +1240,7 @@ Tags are interactive elements that can be added to a 3D Space. Tags are essentia
 
 To render a tag in the Space, you can use [renderTag()](#rendertag) method. The [renderTag()](#rendertag) method accepts payload input.
 
-*Example*
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 
@@ -1209,7 +1278,7 @@ const tag = {
 
 To remove a tag in the Space, you can use [disposeTags()](#disposetags). The [disposeTags()](#disposetags) has no parameter.
 
-*Example*
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 
@@ -1230,7 +1299,7 @@ removeTagsFromSpace();
 
 Removing a specific tag in the Space, the [disposeTag](#disposetag) is the right method to use. 
 
-*Example*
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 
@@ -1250,7 +1319,7 @@ Tags are customizables, you customize tag labels, description, stem, icon and it
 
 [editTagLabel()](#edittaglabel) is the right method to change or edit the label of a specific tag.
 
-*Example*
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 
@@ -1270,7 +1339,7 @@ try {
 To edit or change the description of a tag, the [editTagDescription()](#edittagdescription) is the method you can use.
 
 
-*Example*
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 
@@ -1289,7 +1358,7 @@ try {
 
 You can also choose not show or hide the tag stem by invoking [editTagStem()](#edittagstem).
 
-*Example*
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 
@@ -1308,7 +1377,7 @@ try {
 
 Tag icon also editable, you can utilize the [editTagIcon()](#edittagicon) method for this.
 
-*Example*
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 
@@ -1328,7 +1397,7 @@ try {
 
 You can also change the color of the tag itself, just use the [editTagColor()](#edittagcolor) method.
 
-*Example*
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 
@@ -1347,7 +1416,7 @@ try {
 
 Ataching media to a tag is also possible, you can utilize the [attachTagMedia()](#attachtagmedia) method.
 
-*Example*
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 
@@ -1366,7 +1435,7 @@ try {
 
 You can also remove the attached media, just call the [detachTagMedia()](#detachtagmedia) method.
 
-*Example*
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 
@@ -1817,7 +1886,7 @@ await atwin.getTargetPosition(myCallbackFunction)
 
 In this example, we are using a link pointing to the media stored in an s3 bucket as the mediaUrl and a random media screen id. You will have to substitute the id with an actual id of a rendered media screen.
 
-Example with image:
+*Example with image:*
 ```typescript
 import * as atwin from 'architwin';
 
@@ -1831,7 +1900,7 @@ atwin.attachMediaScreenContent(targetMediaScreenId, validUrl, 'image')
 ...
 ```
 
-Example with video:
+*Example with video:*
 ```typescript
 import * as atwin from 'architwin';
 
@@ -1861,7 +1930,7 @@ export interface IObjectData {
 }
 ```
 
-*Example*
+*Example:*
 ```typescript
 import * as atwin from 'architwin';
 
@@ -1915,7 +1984,7 @@ Inorder to set the playback of a video, you may use the [setVideoPlayback()](#se
 
 If you wish to change the action of the playback, add a parameter such as 'play','pause', 'mute', 'unmute' depending on your preference. 
 
-Example:
+*Example:*
 ```typescript
 import * as atwin from 'architwin';
 
@@ -2005,194 +2074,12 @@ if (atwin.selectedObject.object) {
 ```
 **NOTE:** rotation_offset can be manipulated in order to mirror the object
 
-### Adding Object, Getting Object, Updating Object, Deleting Object in the Database
-
-**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()](#addobject) method. Assuming that you have already setup to have an event listener for file upload.
-
-| parameter | type | required | default | values |
-| :----: | :----: | :---: | :---: | :---: |
-| payload | FileUpload | yes |  |  |
-
-```typescript
-import * as atwin from 'architwin';
-
-...
-
-let upload = {
-  file: null,
-  filename: '',
-  upload_filename: '',
-  user_id: 1,
-  object_key: '',
-  description: '',
-  name: '',
-  object_type: ''
-}
-
-// this function handles the file upload of the user
-function handleFileUpload(e: Event) {
-  if (!e.target) {
-    return
-  }
-  if (!upload) {
-    console.error("Upload object is undefined")
-    return
-  }
-  upload.file = e.target.files[0];
-  if (!upload.file) {
-    console.error("File is undefined")
-    return
-  }
-
-  // the name of the file - ex. image
-  upload.name = upload.file.name
-  // the filename of the file - ex. image.jpg
-  upload.filename = upload.file.name
-  // the file type of the file - ex. JPG
-  upload.object_type = upload.filename.slice((upload.filename.lastIndexOf(".") - 1 >>> 0) + 2).toUpperCase()
-  // id to user_id
-  upload.user_id = 1
-  // this will become the unique id or filename of the file when stored to amazon
-  upload.object_key = "asdhj-231d-2asd-2jks9-8d8s2"
-
-  //@ts-ignore
-  e.target.value = ''
-}
-
-// this function handles the object to be added in the database
-async function handleAddObject() {
-  if (!upload) {
-    alert("Object payload is empty")
-    return
-  }
-  if (!upload.name) {
-    alert("Enter a valid file name")
-    return
-  }
-  await atwin.addObject(upload)
-}
-
-...
-```
-
-**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()](#getobject) method.
-
-| parameter | type | required | default | values |
-| :----: | :----: | :---: | :---: | :---: |
-| id | number | yes |  |  |
-
-```typescript
-import * as atwin from 'architwin';
-
-...
-
-const objectId:number = 5
-let objectPayload:I3DObject;
-
-// this function handles the object to be retrieved in the database
-async function handleGetObject() {
-  if (!objectId) {
-    return
-  }
-  const objectData = await atwin.getObject(objectId)
-  if (objectData) {
-    objectPayload = objectData
-  }
-}
-
-...
-```
-
-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';
-
-...
-
-if (objectPayload) {
-  await atwin.addObjectToSpace(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()](#updateobject) method.
-
-| parameter | type | required | default | values |
-| :----: | :----: | :---: | :---: | :---: |
-| id | number | yes |  |  |
-| payload | FileUpload | yes |  |  |
-
-```typescript
-import * as atwin from 'architwin';
-
-...
-
-const objectId:number = 5
-let objectPayload:I3DObject
-
-// this function handles the object to be retrieved in the database
-async function handleGetObject() {
-  if (!objectId) {
-    return
-  }
-  const objectData = await atwin.getObject(objectId)
-  if (objectData) {
-    objectPayload = objectData
-  }
-}
-
-// this function handles the object to be updated in the database
-async function handleUpdateObject() {
-  if (!objectId) {
-    return
-  }
-  if (!objectPayload) {
-    return
-  }
-  await atwin.updateObject(objectID, objectPayload)
-}
-
-...
-```
-**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()](#deleteobject) method.
-
-| parameter | type | required | default | values |
-| :----: | :----: | :---: | :---: | :---: |
-| id | number | yes |  |  |
-
-```typescript
-import * as atwin from 'architwin';
-
-...
-
-const objectId:number = 5
-
-// this function handles the object to be deleted in the database
-async function handleDeleteObject() {
-  if (!objectId) {
-    return
-  }
-
-  atwin.deleteObject(objectId)
-}
-
-...
-```
 
 ### 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.
+Assuming that you have already selected an object to navigate to, you may now navigate to the object by using [goToModel()](#goToModel) method.
 
 | parameter | type | required | default | values |
 | :----: | :----: | :---: | :---: | :---: |
@@ -2203,7 +2090,7 @@ import * as atwin from 'architwin';
 
 ....
 
-await atwin.goTo3dx(objectId)
+await atwin.goToModel(objectId)
 
 ....
 
@@ -2238,7 +2125,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()](#replaceobject) method.
+Assuming that you have already selected an object to be replaced, you may now replace the object by using [replaceObject()](#replaceobject) method.
 
 | parameter | type | required | default | values |
 | :----: | :----: | :---: | :---: | :---: |
@@ -2604,7 +2491,7 @@ interface IMpParticipant{
 ```
 
 
-## Meeting Guide
+<!-- ## Meeting Guide
 
 Hosting Live Virtual Meetings in 3D Space
 
@@ -3031,7 +2918,84 @@ export const enum MeetingStatus {
   STOPPED = 2,
   CANCELLED = 3,
 }
-````
+```` -->
+
+
+## Meeting UI Guide
+
+Hosting Live Virtual Meetings inside 3D Space using Video SDK
+
+This meeting feature utilizes the Video SDK to host virtual conferences within a 3D Space View. It includes a custom-designed meeting UI displayed as a sidebar on the left side of the screen. This allows the user to create, share, and join meetings using a meeting link provided by the host.
+
+The next few sections will explain how you can get started in creating or hosting your own virtual meeting inside your 3D Spaces.
+
+### Enable Meeting Sidebar
+
+Before you can start hosting or joining meetings, make sure that meeting sidebar is enabled in [toolbar Config](#toolbar-config).
+
+*Example:*
+
+```typescript
+  const config = {
+    //Other config values...
+    toolbarConfig: {
+        active: isAtwinSideBarEnabled.value,
+        lang: lang.value,
+        menuItems: {
+            meeting: true
+        }
+    },
+  } as IMPConfig;
+```
+
+### Create Meeting
+
+Once the meeting sidebar is enabled, click the video icon in the toolbar, and the first screen that appears will be the create meeting screen.
+
+The following data are required to proceed from the create meeting screen:
+- **Meeting Topic** : string - The name or topic of the meeting.
+- **Fullname** : string - The name of the participant.
+
+<img src="https://i.ibb.co/WHbTfMF/createmeeting.png"  />
+
+### Pre-Meeting Setup
+
+This screen will allow users to set up their audio, speakers, and camera settings before entering the virtual conference.
+
+#### Features
+
+- **Audio**: Users can mute/unmute audio before joining the meeting.
+- **Camera**: Users can disable/enable camera view before joining the meeting.
+- **Choose Avatar**: Users can select an avatar and set as their profile during the meeting. 
+
+##### Select video and audio device
+
+- **Video**: Users can select any connected camera device they wish to use.
+- **Speaker**: Users can select any connected speaker device they wish to use.
+- **Microphone**: Users can select any connected microphone device they wish to use.
+
+<img src="https://i.ibb.co/nwJ2pms/atwin-pre-meeting.png"/>
+
+### Join Meeting
+
+Once a user visits the meeting link provided by the host, they will be automatically directed to the 3D Space view specific to that meeting. At the same time, the `join meeting` screen will be displayed, allowing users to enter the meeting. To proceed, users are required to input their name in the "Fullname" field before joining the meeting.
+
+<img src="https://i.ibb.co/wWyvdhZ/atwin-join-meeting.png"/>
+
+### In-Meeting
+
+This screen is where the virtual conference will take place. Both the host and participants can see and interact with each other through visual and audio communication.
+
+#### Features
+
+- **Meeting Controls**: The list of meeting controls includes settings, screen sharing, and toggles for video and audio.
+  - **Settings**: This three-dots represents the settings of the sidebar. This is where users can view the list of participants, can follow a participant inside space view, and copy the meeting link.
+  - **Share screen**: This screen button will allow users to share their screen to other participants within the meeting.
+  - **Video**: This video icon button toggles the user's camera on or off.
+  - **Audio**: This audio icon button toggles the user's microphone on or off.
+
+<img src="https://i.ibb.co/hKG6BX5/atwin-in-meeting.png" />
+
 
 ## Function Reference
 Some Functions are **async**; when invoking them, Use keyword **await** or **.then** syntax
@@ -3131,24 +3095,82 @@ If the parameters 'objectId,' 'tag,' and 'sweep' are present in the URL with val
 ##### Config Options
 
 ```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
-    }
+export interface IMPConfig {
+  iframeId: string;
+  appKey?: string;
+  bundlePath?: string;
+  mapId?: string;
+  meetingApiKey?: string,
+  showOriginalTags?: boolean,
+  // Launching 3D Showcase
+  help?: 0 | 1 | 2;
+  nt?: 0 | 1;
+  play?: 0 | 1;
+  qs?: 0 | 1;
+  // Visibility
+  brand?: 0 | 1;
+  dh?: 0 | 1;
+  tour?: 0 | 1 | 2 | 3;
+  gt?: 0 | 1;
+  hr?: 0 | 1;
+  mls?: 0 | 1 | 2;
+  mt?: 0 | 1;
+  tagNav?: 0 | 1;
+  pin?: 0 | 1;
+  portal?: 0 | 1;
+  // User Interface
+  f?: 0 | 1;
+  fp?: 0 | 1;
+  // LOCALIZATION
+  lang?: MP_LANG;
+  // GUIDED TOURS
+  kb?: 0 | 1;
+  lp?: 0 | 1;
+  st?: Number; // Number of milliseconds to wait at each highlight during a Guided Tour. Default is 3500 ms.
+  title?: 0 | 1 | 2;
+  tourcta?: 0 | 1 | 2;
+  // Transition speed (meters per second) when moving between highlights. Recommend speed is in range of 1 to 3, default of 2. Your highlight reel must be set to "Walkthrough" mode (not slideshow)
+  wts?: Number;
+  // Set this parameter to start the tour automatically and define the number of seconds after initial fly-in before the Guided Tour automatically starts. Help is not shown. Set to a negative number to not start the Guided Tour.
+  ts?: Number;
+  hl?: 0 | 1 | 2;
+  vr?: 0 | 1;
+  //OTHERS,
+  nozoom?: 0 | 1;
+  search?: 0 | 1;
+  wh?: 0 | 1;
+  prod?: boolean; //sets appropriate file path of showcase based on value
+  viewMode?: VIEW_MODE | string //determines if viewer of space can utilize features like transform controls
+  fetchObjectsOnLoad?: {
+    active?:boolean
+    apiEndpoint?:string //Custom api endpoint to fetch space/showcase objects from. Supports azusa and open_at endpoint. Default points to open_at endpoint
+  }
+  mapConfig?: IMapConfig
+  mediaScreenConfig?: ISharedScreen
+  toolbarConfig?: IToolbarConfig
+  avatartwinConfig?: {
+    avatartwinKey: string
+  }
+  meetConfig?: {
+    sdkKey: string
+    secretKey: string
+  }
+  appConfigKeys?:{
+    mpKey: string //required
+    embedlyKey: string //for rendering attachments
+    meetSdkKey?: string //zoom sdk key
+    meetSecretKey?: string //zoom secret key
+    avatartwinKey?: string //superviz key
+    appName?: string // app name / title
+  }
+  debug?: {
+    //If debug valu is not defined, Only error logs are shown by default
+    //Valid log levels are trace,warn,error,info,trace,silent
+    logLevel: string 
+  },
+  restrictionConfig?:{
+    isTagReadOnly?: boolean
+  }
 }
 ```
 
@@ -3186,7 +3208,7 @@ This will resolve internally to `"assets/customBundleName/showcase.html?somepara
 - 0  Hide the VR button.
 - 1	 Default Show the VR button.
 
-**Example:**
+*Example:*
 ```javascript
 import * as atwin from 'architwin'
 
@@ -3234,7 +3256,7 @@ You can technically forego the at_showcase_container class of the parent div wit
 - **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
 
-Example:
+*Example:*
 
 ```typescript
   const config = {
@@ -3265,68 +3287,340 @@ 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.
 
+##### Toolbar Config
 
-#### disconnectSpace()
-
-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.
+To activate a toolbar display within your 3D Space, you can set the following key-value pairs in your configuration object.
 
-*Function Signature*
+*Example:*
 ```typescript
-async function disconnectSpace(): Promise<void>
+  const config = {
+    //Other config values...
+    toolbarConfig: {
+        active: true,
+        lang: 'en', // Supported language: en and ja,
+        themeConfig: {
+            customizations: {
+                toolbarOffset: {
+                    top: 55,
+                },
+            },
+        }
+    },
+  } as IMPConfig;
 ```
+**Toolbar Config Options**
+This setup will define and showcase the active menu items within the toolbar. These items consist of the tag list, object list, minimap, screenshot, and theme picker. Apart from the tag list menu, other items can be optional.
 
-*Example*
-````typescript
-import * as atwin from 'architwin'
+- **menuItems** - (optional) By default, all items are active. With this configuration, you can specify menu items that you wish to disable in the toolbar.
+  - **meeting:** Allows virtual meetings.
+  - **models:** Allows adding of objects (3D, images, etc.) inside 3D Space.
+  - **minimap:** Displays a minimap of your 3D Space.
 
-atwin.disconnectSpace();
-````
------
-### Tags
+*Example:*
 
-#### getTags()
+```typescript
+  const config = {
+    //Other config values...
+    toolbarConfig: {
+        active: isAtwinSideBarEnabled.value,
+        lang: lang.value,
+        menuItems: {
+            meeting: false
+        }
+    },
+  } as IMPConfig;
+```
 
-This method returns an array of `ITag` containing information of all tags in the space.
+**Toolbar Theme Config Options**
+This configuration enables customization of the toolbar display within the 3D space.
 
-*Function Signature*
+- **customizations** - (optional) Specify the color theme, and position of the toolbar.
+  - **toolbarOffset:** Determines the toolbar's position (top, right, bottom, left).
+
+*Example:*
 ```typescript
-async function getTags(space: ISpace): Promise<ITag[] | null>;
+  const config = {
+    //Other config values...
+    toolbarConfig: {
+        active: true,
+        lang: 'en',
+        themeConfig: {
+            customizations: {
+                toolbarOffset: {
+                    top: 55,
+                },
+            },
+        }
+    },
+  } as IMPConfig;
 ```
 
-*Parameter Table*
-| parameter | type | required | default | values |
-| :----: | :----: | :---: | :---: | :---: |
-| space | ISpace | yes |  | |
+##### App Config
 
-*Example*
-```typescript
-import * as atwin from 'architwin'
+(Optional) This configuration unifies the management of secret keys utilized within the application.
 
-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.');
-}
+*Example:*
+```typescript
+  const config = {
+    //Other config values...
+    appConfigKeys:{
+    embedlyKey: "embedly_key_here"
+    meetSdkKey?: "zoom_sdk_key_here" 
+    meetSecretKey?: "zoom_secret_key_here" 
+  },
+  } as IMPConfig;
 ```
 
+**App Key Config Options**
+- **embedlyKey** - This key is for rendering media attachments in tags.
+- **meetSdkKey** - This is the video sdk key.
+- **meetSecretKey** - This is the video sdk secret key.
 
-#### gotoTag()
+##### Restriction Config
 
-This method enables direct navigation to the tag within the space, identified by a specific ID. 
+(Optional) This configuration allows the app to disable certain features inside the Space View. Currently, the configuration supports restricting the tag feature to make tags read-only.
 
-*Function Signature*
+*Example:*
 ```typescript
-async function gotoTag(tagId: string): Promise<void>
+  const config = {
+    //Other config values...
+    restrictionConfig: {
+        isTagReadOnly: false
+    },
+  } as IMPConfig;
+
+...
+// set to true if restriction is needed
+config.restrictionConfig!.isTagReadOnly = true
 ```
 
-*Parameter Table*
-| parameter | type | required | default | values |
-| :----: | :---: | :---: | :---: | :---: |
-| tagId | string | yes |  | any string |
+##### Debug Config
 
-*Example*
+(Optional) This configuration determines the log levels displayed in the app's console log. If the debug value is not defined, only error logs are shown by default. Valid log levels include trace, warn, error, info, and silent.
+
+*Example:*
+```typescript
+  const config = {
+    //Other config values...
+    debug:{
+        logLevel: 'trace'
+    },
+  } as IMPConfig;
+```
+
+
+##### Toolbar Config
+
+To activate a toolbar display within your 3D Space, you can set the following key-value pairs in your configuration object.
+
+*Example:*
+```typescript
+  const config = {
+    //Other config values...
+    toolbarConfig: {
+        active: true,
+        lang: 'en', // Supported language: en and ja,
+        themeConfig: {
+            customizations: {
+                toolbarOffset: {
+                    top: 55,
+                },
+            },
+        }
+    },
+  } as IMPConfig;
+```
+**Toolbar Config Options**
+This setup will define and showcase the active menu items within the toolbar. These items consist of the tag list, object list, minimap, screenshot, and theme picker. Apart from the tag list menu, other items can be optional.
+
+- **menuItems** - (optional) By default, all items are active. With this configuration, you can specify menu items that you wish to disable in the toolbar.
+  - **meeting:** Allows virtual meetings.
+  - **models:** Allows adding of objects (3D, images, etc.) inside 3D Space.
+  - **minimap:** Displays a minimap of your 3D Space.
+
+*Example:*
+
+```typescript
+  const config = {
+    //Other config values...
+    toolbarConfig: {
+        active: isAtwinSideBarEnabled.value,
+        lang: lang.value,
+        menuItems: {
+            meeting: false
+        }
+    },
+  } as IMPConfig;
+```
+
+**Toolbar Theme Config Options**
+This configuration enables customization of the toolbar display within the 3D space.
+
+- **customizations** - (optional) Specify the color theme, and position of the toolbar.
+  - **toolbarOffset:** Determines the toolbar's position (top, right, bottom, left).
+
+*Example:*
+```typescript
+  const config = {
+    //Other config values...
+    toolbarConfig: {
+        active: true,
+        lang: 'en',
+        themeConfig: {
+            customizations: {
+                toolbarOffset: {
+                    top: 55,
+                },
+            },
+        }
+    },
+  } as IMPConfig;
+```
+
+##### App Config
+
+(Optional) This configuration unifies the management of secret keys utilized within the application.
+
+*Example:*
+```typescript
+  const config = {
+    //Other config values...
+    appConfigKeys:{
+    embedlyKey: "embedly_key_here"
+    meetSdkKey?: "zoom_sdk_key_here" 
+    meetSecretKey?: "zoom_secret_key_here" 
+  },
+  } as IMPConfig;
+```
+
+**App Key Config Options**
+- **embedlyKey** - This key is for rendering media attachments in tags.
+- **meetSdkKey** - This is the video sdk key.
+- **meetSecretKey** - This is the video sdk secret key.
+
+##### Restriction Config
+
+(Optional) This configuration allows the app to disable certain features inside the Space View. Currently, the configuration supports restricting the tag feature to make tags read-only.
+
+*Example:*
+```typescript
+  const config = {
+    //Other config values...
+    restrictionConfig: {
+        isTagReadOnly: false
+    },
+  } as IMPConfig;
+
+...
+// set to true if restriction is needed
+config.restrictionConfig!.isTagReadOnly = true
+```
+
+##### Debug Config
+
+(Optional) This configuration determines the log levels displayed in the app's console log. If the debug value is not defined, only error logs are shown by default. Valid log levels include trace, warn, error, info, and silent.
+
+*Example:*
+```typescript
+  const config = {
+    //Other config values...
+    debug:{
+        logLevel: 'trace'
+    },
+  } as IMPConfig;
+```
+
+**Displaying the minimap outside the iFrame**
+
+There may be instances where you need to display the provided minimap outside of the 3D space displayed by your iFrame. In such cases, you may access the ``setMap`` method of the `minimap` object to display the minimap elsewhere. Do take note that there can only be one instance of the minimap displayed at a time. We may add the ability to display multiple minimaps at the same time in future releases.
+
+The setMap method requires the following parameters
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| mpSdk | MpSdk | yes | none |Matterport SDK instance |
+| appKey | string | yes | none |Your matterport app key|
+| mapId | string | yes | none |id of the element that will hold the map|
+
+**NOTE:** You can get the instance of mpSdk by using the `getAtwinSdk` method
+
+Here's an example on how to do it.
+
+**Step 1: Create an element and give it the id of at-map**
+```html
+ <div id="at-map"></div>
+```
+
+**Step 2: Run the setMap method and pass the required parameters**
+```typescript
+ import * as atwin from 'architwin'
+
+ const sdk = getAtwinSdk()
+ atwin.minimap.setMap(sdk,'YOUR-APP-KEY','at-map')
+```
+
+#### disconnectSpace()
+
+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
+import * as atwin from 'architwin'
+
+atwin.disconnectSpace();
+````
+-----
+### Tags
+
+#### getTags()
+
+This method returns an array of `ITag` containing information of all tags in the space.
+
+*Function Signature*
+```typescript
+async function getTags(space: ISpace): Promise<ITag[] | null>;
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| space | ISpace | yes |  | |
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+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.');
+}
+```
+
+
+#### gotoTag()
+
+This method enables direct navigation to the tag within the space, identified by a specific ID. 
+
+*Function Signature*
+```typescript
+async function gotoTag(tagId: string): Promise<void>
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :---: | :---: | :---: | :---: |
+| tagId | string | yes |  | any string |
+
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 
@@ -3336,30 +3630,32 @@ await atwin.gotoTag(tagId);
 
 ### renderTag()
 
-The [renderTag()](#rendertag) is used for rendering a tag in the space based on the provided payload and some additional parameters.
+The [renderTag()](#rendertag) is used for rendering a tag in the space based on the provided payload.
 
 *Function Signature*
 ```typescript
-async function renderTag(payload: {
-  tag: MpSdk.Tag.Descriptor,
-  attachments?: string[],
-  icon?: string
-}): Promise<ITag>
+async function renderTag(payload: 
+  { tag: MpSdk.Tag.Descriptor },
+  addTo_tags: boolean = true
+): Promise<MpSdk.Tag.TagData>
 ```
 
 *Parameter Table*
 | parameter | type | required | default | values |
 | :----: | :---: | :---: | :---: | :---: |
 | payload | { } | yes |  | |
+| addTo_tags | boolean | no | true | true/false |
 
-*Example*
+**Setting of addTo_tags:**
+- **true**: Insert the rendered tag into an array that contains all the rendered tags.
+- **false**: Renders the tag but does not insert it into the array containing all the rendered tags.
+
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 
 const payload = {
-  tag: { /* Define your tag descriptor here */ },
-  attachments: ['attachment1.png', 'attachment2.png'],
-  icon: 'icon.png'
+  tag: { /* Define your tag descriptor here */ }
 };
 
 try {
@@ -3379,12 +3675,7 @@ This function retrieves all tags in the space.
 function getMpTags(): ITag[]
 ```
 
-*Parameter Table*
-| parameter | type | required | default | values |
-| :----: | :---: | :---: | :---: | :---: |
-| payload | { } | yes |  | |
-
-*Example*
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 
@@ -3413,7 +3704,7 @@ function getMpTag(tagId: string): ITag | undefined
 | :----: | :---: | :---: | :---: | :---: |
 | tagId | string | yes |  | valid tag ID |
 
-*Example*
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 
@@ -3435,18 +3726,24 @@ if (tag) {
 
 The showTags function is an asynchronous function that takes an array of ITag objects (tags) as its parameter. It processes each tag in the array, performs various operations related to displaying the tags in a specific context. These operations include adding tags, attaching media, and potentially editing tag icons.
 
+Also, this function provides the option to display tags along with tag icons, if desired.
+
 *Function Signature*
 ```typescript
-async function showTags(tags: ITag[]): Promise<void>
+async function showTags(
+  tags: ITag[], 
+  _withIcon: boolean = false
+): Promise<void>
 ```
 
 *Parameter Table*
 | parameter | type | required | default | values |
 | :----: | :---: | :---: | :---: | :---: |
-| tags | array of ITag | yes |  |  |
+| tags | array | yes |  | array of ITag |
+| _withIcon | boolean | no | false | true/false |
 
 
-*Example*
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 
@@ -3457,9 +3754,16 @@ const tagsToDisplay = [
   // ...
 ];
 
+// If no tag icon display
 try {
   await atwin.showTags(tagsToDisplay);
-  console.log('Tags displayed successfully.');
+} catch (error) {
+  console.error('Error displaying tags:', error);
+}
+
+// If with tag icon display
+try {
+  await atwin.showTags(tagsToDisplay, true);
 } catch (error) {
   console.error('Error displaying tags:', error);
 }
@@ -3474,7 +3778,7 @@ This method is designed to remove tags from a space. Tags are typically used for
 async function disposeTags(): Promise<void>
 ```
 
-*Example*
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 
@@ -3508,7 +3812,7 @@ async function disposeTag(payload: { tagId: string }): Promise<void>
 | payload | { } | yes |  | |
 
 
-*Example*
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 
@@ -3542,7 +3846,7 @@ async function attachTagMedia(payload: {
 | payload | { }| yes |  | |
 
 
-*Example*
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 
@@ -3578,7 +3882,7 @@ async function detachTagMedia(payload: {
 | :----: | :---: | :---: | :---: | :---: |
 | payload | { } | yes |  | |
 
-*Example*
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 
@@ -3609,7 +3913,7 @@ async function moveTag(tagId: string, callback?: Function): Promise<void>
 | :----: | :---: | :---: | :---: | :---: |
 | tagId | string | yes |  | valid tag ID |
 
-*Example*
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 
@@ -3633,7 +3937,7 @@ This asynchronous function is provided to modify the label of a particular tag,
 async function editTagLabel(payload: {
   tagId: string,
   label: string
-}): Promise<void>
+})
 ```
 
 *Parameter Table*
@@ -3641,7 +3945,7 @@ async function editTagLabel(payload: {
 | :----: | :---: | :---: | :---: | :---: |
 | payload | { } | yes |  |  |
 
-*Example*
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 
@@ -3667,7 +3971,7 @@ This asynchronous function is available for modifying the description of a desig
 async function editTagDescription(payload: {
   tagId: string,
   description: string
-}): Promise<void>
+})
 ```
 
 *Parameter Table*
@@ -3676,7 +3980,7 @@ async function editTagDescription(payload: {
 | payload | { } | yes |  |  |
 
 
-*Example*
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 
@@ -3703,7 +4007,7 @@ async function editTagIcon(payload: {
   tagId: string,
   icon?: string,
   color: MpSdk.Color | string
-}): Promise<void>
+})
 ```
 
 *Parameter Table*
@@ -3711,7 +4015,7 @@ async function editTagIcon(payload: {
 | :----: | :---: | :---: | :---: | :---: |
 | payload | { } | yes |  |  |
 
-*Example*
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 
@@ -3738,7 +4042,7 @@ The `editTagStem()` asynchronous function is available for adjusting the visibil
 async function editTagStem(payload: {
   tagId: string,
   stemVisible: boolean
-}): Promise<void>
+})
 ```
 
 *Parameter Table*
@@ -3746,7 +4050,7 @@ async function editTagStem(payload: {
 | :----: | :---: | :---: | :---: | :---: |
 | payload | { } | yes |  |  |
 
-*Example*
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 
@@ -3772,7 +4076,7 @@ This `editTagColor` asynchronous function is provided for modifying the color of
 async function editTagColor(payload: {
   tagId: string,
   color: MpSdk.Color
-}): Promise<void>
+})
 ```
 
 *Parameter Table*
@@ -3781,7 +4085,7 @@ async function editTagColor(payload: {
 | payload | { } | yes |  |  |
 
 
-*Example*
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 
@@ -3812,7 +4116,7 @@ Retrieve information about the sweeps (viewpoints) within the loaded 3D space us
 async function getSweeps(): Promise<ISweep[] | null>
 ```
 
-*Example*
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 
@@ -3830,15 +4134,16 @@ This asynchronous function moves the camera location to a specific sweep (viewpo
 
 *Function Signature*
 ```typescript
-async function moveToSweep(sweepId: string): Promise<void>
+async function moveToSweep(sweepId: string, rotation?: Vector2): Promise<void>
 ```
 
 *Parameter Table*
 | parameter | type | required | default | values |
 | :----: | :----: | :---: | :---: | :---: |
 | sweepId | string | yes |  | Id of the sweep |
+| sweepId | Vector2 | optional |  | {x,y} |
 
-*Example*
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 
@@ -3862,7 +4167,7 @@ async function getNearbySweeps(sweepId: string): Promise<string[] | undefined>
 | :----: | :----: | :---: | :---: | :---: |
 | sweepId | string | yes |  | Id of the sweep |
 
-*Example*
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 
@@ -3880,7 +4185,7 @@ Obtain information about the current sweep that the camera view is focused on wi
 function getCurrentSweep(): ISweep
 ```
 
-*Example*
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 
@@ -3888,6 +4193,51 @@ const currentSweep = atwin.getCurrentSweep();
 console.log('Current Sweep:', currentSweep);
 ```
 
+
+#### getCurrentSweepPosition()
+
+Retrieve information about the exact location of the current sweep's position. This function will return sweep's (x,y,z) coordinates.
+
+*Function Signature*
+```typescript
+function getCurrentSweepPosition(): MpSdk.Vector3
+```
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+const currentSweepPosition = atwin.getCurrentSweepPosition();
+console.log('Current Sweep Position:', currentSweepPosition);
+```
+
+
+#### getAllSweeps()
+
+This function retrieves all sweep data within the currently loaded space. It will return an array of objects, each containing information about a sweep. Each object includes properties such as id, position, and neighbors.
+
+*Function Signature*
+```typescript
+function getAllSweeps(): {
+    id: string;
+    position: Vector3;
+    neighbors: string[];
+}[]
+```
+
+**Where:**
+- **id:** ID of the sweep
+- **position:** Position of the sweep (Vector3 coordinates)
+- **neighbors:** Array of IDs of the neighboring sweeps
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+const allSweeps = atwin.getAllSweeps();
+console.log('All Sweeps:', allSweeps);
+```
+
 -----
 
 ### Video
@@ -3906,7 +4256,7 @@ function playVideo(videoId: number): void
 | :----: | :----: | :---: | :---: | :---: |
 | videoId | number | yes |  | Id of the video |
 
-*Example*
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 
@@ -3928,7 +4278,7 @@ function pauseVideo(videoId: number): void;
 | :----: | :----: | :---: | :---: | :---: |
 | videoId | number | yes |  | Id of the video |
 
-*Example*
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 
@@ -3951,7 +4301,7 @@ function setVideoPlayback(action: string, element: HTMLVideoElement): void;
 | action | string | yes |  | 'play' or 'pause' or 'mute' or 'unmute' |
 | element | HTMLVideoElement | yes |  | HTML video element |
 
-*Example*
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 
@@ -3966,7 +4316,7 @@ atwin.setVideoPlayback(action, videoElement);
 
 #### 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'.
+Move the camera within the space in a specified direction using this asynchronous function. Supported directions comprise 'LEFT,' 'RIGHT,' 'UP,' 'DOWN,' 'FORWARD,' and 'BACK'.
 
 *Function Signature*
 ```typescript
@@ -3976,7 +4326,7 @@ async function moveInDirection(direction: string): Promise<void>;
 *Parameter Table*
 | parameter | type | required | default | values |
 | :----: | :----: | :---: | :---: | :---: |
-| direction | string | yes |  | "FORWARD" or "BACKWARD" or "LEFT" or "RIGHT" |
+| direction | string | yes |  | "FORWARD" or "BACK" or "LEFT" or "RIGHT" |
 
 *Example*
 ```typescript
@@ -4002,10 +4352,10 @@ Retrieve the current camera pose, including the details about the camera's spati
 
 *Function Signature*
 ```typescript
-function getCurrentCameraPose(): any;
+function getCurrentCameraPose(): MpSdk.Camera.Pose
 ```
 
-*Example*
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 
@@ -4019,10 +4369,10 @@ Retrieve the present camera position within the 3D space using this function. Th
 
 *Function Signature*
 ```typescript
-function getCameraPosition(): Vector3;
+function getCameraPosition(): MpSdk.Vector3
 ```
 
-*Example*
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 
@@ -4045,7 +4395,7 @@ async function cameraPan(x: number, z: number): Promise<void>;
 | 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*
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 
@@ -4074,7 +4424,7 @@ async function cameraRotate(x: number, y: number, speed: number): Promise<void>;
 | 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*
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 
@@ -4094,10 +4444,10 @@ Obtain the existing view mode of the Matterport scene using this function. The v
 
 *Function Signature*
 ```typescript
-function getViewMode(): string | null;
+function getViewMode(): MpSdk.Mode.Mode
 ```
 
-*Example*
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 
@@ -4119,7 +4469,7 @@ async function setViewMode(mode: string): Promise<void>;
 | :----: | :----: | :---: | :---: | :---: |
 | mode | string | yes |  | "dollhouse" or "floorplan" or "inside" or "outside" or "transitioning"  |
 
-*Example*
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 
@@ -4135,9 +4485,15 @@ This function adjusts the camera's view to focus on a specific point in the Matt
 
 *Function Signature*
 ```typescript
-async function setViewMode(mode: string): Promise<void>;
+async function cameraLookAt(x: number, y: number): Promise<void>
 ```
 
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| x | number | yes |  | Horizontal position, in pixels. Starting from the canvas' top left corner. |
+| y | number | yes |  | Vertical position, in pixels. Starting from the canvas' top left corner.|
+
 *Example*
 ```typescript
 import * as atwin from 'architwin'
@@ -4155,7 +4511,7 @@ This function takes a screenshot (JPEG) of the user’s current space view. It c
 
 *Function Signature*
 ```typescript
-async function captureSpaceScreenshot(resolution:Renderer.Resolution, visibility: Renderer.Visibility);
+async function captureSpaceScreenshot(callback?: Function | null, resolution?: Renderer.Resolution, visibility?: Renderer.Visibility): Promise<void>
 ```
 
 *Parameter Table*
@@ -4163,8 +4519,9 @@ async function captureSpaceScreenshot(resolution:Renderer.Resolution, visibility
 | :----: | :----: | :---: | :---: | :---: |
 | 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}   |
+| callback | Function | optional |  | |
 
-*Example*
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 
@@ -4209,7 +4566,7 @@ function getNearbyObjects(payload: NearbyPayload): NearbyObjects
 | :----: | :----: | :---: | :---: | :---: |
 | payload | NearbyPayload | yes | none  | '3DX' or 'SLIDESHOW' or 'VIDEO' |
 
-*Example*
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 
@@ -4224,44 +4581,6 @@ 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.
 
@@ -4284,7 +4603,7 @@ async function addMediaScreen(
 | autoplay | boolean | no |  | |
 
 
-*Example*
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 
@@ -4319,7 +4638,7 @@ async function setTransformMode(mode: TRANSFORM_TYPE | string): Promise<void>
 | :----: | :----: | :---: | :---: | :---: |
 | mode | TRANSFORM_TYPE or string | yes | none |'translate' or 'scale' or 'rotate' |
 
-*Example*
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 
@@ -4347,7 +4666,7 @@ function revertTransform(action: string = 'undo'): boolean
 | :----: | :----: | :---: | :---: | :---: |
 | action | string | yes | none |'undo' or 'redo'|
 
-*Example*
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 
@@ -4380,7 +4699,7 @@ function removeTransformControls(): void
 | :----: | :----: | :---: | :---: | :---: |
 | none | none | none | none |none|
 
-*Example*
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 
@@ -4401,7 +4720,7 @@ function setAnimationState(action: string, modelId: number): void
 | action | string | yes | none |'play' or 'stop'|
 | modelId | number | yes | none |ID of the model|
 
-*Example*
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 const action = 'play';
@@ -4424,7 +4743,7 @@ function showObjectDimensions(selected: IObjectData): void
 | :----: | :----: | :---: | :---: | :---: |
 | selected | IObjectData | yes | | |
 
-*Example*
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 
@@ -4451,7 +4770,7 @@ async function copyObject(
 | position_offset | Vector3 | yes | undefined | |
 | rotation_offset | Vector3 | yes | undefined | |
 
-*Example*
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 
@@ -4459,7 +4778,7 @@ 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)
+atwin.copyObject(objectToCopy, positionOffset, rotationOffset)
   .then(copiedObject => {
     console.log('Object copied:', copiedObject);
   })
@@ -4468,93 +4787,6 @@ awtwin.copyObject(objectToCopy, positionOffset, rotationOffset)
   });
 ```
 
-#### 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.
@@ -4569,7 +4801,7 @@ async function deleteObject(id: number): Promise<void>
 | :----: | :----: | :---: | :---: | :---: |
 | id | number | yes | | |
 
-*Example*
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 
@@ -4583,34 +4815,6 @@ atwin.deleteObject(objectId)
   });
 ```
 
-#### 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.
@@ -4625,7 +4829,7 @@ async function deleteObjectFromSpace(target: IObjectData): Promise<number>
 | :----: | :----: | :---: | :---: | :---: |
 | target | IObjectData | yes | | |
 
-*Example*
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 
@@ -4655,7 +4859,7 @@ async function replaceObject(payload: I3DObject, target: IObjectData, options: O
 | target | IObjectData | yes | | |
 | options | Object | yes | null | |
 
-*Example*
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 
@@ -4697,7 +4901,7 @@ async function addTextMarkupScreen(
 | textColor | string | yes | 'black' | |
 | backgroundColor | string | yes | '#fff' | |
 
-*Example*
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 ```
@@ -4720,14 +4924,13 @@ function setTextMarkupScreenContent(
 *Parameter Table*
 | parameter | type | required | default | values |
 | :----: | :----: | :---: | :---: | :---: |
+| showcase_id | number | yes | ' ' | |
 | 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' | |
+| text | string | yes | ' ' | |
+| textColor | string | yes | ' ' | |
+| backgroundColor | string | yes | ' ' | |
 
-*Example*
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 
@@ -4739,7 +4942,6 @@ const newBackgroundColor = 'white';
 
 atwin.setTextMarkupScreenContent(showcaseId, newTitle, newText, newTextColor, newBackgroundColor);
 ```
------
 
 ### getNearestSweepFromObject()
 
@@ -4756,7 +4958,7 @@ function getNearestSweepFromObject(objectId: number): { sweepId: string, index:
 | objectId | number | yes | | |
 
 
-*Example*
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 
@@ -4772,154 +4974,352 @@ if (nearestSweep) {
 }
 ```
 
-## Meeting
-
-### createMeeting()
+### setSelectedObject()
 
-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.
+Stores the selected object captured by the ClickSpy class attached to the object upon creation in show3dObjects() function. ClickSpy is not attached if viewMode is set to public. Please take note that you cannot set an object as selected if it has not been rendered into the 3D space.
 
 *Function Signature*
 ```typescript
-async function createMeeting(
-  spaceId: string,
-  hostName: string,
-  title: string,
-  meetingStart: any,
-  duration: number,
-  password: string
-): Promise<MeetingURLs | undefined>;
+function setSelectedObject(data: IShowcaseObject, node: Scene.INode, component: Scene.IComponent, type: string): void
 ```
 
 *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|
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| data | IShowcaseObject | yes | | The data of the showcase object |
+| node | Scene.INode | yes | | The node of the object |
+| component | Scene.IComponent | yes | | The component of the object |
+| type | string | yes | | The type of the object |
 
-*Example*
+*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";
+const spaceObject: IShowcaseObject = {id: 123, showcase_id: 123,...}; // Replace with the actual showcase object data
+const selectedObjectPayload = atwin.get3DXObjects().find((obj) => obj.object.id == spaceObject.id)
 
-await scheduleMeeting(spaceId, hostName, title, meetingStart, duration, password);
+if (selectedObjectPayload && selectedObjectPayload.type) {
+    atwin.setSelectedObject(selectedObjectPayload.object, selectedObjectPayload.node, selectedObjectPayload.component, selectedObjectPayload.type)
+}
 ```
 
-### startMeeting()
+### getSelectedObject()
 
-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.
+Returns information about the selected object.
 
 *Function Signature*
 ```typescript
-async function startMeeting(meetingUrl: string, meetingPassword?: string, meetingConfig?: MeetingConfig): Promise<void>
+function getSelectedObject(): IObjectData
 ```
 
-*Parameter Table*
-| parameter | type | required | values |
-| :----: | :----: | :---: | :---: |
-| meetingUrl | string | yes | valid public URL |
-| meetingPassword | string | no | any string|
-| meetingConfig | MeetingConfig | no | MeetingConfig object |
-
-*Example*
+*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);
+const selectedObj = atwin.getSelectedObject()
+console.log("Selected object: ", selectedObj)
 ```
 
-### stopMeeting()
+### clearSelectedObject()
 
-This function is used to stop ongoing virtual meeting session.
+This function clears the current selected object and sets it to null.
 
 *Function Signature*
 ```typescript
-async function stopMeeting(): Promise<void> 
+function clearSelectedObject(): void
 ```
 
-
-*Example*
+*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();
+atwin.clearSelectedObject()
 ```
 
-### getMeeting()
+### goToModel()
 
-Retrieve details about a particular virtual meeting by utilizing its distinct meeting ID with this function.
+This function will navigate and move to the object's position.
 
 *Function Signature*
 ```typescript
-async function getMeeting(meetingId: string): Promise<any>
+function goToModel(objectId: number): Promise<void>
 ```
 
 *Parameter Table*
-| parameter | type | required | values |
-| :----: | :----: | :---: | :---: |
-| meetingId | string | yes | valid meeting Id |
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| objectId | numer | yes | | ID of the object |
 
-*Example*
+*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);
-  }
+const objectId = 123 // Replace with the actual object id
+await atwin.goToModel(objectId)
+```
+-----
+
+### get3DXObjects()
+
+Returns array of objects, each conforming to the IObjectData data type.
+
+*Function Signature*
+```typescript
+function get3DXObjects(): Array<IObjectData>
+```
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+const objects = atwin.get3DXObjects();
+// Now 'objects' contains an array of 3D objects
+```
+
+### setLibrary()
+
+This function will set or update a library of 3D models asynchronously. 
+
+*Function Signature*
+```typescript
+function setLibrary(libraryModels: Array<I3DObject>): Promise<Array<I3DObject>>
+```
+
+*Parameter Table*
+| parameter | type | required | values |
+| :----: | :----: | :---: | :---: |
+| libraryModels | Array<I3DObject> | yes |  |
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+const libraryModels = [{ // Replace with actual data
+  id: '123', 
+  upload_file: 'PNG',
+  upload_filename: 'test'
+}];
+
+await atwin.setLibrary(libraryModels)
+  .then(updatedLibrary => {
+    // Handle the updated library of 3D objects
+  })
+  .catch(error => {
+    // Handle any errors that occurred during the asynchronous operation
+  });
+```
+
+
+### getLibrary()
+
+This function serves the purpose of retrieving a library of 3D objects, possibly with the option to refetch the library if needed. Returns array of objects, each conforming to the IObjectData data type.
+
+*Function Signature*
+```typescript
+function getLibrary(refetch?: boolean): Promise<Array<I3DObject>>
+```
+
+*Parameter Table*
+| parameter | type | required | values |
+| :----: | :----: | :---: | :---: |
+| refetch |boolean | optional | true or false |
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+// Refetch is not needed
+await atwin.getLibrary()
+
+// Refetch is needed
+await atwin.getLibrary(true)
+  .then(library => {
+    // Handle the retrieved library of 3D objects
+  })
+  .catch(error => {
+    // Handle any errors that occurred during the asynchronous operation
+  });
+```
+
+
+### disposeModel()
+
+This function handles the disposal or cleanup of a specific 3D object asynchronously.It returns a promise that resolves to the object ID of the disposed target.
+
+*Function Signature*
+```typescript
+function disposeModel(target: IObjectData): Promise<number>
+```
+
+*Parameter Table*
+| parameter | type | required | values |
+| :----: | :----: | :---: | :---: |
+| target |IObjectData | yes |  |
+
+*Example:*
+```typescript
+import * as atwin from 'architwin'
+
+await atwin.disposeModel(target)
+  .then(objectID => {
+    // Handle the disposal process completion, possibly based on the returned object ID
+  })
+  .catch(error => {
+    // Handle any errors that occurred during the disposal process
+  });
+```
+
+-----
+
+
+<!-- ## 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
@@ -4936,7 +5336,7 @@ function getMeetingParticipants(): IMpParticipant[]
 ```
 
 
-*Example*
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 
@@ -4968,7 +5368,7 @@ async function getSpaceMeetings(spaceId: number): Promise<any>
 | :----: | :----: | :---: | :---: |
 | spaceId | string | yes | valid space Id |
 
-*Example*
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 
@@ -4989,7 +5389,7 @@ async function generateMeetingURL(meeting_id: string): Promise<any>
 | :----: | :----: | :---: | :---: |
 | meeting_id | string | yes | valid meeting Id |
 
-*Example*
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 
@@ -5011,7 +5411,7 @@ async function isMeetingExists(meetingId: string): Promise<boolean>
 | :----: | :----: | :---: | :---: |
 | meetingId | string | yes | valid meeting Id |
 
-*Example*
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 
@@ -5032,7 +5432,7 @@ async function isMeetingActive(meetingId: string): Promise<boolean>
 | :----: | :----: | :---: | :---: |
 | meetingId | string | yes | valid meeting Id |
 
-*Example*
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 
@@ -5054,7 +5454,7 @@ async function updateMeetingTitle(meetingId: string, meetingTitle: string): Prom
 | meetingId | string | yes | valid meeting Id |
 | meetingTitle | string | yes | new meeting title |
 
-*Example*
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 
@@ -5089,7 +5489,7 @@ async function updateMeetingStart(meetingId: string, meetingStart: string): Prom
 | meetingId | string | yes | valid meeting Id |
 | meetingStart | string | yes | new date when the will start |
 
-*Example*
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 
@@ -5124,7 +5524,7 @@ async function updateMeetingStatus(meetingId: string, meetingStatus: number): Pr
 | meetingId | string | yes | valid meeting Id |
 | meetingStatus | number | yes | 0 or 1 or 2 or 3 |
 
-*Example*
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 
@@ -5160,7 +5560,7 @@ async function updateMeetingSpace(meetingId: string, spaceId: string): Promise<a
 | meetingId | string | yes | valid meeting Id |
 | spaceId | string | yes | valid space Id |
 
-*Example*
+*Example:*
 ```typescript
 import * as atwin from 'architwin'
 
@@ -5180,9 +5580,580 @@ async function changeMeetingSpace() {
 changeMeetingSpace();
 ``` 
 
------
+----- -->
+
+## Virtual Meeting
+
+### createMeeting()
 
-**To Do:**
+Facilitates the creation of a virtual meeting within the specified 3D space. It allows the host to provide details such as the meeting topic, and participant name. Meeting password is auto-generated upon creation.
+
+*Function Signature*
+```typescript
+function createMeeting(topic: string, base_url: string): Promise<IMeeting>
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| topic | string | yes |  | The name or topic of the meeting |
+| base_url | string | yes |  | The base URL of the application |
+
+*Example:*
+````typescript
+import * as atwin from 'architwin'
+
+// create meeting
+const topic = "Space Introduction"
+const baseUrl = window.location.href
+
+await atwin.meet.createMeeting(topic, baseUrl)
+````
+
+### joinMeeting()
+
+A method by which a participant gains access to an existing virtual conference. This involves receiving a meeting link from the host and using it to enter the virtual conference environment.
+
+*Function Signature*
+```typescript
+function joinMeeting(payload: IMeetingPayload): Promise<boolean>
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| payload | IMeetingPayload | yes |  |  |
+
+**IMeetingPayload** has data of:
+- **topic** : string - The topic of the meeting.
+- **password** : string - Password of the meeting.
+- **role** : string - Participant's role: HOST or GUEST.
+- **participant_fullname** : string - Participant's name.
+
+*Example:*
+````typescript
+import * as atwin from 'architwin'
+
+// Replace with actual meeting payload data
+const meetingPayload: IMeetingPayload = {
+    topic: 'Space Introduction',
+    password: '1234',
+    role: 'HOST',
+    participant_fullname: 'Adam'
+}
+
+// join meeting
+await atwin.meet.joinMeeting(meetingPayload);
+````
+
+### leaveMeeting()
+
+This method allows participants to exit an ongoing virtual meeting. This functionality ensures that users can gracefully disconnect from a meeting without disrupting other participants.
+
+*Function Signature*
+```typescript
+function leaveMeeting(): Promise<boolean>
+```
+
+*Example:*
+````typescript
+import * as atwin from 'architwin'
+
+await atwin.meet.leaveMeeting();
+````
+
+### startVideo()
+
+This method is used to activate a participant's video feed, allowing others in the meeting to see them. 
+
+*Function Signature*
+```typescript
+function startVideo(): Promise<boolean>
+```
+
+*Example:*
+````typescript
+import * as atwin from 'architwin'
+
+await atwin.meet.startVideo();
+````
+
+### stopVideo()
+
+This method deactivates the participant's camera, halting the transmission of their video feed to other meeting participants.
+
+*Function Signature*
+```typescript
+function stopVideo(): Promise<boolean>
+```
+
+*Example:*
+````typescript
+import * as atwin from 'architwin'
+
+await atwin.meet.stopVideo();
+````
+
+### startLocalVideo()
+
+This method is used to activate a participant's local camera feed, capturing video from the participant's device's built-in camera.
+
+*Function Signature*
+```typescript
+function startLocalVideo(VideoElement?: HTMLVideoElement | null): Promise<boolean>
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| VideoElement | HTMLVideoElement | optional |  | HTMLVideoElement of local video canvas |
+
+*Example:*
+````typescript
+import * as atwin from 'architwin'
+
+// With Video Element
+
+// Replace with actual video element
+let premeetVideo: HTMLVideoElement;
+premeetVideo = document.getElementById("at-premeet-video") as HTMLVideoElement;
+
+await atwin.meet.startLocalVideo(premeetVideo);
+
+// Without Video Element
+await atwin.meet.startLocalVideo();
+````
+
+### stopLocalVideo()
+
+This method is used to deactivate or pause the transmission of a participant's video feed captured from their local camera. 
+
+*Function Signature*
+```typescript
+function stopLocalVideo(): Promise<boolean>
+```
+
+*Example:*
+````typescript
+import * as atwin from 'architwin'
+
+await atwin.meet.stopLocalVideo();
+````
+
+### startAudio()
+
+This method activates the microphone of the participant.
+
+*Function Signature*
+```typescript
+function startAudio(): Promise<void>
+```
+
+*Example:*
+````typescript
+import * as atwin from 'architwin'
+
+await atwin.meet.startAudio();
+````
+
+### stopAudio()
+
+This method deactivates the microphone of the participant. 
+
+*Function Signature*
+```typescript
+function stopAudio(): Promise<void>
+```
+
+*Example:*
+````typescript
+import * as atwin from 'architwin'
+
+await atwin.meet.stopAudio();
+````
+
+### muteAudio()
+
+This method allows participants to temporarily disable their microphone, preventing their audio from transmitting to other participants in the meeting.
+
+*Function Signature*
+```typescript
+function muteAudio(): Promise<boolean>
+```
+
+*Example:*
+````typescript
+import * as atwin from 'architwin'
+
+await atwin.meet.muteAudio();
+````
+
+### unMuteAudio()
+
+This method allows participants to enable their microphone after muting it, thereby restoring the transmission of their audio to other participants in the meeting.
+
+*Function Signature*
+```typescript
+function unMuteAudio(): Promise<boolean>
+```
+
+*Example:*
+````typescript
+import * as atwin from 'architwin'
+
+await atwin.meet.unMuteAudio();
+````
+
+### muteLocalAudio()
+
+This method allows a participant to disable their microphone locally on their device. Unlike muting audio universally, which affects all participants, muting local audio only affects the participant who initiates it.
+
+*Function Signature*
+```typescript
+function muteLocalAudio(): Promise<boolean>
+```
+
+*Example:*
+````typescript
+import * as atwin from 'architwin'
+
+await atwin.meet.muteLocalAudio();
+````
+
+### unMuteLocalAudio()
+
+This method reactivates the participant's microphone on their local device.
+
+*Function Signature*
+```typescript
+function unMuteLocalAudio(): Promise<boolean>
+```
+
+*Example:*
+````typescript
+import * as atwin from 'architwin'
+
+await atwin.meet.unMuteLocalAudio();
+````
+
+### getDevices()
+
+This method retrieves information about the audio and video devices available on your computer. This includes listing all connected microphones, speakers, and cameras. 
+
+*Function Signature*
+```typescript
+function getDevices(): Promise<{
+    mics: MediaDevice[];
+    speakers: MediaDevice[];
+    cameras: MediaDevice[];
+}>
+```
+
+*Example:*
+````typescript
+import * as atwin from 'architwin'
+
+let mountedDevices: {
+    mics: MediaDevice[];
+    speakers: MediaDevice[];
+    cameras: MediaDevice[];
+}
+
+let activeMic: MediaDevice
+let activeCamera: MediaDevice
+let activeSpeaker: MediaDevice
+
+try {
+  // get mounted devices
+  mountedDevices = await atwin.meet.getDevices();
+
+  // get active devices
+  activeMic = mountedDevices.mics[0];
+  activeCamera = mountedDevices.cameras[0];
+  activeSpeaker = mountedDevices.speakers[0];
+} catch (error) {
+  console.error("getMountedDevices error: ", error);
+}
+````
+
+### switchMicrophone()
+
+This method allows participants to change the microphone input source on their device during a meeting.
+
+*Function Signature*
+```typescript
+function switchMicrophone(deviceId: string): Promise<void>
+```
+
+*Example:*
+````typescript
+import * as atwin from 'architwin'
+
+let mountedDevices: {
+    mics: MediaDevice[];
+    speakers: MediaDevice[];
+    cameras: MediaDevice[];
+}
+
+// get mounted devices
+mountedDevices = await atwin.meet.getDevices();
+
+let activeMic: MediaDevice
+
+// Assume selectedAudio value is an item from mountedDevices mics list
+for (let item in mountedDevices.mics) {
+  if(mountedDevices.mics[item].deviceId == selectedAudio){
+      activeMic = mountedDevices.mics[item];
+      await atwin.meet.switchMicrophone(activeMic.deviceId)
+  }
+}    
+````
+
+### switchSpeaker()
+
+Thnis method allows participants to change the output audio device, typically speakers or headphones, during a meeting.
+
+*Function Signature*
+```typescript
+function switchSpeaker(deviceId: string): Promise<void>
+```
+
+*Example:*
+````typescript
+import * as atwin from 'architwin'
+
+let mountedDevices: {
+    mics: MediaDevice[];
+    speakers: MediaDevice[];
+    cameras: MediaDevice[];
+}
+
+// get mounted devices
+mountedDevices = await atwin.meet.getDevices();
+
+let activeSpeaker: MediaDevice
+
+// Assume selectedSpeaker value is an item from mountedDevices speakers list
+for (let item in mountedDevices.speakers) {
+  if(mountedDevices.speakers[item].deviceId == selectedSpeaker){
+      activeSpeaker = mountedDevices.speakers[item];
+      await atwin.meet.switchSpeaker(activeSpeaker.deviceId)
+  }
+}    
+````
+
+### switchCamera()
+
+This method allows users to change their video input source during a meeting. This feature lets users switch between different cameras connected to their device, such as built-in webcams, external USB cameras, or other video input devices.
+
+*Function Signature*
+```typescript
+function switchCamera(deviceId: string): Promise<void>
+```
+
+*Example:*
+````typescript
+import * as atwin from 'architwin'
+
+let mountedDevices: {
+    mics: MediaDevice[];
+    speakers: MediaDevice[];
+    cameras: MediaDevice[];
+}
+
+// get mounted devices
+mountedDevices = await atwin.meet.getDevices();
+
+let activeCamera: MediaDevice
+
+// Assume selectedCamera value is an item from mountedDevices cameras list
+for (let item in mountedDevices.cameras) {
+  if(mountedDevices.cameras[item].deviceId == selectedCamera){
+      activeCamera = mountedDevices.cameras[item];
+      await atwin.meet.switchCamera(activeCamera.deviceId)
+  }
+}
+````
+
+### getMicList()
+
+This method retrieves a list of all available microphones connected to the user's device. 
+
+*Function Signature*
+```typescript
+function getMicList(): Promise<MediaDevice[]>
+```
+
+*Example:*
+````typescript
+import * as atwin from 'architwin'
+
+let mountedDevices: {
+    mics: MediaDevice[];
+    speakers: MediaDevice[];
+    cameras: MediaDevice[];
+}
+
+mountedDevices.mics = await atwin.meet.getMicList();
+````
+
+### getSpeakerList()
+
+This method retrieves a list of all available audio output devices, such as speakers and headphones, connected to the user's device. 
+
+*Function Signature*
+```typescript
+function getSpeakerList(): Promise<MediaDevice[]>
+```
+
+*Example:*
+````typescript
+import * as atwin from 'architwin'
+
+let mountedDevices: {
+    mics: MediaDevice[];
+    speakers: MediaDevice[];
+    cameras: MediaDevice[];
+}
+
+mountedDevices.speakers = await atwin.meet.getSpeakerList();
+````
+
+### getCameraList()
+
+This method retrieves a list of all available cameras connected to the user's device.
+
+*Function Signature*
+```typescript
+function getCameraList(): Promise<MediaDevice[]>
+```
+
+*Example:*
+````typescript
+import * as atwin from 'architwin'
+
+let mountedDevices: {
+    mics: MediaDevice[];
+    speakers: MediaDevice[];
+    cameras: MediaDevice[];
+}
+
+mountedDevices.cameras = await atwin.meet.getCameraList();
+````
+
+### createLocalVideoTrack()
+
+This method initializes and creates a video track from the user's local camera. If no deviceId is provided, it defaults to the primary camera.  This function returns a promise that resolves to an object containing the created `localVideoTrack` and a boolean `isVideoOn` indicating the status of the video.
+
+*Function Signature*
+```typescript
+function createLocalVideoTrack(deviceId?: string): Promise<{
+    localVideoTrack: LocalVideoTrack;
+    isVideoOn: boolean;
+}>
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| deviceId | string | optional |  | ID of the device |
+
+*Example:*
+````typescript
+import * as atwin from 'architwin'
+
+// Variables
+let activeCamera: MediaDevice
+let mountedDevices: {
+    mics: MediaDevice[];
+    speakers: MediaDevice[];
+    cameras: MediaDevice[];
+}
+let localVideo: {
+    localVideoTrack: LocalVideoTrack;
+    isVideoOn: boolean;
+}
+
+// get devices
+mountedDevices = await atwin.meet.getDevices();
+// set active camera
+activeCamera = mountedDevices.cameras[0];
+// create local video track
+localVideo = await atwin.meet.createLocalVideoTrack(activeCamera.deviceId);
+````
+
+### createLocalAudioTrack()
+
+This method initializes and creates an audio track from the user's local microphone. If no deviceId or deviceType is provided, it defaults to the primary microphone. It returns a promise that resolves to an object containing the `localAudioTrack` and a boolean `isMuted` indicating if the audio is muted.
+
+*Function Signature*
+```typescript
+function createLocalAudioTrack(deviceId?: string, deviceType?: string): Promise<{
+    localAudioTrack: LocalAudioTrack;
+    isMuted: boolean;
+}>
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| deviceId | string | optional |  | ID of the device |
+| deviceType | string | optional |  | Type of audio device |
+
+*Example:*
+````typescript
+import * as atwin from 'architwin'
+
+// Variables
+let activeMic: MediaDevice
+let mountedDevices: {
+    mics: MediaDevice[];
+    speakers: MediaDevice[];
+    cameras: MediaDevice[];
+}
+let localAudio: {
+    localAudioTrack: LocalAudioTrack;
+    isMuted: boolean;
+}
+
+// get devices
+mountedDevices = await atwin.meet.getDevices();
+// set active camera
+activeMic = mountedDevices.mics[0];
+// create local video track
+localAudio = await atwin.meet.createLocalAudioTrack(activeMic.deviceId);
+````
+
+### initializeHTMLElements()
+
+This method reactivates the participant's microphone on their local device.
+
+*Function Signature*
+```typescript
+function initializeHTMLElements(
+  videoElement: HTMLVideoElement | null, 
+  canvasElement: HTMLCanvasElement | null, 
+  paticipantCanvas: HTMLCanvasElement | null): Promise<void>
+```
+
+*Parameter Table*
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| videoElement | HTMLVideoElement | yes | null | (self) Local video element  |
+| canvasElement | HTMLCanvasElement | yes | null  | (self) Local canvas element |
+| paticipantCanvas | HTMLCanvasElement | yes | null  | (remote) Participant canvas element |
+
+*Example:*
+````typescript
+import * as atwin from 'architwin'
+
+// Replace with actual HTML elements
+const videoElement = document.getElementById("at-self-video") as HTMLVideoElement;
+const canvasElement = document.getElementById("at-self-canvas") as HTMLCanvasElement;
+const participantCanvas = document.getElementById("at-participant-canvas") as HTMLCanvasElement;
+
+await atwin.meet.initializeHTMLElements(videoElement, canvasElement, participantCanvas);
+````
+
+-----
 
-* deleteMediaScreen() 
-* hideMediaScreen()