architwin 1.0.47 → 1.0.48

package/README.md

@@ -13,7 +13,6 @@ ArchiTwin Library
       - [Import the library](#import-the-library)
       - [Setup your proxy](#setup-your-proxy)
       - [Connect to a Space](#connect-to-a-space)
-      - [Setup for other frameworks](#setup-for-other-frameworks)
   - [Connection Parameters](#connection-parameters)
   - [Config Options](#config-options)
   - [Space Navigation and Camera Control](#space-navigation-and-camera-control)
@@ -30,26 +29,18 @@ ArchiTwin Library
       - [Programmatically transforming objects](#programmatically-transforming-objects)
     - [Undoing and Redoing Transformation Changes](#undoing-and-redoing-transformation-changes)
     - [Adding Objects To Your Space](#adding-objects-to-your-space)
-      - [Programmatically Add Objects](#programmatically-add-objects)
     - [Creating a Customizable Media Screen](#creating-a-customizable-media-screen)
       - [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)
     - [Setting Video Playback in the Space](#setting-video-playback-in-the-space)
     - [Setting Animation Control in the Space](#setting-animation-control-in-the-space)
-  - [Meeting Guide](#meeting-guide)
-    - [Create Meeting](#create-meeting)
-    - [Start Meeting](#start-meeting)
-    - [Stop Meeting](#stop-meeting)
-    - [Utility Methods](#utility-methods)
-    - [Update Meeting Details](#update-meeting-details)
-    - [Meeting Info](#meeting-info)
-    - [Meeting Config Options](#meeting-config-options)
-      - [Meeting Custom Colors](#meeting-custom-colors)
-      - [Meeting Custom Avatar](#meeting-custom-avatar)
-      - [Meeting Device Control](#meeting-device-control)
-      - [Meeting Bar Position](#meeting-bar-position)
-      - [Meeting Status](#meeting-status)
+    - [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)
+    - [Deleting Object To Your Space](#deleting-object-to-your-space)
+    - [Replacing Object To Your Space](#replacing-object-to-your-space)
+    - [Creating Text Markup Screen in the space](#creating-text-markup-screen-in-the-space)
+      - [Setting Content to Text Markup Screen](#setting-content-to-text-markup-screen)
   - [Function Reference](#function-reference)
       - [Tags](#tags)
     - [Sweeps](#sweeps)
@@ -57,8 +48,6 @@ ArchiTwin Library
     - [Navigation](#navigation)
     - [Camera](#camera)
     - [Objects](#objects)
-    - [Meeting](#meeting)
-    
 
 ## Installation
 ---------------------
@@ -67,6 +56,7 @@ To install the latest ArchiTwin package:
 ````bash
 npm i architwin
 ````
+
 ## Getting Started
 ------------------------
 
@@ -85,15 +75,13 @@ This example uses Vue's ref attribute to reference the target iFrame. Please con
 
 ````html
 <template>
-    <!-- ref is an attribute used in Vue-->
-    <div class="showcase_container" id="showcase-container" style="position: relative;">
-      <iframe id="mp-showcase" class="showcase" scrolling="no" width="100%" height="700" frameborder="0"
-        allow="xr-spatial-tracking" allowfullscreen></iframe>
-      <div class="map_container">
-        <div id="map">
-        </div>
+  <div class="showcase_container" id="showcase-container" style="position: relative;">
+    <iframe id="mp-showcase" class="showcase" scrolling="no" width="100%" height="700" frameborder="0" allow="xr-spatial-tracking" allowfullscreen></iframe>
+    <div class="map_container">
+      <div id="map">
       </div>
     </div>
+  </div>
 </template>
 ````
 
@@ -235,7 +223,7 @@ You should be able to move around the Space using keyboard and mouse.
 
 Or programmatically using methods defined in this library.
 
-#### Setup for other frameworks
+<!-- #### Setup for other frameworks
 
 Vue is the framework we use in the code snippets provided above. If your team intends to use other frameworks like Svelte or React.
 
@@ -352,15 +340,28 @@ console.log('Hello console')
 
 - [React Architwin Project](https://playcode.io/1500222)
 
-Please take note that you **must** setup the appropriate proxy configuration as stated in [this section](#setup-your-proxy) otherwise it will not work.
+Please take note that you **must** setup the appropriate proxy configuration as stated in [this section](#setup-your-proxy) otherwise it will not work. -->
 
 ## Connection Parameters
 connectSpace has three important parameters:
-````javascript
-connectSpace(spaceUrl, auth, config)
-````
 
-**spaceUrl** - the URL of the space you wish to connect to. 
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| url | string | yes | | valid space URL |
+| auth | { string; string; IUser } | yes | | |
+| config | IMPConfig | yes | | |
+
+```javascript
+import * as atwin from 'architwin';
+
+...
+
+await atwin.connectSpace(url, auth, config)
+
+...
+```
+
+**url** - the URL of the space you wish to connect to. 
 
 **auth** - an authentication object with the apiKey and user credentials. Default user credentials will be provided by ArchiTwin for testing which you can change anytime to your own user credentials. The auth object passed to the `connectSpace` method may consist of the following keys:
 
@@ -449,142 +450,200 @@ await atwin.connectSpace(url, auth, config)
 
 You can navigate around the space using keyboard arrow keys or using a mouse.
 
-Progmmatically, you also can navigate the space:
-
-Use **moveInDirection(direction: string)** to move around inside the space. 
-**direction:** "FORWARD", "BACKWARD", "LEFT", "RIGHT", "UP", "DOWN".
-
+Progmmatically, you also can navigate the space. You may use `moveInDirection()` method to move around inside the space. 
 This will move the user to the nearest Sweep marker in the indicated direction.
 
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| direction | string | yes |  | "FORWARD" or "BACKWARD" or "LEFT" or "RIGHT" or "UP" or "DOWN" |
+
 ````typescript
-<script lang="ts">
-  import * as atwin from 'architwin';
-  ...
-  await atwin.moveInDirection("FORWARD")
+import * as atwin from 'architwin';
+
+...
+
+// this function moves you to the nearest sweep in front you
+async function moveForward() {
   await atwin.moveInDirection("FORWARD")
+}
 
+// this function moves you to the nearest sweep behind you
+async function moveBackward() {
+  await atwin.moveInDirection("BACKWARD")
+}
+
+// this function moves you to the nearest right sweep
+async function moveRight() {
   await atwin.moveInDirection("RIGHT")
-  await atwin.moveInDirection("RIGHT")
-  await atwin.moveInDirection("FORWARD")
+}
+
+// this function moves you to the nearest left sweep
+async function moveLeft() {
   await atwin.moveInDirection("LEFT")
-  ...
+}
 
-</script>
+// this function moves you to the nearest sweep above you
+async function moveUp() {
+  await atwin.moveInDirection("UP")
+}
+
+// this function moves you to the nearest sweep below you
+async function moveDown() {
+  await atwin.moveInDirection("DOWN")
+}
+
+...
 ````
 
 ### Rotate, Pan and Tilt Camera
 
 While inside the space, you can control the camera rotation and panning to have a better view around you.
 
-Use **cameraRotate(x: number, y: number, speed: number)** to rotate the camera view.
+You may use the `cameraRotate()` to rotate the camera view.
 
-Use **cameraPan(x: number, z: number)** to tilt and pan the Camera.
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| x | number | yes |  | rotations in degrees |
+| y | number | yes |  | rotations in degrees |
+| speed | number | yes |  | speed of rotation |
 
-Parameters x, y and z are rotations in degrees.
+```typescript
+import * as atwin from 'architwin';
 
-Note, cameraPan will work only in *Dollhouse* mode.
+...
 
-````typescript
-<script lang="ts">
-  import * as atwin from 'architwin';
+// rotate around X axis, last parameter is the Speed of rotation in seconds
+await atwin.cameraRotate(20,0,2)
 
-  ...
-  // rotate around X axis, last parameter is the Speed of rotation in seconds
-  await atwin.cameraRotate(20,0,2)
+// rotate around Y axis
+await atwin.cameraRotate(0,45,5)
 
+...
+```
 
-  // rotate around Y axis
-  await atwin.cameraRotate(0,45,5)
+You may use `cameraPan()` method to tilt and pan the Camera.
 
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| x | number | yes |  | rotation in degrees |
+| z | number | yes |  | rotation in degrees |
 
+````typescript
+import * as atwin from 'architwin';
 
-  // pan around z axis (pan and tilt only works in Dollhouse mode)
-  await atwin.cameraPan(0,20)
+...
 
-  // tilt abpout x axis
-  await atwin.cameraPan(30,0)
+// pan around z axis 
+await atwin.cameraPan(0,20)
 
-  ...
+// tilt about x axis
+await atwin.cameraPan(30,0)
 
-</script>
+...
 ````
-
+**Note:** cameraPan will work only in *Dollhouse* mode.
 
 ## Space Overview
 (Note that we use the word Space and Showcase interchangeably)
 
-**Space**
-Space is an immersive and realistic Digital Twin model of a physical space, with virtual custom objects like animated 3D objects, Video Screens, Slideshow Screens and Tags, co-existing and enhancing the real objects.
+**Space** - Space is an immersive and realistic Digital Twin model of a physical space, with virtual custom objects like animated 3D objects, Video Screens, Slideshow Screens and Tags, co-existing and enhancing the real objects.
 
 A user should be able to navigate around using PC or devices (keyboard and mouse), measure real object dimensions and interact with the virtual objects as if you are actually visiting the physical space.
 
-**Sweeps**
-Space have static sweep markers (white circles on floor) which serves as primary navigation points. Users can go to sweeps (or click), stand and look around. 
+**Sweeps** - Space have static sweep markers (white circles on floor) which serves as primary navigation points. Users can go to sweeps (or click), stand and look around. 
 
-**Tags**
-Space also have tags which are virtual markers attached to Objects or Locations in space. Tags can be clicked which will render and display relevant contents like
+**Tags** - Space also have tags which are virtual markers attached to Objects or Locations in space. Tags can be clicked which will render and display relevant contents like
 web pages, videos, images or text descriptions. It is possible to go directly to any specifig tag (gotoTag) from anywhere in Space.
 
 It can be used as quick way to navigate around the space.
 
-**3D Objects**
-Space usually contains 3D objects or three-dimentional models. Some 3D objects may have some simple animations. 
+**3D Objects** - Space usually contains 3D objects or three-dimentional models. Some 3D objects may have some simple animations. 
 
-**Video Screens**
-Another interesting objects that can be found inside the space are Video Screens. They practially look like TV 
+**Video Screens** - Another interesting objects that can be found inside the space are Video Screens. They practially look like TV 
 screens placed at selected locations. The Video screens will automatically play when a User is nearby (2 meters). And automatically turns off when the User leaves.
 
 
-**Slideshow Screens**
-Space can also contain Image Slideshow Screens. This is similar to the Video Screen, but uses static images. 
+**Slideshow Screens** - Space can also contain Image Slideshow Screens. This is similar to the Video Screen, but uses static images. 
 Clicking on the right section of the current slide image will display the next slide. 
 Clicking on the the left section will display the previous slide. 
 
 The slideshow can be auto played in whole by clicking the lower-right corner.
 
-**Meeting**
-Space meeting feature introduces immersive way to conduct virtual gatherings and collaborative sessions. This innovative feature allows users to convene inside a Space, where participants represented by an avatar and can interact, communicate, and share ideas in a more lifelike and engaging manner.
+<!-- **Meeting** - Space meeting feature introduces immersive way to conduct virtual gatherings and collaborative sessions. This innovative feature allows users to convene inside a Space, where participants represented by an avatar and can interact, communicate, and share ideas in a more lifelike and engaging manner.
 
-Please check [Meeting Guide](#meeting-guide) to know how to use Meeting feature.
+Please check [Meeting Guide](#meeting-guide) to know how to use Meeting feature. -->
 
 ## Points of Interest
 Tags are primarily use to mark locations or objects in space for quick and direct navigation.
 Tags usually contain additional content that will be rendered when hovered. Contents can be web pages, 
 text descriptions, videos, or images.
 
-````typescript
-getTags() - // returns a list of Tags found in the Space
+You may use the `getTags()` method in order to get a list of Tags found in the space.
 
-goToTag(tagId) - // to navigate to specific Tag and accepts a Tag's ID
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| space | ISpace | yes |  | |
 
-getSweeps() - // returns a list of Sweeps found in the Space
+You may use the `goToTag()` method in order to navigate to specific Tag
 
-moveToSweep(sweepId) - // to move to a specific Sweep
-````
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| tag_id | string | yes |  | Id of the tag |
+
+You may use the `getSweeps()` method in order get a list of Sweeps found in the Space. This method doesn't have a parameter.
+
+You may use the `moveToSweep()` method in order to move to a specific Sweep
+
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| sweepId | string | yes |  | Id of the sweep |
 
-**Example:**
 ````typescript
-<script lang="ts">
-  import * as atwin from 'architwin';
+import * as atwin from 'architwin';
 
-  ...
-  // get current sweep data
-  await atwin.getCurrentSweep()
+...
 
+const spaceUrl = "https://basic-dev.rev-kitten.com/showcase/model3d_public/1?token=e707880f-0fc5-48a6-b3f6-643a19f81464"
 
-  // get current sweep position
-  await atwin.getSweepPosition()
+const ispace = {
+  id: 1;
+  name: "mySpace";
+  space_url: spaceUrl;
+  tagpin_image: null;
+} as ISpace
 
+const tagId = "5"
+const sweepId = "10"
 
-  // moving to a Sweep
-  await atwin.moveToSweep('msdfkj353h')
+// returns a list of Tags found in the Space
+await atwin.getTags(ispace)
 
-  // move to a Tag
-  await atwin.gotoTag(5)
+// to navigate to specific Tag and accepts a Tag's ID
+await atwin.goToTag(tagId)
 
-  ...
+// returns a list of Sweeps found in the Space
+await atwin.getSweeps()
 
-</script>
+// to move to a specific Sweep
+await atwin.moveToSweep(sweepId)
+
+...
+````
+
+**More Examples:**
+````typescript
+import * as atwin from 'architwin';
+
+...
+
+// get current sweep data
+await atwin.getCurrentSweep()
+
+
+// get current sweep position
+await atwin.getSweepPosition()
+
+...
 ````
 
 ## Loading and Interacting with 3D/2D Objects
@@ -616,49 +675,77 @@ Objects come in many shapes and sizes. Loading objects may sometimes take a lot
 
 To achieve this, instead of loading all of your objects at the same time at the start which causes long initial load times, Architwin eagerly renders objects in the space when the user is at a certain distance from the objects intended position. We call this feature **Render On Demand**.
 
-By default, objects are rendered in the space when objects are within a **2 meters** diameter from the Camera (User view). You can increase or decrease this distance by setting the render distance using the `setRenderDistance` method.
+By default, objects are rendered in the space when objects are within a **2 meters** diameter from the Camera (User view). You can increase or decrease this distance by setting the render distance using the `setRenderDistance()` method.
 
-Example:
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| distance | number | yes |  | number in meters |
 
 ```typescript
 import * as atwin from 'architwin'
 
-atwin.setRenderDistance(10) //Render all objects within 10 meters from the User
+...
+
+// renders all objects within 10 meters from the User
+atwin.setRenderDistance(10) 
+
 atwin.connectSpace(url, auth, config)
+
+...
 ```
 
-You only need to set the render distance once. Make sure to invoke the function before running `connectSpace`
+You only need to set the render distance once. Make sure to invoke the function before running `connectSpace()`
 
-Architwin also allows you to get **rendered** objects near the user by calling the `getNearbyObjects` method which will return an array of nodes of the rendered objects within the target range.
+Architwin also allows you to get **rendered** objects near the user by calling the `getNearbyObjects()` method which will return an array of nodes of the rendered objects within the target range.
 
-Example:
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| payload | NearbyPayload | yes |  | |
 
 ```typescript
 import * as atwin from 'architwin'
 
-atwin.getNearbyObjects('ALL',10) // Will get ALL object types within a 10 meter range
+...
+const payload = {
+  type: "ALL",
+  distance: 10
+} as NearbyPayload
+
+// gets ALL object types within a 10 meter range
+atwin.getNearbyObjects(payload) 
+
+...
 ```
 
-You can learn more about the different paramaters of this function under the [function reference](#function-reference) section. If you need to get all the nearby objects everytime the user moves, then you can simple add the following key-value pair in your config.
+You can learn more about the different paramaters of this function under the [function reference](#function-reference) section. If you need to get all the nearby objects everytime the user moves, then you can simply add the following key-value pair in your config.
 
 ```typescript
 import * as atwin from 'architwin'
 
+...
+
 const config: IMPConfig = {
     //other configs...
     autoDetectNearbyObjs: true,
   }
 
 atwin.connectSpace(url, auth, config)
+
+...
 ```
 
-You can the get the data by importing the `nearbyObjects` variable
+<!-- You can get the data by importing the `nearbyObjects` variable
 
 ```typescript
 import * as atwin from 'architwin'
 
-atwin.nearbyObjects //Gets updated everytime the User camera moves
-```
+...
+
+//Gets updated everytime the User camera moves
+atwin.nearbyObjects 
+
+...
+``` -->
 
 ### Accessing List of Rendered Objects and Object Structure
 
@@ -683,9 +770,9 @@ interface IObjectData {
 
 Each object element inside `atwin._3DXObjects` contains the value keys:
 
-**collider:** Collider components define the shape of an 3D/2D object for the purposes of physical collisions. A collider, which is invisible, does not need to be the exact same shape as the GameObject’s mesh.
+**collider** - Collider components define the shape of an 3D/2D object for the purposes of physical collisions. A collider, which is invisible, does not need to be the exact same shape as the GameObject’s mesh.
 
-**object:** The object key is an object that implements the `IShowcaseObject` interface. This is one of the most important values as the object contains all the information about an object such as its id,name,position,rotation,scale,amazon_uri link, and etc. You can look at the interface below to view the full makeup of the object key.
+**object** - The object key is an object that implements the `IShowcaseObject` interface. This is one of the most important values as the object contains all the information about an object such as its id,name,position,rotation,scale,amazon_uri link, and etc. You can look at the interface below to view the full makeup of the object key.
 
 *interface used* (TS)
 ```typescript
@@ -738,6 +825,7 @@ export interface IShowcaseObject {
 | ZIP | slideshow | A zip file rendered as a image slideshow |
 
 The `atwin.selectedObject` variable is an example of a variable that implements this interfacea and contains this data.
+
 ### Transforming Objects
 
 Transformation such as translate, scale, and rotate are actions used to manipulate objects in a 3D space. These transformations allow you to change an object's position, size, and orientation respectively. 
@@ -760,13 +848,44 @@ Clicking on any object in the space will attach the axis controls to it. By defa
 
 You can switch the transform mode on the currently selected object by using the `setTransformMode()` method. 
 
-Please take note that transform controls can only be attached to one object at a time. Clicking on another object will remove the transform controls in the previous object and add it the currently selected object. It is impractical to attach multiple transform controls on more than one object. If you wish to programmatically transform multiple methods, then the next method offers a solution
+Please take note that transform controls can only be attached to one object at a time. Clicking on another object will remove the transform controls in the previous object and add it the currently selected object. It is impractical to attach multiple transform controls on more than one object. If you wish to programmatically transform multiple methods, then the next method offers a solution.
 
 If you wish the to access the object data of the object that has been clicked on. You can do so by calling the `atwin.selectedObject` variable which returns an object implementing the `IObjectData` interface containing all the necessary data you need. Know more about the structure of an object by going to this section
 
-*Example*
 ```typescript
-console.log("Selected object data",atwin.selectedObject)
+import * as atwin from 'architwin';
+
+...
+
+console.log("Selected object data", atwin.selectedObject)
+
+...
+```
+
+**Switching Transform Modes**
+
+If you wish switch transformation mode, you can pass either 'translate' or 'scale' or 'rotate' as parameters to the `setTransformMode()` method. This will switch the transform controls on the currently selected object
+
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| mode | string | yes |  | 'translate' or 'scale' or 'rotate' |
+
+
+```typescript
+import * as atwin from 'architwin';
+
+...
+
+// set the transform mode into translate
+atwin.setTransformMode('translate')
+
+// set the transform mode into scale
+atwin.setTransformMode('scale')
+
+// set the transform mode into rotate
+atwin.setTransformMode('rotate')
+
+...
 ```
 
 #### Programmatically transforming objects
@@ -790,6 +909,10 @@ The **transform** object contains the following key-value pairs. These values wh
 In this example, we will get a random 3D model from the array of rendered objects stored in `atwin._3DXObjects` and manipulate it using the method. The object we will be manipulating in this example is a 3D model with a file type of GLB (You can also transform other object types such as a media screen). This will return a javascript object that contains the rendered object's data which implement the `IObjectData` interface. You can know more about that by going to this section
 
 ```typescript
+import * as atwin from 'architwin';
+
+...
+
 const targetObject = atwin._3DXObjects.find(obj => obj.object.object_data.object_type == 'GLB')
 
 const transform = {
@@ -803,19 +926,44 @@ const transform = {
 }
 
 atwin.setObjectTransformation(targetObject.node,transform)
+
+...
 ```
 
-If done correctly, you should see your target object(s) display or reposition to your intended position,rotation,and scale. Please take note that the transform controls UI will not be attached to the object if you use this method
+**NOTE**: You can also mirror an object by knowing the center position first then add and subtract (depending whether you want to mirror it to the left or to the right) values on either x, y, or z in the object_position.
 
-**Switching Transform Modes**
+```typescript
+import * as atwin from 'architwin';
 
-If you wish switch transformation mode, you can pass either 'scale' or 'rotate' as parameters to the the `setTransformMode()` method. This will switch the transform controls on the currently selected object
+...
 
-```typescript
-atwin.setTransformMode('scale')
-atwin.setTransformMode('rotate')
+const centerPosition:Vector3 = {x:6, y:6,z:6}
+
+// add 5 values in either x, y, or z in the object_position to the mediaScreen to be positioned in the left
+const mediaScreen = ArrayOfMediaScreen.value[0]
+const newObjectPosition = {
+    object_position: {x:centerPosition.x+5, y:centerPosition.y, z:centerPosition.z},
+    object_rotation: {x:0, y:0, z:0},
+    object_scale: {x:4, y:4, z:1} 
+  } as Object3DPosition;
+
+atwin.setObjectTransformation(mediaScreen.node, newObjectPosition)
+
+// subtract 5 values in either x, y, or z in the object_position to the mediaScreen to be positioned in the right
+const mirrorMediaScreen = ArrayOfMediaScreen.value[1]
+const mirrorObjectPosition = {
+    object_position: {x:centerPosition.x-5, y:centerPosition.y, z:centerPosition.z},
+    object_rotation: {x:0, y:0, z:0},
+    object_scale: {x:4, y:4, z:1} 
+  } as Object3DPosition;
+
+atwin.setObjectTransformation(mirrorMediaScreen.node, mirrorObjectPosition)
+
+...
 ```
 
+If done correctly, you should see your target object(s) display or reposition to your intended position, rotation, and scale. Please take note that the transform controls UI will not be attached to the object if you use this method
+
 ### Undoing and Redoing Transformation Changes
 
 Redo and undo are actions that allow you to revert or replay previous transformations performed on an object. They provide a way to navigate through the history of transformations and make adjustments or restore previous states.
@@ -825,33 +973,103 @@ Assuming that you have already selected an object and already performed differen
 In order to do this, you may use the `revertTransform()` method to revert changes. By default, the action is set to 'undo'.
 
 ```typescript
+import * as atwin from 'architwin';
+
+...
+
 atwin.revertTransform()
+
+...
 ```
 
 If you want to redo a tranformation, change the parameter to 'redo'.
 
 ```typescript
+import * as atwin from 'architwin';
+
+...
+
 atwin.revertTransform('redo')
+
+...
 ```
+
 ### Adding Objects To Your Space
 
 Adding an object to your space refers to the process of incorporating a pre-existing 2D or 3D object from the database into the 3D space. It allows for the creation of visualizations, simulations, and interactive experiences in your space.
 
-In order to add an object, you may use the `addObjectToScene()` method. 
+In order to add an object, you may use the `addObjectToSpace()` method. 
 
-| parameter | type | required | values |
-| :----: | :----: | :---: | :---: |
-| object | I3DObject | yes | object payload |
-| option | ObjectConfig | no | valid config object |
+| parameter | type | required | default |values |
+| :----: | :----: | :---: | :---: | :---: |
+| object | I3DObject | yes | | object payload |
+| config | ObjectConfig | yes | | valid config object |
 
-There are two ways you can use the `addObjectToScene()` method. We will go through each one 
+There are two ways you can use the `addObjectToSpace()` method. We will go through each one 
 
-#### Programmatically Add Objects
+**Method 1: Adding Programmatically**
 
-If you wish to add new object to your space to a pre-defined position, you can use the `addObjectToScene()` method an pass the object data along 
+If you wish to add new object to your space to a pre-defined position, you can use the `addObjectToSpace()` method and pass the `objectConfig` along.
 
 ```typescript
-atwin.addObjectToScene(object:I3DObject, option:object)
+import * as atwin from 'architwin';
+
+...
+
+const objectID = 1;
+let objectPayload:I3DObject;
+objectPayload = await atwin.getObject(objectID);
+
+const yourTargetPosition = {
+  x: 12.345435,
+  y: 0,
+  z: 4.54754732
+}
+const objScale = {x:1,y:1,z:1}
+const objRotation = {x:0,y:0,z:0}
+
+let objectConfig = {
+  position: yourTargetPosition,
+  scale: objScale,
+  rotation: objRotation,
+} as ObjectConfig;
+
+atwin.addObjectToSpace(objectPayload, objectConfig)
+
+...
+```
+
+**Method 2: Adding with click method using getTargetPosition**
+
+The library has several helper methods that provide a range of commmon functionalities to help you achieve certain actions easier. If for example, you do not have your intended position coordinates stored in the database or in a local area and wish to click a specific area of the 3D space and get that the coordinates of the area you clicked, you may do some by using the `getTargetPosition()` helper method in tangent with the `addObjectToSpace()` method to do so. You can [click here](#getting-the-coordinates-of-a-clicked-area-in-the-3d-space) to know more about the `getTargetPosition()` method
+
+Here is an example of how you can use the two methods together. This is just one example, it is up to you on how you wish to combine different methods provided by the library
+
+```typescript
+import * as atwin from 'architwin';
+
+...
+
+function myCallbackFunction(clickedPosition){
+  const objectID = 1;
+  let objectPayload:I3DObject;
+  objectPayload = await atwin.getObject(objectID);
+
+  const objRotation = {x:0,y:0,z:0}
+  const objScale = {x:1,y:1,z:1}
+
+  let objectConfig = {
+    position: clickedPosition,
+    scale: objScale,
+    rotation: objRotation,
+  } as ObjectConfig;
+
+  await atwin.addObjectToSpace(objectPayload, objectConfig)
+}
+
+atwin.getTargetPosition(myCallbackFunction)
+
+...
 ```
 
 ### Creating a Customizable Media Screen
@@ -867,7 +1085,7 @@ In order to add a media screen, you may use the `addMediaScreen()` method. The `
 | parameter | type | required | default | values |
 | :----: | :----: | :---: | :---: | :---: |
 | mediaUrl | string | no | empty string | valid public url to an image|
-| transform | {Vector3,Vector3,Vector3} || | Refer to information below**|
+| transform | {Vector3,Vector3,Vector3} | yes | | Refer to information below**|
 | readonly | boolean | no |false | true or false|
 | autoplay | boolean | no |false | true or false|
 
@@ -892,6 +1110,10 @@ There are many ways you can use this method to add a media screen to your 3D spa
 To create a media screen on a pre-defined position, you can create an object that contains the position,rotation,and scale.
 
 ```typescript
+import * as atwin from 'architwin';
+
+...
+
 const yourTargetPosition = {
   x: 12.345435,
   y: 0,
@@ -907,9 +1129,11 @@ const transform = {
 }
 
 await atwin.addMediaScreen('',transform)
+
+...
 ```
 
-If done correctly, you should be able to see your media screen in your intended position. This method is useful if you already the have position,rotation, and scale values stored in a database or possibly in a local array
+If done correctly, you should be able to see your media screen in your intended position. This method is useful if you already have the position, rotation, and scale values stored in a database or possibly in a local array
 
 **Method 2: Adding with click method using getTargetPosition**
 
@@ -918,6 +1142,10 @@ The library has several helper methods that provide a range of commmon functiona
 Here is an example of how you can use the two methods together. This is just one example, it is up to you on how you wish to combine different methods provided by the library
 
 ```typescript
+import * as atwin from 'architwin';
+
+...
+
 function myCallbackFunction(clickedPosition){
   const objRotation = {x:0,y:0,z:0}
   const objScale = {x:1,y:1,z:1}
@@ -933,6 +1161,8 @@ function myCallbackFunction(clickedPosition){
 }
 
 await atwin.getTargetPosition(myCallbackFunction)
+
+...
 ```
 
 #### Attaching an image or video to a Media Screen
@@ -951,23 +1181,36 @@ In this example, we are using a link pointing to the media stored in an s3 bucke
 
 Example with image:
 ```typescript
+import * as atwin from 'architwin';
+
+...
+
 const targetMediaScreenId = 12
 const validUrl = 'https://stg-feelpet.s3.ap-northeast-1.amazonaws.com/0CB45E51-EC48-4727-906A-4CD8A13C0770.jpg'
 
-atwin.attachMediaScreenContent(targetMediaScreenId,validUrl,'image')
+atwin.attachMediaScreenContent(targetMediaScreenId, validUrl, 'image')
+
+...
 ```
 
 Example with video:
 ```typescript
+import * as atwin from 'architwin';
+
+...
+
+
 const targetMediaScreenId = 12
 const validUrl = 'https://stg-feelpet.s3.ap-northeast-1.amazonaws.com/VID_20230203_165202.mp4'
 
-await atwin.attachMediaScreenContent(targetMediaScreenId,validUrl,'video')
+await atwin.attachMediaScreenContent(targetMediaScreenId, validUrl, 'video')
+
+...
 ```
 
 When setting a video as the media screen content. You can use the `setVideoPlayback()` method to programmatically play,pause,mute,and unmute a video. You can navigate to the [playback controls section](#setting-video-playback-in-the-space) to learn more about the method. Here is an example on how to use it. 
 
-In this example, we are getting a random media screen from the `atwin._3DXObject` array which contains all the objects rendered in the space. Media screens whose media type is a video will have a variable called `planeElement` inside the object's `component` which contains an HTML video element that we can manipulate using the `setVideoPlayback()` method. Please take note that this variable is not acessible if the media type of the media screen content is an image.
+In this example, we are getting a random media screen from the `atwin._3DXObject` array which contains all the objects rendered in the space. Media screens whose media type is a video will have a variable called `planeElement` inside the object's `component` which contains an HTML video element that we can manipulate using the [setVideoPlayback()`](#setting-video-playback-in-the-space) method. Please take note that this variable is not acessible if the media type of the media screen content is an image.
 
 *Interface used*
 ```typescript
@@ -982,9 +1225,16 @@ export interface IObjectData {
 
 *Example*
 ```typescript
+import * as atwin from 'architwin';
+
+...
+
 const randomMediaScreen:IObjectData = atwin._3DXObject.find(obj => obj.object.object_data.object_type == 'FRAME')
 
-setVideoPlayback('play',randomMediaScreen.component.planeElement)
+// plays the video
+atwin.setVideoPlayback('play', randomMediaScreen.component.planeElement)
+
+...
 ```
 
 You can use the [transform controls](#transforming-objects) to change the position, scale, and rotation of the media screen using the mouse cursor.
@@ -1003,24 +1253,41 @@ Setting video playback refers to the act of adjusting various controls associate
 
 Assuming that you have already selected a video, you can now set the playback of the video.
 
-Inorder to set the playback of a video, you may use the `setVideoPlayback()` method. By default the action is set to 'play'.
+Inorder to set the playback of a video, you may use the `setVideoPlayback()` method.
 
 | parameter | type | required | default | values |
 | :----: | :----: | :---: | :---: | :---: |
-| action | string | no | play | 'play' or 'pause' or 'mute' or 'unmute' |
+| action | string | yes | none | 'play' or 'pause' or 'mute' or 'unmute' |
 | element | HTMLVideoElement | yes | none | supported html video element |
 
 
-If you wish to change the action of the playback, add a parameter such as 'pause', 'mute', 'unmute' depending on your preference. 
+If you wish to change the action of the playback, add a parameter such as 'play','pause', 'mute', 'unmute' depending on your preference. 
 
 Example:
 ```typescript
-const targetVideoElement:HTMLVideoElmenent = document.getElementById('target-video')
+import * as atwin from 'architwin';
 
-atwin.setVideoPlayback('pause',targetVideoElement)
-atwin.setVideoPlayback('mute',targetVideoElement)
-atwin.setVideoPlayback('unmute',targetVideoElement)
+...
+
+const randomMediaScreen:IObjectData = atwin._3DXObject.find(obj => obj.object.object_data.object_type == 'FRAME')
+
+// plays the video
+atwin.setVideoPlayback('play', targetVideoElement)
+
+// pauses the video 
+atwin.setVideoPlayback('pause', targetVideoElement)
+
+// mutes the video
+atwin.setVideoPlayback('mute', targetVideoElement)
+
+// unmutes the video
+atwin.setVideoPlayback('unmute', targetVideoElement)
+
+...
 ```
+
+**NOTE:** Please take note that this variable is not acessible if the media type of the media screen content is an image.
+
 ### Setting Animation Control in the Space
 
 Setting animation control refers to the process of manipulating the playback of animations applied to 3D objects in the space. It involves utilizing controls such as play and pause to control the the animation.
@@ -1037,15 +1304,365 @@ In order to set the animation control of a 3D object, you may use the `setAnimat
 | modelId | number | yes | none | showcase id of the 3D model |
 
 ```typescript
-atwin.setAnimationState('play', 17)
+import * as atwin from 'architwin';
+
+...
+
+const modelID = 17
+atwin.setAnimationState('play', modelID)
+
+...
 ```
 If you wish to pause the Animation of the 3D object, change the parameter to 'pause'.
 
 ```typescript
-atwin.setAnimationState('pause',17)
+import * as atwin from 'architwin';
+
+...
+
+const modelID = 17
+atwin.setAnimationState('pause', modelID)
+
+...
+```
+
+### Copying object To Your Space
+Copying an object refers to creating a duplicate or clone of an object. When an object is copied in the space, it means that the object's data is duplicated.
+
+Assuming that you have already selected an object to be copied, you may now copy the object by calling `copyObject()` method. You may also specify a custom offset position and rotation of the object to be cloned.
+
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| payload | IShowcaseObject | yes |  | object payload |
+| position_offset | Vector3 | no | +0.5 | |
+| rotation_offset | Vector3 | no | +0.5 | |
+
+```typescript
+import * as atwin from 'architwin';
+
+...
+
+let offsetPos:Vector3 = {x:0,y:0,z:0}
+let offsetRot:Vector3 = {x:0,y:0,z:0}
+
+if (atwin.selectedObject.object) {
+  await atwin.copyObject(atwin.selectedObject.object, offsetPos, offsetRot)
+}
+
+...
+```
+**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()` 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()` 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()` 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()` 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()` 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)
+}
+
+...
+```
+
+### Deleting Object To Your Space
+
+Deleting an object in space refers to the process of removing a pre-existing 2D or 3D object from the 3D environment or space. This action results in the elimination of the visual representation and physical presence of the object within the virtual space. By removing the object, users can maintain control over the composition and contents of their space, allowing for more dynamic and tailored virtual experiences. 
+
+Assuming that you have already selected an object to be deleted, you may now delete the object by using `deleteObjectFromSpace()` method. 
+
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| selected | IObjectData | yes |  |  |
+
+```typescript
+import * as atwin from 'architwin';
+
+...
+
+// this function handles the object to be deleted from space
+async function handleDeleteObjectFromSpace() {
+  await atwin.deleteObjectFromSpace(atwin.selectedObject)
+}
+
+...
 ```
 
-## Meeting Guide
+**NOTE:** This is only deleting the object from the space and not from the database.
+
+### Replacing Object To Your Space
+
+Replacing an object in space refers to the process of substituting a pre-existing 2D or 3D object within a 3D environment or space with another object. This action involves removing the original object and introducing a new one in its place, while maintaining the object's location and any associated properties or attributes.
+
+Assuming that you have already selected an object to be replaced, you may now delete the object by using `replaceObject()` method.  
+
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| payload | I3DObject | yes |  |  |
+| target | IObjectData | yes |  |  |
+| options | Object | no | null |  |
+
+```typescript
+import * as atwin from 'architwin';
+
+...
+
+// id of the object
+const objectId:number = 5
+// object that will replace
+const objectData = await atwin.getObject(objectId)
+// object to be replaced
+const objectDataToBeReplaced = atwin.selectedObject
+
+// this function handles the replaceObject() method
+async function handleReplaceObject() {
+  await atwin.replaceObject(objectData, objectDataToBeReplaced)
+}
+
+...
+```
+
+### Creating Text Markup Screen in the space
+
+A text markup screen is a graphical user interface objecet that allows users to input and display formatted text in the 3D space. The method internally generates elements and programmatically applies CSS styling. You can use this method to display text messages to the 3D screen.
+
+In order to add a text markup screen in your space, you may use the `addTextMarkupScreen()` method.
+
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| title | string | no | empty string | title of message |
+| message | string | yes | none | message content |
+| textScreenName | string | yes | none | name of text frame |
+| transform | {Vector3, Vector3, Vector3} | yes | none | numeric value for x, y, z |
+| textColor | string | no | black | valid color value |
+| backgroundColor | string | no | '#fffff' | valid color value |
+
+```typescript
+import * as atwin from 'architwin';
+
+...
+
+const title:string = 'My Text Markup Screen'
+const message:string = 'This is my message'
+const position = {
+  x: 12.345435,
+  y: 0,
+  z: 4.54754732
+}
+const scale = {x:0, y:0, z:0}
+const rotation = {x:0, y:0, z:0}
+
+const transform = {
+  position: position,
+  scale: scale,
+  rotation: rotation
+}
+
+atwin.addTextMarkupScreen(title, message, transform)
+
+...
+```
+
+#### Setting Content to Text Markup Screen
+
+If you wish to update the style and content for the text frame, you may use the `setTextMarkupScreenContent()` method. You can customize the text content as well as the foreground and background color of the target text markup screen.
+
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| showcase_id | number | yes | none | id of target object |
+| title | string | no | empty string | title of the content |
+| text | string | no | empty string | body of the content |
+| textColor | string | no | black | valid color value |
+| backgroundColor | string | no | '#fffff' | valid color value |
+
+```typescript
+import * as atwin from 'architwin';
+
+...
+
+const id = 10
+const title = 'My title'
+const text = 'This is the content of the body'
+const textColor = 'white'
+const backgroundColor = '#00000'
+
+atwin.setTextMarkupScreenContent(id, title, text, textColor, backgroundColor)
+
+...
+```
+
+<!-- ## Meeting Guide
 
 Hosting Live Virtual Meetings in 3D Space
 
@@ -1472,7 +2089,7 @@ export const enum MeetingStatus {
   STOPPED = 2,
   CANCELLED = 3,
 }
-````
+```` -->
 
 ## Function Reference
 
@@ -1526,7 +2143,7 @@ getCurrentSweep()
     // returns the current sweep detail
     // this is a function
 
-getSweepPosition(): {x: number, y: number, z: number} - 
+getSweepPosition(): {x: number, y: number, z: number} 
     // returns the position of the current sweep:
     // this is a function
 
@@ -1707,12 +2324,12 @@ getNearbyObjects(type?: '3DX' | 'SLIDESHOW' | 'VIDEO', distance?: number = 2)
     // distance - is optional but with a default of 2 meters
     // this is a function
 
-addObjectToScene(object:I3DObject | undefined, option:Object)
+addObjectToSpace(object:I3DObject | undefined, option:Object)
     // object - accepts I3DObject or undefined
     // option - accepts an Object. Default is null
     // this is an async function that returns a Promise
 
-addMediaScreen(mediaUrl?: string, transform?:Object3DPosition, readonly?:boolean, autoplay?:boolean) 
+addMediaScreen(mediaUrl?: string, transform:Object3DPosition, readonly?:boolean, autoplay?:boolean) 
     // creates a 2D object that can be used to display a wide variety images or videos dynamically
     // mediaUrl - optional but default is empty string
     // transform - optional but default is null
@@ -1741,13 +2358,73 @@ showObjectDimensions(selected:IObjectData)
     // shows the width, height, depth of a 3D model
     // this is a function
 
+copyObject(payload:IShowcaseObject, position_offset:Vector3 | undefined, rotation_offset:Vector3 | undefined)
+    // copies the the selected objecte
+    // payload - the payload of the selected object
+    // position_offset - optional; the offset of the position on where to add the object in the space
+    // rotation_offset - optional; the offset of the rotation of the object 
+    // this is an async function
+
+addObject(payload:FileUpload)
+    // adds object from the database
+    // payload - payload for the file to be uploaded
+    // this is an async function that returns a Promise<I3DObject>
+
+getObject(id:number)
+    // retrieves object from the database
+    // id - the unique id of the object
+    // this is an async function that returns a Promise<I3DObject>
+
+updateObject(id:number,payload:FileUpload)
+    // updates object from the database
+    // id - the unique id of the object
+    // payload - payload for the file to be uploaded
+    // this is an async function that returns a Promise<I3DObject>
+
+deleteObject(id:number)
+    // deletes object from the database
+    // id - the unique id of the object
+    // this is an async function
+
+deleteObjectFromSpace(selected:IObjectData)
+    // deleted object from space
+    // selected - the selected or target object to be removed
+    // this is an async functon
+
+replaceObject(payload:I3DObject, target:IObjectData, options:Object = null)
+    // replaces the object in the space with another object
+    // payload - the new object to replace the target object
+    // target - the object to be replaced
+    // options - optional; options to pass into the loader
+    // this is an async function
+
+addTextMarkupScreen(title:string, message:string, textScreenName:string, transform:Object3DPosition, textColor:string, backgroundColor:string
+)
+    // adds a text frame in the pace
+    // title - title of the message
+    // message - message content
+    // textScreenName - name of the text frame. 
+    // transform - x,y,x values for position, rotation, and scale
+    // textColor - optional; valid color value
+    // backgroundColor - optional; valid background color value
+    // this is an async function
+
+setTextMarkupScreenContent(showcase_id:string, title:string, text:string, textColor:string, backgroundColor:string)
+    // updates the style and content of the text frame
+    // showcase_id - showcase id of the target object
+    // title - title of your content
+    // text - body of the text content
+    // textColor - optional; set the color of the text
+    // backgroundColor - optional; set the color of the background
+    // this is a function
+
 ````
 
 **Example**
 ````typescript
 <script lang="ts">
   import * as atwin from 'architwin';
-
+  import type { Object3DPosition } from '../../architwin/src/types';
   ...
 
   // get all nearby objects
@@ -1766,9 +2443,9 @@ showObjectDimensions(selected:IObjectData)
   atwin.getNearbyObjects('3DX', 3)
 
   // creates pre-existing 2D/3D from the DB to the 3D space
-  await atwin.addObjectToScene(objectPayload.value)
+  await atwin.addObjectToSpace(objectPayload)
 
-  // creates a 2D Frame Object
+  // creates a 2D Frame Object 
   atwin.addMediaScreen()
 
   // translates object
@@ -1798,178 +2475,39 @@ showObjectDimensions(selected:IObjectData)
   // show object dimension
   atwin.showObjectDimensions(atwin.selectedObject)
 
-  ...
+  // create a duplicate to an existing object in the space
+  await atwin.copyObject(objectPayload)
 
-</script>
-````
+  // adds an object to the database
+  await atwin.addObject(objectPayload)
 
-### Meeting
+  // gets an object from the database
+  await atwin.getObject(objectID)
 
-````typescript
-
-createMeeting(
-  spaceId: string, 
-  hostName: string, 
-  title: string, 
-  meetingStart: string, 
-  meetingStatus: MeetingStatus
-  duration: string, 
-  password: string,
-)
-
-  // returns an object consist of meeting URL, meeting ID, meeting password
-  // this is an async function that returns a Promise
-
-startMeeting(meetingUrl: string, meetingPassword?: string, meetingConfig: MeetingConfig)
-    // meetingUrl - URL generated by `createMeeting` function
-    // meetingPassword - optional but default is null
-    // meetingConfig - optional but default is null
-    // this is an void async function
-
-stopMeeting() 
-    // this is an async function
-
-getMeetingParticipants()
-    // return a list of participants
-    // this is an async function
-
-getSpaceMeetings(spaceId: string)
-    // spaceId - the id of Space
-    // returns a list if meetings
-    // this is an async function
+  // updates an existing object from the database
+  await atwin.updateObject(objectID, objectPayload)
 
-getMeeting(meetingId: string)
-    // meetingId - the id of the meeting
-    // returns a meeting
-    // this is an async function
+  // deletes an object from the database
+  await atwin.deleteObject(objectID)
 
-isMeetingExist(meetingId: string)
-    // meetingId - the id of the meeting
-    // returns a boolean
-    // this is an async function
+  // deletes an object from the space
+  await atwin.deleteObjectFromSpace(atwin.selectedObject)
 
-isMeetingActive(meetingId: string)
-    // meetingId - the id of the meeting
-    // returns a boolean
-    // this is an async function
+  // replaces an object in the space
+  await atwin.replaceObject(objectData, atwin.selectedObject)
 
-updateMeetingTitle(meetingId: string, meetingTitle: string)
-    // meetingId - the id of the meeting
-    // meetingTitle - the new meeting title
-    // returns a response status
-    // this is an async function
+  // adds a text frame in the pace
+  await atwin.addTextMarkupScreen(title, message, transform, textColor, backgroundColor)
 
-updateMeetingStart(meetingId: string, meetingStart: string)
-    // meetingId - the id of the meeting
-    // meetingStart - the new date when meeting scheduled to start
-    // returns a response status
-    // this is an async function
+  // updates the style and content of the text frame
+  atwin.setTextMarkupScreenContent(id, title, text, textColor, backgroundColor)
 
-updateMeetingStatus(meetingId: string, meetingStatus: string)
-    // meetingId - the id of the meeting
-    // meetingStatus - can be 0 for SCHEDULED, 1 for STARTED, 2 for STOPPED, 3 for CANCELLED
-    // returns a response status
-    // this is an async function
-
-updateMeetingSpace(meetingId: string, spaceId: string)
-    // meetingId - the id of the meeting
-    // spaceId - the ID of the new Space 
-    // returns a response status
-    // this is an async function
-````
-
-**Example**
-````typescript
-<script lang="ts">
-  import * as atwin from 'architwin';
   ...
 
-  // create a meeting and generate meeting URL
-  atwin.createMeeting(
-    '1', 
-    'John Doe', 
-    'Daily Meeting', 
-    '2023-07-19T17:34', 
-    1.5, 
-    'password123',
-  )
-
-  // start a meeting
-  atwin.startMeeting(
-    meetingUrl: "http://www.example.com/?meetingId=290d9f7d-fb14-4c8f-9d95-695cac59e44b&role=host",
-    meetingPassword: 'password123',
-    meetingConfig: {
-      customColors: {
-        primary900: '16 29 70',
-        primary200: '141 164 239',
-        primary: '58 92 204',
-        }
-      deviceControl: {
-        videoInput: false,
-        audioInput: true,
-        audioOutput: true
-      },
-      meetingBarPosition: 'top',
-    }
-  )
-
-  // stop current or initialized meeting
-  atwin.stopMeeting()
-
-  // get all current meeting's participant
-  atwin.getMeetingParticipants()
-
-  // get all meetings in specific Space
-  atwin.getSpaceMeetings(spaceId: 1)
-
-  // get specific meeting 
-  await atwin.getMeeting(meetingId: 'bac67012-d2ff-47f6-b427-fc2538caac2b')
-
-  // check if meeting exist
-  atwin.isMeetingExist(meetingId: 'bac67012-d2ff-47f6-b427-fc2538caac2b')
-
-  // check if meeting is active or on-going
-  atwin.isMeetingActive(meetingId: 'bac67012-d2ff-47f6-b427-fc2538caac2b')
-
-  // updates the meeting title
-  atwin.updateMeetingTitle(meetingId: 'bac67012-d2ff-47f6-b427-fc2538caac2b', meetingTitle: 'New Meeting Title')
-
-  // updates the date when the meeting schedule to start
-  atwin.updateMeetingStart(meetingId: 'bac67012-d2ff-47f6-b427-fc2538caac2b', meetingStart: '2023-07-19T17:34')
-
-  // updates the meeting status
-  atwin.updateMeetingStatus(meetingId: 'bac67012-d2ff-47f6-b427-fc2538caac2b', meetingStatus: '0')
-  
-  // updates the meeting space ID 
-  atwin.updateMeetingSpace(meetingId: 'bac67012-d2ff-47f6-b427-fc2538caac2b', spaceId: 2)
-
 </script>
 ````
+
 **To Do:**
-* when adding an object it should specify the position, scale, rotate of the object
-for example:
-  ```typescript 
-  atwin.addObjectToScene(object:I3DObject, option:object, position:Vector3, scale:Vector3, rotate:Vector3)
-  ```
-  
-  or
-  ```typescript
-  atwin.addObjectToScene(object:I3DObject, option:object, tranform:Object3DPosition)
-  ```
-  
-* adding a media screen should be 
-  
-  ```typescript
-  addMediaScreen(mediaUrl:string, transform:Object3DPosition, readonly:boolean = false, autoplay:boolean = false)
-  ```
-  where 
-  * media could be an empty string or URL string 
-  * readonly and autoplay is optional
-
-* scale and rotation is not working in transform
-* setMediaScreenContent() has CORS error when getting url from google images
-* for setting the media screen content, we need to get the payload of the media screen object because we need the object ID
-  * we can do this by returning the media screen payload from addMediaScreen()
 
 * deleteMediaScreen() 
 * hideMediaScreen()