architwin 1.0.31 → 1.0.33

package/README.md

@@ -24,10 +24,20 @@ ArchiTwin Library
   - [Loading and Interacting with 3D/2D Objects](#loading-and-interacting-with-3d2d-objects)
     - [What is an Object?](#what-is-an-object)
     - [Loading Objects](#loading-objects)
+    - [Accessing List of Rendered Objects and Object Structure](#accessing-list-of-rendered-objects-and-object-structure)
     - [Transforming Objects](#transforming-objects)
+      - [Transforming Object by clicking it](#transforming-object-by-clicking-it)
+      - [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)
+    - [Getting the coordinates of a clicked area in the 3D space](#getting-the-coordinates-of-a-clicked-area-in-the-3d-space)
+    - [Setting Video Playback in the Space](#setting-video-playback-in-the-space)
+    - [Setting Animation Control in the Space](#setting-animation-control-in-the-space)
   - [Function Reference](#function-reference)
       - [Tags](#tags)
     - [Sweeps](#sweeps)
@@ -353,7 +363,8 @@ connectSpace(spaceUrl, auth, config)
 export interface IMPConfig{
     iframeId: string, // required
     appKey?: string,
-    bundlePath?: string, 
+    bundlePath?: string,
+    viewMode?: string 
     play?: 0 | 1,
     qs?: 0 | 1,
     tour?: 0 | 1 | 2 | 3,
@@ -367,6 +378,8 @@ export interface IMPConfig{
 
 **bundlePath?:** string: bundlePath is an optional key that can be set for projects whose project structure requires a custom path to the bundle SDK provided by matterport. If not set, the package will by default set the bundle path to the bundle SDK found inside the architwin package in node_modules.
 
+**viewMode** string: viewMode is an optional key that enables and disables [transform controls](#transforming-objects) in your 3D space. If the value of viewMode is not set, it will default to setting the viewMode to 'public' which disables transform controls. To enable the ability to transform objects using the transform control axis UI, you must set viewMode to 'interactive'
+
 *Example:*
 
 `bundlePath: "assets/customBundleName"`
@@ -572,6 +585,9 @@ We define objects as 3D or 2D assets that have or will be loaded into a space. T
 **2D Objects**
 
 - MP4 (Videos)
+- WMV (Videos)
+- PNG (Images)
+- JPEG (Images)
 - ZIP (Image/Image slideshows)
 
 We add support for more file types in future updates
@@ -625,30 +641,157 @@ import * as atwin from 'architwin'
 
 atwin.nearbyObjects //Gets updated everytime the User camera moves
 ```
+
+### Accessing List of Rendered Objects and Object Structure
+
+Objects that have been loaded and **rendered** into the 3D space are stored in an array called _3DXObjects which you can access by doing calling it this way
+
+```typescript
+atwin._3DXObjects
+```
+
+All the elements in this array implement the `IObjectData` interface. Each element in the array contains all the data you would need manipulate the object.
+
+*interface used* (TS)
+```typescript
+interface IObjectData {
+  collider?: any
+  object: IShowcaseObject
+  component: Scene.IComponent
+  node: Scene.INode
+  type?: string
+}
+```
+
+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.
+
+**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
+export interface IShowcaseObject {
+  id: number;
+  showcase_id: number;
+  object_id: number;
+  user_id: number;
+  object_position: {
+    x: number;
+    y: number;
+    z: number;
+  };
+  object_rotation: {
+    x: number;
+    y: number;
+    z: number;
+  };
+  object_scale: {
+    x: number;
+    y: number;
+    z: number;
+  };
+  autoplay: boolean;
+  autoplay_distance: number;
+  offset_position: number;
+  offset_rotation: number;
+  position_unit: string;
+  showcase_object_name: string;
+  is_deleted: boolean;
+  is_read: boolean;
+  is_new: boolean;
+  object_data: I3DObject;
+}
+```
+
+**component:** This objects contains functions and variables responsible for intializing, updating, and destroying a rendered objects mesh, texture, etc. This object also contains the three.js instance. Since the 3D space is rendered with Three.js under the hood. You can use this instance to invoke methods made available by three.js. This gives you a lot of flexibility and control provided you know how to use it. This documentation will not cover Three.js specific methods. Visit their [official website](https://threejs.org/) if you want to learn more about it.
+
+**node:** The node is responsible for managing the lifecycle of a 3D/2D objects. The node can be used to `start()` and `stop()` a rendered model. Invoking `start()` will render the model into the scene while `stop()` will destroy it and remove it from the scene. 
+
+**type:** A string that states the file or object type of a 3D/2D object. The file type could be any of the following
+
+**Valid Types**
+
+| type | context | description | 
+| :----: | :----: | :---: |
+| GLB | 3D model | A 3D model with or without animation |
+| FBX | 3D model | A 3D model with or without animation |
+| FRAME | Media Screen | A customizable [media screen](#creating-a-customizable-media-screen) |
+| 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. 
 
+**NOTE:** Please be aware that transform controls are disabled when viewMode in the [config object](#config-options) you pass into connectSpace is undefined or is set to public. To enable transform controls in your 3D space. Make sure to set viewMode to 'interactive'.
+
 **Translate** - Translation refers to moving an object from one position to another in space. It involves shifting the object's entire coordinate system without altering its orientation.
 
 **Scale** - Scaling is the process of changing the size of an object by uniformly increasing or decreasing its dimensions along each axis. It can make an object larger (scaling up) or smaller (scaling down).
 
 **Rotate** - Rotation involves changing the orientation or angle of an object around a specified point or axis. It rotates the object clockwise or counterclockwise by a certain angle.
 
-Before we can start transforming objects, we must first select an object to transform. The library allows you to get the currently selected object by doing the following:
+There are several methods that allows you to transform an object. Let's go through each one
 
-```typescript
-import * as atwin from 'architwin';
+#### Transforming Object by clicking it
 
-atwin.selectedObject
+Clicking on any object in the space will attach the axis controls to it. By default, clicking on an object will show axis controls for translating the object. You can then use your mouse cursor to click and drag the object to modify its position,rotation, and scale in however way that pleases you. See screenshot for reference
+
+<img src="https://matterport.github.io/showcase-sdk/images/sdkbundle-components-transform-controls.png" width="300" height="200" />
+
+You can switch the transform mode on the currently selected object by using the `setTransformMode()` method. 
+
+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)
 ```
-Now that you have access to the selected object, we can now manipulate the object as we please.
-To change the position of an object, we can set transform mode to translate. By default the mode is set to translate.
+
+#### Programmatically transforming objects
+
+If you need to transform the position,rotation, and scale of one or more objects without having to use the mouse then the 
+`setObjectTransformation()` method will allow you to do so. The method accepts the following parameters 
+
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| node | Scene.INode | yes | none | The node of the object|
+| transform | Object3DPosition | yes |  | Object containing object position,rotation,scale. More information below|
+
+The **transform** object contains the following key-value pairs. These values when set will be applied to your target object
+
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| object_position | Vector3 | yes | none | Valid x,y,z coordinates|
+| object_rotation | Vector3 | yes | none | Valid x,y,z coordinates|
+| object_scale | Vector3 | yes | none | Valid x,y,z coordinates|
+
+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
-atwin.setTransformMode()
+const targetObject = atwin._3DXObjects.find(obj => obj.object.object_data.object_type == 'GLB')
+
+const transform = {
+  object_position: {
+    x: 12.345435,
+    y: 0,
+    z: 4.54754732
+  },
+  object_rotation: {x:0,y:12,z:8},
+  object_scale: {x:2,y:2,z:2}
+}
+
+atwin.setObjectTransformation(targetObject.node,transform)
 ```
-If you wish switch transformation mode, you can pass either 'scale' or 'rotate' as parameters to the the `setTransformMode()` method.
+
+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
+
+**Switching Transform Modes**
+
+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')
@@ -680,8 +823,14 @@ In order to add an object, you may use the `addObjectToScene()` method.
 
 | parameter | type | required | values |
 | :----: | :----: | :---: | :---: |
-| object | I3DObject | yes | object |
-| option | object | no | object |
+| object | I3DObject | yes | object payload |
+| option | ObjectConfig | no | valid config object |
+
+There are two ways you can use the `addObjectToScene()` method. We will go through each one 
+
+#### Programmatically Add Objects
+
+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 
 
 ```typescript
 atwin.addObjectToScene(object:I3DObject, option:object)
@@ -691,22 +840,221 @@ atwin.addObjectToScene(object:I3DObject, option:object)
 
 A Media Screen is a customizable 2D object whose content can be used to display either an image or a video in the 3D space. You may for example use it in your 3D space and allow your users to interact with it and change its content.
 
-In order to add a media screen, you may use the `addMediaScreen()` method. You can use the [transform controls](#transforming-objects) to change the position, scale, and rotation of the media screen.
+#### Adding a Media Screen
+
+In order to add a media screen, you may use the `addMediaScreen()` method. The `addMediaScreen()` method accepts the following parameters:
+
+#### Media Screen Parameter Reference 
+
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| mediaUrl | string | no | empty string | valid public url to an image|
+| transform | {Vector3,Vector3,Vector3} || | Refer to information below**|
+| readonly | boolean | no |false | true or false|
+| autoplay | boolean | no |false | true or false|
+
+The **transform** object is an object that contains the following key-value pairs
+
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| position | Vector3 | yes | no default | valid numeric x,y,z values|
+| scale | Vector3 | no | {x:1,y:1,z:1} | valid numeric x,y,z values|
+| rotation | Vector3 | no | {x:0,y:0,z:0} | valid numeric x,y,z values|
+
+By default, your media screen will show a blank white canvas if you set the mediaUrl parameter of the `addMediaScreen()` method as an empty string or `undefined`.
+
+**IMPORTANT:** The link to your media you provide to the mediaUrl **MUST** be publicly accessible and have the appropriate CORS headers, otherwise, your media will not load into the media screen.
+
+There are many ways you can use this method to add a media screen to your 3D space. Let's go through each one.
+
+**NOTE:** The following examples utilize typescript and will utilize the TypeScript (TS) interfaces the library provides. While you can use just plain JavaScript (JS) for your project and copy the following code snippets (minus the TS interfaces) to your plain JS project, we **highly** recommend that you use TypeScript instead for your Architwin powered projects to take advantage of the type-safety and the custom interfaces provided by the library
+
+**Method 1: Adding Programmatically**
 
-```typecsript
-atwin.addMediaScreen()
+To create a media screen on a pre-defined position, you can create an object that contains the position,rotation,and scale.
+
+```typescript
+const yourTargetPosition = {
+  x: 12.345435,
+  y: 0,
+  z: 4.54754732
+}
+const objRotation = {x:0,y:0,z:0}
+const objScale = {x:1,y:1,z:1}
+
+const transform = {
+  position: yourTargetPosition,
+  rotation: objRotation,
+  scale: objScale
+}
+
+atwin.addMediaScreen('',transform)
 ```
 
-if you wish to set the property media screen content, you may use the 'setMediaScreenContent()' method.
+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
 
-| parameter | type | required | values |
-| :----: | :----: | :---: | :---: |
-| id | string | yes | any string |
-| url | string | yes | valid public url to the media|
-| type | string | no | 'image' or 'video' |
+**Method 2: Adding with click method using getTargetPosition**
+
+The library has several helper methods that provide a range of commmon functionalities to help you achieve certain actions easier. If for example, you do not have your intended position coordinates stored in the database or in a local area and wish to click a specific area of the 3D space and get that the coordinates of the area you clicked, you may do some by using the `getTargetPosition()` helper method in tangent with the `addMediaScreen()` method to do so. You can [click here](#getting-the-coordinates-of-a-clicked-area-in-the-3d-space) to know more about the `getTargetPosition()` method
+
+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
+function myCallbackFunction(clickedPosition){
+  const objRotation = {x:0,y:0,z:0}
+  const objScale = {x:1,y:1,z:1}
+
+  const transform = {
+    position: clickedPosition,
+    rotation: objRotation,
+    scale: objScale
+  }
+
+  atwin.addMediaScreen('',transform)
+  return coords
+}
+
+atwin.getTargetPosition(myCallbackFunction)
+```
+
+#### Attaching an image or video to a Media Screen
+You can think of a media screen as a blank canvas whose content is totally up to you. If you wish to set the content of the media screen, you may use the `attachMediaScreenContent()` method.
+
+**Attach Media Screen Parameters**
+
+| parameter | type | required |  default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| mediaScreenId | number | yes | none | id of object |
+| mediaUrl | string | yes | none | valid public url to the media|
+| mediaType | string | no | image | 'image' or 'video' |
+
+**IMPORTANT:** The link to your media you provide to the mediaUrl **MUST** be publicly accessible and have the appropriate CORS headers, otherwise, your media will not load into the media screen.
+
+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:
+```typescript
+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')
+```
+
+Example with video:
+```typescript
+const targetMediaScreenId = 12
+const validUrl = 'https://stg-feelpet.s3.ap-northeast-1.amazonaws.com/VID_20230203_165202.mp4'
+
+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._3DXObjects` 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 accessible if the media type of the media screen content is an image.
+
+
+*Interface used* (TS)
 ```typescript
-atwin.setMediaScreenContent(id:string, url:string, type:string)
+export interface IObjectData {
+  collider?: any
+  object: IShowcaseObject
+  component: Scene.IComponent
+  node: Scene.INode
+  type?: string
+}
+```
+
+*Example*
+```typescript
+const randomMediaScreen:IObjectData = atwin._3DXObjects.find(obj => obj.object.object_data.object_type == 'FRAME')
+
+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.
+
+### Getting the coordinates of a clicked area in the 3D space
+
+The 3D space you walk around in is a three dimensional mesh under the hood. Every point in this space has an x,y,z coordinate. These coordinates are important since it allows us to anchor objects into the 3D space and navigate around it. You may at times need the ability to get the coordinates of an area in the space. You can do this by utilizing the `getTargetPosition()` method. 
+
+**Parameter Reference**
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| callback | Function | no | none | any valid function|
+
+You can invoke the method by doing the following
+
+```typescript
+//pass a callback function to the method below to get
+//the coordinates once the user has clicked on an area
+function myCallbackFunction(coords){
+  //Line of code to do something else
+  return coords
+}
+
+atwin.getTargetPosition(myCallbackFunction)
+```
+
+The method accepts a callback function that is triggered once the user has clicked on an area in the space. The methods passes the x,y,z coordinates of the clicked position to the callback function you have passed into the method. When the method is invoked the original white circle pointer is replaced with the target pointer pictured below
+
+<img src="https://drive.google.com/uc?id=1vD4ELNj_rjBVh3hOyYjMcO12Ffmse2Rz" width="50" height="50" />
+
+The pointer goes back to normal after the user has clicked on any area inside the 3D space
+
+### Setting Video Playback in the Space
+
+Setting video playback refers to the act of adjusting various controls associated with the playback of a video in the space. It involves manipulating controls such as pause, play, mute, and unmute to modify the playback behavior according to user's preferences.
+
+**Pause** - Pausing a video temporarily allows user to freeze the video at a specific moment.
+
+**Play** - Playing a video resumes its playback from paused state, allowing the user to watch the video in real-time .
+
+**Mute** - Muting a video disables the audio playback, suppressing any sound embedded within the video.
+
+**Unmute** - Unmuting a video enables the audio playback, restoring any sound embedded within the video.
+
+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'.
+
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| action | string | no | play | '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. 
+
+Example:
+```typescript
+const targetVideoElement:HTMLVideoElmenent = document.getElementById('target-video')
+
+atwin.setVideoPlayback('pause',targetVideoElement)
+atwin.setVideoPlayback('mute',targetVideoElement)
+atwin.setVideoPlayback('unmute',targetVideoElement)
+```
+### 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.
+
+Assuming that you have already selected an animated 3D object, you can now control the setting of the animation.
+
+In order to set the animation control of a 3D object, you may use the `setAnimationState()` method. By default the action is set to 'play'. 
+
+**NOTE:** Please take note that the 3D object MUST be fully rendered first in the space before you can manipuate its animation state. This method will have no affect on 3D objects that do not have any animations in them.
+
+| parameter | type | required | default | values |
+| :----: | :----: | :---: | :---: | :---: |
+| action | string | yes | play | 'play' or 'pause' |
+| modelId | number | yes | none | showcase id of the 3D model |
+
+```typescript
+atwin.setAnimationState('play', 17)
+```
+If you wish to pause the Animation of the 3D object, change the parameter to 'pause'.
+
+```typescript
+atwin.setAnimationState('pause',17)
 ```
 
 ## Function Reference
@@ -715,50 +1063,59 @@ Some Functions are **async**; when invoking them, Use keyword **await** or **.th
 
 --------------------------
 ```typescript
-disconnectSpace() // disconnects and clear currently displayed Space
-                  // this is an async function that returns a Promise
+disconnectSpace() 
+    // disconnects and clear currently displayed Space
+    // this is an async function that returns a Promise
 ```
 
 #### Tags
 ````typescript
-gotoTag(space: ISpace) - //returns an array of an array of ITag containing information of all tags in the space. Please take note that this function is executed internally when the space is loaded and you can access the tag data via calling atwin.tags
-                         // this is an async function that requires a Tag ID param and returns a Promise
+gotoTag(space: ISpace)  
+    // returns an array of an array of ITag containing information of all tags in the space. Please take note that this function is executed internally when the space is loaded and you can access the tag data via calling atwin.tags
+    // this is an async function that requires a Tag ID param and returns a Promise
 
-atwin.tags //Variable containing an array of ITag
+atwin.tags - // variable containing an array of ITag
 
-gotoTag(tagId: number) - //transport navigate directly to the tag with given ID
-                         // this is an async function that requires a Tag ID param and returns a Promise
+gotoTag(tagId: number) 
+    // transport navigate directly to the tag with given ID
+    // this is an async function that requires a Tag ID param and returns a Promise
 
-goToRandomTag() - // go to a random tag inside the space
-                  // this is a void function
+goToRandomTag() 
+    // go to a random tag inside the space
+    // this is a void function
 ````
 ### Sweeps
 ````typescript
-getSweeps() - //Returns an array of ISweep, please note that this function is executed internally upon starting the space and you can just get the sweep data by calling the atwin.sweeps
-                               // this is an async function that requires a Sweep ID then returns a Promise
-
-atwin.sweeps //Variable containg an array of ISweep data
-
-moveToSweep(sweepId: string) - // transport navigate directly to the Sweep with given ID. 
-                               // this is an async function that requires a Sweep ID then returns a Promise
+getSweeps() 
+    // returns an array of ISweep, please note that this function is executed internally upon starting the space and you can just get the sweep data by calling the atwin.sweeps
+    // this is an async function that requires a Sweep ID then returns a Promise
 
+atwin.sweeps
+    // variable containg an array of ISweep data
 
-moveToSweep(sweepId: string) - // transport navigate directly to the Sweep with given ID. 
-                               // this is an async function that requires a Sweep ID then returns a Promise
+moveToSweep(sweepId: string)
+    // transport navigate directly to the Sweep with given ID. 
+    // this is an async function that requires a Sweep ID then returns a Promise
 
-getNearbySweeps(sweepId: string) - // returns the nearby or neighbors of a given sweep. 
-                                   // this is an async function that requires a Sweep ID then returns a Promise
+moveToSweep(sweepId: string) 
+    // transport navigate directly to the Sweep with given ID. 
+    // this is an async function that requires a Sweep ID then returns a Promise
 
-getCurrentSweep() - // returns the current sweep detail
-                    // this is a function
+getNearbySweeps(sweepId: string) 
+    // returns the nearby or neighbors of a given sweep. 
+    // this is an async function that requires a Sweep ID then returns a Promise
 
-getSweepPosition(): {x: number, y: number, z: number} - // returns the position of the current sweep:
-                                                        // this is a function
-
-goToRandomSweep() - // move to a random sweep inside the space
-                    // this is a void function
+getCurrentSweep() 
+    // returns the current sweep detail
+    // this is a function
 
+getSweepPosition(): {x: number, y: number, z: number} - 
+    // returns the position of the current sweep:
+    // this is a function
 
+goToRandomSweep() 
+    // move to a random sweep inside the space
+    // this is a void function
 ````
 
 **Example:**
@@ -771,20 +1128,18 @@ goToRandomSweep() - // move to a random sweep inside the space
   // get current sweep data
   atwin.getCurrentSweep()
 
-
   // get current sweep position
   atwin.getSweepPosition()
 
-
   // moving to a Sweep
   await atwin.moveToSweep('mfj45ligf')
 
-
   // get nearby sweeps from current Sweep
   await atwin.getNearbySweeps('mfj45ligf')
 
   // move to a random sweep
   goToRandomSweep()
+  
   ...
 
 </script>
@@ -792,11 +1147,18 @@ goToRandomSweep() - // move to a random sweep inside the space
 
 ### Video
 ````typescript
-playVideo(videoId: number) - // play a video screen
-                             // this is a function
+playVideo(videoId: number) 
+    // play a video screen
+    // this is a function
+
+pauseVideo(videoId: number) 
+    // pause a video screen
+    // this is a function
 
-pauseVideo(videoId: number) - // pause a video screen
-                             // this is a function
+setVideoPlayback(action: 'play' | 'pause' | 'mute' | 'unmute', element: HTMLVideoElement) -  
+    // action - can be play, pause, mute or unmute
+    // element - can be HTMLVideoElemens such as
+    // this is a function
 ````
 
 **Example:**
@@ -805,93 +1167,106 @@ pauseVideo(videoId: number) - // pause a video screen
   import * as atwin from 'architwin';
 
   ...
+
   // play a video
   atwin.playVideo(1)
 
-
   // pause a video
   atwin.pauseVideo(2)
+
+  // play a video screen
+  atwin.setVideoPlayback('play', atwin.selectedObject.component.planeElement)
+
+  // pause a video screen
+  atwin.setVideoPlayback('pause', atwin.selectedObject.component.planeElement)
+
+  // mute a video screen
+  atwin.setVideoPlayback('mute', atwin.selectedObject.component.planeElement)
+
+  // unmute a video screen
+  atwin.setVideoPlayback('unmute', atwin.selectedObject.component.planeElement)
+
   ...
+
 </script>
 ````
 ### Navigation 
 ````typescript
-cameraLookAt(x: number,y: number) - // set camera view at coordinate in SCREEN. 
-                                    // x and y is in pixel valuews from top left corner of the space canvas
-                                    // this is an async function and returns a Promise
-
-moveInDirection(direction: string) - // move in DIRECTION, can be LEFT, RIGTH, UP, DOWN, FORWARD, BACKWARD
-                                     // this is an async function and returns a Promise
-
-getViewMode() - // returns the current View Mode of the space.
-                // there are three modes:
-                // "mode.inside" - shows the interior view of the space
-                // "mode.floorplan" - shows the floor plan of the space
-                // "mode.dollhouse" - shows the doll house view
-                // this is a function
-
-setViewMode(mode: string) - // to set the viewing mode to "INSIDE", "FLOORPLAN" or "DOLLHOUSE"
-                            // this is an async function and returns a Promise
+cameraLookAt(x: number,y: number)
+    // set camera view at coordinate in SCREEN. 
+    // x and y is in pixel valuews from top left corner of the space canvas
+    // this is an async function and returns a Promise
+
+moveInDirection(direction: string)
+    // move in DIRECTION, can be LEFT, RIGTH, UP, DOWN, FORWARD, BACKWARD
+    // this is an async function and returns a Promise
+
+getViewMode() 
+    // returns the current View Mode of the space.
+    // there are three modes:
+    // "mode.inside" - shows the interior view of the space
+    // "mode.floorplan" - shows the floor plan of the space
+    // "mode.dollhouse" - shows the doll house view
+    // this is a function
+
+setViewMode(mode: string)
+    // to set the viewing mode to "INSIDE", "FLOORPLAN" or "DOLLHOUSE"
+    // this is an async function and returns a Promise
 ````
 
 
 ### Camera
 ````typescript
-getCurrentCameraPose() - // returns the current camera Pose object
-                         // this is a function
-
-getCameraPosition() - // returns the current camera Position {x,y,z}
-                      // this is a function
+getCurrentCameraPose()
+    // returns the current camera Pose object
+    // this is a function
 
-cameraPan(x: number, z: number) -   // pan (z-axis) makes the camera look left and right.  tilt (x-axis) the camera look up and down. 
-                                    // x and z are angles in degrees
-                                    // this is an async function and returns a Promise
+getCameraPosition()
+    // returns the current camera Position {x,y,z}
+    // this is a function
 
-cameraRotate(x: number, y: number, speed: number) - // rotates the camera view, x and y is rotation in horizontal
-                                                    // and vertical rotation in degrees
-                                                    // this is an async function and returns a Promise
+cameraPan(x: number, z: number) 
+    // pan (z-axis) makes the camera look left and right.  tilt (x-axis) the camera look up and down. 
+    // x and z are angles in degrees
+    // this is an async function and returns a Promise
 
+cameraRotate(x: number, y: number, speed: number) 
+    // rotates the camera view, x and y is rotation in horizontal
+    // and vertical rotation in degrees
+    // this is an async function and returns a Promise
 ````
 
 **Example:**
 ````typescript
 <script lang="ts">
   import * as atwin from 'architwin';
+
   ...
 
   // get current Camera Pose
   atwin.getCurrentCameraPose()
 
-
   // get current camera position
   atwin.getCameraPosition()
 
-
   // set Camera View
   await atwin.cameraLookAt(0, 10)
 
-
   // move in different Directions
   await atwin.moveInDirection("FORWARD")
-  await atwin.moveInDirection("FORWARD")
-
 
   // 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)
 
-
   // 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(20,5,2)
 
-  
   // get current View
   atwin.getViewMode()
 
@@ -899,6 +1274,7 @@ cameraRotate(x: number, y: number, speed: number) - // rotates the camera view,
   await atwin.setViewMode("INSIDE")
   await atwin.setViewMode("FLOORPLAN")
   await atwin.setViewMode("DOLLHOUSE")
+
   ...
 
 </script>
@@ -908,7 +1284,6 @@ cameraRotate(x: number, y: number, speed: number) - // rotates the camera view,
 
 
 ````typescript
-
 getNearbyObjects(type?: '3DX' | 'SLIDESHOW' | 'VIDEO', distance?: number = 2)
     // returns a list of nearby objects
     // type - can be 3Dx, Slideshow or Video; parameter is optional. if no parameter is passed, it returns all objects
@@ -939,12 +1314,23 @@ revertTransform(action: 'undo' | 'redo')
 
 clearTransformControls()
     // clears the transform component attached to the selected object
+
+setAnimationState(action: 'play' | 'stop', target:I3DObject)
+    // sets the animation state of a 3D model
+    // action - can be play or stop
+    // this is a function
+
+showObjectDimensions(selected:IObjectData)
+    // shows the width, height, depth of a 3D model
+    // this is a function
+
 ````
 
 **Example**
 ````typescript
 <script lang="ts">
   import * as atwin from 'architwin';
+
   ...
 
   // get all nearby objects
@@ -985,7 +1371,46 @@ clearTransformControls()
 
   // clears the transform component
   atwin.clearTransformControls()
+
+  // play object animation 
+  atwin.setAnimationState('play', atwin.selectedObject.object.object_data)
+
+  // pause object animation
+  atwin.setAnimationState('pause', atwin.selectedObject.object.object_data)
+
+  // show object dimension
+  atwin.showObjectDimensions(atwin.selectedObject)
+
   ...
 
 </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()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "architwin",
-  "version": "1.0.31",
+  "version": "1.0.33",
   "description": "ArchiTwin Library for Matterport",
   "main": "./lib/architwin.min.js",
   "types": "./lib/architwin.d.ts",
@@ -27,7 +27,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "architwin": "^1.0.25",
+    "@superviz/matterport-plugin": "^0.8.7",
+    "@superviz/sdk": "^4.10.0",
     "aws-sdk": "^2.1385.0",
     "axios": "^1.4.0",
     "jszip": "^3.10.1",
@@ -39,6 +40,7 @@
     "@tsconfig/node18": "^2.0.1",
     "@types/node": "^18.16.15",
     "@types/validator": "^13.7.17",
+    "css-loader": "^6.8.1",
     "javascript-obfuscator": "^4.0.2",
     "terser-webpack-plugin": "^5.3.9",
     "typescript": "5.0.4",

package/static/map.css

@@ -0,0 +1,88 @@
+.showcase_container {
+    position: relative;
+    margin: 0 auto 10px auto;
+    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
+    }
+    .map_container { 
+    opacity: 0;
+    line-height: 0;
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background: #222;
+    transition: opacity 0.75s;
+    }
+    
+    /* Display Minimap -- this class is removed in scenarios where it should not be displayed */
+    body.minimap .map_container {
+    opacity: 1;
+    }
+    
+    #map {
+    z-index: 99;
+    width: 100px;
+    background: rgba(0, 0, 0, 0.5);
+    transition: width 0.5s;
+    }
+    
+    #map:hover {
+    width: 250px;
+    }
+    #map img {
+    width: 100%;
+    -webkit-user-drag: none;
+    -khtml-user-drag: none;
+    -moz-user-drag: none;
+    -o-user-drag: none;
+    }
+    #map button {
+    display: none;
+    position: absolute;
+    padding: 0 0;
+    margin: 0;
+    height: 0.8rem;
+    width: 0.8rem;
+    margin-top: 0.8rem;
+    margin-left: -0.6rem;
+    border: 0.1rem solid #353535;
+    color: transparent;
+    background: #353535;
+    opacity: 0.5;
+    border-radius: 50%;
+    box-sizing: content-box;
+    font-size: 10px;
+    cursor: pointer;
+    transition: border-color 0.5s;
+    background: 0.5s;
+    opacity: 0.5s; 
+    color: 0.5s;
+    }
+    #map button:hover {
+    color: #fff;
+    opacity: 1;
+    }
+    #map button.active {
+    background: #ff3158;
+    opacity: 1;
+    }
+    #map button:hover {
+    border: 0.1rem solid #ff3158;
+    background: #ff3158;
+    }
+    
+    #map.floor0:hover button.floor0,
+    #map.floor1:hover button.floor1,
+    #map.floor2:hover button.floor2,
+    #map.floor3:hover button.floor3,
+    #map.floor4:hover button.floor4,
+    #map.floor5:hover button.floor5,
+    #map.floor6:hover button.floor6,
+    #map.floor7:hover button.floor7,
+    #map.floor8:hover button.floor8,
+    #map.floor9:hover button.floor9,
+    #map.floor10:hover button.floor10,
+    #map.floor11:hover button.floor11,
+    #map.floor12:hover button.floor12,
+    #map.floor13:hover button.floor13 {
+    display: inline-block;
+    }

package/webpack.config.cjs

@@ -13,6 +13,11 @@ module.exports = {
         use: 'ts-loader',
         exclude: /node_modules/,
       },
+      {
+        test: /\.css$/i,
+        use: 'css-loader',
+        exclude: /node_modules/,
+      },
     ],
   },
   resolve: {

package/webpack.config.js

@@ -0,0 +1,25 @@
+const path = require('path');
+const TerserPlugin = require("terser-webpack-plugin");
+
+
+module.exports = {
+  mode: 'production',
+  entry: './src/architwin.ts',
+  target: ['web', 'es5'],
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js'],
+  },
+  output: {
+    filename: 'architwin.min.js',
+    path: path.resolve(__dirname, 'lib'),
+  },
+};