addComment

Attach a comment to a 3D point. The comment is shown as a clickable symbol.

    addComment(text:string, point: {x:number,y:number,z:number}) : Promise<void>
    

• textIdentifier of the comment.

• point: {x:number, y:number, z:number}Coordinates of the 3D point to which the comment is attached.

Example 1

    // Add a comment
    LwAPI.addComment('Comment 2001', {"x":400,"y":300,"z":82});
    

Example 2

    // To perform an action when clicking the comment symbol, register a selection handler
    LwAPI.registerOnSelection(e => {
      if (e.type == LwSelectionType.COMMENT)
        console.log('comment selected!', e.item);
    });

    // Sequential number to identify each comment
    var cmtNum = 0;

    // Add a new comment at a 3D point calculated from the right-click point of the context menu.
    // If getMousePosition3D() returns null, no comment will be added.
      LwAPI.addContextMenuItem('Add comment', function (pt2) {
      LwAPI.getMousePosition3D(pt2).then(function (pt3) {
        if (pt3 == null) {
          alert("Could not get a 3D point to attach the comment.");
        }
        else {
          LwAPI.addComment(["cmt", ++cmtNum].join(""), pt3);
        }
      });
    });
    

See also:

• Set a comment image: setCommentImage
• Remove a comment with a given identifier: removeComment
• Remove all comments: removeAllComments

addContextMenuItem

Add an item to the context menu in the viewing area.

      addContextMenuItem(text:string, callback:ContextMenuItemCallback) : Promise<void>

      ContextMenuItemCallback: {x:number, y:number}
      

• textTitle of the new context menu item

• callbackCallback function triggered by the context menu item. The argument passed to the callback function is an object containing the x and y coordinates of the right-click which has opened the context menu.

Example

      // Add a context menu item
      LwAPI.addContextMenuItem('Say hello', function() {
        alert("Hello");
      });

      // Add another context menu item and pass the click position to the callback function
      LwAPI.addContextMenuItem('Get click position', function(pos) {
        console.log(pos['x']);
        console.log(pos['y']);
      });
      

Demo on technia.com

applyConfig

Apply a configuration during runtime.

    applyConfig(config:LwGUIConfig) : Promise<void>
    

• configObject with one or more key-value pairs. See Property keys for applyConfig.

Example

    // Show the model tree
    LwAPI.applyConfig({ treeExpanded: true });
    

    // Hide the PMI button from the navbar, and disable loading PMI elements
    LwAPI.applyConfig({
      navbarEntries: { pmi: false },
      tasks: { pmi: false }
    });
    

Demo on technia.com

Property keys for applyConfig

      LwAPI.applyConfig({

        // Visibility of UI elements:
        showNavbar: true,             // Navigation bar
        showBottomToolbar: true,      // Bottom toolbar
        treeExpanded: true,           // Initially show or hide the tree panel
        treeStartLevel: 0,            // Hide the topmost levels of the tree structure (number)
                                      // 0 = Show all tree levels
                                      // 1 = Hide the Scene node
                                      // 2 = Hide the Scene and file nodes
                                      // 3 = Hide the Scene, file, and root assembly nodes.
                                      // etc.
        showProgressbar: true,        // Progress bar
        showToasts: true,             // System messages
        showCoordinateSystem: true,   // XYZ coordinate system
        explorerTileVisu: false,      // In narrow windows, show tiles file chooser

        // Visibility of controls on the bottom toolbar:
        bottomToolbarEntries: {
          tree: true,                 // Tree
          properties: true,           // Properties
          tools: true                 // Tools
        },

        // Visibility of controls on the navigation bar:
        showOpenButton: true,         // File chooser
        navbarEntries: {
          fitAllIn: true,             // Fit all in
          fitInItem: true,            // Fit selected item in
          pmi: true,                  // Show/Hide PMI
          help: true,                 // Help
          errorHistory: true,         // Error history
          about: true,                // About
          shaded: true,               // Shading options
          measurement: true           // Enable/disable measurements mode
        },

        // Visibility of items on the Tools menu:
        toolsEntries: {
          screenshot: true,           // Screenshot
          modelviews: true,           // Modelviews
          clipping: true,             // Clipping
          explosion: true,            // Explosion
          options: true,              // Options
          measurement: true,          // Measurement
          layerfilter: true           // Layerfilter
        },

        // Visibility of items in the Tools > Options dialog:
        optionsEntries: {
          ghostSelection: true,       // Ghost selection
          boundingBox: true,          // Bounding box
          projection: true,           // Orthographic projection
          animation: true             // Animation settings
        },

        // Clipping options
        clippingCap: true,                // Show clipping cap
        clippingCapColor: [197,185,172],  // Clipping cap color (RGB)
        wireframeClipping: true,          // Wireframe clipping

        // In Tools > Modelviews, display model views attached to the root (false)
        // or attached to the current selection (true)
        nonRootModelViews: true,  

        lengthUnit: "mm",                           // Length unit for measurements
        screenshotPrefix: "LiteBox3D_Screenshot_",  // File name prefix for screenshots
        showPMI: true,                              // Show or hide PMI
        usePmiColorsFromFile: true,                 // Use PMI colors from file (true)
                                                    // or pmiColor (false)
        pmiColor: [0,0,0],                          // Custom PMI color
        canvasBackgroundColor: [255,255,255],       // Background color of 3D viewing area
        highlightColor: [254,128,51],               // Highlight color for selected items in 3D
        measurementColor: [0,0,0],                  // Measurements color

        rotation: {          // 3D rotation
          enable: false,     // - Enable rotation
          axis: [1,0,0],     // - Rotation axis
          speed: 0           // - Speed: 0 = slow, 1 = medium, 2 = fast
        },

        // Set a default view on load: "ISO", "TOP", "BOTTOM", "LEFT", "RIGHT", "FRONT", "BACK"
        defaultView: "ISO",

        // Transition time [s] between modelviews and between redlining scenes
        sceneTransitionTime: 1,
        // Redlining playback: Delay [s] between setting the camera view angle and moving parts
        delayBetweenCamAndPartMovement: 2,
        // Redlining playback: Delay [s] before entering the next scene
        delayBetweenScenes: 2,

        defaultProjectionOrtho: false,    // Perspective: orthographic (false) or perspective (true)
        shadingMode: 1,                   // Visualization: 0 = Shaded, 1 = Shaded with wireframe
        showBoundingBox: false,           // Show or hide bounding box

        // Shape LOD to display: 0 = highest detail, 1 = 2nd highest detail, etc.
        lodLevel: 0,

        // Compression and precision of 3D data. Values: 2 .. 30, default is 21
        // 2 = Maximum compression
        // 14 = Generally sufficient precision for display but not for measurements
        // 30 = Lowest compression, maximum precision
        quantizationBits: 21

      });
    

    LwAPI.openModel(location:string, config?: WebRequestConfig) : Promise<LwResult>

    WebRequestConfig {
      headers: {
        [key: string]: string
      }
    }
    

• locationLocation of the model file. The location can be any of the following:

  • URL over HTTPS, HTTP, or FTP
  • File path relative to a base path defined by the MODEL_DIRS variable.
  • Absolute file path defined by the ALLOWED_DIRS variable

• configCustom HTTP headers for requesting model data over HTTP/HTTPS.

  The headers object contains one or more name-value pairs. The webviewer server adds these HTTP headers when requesting model data from an HTTP/HTTPS server.

  Example: { header: { Authorization: `Bearer F184A3C46D059BA7234DFF81957`, user: "myuser@example.com" } }

  Known limitation: Only monolithic model files can be requested with custom HTTP headers. Custom HTTP headers are not used when requesting external references of models (fully shattered JT, PLMXML, STEP AP242 BO Model XML).

Error handling

The openModel() method returns an object:

    { msg, error }
    

If the command has succeeded, msg is an empty string and error is null. If an error has occurred, msg contains the error message and error is an error object.

Example

     LwAPI.openModel("block.jt");
     

    LwAPI.openModel("nothing.jt")
    .then(function(result){
      if (result.error !== null) alert(result.msg);
    });
    

See also: Request model data with authentication headers

Demo on technia.com

addModel

Add the given model to the scene. Optionally, a transformation can be applied to the model.

Note that you cannot open the same model twice.

    LwAPI.addModel(url:string, transformation?:Array<number>, config?: WebRequestConfig) : Promise<LwResult>

    WebRequestConfig {
      headers: {
        [key: string]: string
      }
    }
    

• urlLocation of the model file. Give a full file path on the webviewer server, or a URL.

  Full file path: c:/path/to/file.jt

  URL of the file over HTTP, HTTPS, or FTP: http://host/dir/file.jt

• nameName of the model to display in the tree. The default value is the file name.

• transformation4x4 transformation matrix in column-major order. Omit this parameter to apply no transformation.

  
       1 0 0 0
       0 1 0 0
       0 0 1 0
       0 0 0 1
       

  JavaScript notation in column-major order:

  
       [ 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 ]
       /*---col 1---|---col 2---|---col 3---|---col 4---*/
       

• configCustom headers for requesting model data over HTTP/HTTPS.

  The headers object contains one or more name-value pairs. The webviewer server adds these HTTP headers when requesting model data from an HTTP/HTTPS server.

  Example: { header: { Authorization: `Bearer F184A3C46D059BA7234DFF81957`, user: "myuser@example.com" } }

Result

The addModel() method returns an object:

    { msg, error }
    

If the command has succeeded, msg is an empty string and error is null. If an error has occurred, msg contains the error message and error is an error object.

Example

    // Add the given model
    LwAPI.addModel("file.jt");
    

    // Add and transform the given model
    var tm = [ 100, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 ];
    LwAPI.addModel("file_2.jt", tm );
    

    // Error handling:
    LwAPI.addModel("nothing.jt")
    .then(result=>{
      if(result.error !== null) alert(result.msg);
    });
    

Demo on technia.com

closeModel

Close the given model.

    LwAPI.closeModel(url:string) : Promise<LwResult>
    

• urlLocation of the model file. Give the full file path on the webviewer server, or a URL.

  Full path: c:/path/to/file.jt

  URL of the file over HTTP, HTTPS, or FTP: http://host/dir/file.jt

Result

The closeModel() method returns an object.

    { msg, error }
    

If the command has succeeded, msg is an empty string and error is null. If an error has occurred, msg contains the error message and error is an error object.

Example

    // Close the given model
    LwAPI.closeModel("block.jt");
    

    // Error handling:
    LwAPI.closeModel("file.jt")
    .then(result=>{
      if(result.error !== null) alert(result.msg);
    });
    

Demo on technia.com

getMousePosition3D

Get the 3D point for given pixel coordinates on screen.

    LwAPI.getMousePosition3D({x:number, y:number}) : {x:number, y:number, z:number}
    

• x,yPixel coordinates on screen

Result

The getMousePosition3D() method returns an object containing the coordinates of the 3D point. If no 3D geometry is displayed at the given screen coordinates, the result is null.

    {x:number, y:number, z:number}
    

• x,y,zCoordinates of the 3D point.

Example 1

    var pt2 = {"x": 400, "y": 200};
    LwAPI.getMousePosition3D(pt2).then(function(pt3) {
      document.getElementById("output").value = "3D point: " + JSON.stringify(pt3, null,2);
    });
    

Example 2

    // Add context menu item
    LwAPI.addContextMenuItem('Get 3D point', function (pt2) {
      // Get mouse position in 3D
      LwAPI.getMousePosition3D(pt2).then(function (pt3) {
          console.log(pt3['x'] + '|' + pt3['y'] + '|' + pt3['z']);
      });
    });
    

Demo on technia.com

getTree

Get tree data for the given model or all models.

    LwAPI.getTree(url?:string) : Promise<Array< LwTreeData > | < LwTreeData  > >
    

• urlLocation of the model file, which can be a URL or absolute file path. This parameter is optional.

  If you leave out this parameter, getTree returns a Promise with an array of objects, one LwTreeData object for each model.

  If you specify a model with the url parameter, the returned value is a single LwTreeData object for that model.

Example 1

    // Object for storing tree data
    var trees = {};
    // Model file path
    var p = "file.jt";

    // Open the model
    LwAPI.openModel(p);

    // Wait for loading to finish
    LwAPI.registerOnReady(function(){
      LwAPI.getTree(p)
      .then(tree=>{
        // Get tree data
        trees[p] = tree;
      });
    });

    // Print item from tree object
    function TEST_printTreeData() {
      console.log(trees[p].root.bbox.min.x);
    }
    

Example 2

    LwAPI.getTree()
    .then(function(trees){
      for(var t=0; t < trees.length; t++) {
        console.log(trees[t].root.text);
      }
    });
    

Demo: Raw tree data (in a new window)

Demo: Custom tree (in a new window)

searchTreeItem

Search for an item with the given ID in tree data.

    searchTreeItem(id:string, selector?:LwItemSelector) : Promise<LwTreeDataItem>
    

• idItem ID of the format model:item, for example "1:42"

• LwItemSelectorItem selector. If the selected item does not match the type selector, searchTreeItem returns an error message. To accept any item, use an empty object {} as item selector.

  Any type: searchTreeItem(id, {})

  Assembly: searchTreeItem(id, { type: 'assembly' })

  Part: searchTreeItem(id, { type: 'part' })

  Model: searchTreeItem(id, { type: 'model' })

Result

searchTreeItem() returns an object of the LwTreeDataItem type.

    LwTreeDataItem = {
      id: string,
      text: string,
      type: string,
      children: LwTreeDataItem[],
      parent: LwTreeDataItem
    }
    

• idItem ID if the format model:item, for example "1:42".

• textTitle of the tree item.

• typeItem type: 'model', 'part' or 'assembly'

• childrenArray containing the children of the item.

• parentParent of the item.

Example

    var p = "Measurement.jt";
    var itemID = "1:25";
    /* In most cases, you wouldn't define a static item ID
    but retrieve it from tree data or from a selection event */

    LwAPI.registerOnReady(readyHandler);

    function readyHandler(){
      LwAPI.getTree(p)
      .then(function(tree){
        return LwAPI.searchTreeItem(itemID,{})
      })
      .then(function(treeItem){
        console.log(treeItem);
      })
      .catch(function(err){
        console.log(err);
      });
    }
    

Demo on technia.com

getTreeState

Get the current state of the model tree and store it in an object:

• Visibility of parts and assemblies
• Expanded and collapsed tree branches
• Item selection, if any

The model tree can be restored later to this state using setTreeState().

        getTreeState(url?:string) : Promise<LwTreeData>
      

• urlCapture the tree state for the model with the given URL only. Leave out the URL to capture the tree state for the entire scene.

Example

        // Get the current state of the entire model tree and store it in an object
        var tree1 = await LwAPI.getTreeState();
        // Get the tree state of particular models in the scene and store them in separate objects
        var tree2 = await LwAPI.getTreeState('assy1.jt');
        var tree3 = await LwAPI.getTreeState('part2.jt');
        

Demo on technia.com

See also Restore the model tree to a previous state

setTreeState

Set the model tree to a defined state which has been captured before using getTreeState().

• Visibility of parts and assemblies
• Expanded and collapsed tree branches
• Item selection

If the selection was empty when the tree state was stored, the current item selection is retained on setTreeState().

        setTreeState(tree:LwTreeData) : Promise<void>
      

• treeCaptured model tree state.

Example

        // Get the current state of the entire model tree and store it in an object
        var tree1 = await LwAPI.getTreeState();
        // Apply the capture model tree state
        LwAPI.setTreeState(tree1);
        

Demo on technia.com

See also Get the current state of the model tree

subnodeVisibility

Toggle the visibility of JT subnode items in the tree.

      subnodeVisibility(enable: boolean) : Promise<any>
      

• enableSet true to show the subnodes or false to hide them.

Example

        LwAPI.subnodeVisibility(false);
        

Demo on technia.com

getProperties

Get the properties of an item with the given ID.

    getProperties(id:string) : Promise<LwPropertiesData>
    

• idItem ID in the form model:item, for example "1:42".

Result

    LwPropertiesData = {
    Item: LwItem {
      modelId,
      modelItemId,
    }
    data: Array < LwProperty >
    }
    LwProperty = {
      name: string,
      value: string,
      visible: string
    }
    

• modelIdModel ID

• modelItemIdItem ID

• nameProperty key

• valueProperty value

• visibleVisibility: true (visible) or false (hidden)

Example

Show a list of all properties for the given item.

    LwAPI.getProperties(id)
    .then(function(props){
      var list = "";
      for(var i=0;i<props.data.length;i++){
        list += props.data[i]['name'] + "\t" + props.data[i]['value'] + "\n";
      }
      alert(list);
    });
    

Demo on technia.com

setNodeSelection

Toggle the selection of the given item, or deselect all items.

If the item given by the ID is already selected, setNodeSelection(id, true) will deselect the item.

To get a defined selection, deselect all items with before you select an item (example 1). Alternatively, you can read out the selection state from tree data (example 2).

    setNodeSelection(id:string, state:boolean) : Promise<number>
    

• idItem ID in the form model:item, for example "1:42".

• stateTo toggle the selection of the given item, set true. To deselect all, set false.

Example 1

Deselect all items, then select an item with a given ID.

    var id = "1:1134"

    // Deselect all items
    LwAPI.setNodeSelection("", true)
    .then(function(){
      // Select an item by ID
      return LwAPI.setNodeSelection(id, true);
    });
    

Example 2

Get the selection state of an item from tree data, then select the item if necessary.

    LwAPI.getTree("./test.jt")
    .then(function(tree){
      var myItem = tree.root.children[42];
      if (myItem.state.selected==false) LwAPI.setNodeSelection(myItem.id,true);
    });
    

Demo on technia.com

setNodeVisibility

Show or hide the given item.

     setNodeVisibility(id:string, state:boolean) : Promise<number>
     

• idItem ID in the form model:item, for example "1:321".

• stateTo show the item, set true. To hide the item, set false.

The result value is always 0.

Example

Show the item with the given ID.

     LwAPI.setNodeVisibility(id, true);
     

Demo on technia.com

isolate

Make the given item visible, and hide all other items.

     isolate(id:string) : Promise<number>
     

• idItem ID in the form model:item, for example "1:456".

The result value is always 0.

Example

Show the item with the given ID, and hide all others.

     LwAPI.isolate(id);
     

Demo on technia.com

showHideComments

Hide or show comments given by a list of identifiers.

    LwAPI.showHideComments(show:boolean, list:string[], reset:boolean = false) : Promise<number>
    

• showShow (true) or hide (false) the comments on the list.

• listList of identifiers of the comments to show or hide. An empty list [] stands for all comments.

• resetIf this parameter is false or not given, apply the given visibility to the comments on the list, and leave all others unchanged.
  If this parameter is true, apply the given visibility to the comments on the list, and the opposite visibility to all other comments.

Examples

Show the comments with identifiers "cmt1" and "cmt2", leave all others unchanged:

    LwAPI.showHideComments(true, ["cmt1", "cmt2"]);
    

Hide the comments with identifiers "cmt1" and "cmt2", leave all others unchanged:

    LwAPI.showHideComments(false, ["cmt1", "cmt2"]);
    

Show comments with identifiers "cmt1" and "cmt2", hide all others:

    LwAPI.showHideComments(true, ["cmt1", "cmt2"], true);
    

Hide comments with identifiers "cmt1" and "cmt2", show all others:

    LwAPI.showHideComments(false, ["cmt1", "cmt2"], true);
    

Show all comments:

    LwAPI.showHideComments(true, [], true);
    

Hide all comments:

    LwAPI.showHideComments(false, [], true);
    

setRotation

Set the rotation around a given axis.

     setRotation(rotation:LwRotation) : Promise<void>

     LwRotation = {
      enable: boolean,
      speed: number,
      axis: Array < number >
     }
     

• enableSet true to start rotation, or false to stop rotation

• speedSet the speed: 0 = slow, 1 = medium, 2 = fast

• axisRotation axis as array of 3 numbers [x,y,z]

Example

Rotate around the X-axis [1,0,0] at medium speed.

     LwAPI.setRotation({enable: true, speed: 1, axis: [1,0,0]});
     

Demo on technia.com

setView

Set the camera to the given standard view.

     setView(view:number) : Promise<void>
     

• viewOne of the following numbers:

  0 = Top

  1 = Bottom

  2 = Left

  3 = Right

  4 = Front

  5 = Back

  6 = Isometric

Examples

Set the camera to isometric view.

     LwAPI.setView(6);
     

Demo on technia.com

getModelViews

Get the model views attached to the root element, or the model views attached to the item defined by the ID.

    getModelViews(id?:string) : Promise<Array <LwModelViewData> >
    

• idLeave out the ID to get the model views attached to the root assembly.

  Set an ID to get the model views attached to the corresponding item, for example "1:25". Non-root model views are only available if UI_NONROOTMODELVIEWS or nonRootModelViews is true.

Result

The result of getModelViews() is an array of LwModelViewData objects.

    LwModelViewData: {
      index,
      name,
      id,
      assemblyId
    }
    

• indexIndex number of the model view (0, 1, 2, 3, ...)

• nameModel view name

• idModel view ID

• assemblyIdItem ID of the assembly to which the model view is attached

Example

Get the root model views.

    LwAPI.getModelViews()
    .then(function(viewlist){
      // Display message with all model view names
      var names = "List of model view names attached to root:\n";
      viewlist.forEach(function(view){
        names = names + view.name + ", ";
      });
      alert(names);
    });
    

    // Before you open the model, enable non-root model views:
    LwAPI.applyConfig( { nonRootModelViews: true } );

    // Open a model
    LwAPI.openModel('c:/path/model.jt');

    LwAPI.registerOnReady(function(){
      var itemId = "1:3864";
      LwAPI.getModelViews(itemId)
      .then(function(viewlist){
        // Display message with all model view names
        var names = "List of model view names attached to root:\n";
        viewlist.forEach(function(view){
          names = names + view.name + ", ";
        });
      });
    });
    

Demo on technia.com

setModelView

Set the given model view.

Use setModelView to set a PMI-based model view. To set standard views such as top, left, or isometric, see setView.

    setModelView(index: number, id?: string): Promise<boolean>
    

• indexIndex number of the model view as returned by getModelViews.

• idID of the item to which the model views are attached. If UI_NONROOTMODELVIEWS or nonRootModelViews is false, you can omit the ID.

The result value is always true.

The animated transition between model views is completed within the defined view transition time. We recommend waiting for the transition to finish before sending further API commands which may change the view. Otherwise, changes by subsequent commands may be superseded by setModelView.

Examples

Get all model views. Look for a model view with name "Top", and set this model view.

    LwAPI.getModelViews()
    .then(viewlist=>{
      viewlist.forEach(function(view){
        if (view.name.indexOf("TOP") != -1) {
          LwAPI.setModelView(view.index);
        })
      }
    });
    

Set a model view, then wait 2 seconds for the animation to finish before starting the next command

    // Set the transition time in seconds
    var trTime = 2;
    LwAPI.applyConfig({ sceneTransitionTime: trTime });

    // Set the model view, wait, then reframe on the given item
    LwAPI.setModelView(1)
    .then(function(){
      return delay(trTime * 1000);
    })
    .then(function(){
      return LwAPI.reframe("1:517");
    });

    function delay(t) {
      return new Promise(function(resolve) {
          setTimeout(resolve, t)
      });
    }
    

Demo on technia.com

reframe

Reframe the scene, optionally to a given item.

     reframe(id?:string) : Promise<number>
     

• idReframe to the item with the given ID. Leave out the ID to fit the entire scene into view.

The result value is always 0.

Example

Reframe the view to an item with ID "1:12".

     LwAPI.reframe("1:12");
     

Demo on technia.com

removeComment

Remove a comment with a given identifier.

      removeComment(text:string) : Promise<void>
      

• textIdentifier of the comment to remove.

Example

      // Remove a comment with a given identifier
      LwAPI.removeComment('Comment 2001');
      

See also:

• Set a comment image: setCommentImage
• Add a comment: addComment
• Remove all comments: removeAllComments

removeAllComments

Remove all comments.

        removeAllComments() : Promise<void>
        

Example

        // Remove all comments
        LwAPI.removeAllComments();
        

See also:

• Set a comment image: setCommentImage
• Add a comment: addComment
• Remove a comment with a given identifier: removeComment

setCommentImage

Set a custom image as the clickable symbol for comments.

Set the image once per session and before adding any comments. For best appearance, use an image with equal width and height.

    setCommentImage(image:string, width:number) : Promise<void>
    

• imagebase64-encoded image data in PNG format.

• widthWidth of the image in pixels. Use the native width of the image.

Examples

Set a custom image as clickable symbol for comments.

    const imgData = `data:image/png;base64,
    iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9i
    ZSBJbWFnZVJlYWR5ccllPAAAATBJREFUeNpiYEAD////NwDi+UB8/j8CnIeKGTDgAkBJASDu
    /08YgNQIwPQxwjQDqf1ADLZh25M9DIdenmA49+4SWJGRkB6DnbgFg5eMC0zfBSB2ZGRk/AAz
    YD2QCvjy+ytDxblmhnNvL2N1pZGwLkOHUS0DDys3iLsBaEAgI1CzA9R2hpyTFTg1IxsyxbwD
    xnVkAhLxMGcT0gwCIDUgtVAQDzLAAWzA0z0MxAIktQ4gAxRgJhMLkNQqMDFQCEAGPAAxVPmU
    iNYECkgoeAAy4ACIFa7gT7QBXtLw9HAAZMBCsCAwkRDjCpAapAS1kAmYGEAu2ADiTQXGLz5D
    QHJTEWkAlJAO4EzKoKiChTbIzyBnY0vK6JlpPRGZaT1yZsKWKx2gWfc+kqb7UDEHdPUAAQYA
    hY3vOIGj3csAAAAASUVORK5CYII=`;
    LwAPI.setCommentImage(imgData, 16);
    

Choose a PNG image from disk and use it as the comment symbol.

    <input id="chooser" type="file" onchange="ReadFile();" />

    <script>
    // Read a PNG image file from disk
    function ReadFile() {
      var filelist = document.getElementById("chooser").files;
      if (filelist.length > 0) {
        var reader = new FileReader();
        reader.onload = async function(e) {
          var data = e.target.result;
          var dims = await GetImageDims(data);

          // Set the image file as comment symbol
          LwAPI.setCommentImage(data,dims.width);
        }
        reader.readAsDataURL(filelist[0]);
      }
    }

    // Get width and height of the image
    function GetImageDims(data) {
      return new Promise(function (resolve, reject) {
        var img = new Image();
        img.onload = function() {
          return resolve({ width: img.width, height: img.height });
        };
        img.onerror = function(error) {
          return reject(error);
        };
        img.src = data;
      });
    }
    </script>
    

See also:

• Add a comment: addComment
• Remove a comment with a given identifier: removeComment
• Remove all comments: removeAllComments

setProjection

Set the projection mode of the camera.

     setProjection(state:number) : Promise<void>
     

• stateSet 0 for orthographic projection, or 1 for parallel projection.

Example

Set the camera to orthographic projection.

     LwAPI.setProjection(0);
     

Demo on technia.com

screenshot

Take a screenshot of the scene. The function returns base64-encoded image data, or prompts the user to save the screenshot to a file.

     screenshot(options?:ScreenshotOptions) : Promise<string>
     

     ScreenshotOptions: {
       promptSaveDialog?: boolean,
       type?: string,
       encoderOptions?: number
     }
     

• promptSaveDialogReturn image data as base64-encoded string (false, default) prompt the user to save the screenshot to a file (true). This parameter is optional.

• typeImage file format:

  "image/png"PNG (default) with transparent background

  "image/jpeg"JPEG with solid black background

  This parameter is optional.

• encoderOptionsQuality and compression of JPEG images.

  Set a number between 0.0 (smallest file size) and 1.0 (largest file size, highest JPEG quality).

  This parameter is optional and applies only to the JPEG file type. The default value is 0.95.

Examples

     LwAPI.screenshot();
     

     LwAPI.screenshot( { promptSaveDialog: true } );
     

     LwAPI.screenshot( { promptSaveDialog: true, format: "image/jpeg" } )
     .then(function(result){
       // do something with the result, for example
       document.getElementById("preview").src = result;
     });
     

      LwAPI.applyConfig( { screenshotPrefix: "capture_" } )
      .then(function(){
        return LwAPI.screenshot( { promptSaveDialog: true } );
      });
      

     var options = { format: "image/jpeg", encoderOptions: 0.4 };
     LwAPI.screenshot(options)
     .then(function(result){
       // Do something with the result, for example display the image in a placeholder:
       document.getElementById("preview").src = result;
     });
     

      var options = { format: "image/png" };
      LwAPI.screenshot(options)
      .then(function(result){
        var img = new Image();
        img.src = result;
        var wnd = window.open("");
        wnd.document.write(img.outerHTML);
      });
      

Demo on technia.com

setBoundingBoxVisibility

Show or hide the model bounding box.

     setBoundingBoxVisibility(state:boolean) : Promise<void>
     

• stateSet true to show the bounding box, or false to hide it.

Example

Show the model bounding box.

     LwAPI.setBoundingBoxVisibility(true);
     

Demo on technia.com

setPmiVisibility

Show or hide PMI elements.

     setPmiVisibility(state:boolean) : Promise<void>
     

• stateSet true to show PMI elements, or false to hide them.

Example

Show PMI elements.

     LwAPI.setPmiVisibility(true);
     

Demo on technia.com

registerOnReady

Register an event handler for the event when model data has been loaded completely.

The event occurs as openModel or openImageFromBase64 becomes resolved. The event also occurs immediately when registering the event handler if a model is already open.

On this event, all data has been loaded but visualization might not be complete. The client still takes some time to visualize the model. The time can vary depending on model size, client hardware, and browser.

    registerOnReady(callback:Function) : Promise<number>
    

• callbackExecute this function when the model has been loaded.

Example

Display an alert when a model has been loaded.

    LwAPI.registerOnReady(function() {
      alert("Finished loading.");
    });

    function load1(){
      LwAPI.openModel("C:\\model\\model.jt");
    }

    function load2(){
      LwAPI.openImageFromBase64("data:image/tiff;base64,SUkqAEwBAAAmoLYKkpuV/// . . . ");
    }
    

Demo on technia.com

unregisterOnReady

Unregister the callback function defined by registerOnReady.

    unregisterOnReady(listenerId:number) : Promise<void>
    

• listenerIdID of the event listener to unregister.

Example

Display an alert when the visualization of the model is complete. Then unregister the event listener.

    // Initialize the listener ID
    var readyListenerId = null;

    // Register the event listener
    LwAPI.registerOnReady(readyHandler)
    .then(function(listenerId){
      readyListenerId = listenerId;
    });

    // Event handler function:
    function readyHandler(){
      alert("Finished loading model.");
      // Unregister the event handler
      LwAPI.unregisterOnReady(readyListenerId)
      .then(function(){
        readyListenerId = null;
        return console.log("Listener has been unregistered");
      });
    }

    LwAPI.openModel("C:\\model\\model.jt");

    

Demo on technia.com

registerOnError

Register a callback function listening for error events. The callback function receives an error code and message.

        registerOnError(callback:Function(err)) : Promise<Number>

        err: { error:number, text:string}
      

• callbackExecute this function when an error has occured.

• errError object passed to the error handler function.

  err.numberError code: 0 = unknown error, 1 = error opening a model, 3 = viewer error, 4 = HTTP connection error

  err.textError message

Example

Display an alert when an error has occurred.

      LwAPI.registerOnError(function(err) {
        alert("Error code " + err.number + "\n" + err.text);
      });
      

Demo on technia.com

See also Unregister on error

unregisterOnError

Unregister a custom error handler function.

        unregisterOnError(id:number) : Promise<void>
      

• idID of the error event listener to unregister.

Example

Register and unregister a callback function for error events.

      // Identifier of the registered error callback function
      var errHndId = null;

      // Register the callback function
      function registerErr() {
        LwAPI.registerOnError(errCallback)
        .then(function(id){
          errHndId = id;
        });
      }

      // Unregister the callback function
      function unregisterErr() {
        LwAPI.unregisterOnError(errHndId);
      }

      // Callback function
      function errCallback(err) {
        alert("Error code " + err.number + "\n" + err.text);
      }
      

Demo on technia.com

See also Register on error

registerOnSelection

Register a callback function for a selection event in the tree or scene. The returned number is the ID of the listener which is required to unregister the callback.

    registerOnSelection(callback:Function) : Promise<number>
    

• callbackExecute this function on the selection event.

Selection event

    LwSelectionEvent {
      source: LwInteractionSource;
      item: LwItem;
      partItems: Array<LwItem>;
      faceGroupId: number;
      selected: boolean;
      position: Array<number>;

    }

    LwItem {
      modelId: number;
      modelItemId: number;
      type: internal
    }
    

• sourceSource of the selection event: 0 = user action in the viewing area, 1 = user action in the model tree, 2 = API

• itemSelected item

• modelId, modelItemIdModel and item ID

• type(internal)

• partItemsArray of items belonging to the selected assembly. Only available if the source of the selection event is the model tree or API.

• faceGroupIdFace group ID of the selection; -1 if unavailable

• selected(internal)

• positionWhen you click in the viewing area, this returns the coordinates [top,left] of the click point relative to the upper left corner of the browser window.

Example

When selecting an item, print the item ID and click position to the browser console.

    LwAPI.registerOnSelection(function(selectedItem){
      console.log("Selected item: " + selectedItem.item.modelId + ":" + selectedItem.item.modelItemId);
      console.log("Click point: " selectedItem.position[0] + ";" + selectedItem.position[1]);
    });
    

Demo on technia.com

unregisterOnSelection

Unregister a selection event listener.

    unregisterOnSelection(listenerId:number) : Promise<void>
    

• listenerIdID of the selection event listener to unregister.

Example

Register a selection listener. On selection of an item, display a message, then unregister the selection listener again.

    var modelpath = "C:\\model\\model.jt";
    var selectionListenerId = -1;

    LwAPI.openModel(modelpath);
    LwAPI.registerOnReady(function() {
      alert("Loading finished. Pick an item.");
    });
    LwAPI.registerOnSelection(selectedItem=>{
      alert("Hello, Goodbye");
      LwAPI.unregisterOnSelection(selectionListenerId);
    })
    .then(listenerId=>{
      selectionListenerId = listenerId;
    });
    

Demo on technia.com

registerOnVisibility

Register a callback function for the event of an item changing its visibility. The returned number is the id of the listener which is required to unregister the callback.

     registerOnVisibility(callback:Function) : Promise<number>
    

• callbackExecute this function on the visibility change event.

Visibility event

    LwVisibilityEvent {
      source: LwInteractionSource;
      show: boolean;
      items: Array<LwItem>;
      type: LwVisibilityItemType;
      incremental: boolean
    }
    

• sourceSource of the visibility event: 0 = user action in the viewing area, 1 = user action in the model tree, 2 = API

• showVisibility of affected items (true: visible, false: hidden)

• itemsArray of affected items

• typeItem type: 0 = Part, 1 = PMI

• incremental(internal)

Example

Register a visibility listener. When you change the visibility of an item, display a message, then unregister the visibility listener again.

    var modelpath = "./Measurement.jt";
    var visListenerId = -1;

    LwAPI.openModel(modelpath);
    LwAPI.registerOnReady(function() {
      alert("Loading finished. Hide or show an item.");
      LwAPI.registerOnVisibility(visItem=>{
        alert("Now switching visibility from " +
        visItem.show + " to " + !visItem.show);
        LwAPI.unregisterOnVisibility(visListenerId);
      }).then(listenerId=>{
        visListenerId = listenerId;
      });
    });

    

Demo on technia.com

unregisterOnVisibility

Unregister a visibility event listener.

    unregisterOnVisibility(listenerId:number) : Promise<void>
    

• listenerIdID of the visibility event listener to unregister.

Example

Register a visibility listener. When you change the visibility of an item, display a message, then unregister the visibility listener again.

    var modelpath = "./Measurement.jt";
    var visListenerId = -1;

    LwAPI.openModel(modelpath);
    LwAPI.registerOnReady(function() {
    alert("Loading finished. Hide or show an item.");
    LwAPI.registerOnVisibility(visItem=>{
      alert("Now switching visibility from " +
      visItem.show + " to " + !visItem.show);
      LwAPI.unregisterOnVisibility(visListenerId);
      }).then(listenerId=>{
        visListenerId = listenerId;
      });
    });
    

Demo on technia.com

triggerResizeEvent

Manually force the viewer element to resize.

    triggerResizeEvent() : Promise<void>
    

Example

    LwAPI.triggerResizeEvent();
    

(No demo available)

toggleMeasurementMode

Enable or disable the measurement tool.

      toggleMeasurementMode() : Promise<void>
      

Example

      LwAPI.toggleMeasurementMode();
      

(No demo available)

getCamera

This function gets the current camera view. The camera view can stored in a variable and applied again later with setCamera.

      getCamera() : Promise<LwCameraSnapshot>
      

Example

       // Declare a variable for the camera view
       var camstore;

       // Get the camera view
       LwAPI.getCamera()
       .then(function(cap){
         camstore = cap;
         // Set a different view
         return LwAPI.setView(1);
       })
       .then(function(){
         // Wait 2 seconds
         return new Promise(function(resolve) {
           setTimeout(resolve, 2000)
         });
       })
       .then(function(){
         // Restore the camera view
         LwAPI.setCamera(camstore);
       });

       

Demo on technia.com

See also getCaptureWithPoints()

setCamera

This function sets the camera to a defined view which has been captured using getCamera or getCaptureWithPoints.

      setCamera(camera: LwCameraSnapshot) : Promise<void>
      

• cameraLwCameraSnapshot object created using getCaptureWithPoints

Example

       // Declare a variable for the capture
       var capture;

       // Get the capture
       LwAPI.getCaptureWithPoints()
       .then(function(cap){
         capture = cap;
         // Set a different view
         return LwAPI.setView(1);
       })
       .then(function(){
         // Wait 2 seconds
         return new Promise(function(resolve) {
           setTimeout(resolve, 2000)
         });
       })
       .then(function(){
         // Restore the captured view
         LwAPI.setCamera(capture.camera);
       });
       

Example

        // Declare a variable for the camera view
        var camstore;

        // Get the camera view
        LwAPI.getCamera()
        .then(function(cap){
          camstore = cap;
          // Set a different view
          return LwAPI.setView(1);
        })
        .then(function(){
          // Wait 2 seconds
          return new Promise(function(resolve) {
            setTimeout(resolve, 2000)
          });
        })
        .then(function(){
          // Restore the camera view
          LwAPI.setCamera(camstore);
        });
       

Demo: getCamera, setCamera (in a new window)

Demo: getCaptureWithPoints, setCamera (in a new window)

addPoints

Add points to the viewing area.

Before you can add points, open or add at least one model.

      addPoints(positions: Array<number>, r: number, g: number, b: number, radius: number, ids: Array<string>, modelUrl?: string)
      

• positionsArray of coordinates of the points to add.

• r, g, bColor of the points to add. Specify the RGB color code as a list of three numbers 0.0 to 1.0.

• radiusPoint radius [mm].

• idsArray of IDs. Every point must have an ID. The ID must not contain a colon :

• urlURL of the model to which the points are applied. This parameter is optional. If you omit this parameter, the points are applied to the model added last to the viewing area.

A point can be selected interactively in the viewing area or by its ID using setNodeSelection. Registered selection event listeners also apply when selecting points.

Example

Add a single point to the scene.

• Position: 0,10,10
• Color RGB 1,1,0 = yellow
• Radius 1.2
• ID "p001"

      LwAPI.openModel("c:/path/to/model.jt");
      LwAPI.registerOnReady(function(){
        LwAPI.addPoints([0,10,10], 1, 1, 0, 1.2, "p001");
      });
      

Example

Add three points to the scene.

      LwAPI.openModel("c:/path/to/model.jt");

      var coords = [ 10, 10, 10,
                      0,  0,  0,
                     -5, -5, -5 ];

      var ids = ['p1','p2','p3'];

      var color = [1,0,0];

      var radius = 1.5;

      LwAPI.registerOnReady(function(){
        LwAPI.addPoints(coords, color[0], color[1], color[2], radius, ids]);
      });
      

Example

Add two points to model_1.jt.

      var model_1 = "c:/path/to/model_1.jt";
      var model_2 = "c:/path/to/model_2.jt";

      LwAPI.addModel(model_1);
      LwAPI.addModel(model_2);

      LwAPI.registerOnReady(function(){
        LwAPI.addPoints([0,2,2,-5,0,2], 1, 1, 0, 1.2, ["p1","p2"], model_1);
      });
      

Demo on technia.com

getCaptureWithPoints

This function returns an object defining the current camera position. In addition, the object provides a screenshot as base64-encoded string, and an array of points that were added with LwAPI.addPoints.

     getCaptureWithPoints() : Promise<LwCaptureDetails>
     

Result

     LwCaptureDetails {
      image: string,
      camera: LwCameraSnapshot,
      points: [
        {
          id: string,
          pos: THREE.Vector2 {
            x : number,
            y : number
          }
        }
      ]
     }
     

• imageScreenshot image in PNG format as base64-encoded string.

• LwCameraSnapshotObject defining the camera position. To restore the camera position, supply this object as parameter to setCamera.

• points[]Array of all points added to the scene using addPoints().

• idID of the point

• xX coordinate of the point

• yY coordinate of the point

Example

      // Add some points
      LwAPI.addPoints([10, 10, 10, 10, 0, -1, 10, 34.1, -15.7], 0, 255, 255, 1, ["p1", "p2", "p3"]);

      // Show an alert with the IDs of the points
      function showPointIDs(){
        LwAPI.getCaptureWithPoints()
        .then(function(capture){
          var str = "Point IDs are ";
          capture.points.forEach(function(p){
            str = str + p.id + " ";
          });
          window.alert(str);
        });
      }

      // Display the screenshot in an image element with ID "thumbnail"
      function displayScreenshotFromCapture(){
        LwAPI.getCaptureWithPoints()
        .then(function(capture){
          if capture.hasOwnProperty("image"){
            document.getElementById("thumbnail").setAttribute("src", capture.image);
          }
        });
      }

      // Set the camera to top view and rever to the view defined in the capture.
      function viewTopAndReturn(){
        LwAPI.getCaptureWithPoints()
        .then(function(capture){
          LwAPI.setView(1);
          return capture;
        })
        .then(function(capture){
          delay(2000)
          return capture;
        })
        .then(function(capture){
          LwAPI.setCamera(capture.camera);
        });
      }


      .then(function(capture){

        // Display the screenshot in a new window
        window.open(capture.image);
        // Set the camera to top view ...
        LwAPI.setView(1);
        return capture;
      })
      .then(function(capture){
        // ... and revert to the defined camera view
        LwAPI.setCamera(capture.camera);
      });
      

Demo on technia.com

setColor

Apply a color and transparency to a part or assembly.

      setColor(id:string, [r: number, g: number, b: number, a: number]) : Promise<void>
      

• idItem ID of the format model:item, for example "1:23".

• r, g, b, aRGB color and transparency value. Specify the RGBA code as a list of four numbers 0 to 255.

Examples

Make the item with "1:1" red and fully opaque.

        setColor("1:1",[255,0,0,255]);
        

Make the item with ID "1:23" azure blue with 50% transparency.

        LwAPI.setColor("1:23",[0,127,255,255]);
        

Demo on technia.com

resetColor

Reset the color of a given part, assembly, or the entire model.

      resetColor(id?:string) : Promise<void>
      

• idItem ID of the format model:item, for example "1:42". Omit this parameter to reset the color of all items.

Examples

Reset the color of item "1:23"

        LwAPI.resetColor("1:23");
        

Reset the colors of all items.

        LwAPI.resetColor();
        

Demo on technia.com

registerOnSceneChange

Register an event handler for the event when the camera changes (rotate, zoom, pan, change the projection mode, resize the browser window).

      registerOnSceneChange(callback:Function) : Promise<number>
      

• callbackExecute this function when the model has been loaded.

Example

        LwAPI.registerOnSceneChange(function(){
          var now = new Date(Date.now()).toISOString();
          console.log(now +  " : Camera view has changed")
        });
        

Demo on technia.com

unregisterOnSceneChange

Unregister the callback function defined by registerOnSceneChange.

        unregisterOnSceneChange(listenerId:Number) : Promise<void>
        

• listenerIdID of the event listener to unregister.

Example

          var sceneChangeListenerId = null;

          LwAPI.registerOnSceneChange(function(){
            var now = new Date(Date.now()).toISOString();
            console.log(now +  " : Camera view has changed")
          })
          .then(function(listenerId){
            // Keep note of the ID if you want to unregister the event listener
            sceneChangeListenerId = listenerId;
          });
          

Demo on technia.com

openImageFromBase64

Display a TIFF image given as base64 string.

• Images and 3D models cannot be displayed together in the viewing area. The image is closed when you open or add another file.

• This function is intended for TIFF images with 1-bit color depth (black and white) and CCITT Group 4 compression.

  In multi-page TIFF files, only the first page is displayed.

     openImageFromBase64(data:string) : Promise<LwResult>
     

• dataTIFF image data as base64-encoded string.

Examples

     var data =
     "SUkqAEwBAAAmoLYKkpuV///y3DIwRg/LdOpV5Uf///////Bf/wf//////y3DKOPxEf//////" +
     "/////////////////////////////////////////////////zsTA8NT5WxP////+d4zhGD/" +
     "weVeVH//////////yOv////////////BDjj/xEf////////////8pa/0/8MPwAQAQCao7E0T" +
     "OIkl8N/7f+3/t/7f+3/t///t///lW2////b///xf/v////3///v//8igL/+P//////1//+v/" +
     "///1/r//+l//+l/lW//0v///S/xS/0v9L/S/0v9L/CX+EF/1/j//////////////////////" +
     "///h4/////////////////////////////////////gAgAgmqX//////////////////////" +
     "/////+MAEAERAP4ABAABAAAAAAAAAAABAwABAAAALAEAAAEBAwABAAAALAEAAAIBAwABAAAA" +
     "AQAAAAMBAwABAAAABAAAAAYBAwABAAAAAAAAAA0BAgAiAAAARgIAABEBBAADAAAAOgIAABIB" +
     "AwABAAAAAQAAABUBAwABAAAAAQAAABYBAwABAAAAgAAAABcBBAADAAAALgIAABoBBQABAAAA" +
     "HgIAABsBBQABAAAAJgIAABwBAwABAAAAAQAAACgBAwABAAAAAgAAAFMBAwABAAAAAQAAAAAA" +
     "AAAsAQAAAQAAACwBAAABAAAAlQAAAJQAAAAbAAAACAAAAJ0AAAAxAQAAQzpcVXNlcnNcamhh" +
     "cnRlclxEZXNrdG9wXHRlc3QudGlmAA==";

     LwAPI.openImageFromBase64(data).then(function(result){
      if(result.error !== null) alert(result.msg);
     });
     

      <input id="chooser" type="file" onchange="ReadTiffFromFile();" />
      <script>
      function ReadTiffFromFile() {
        var filelist = document.getElementById("chooser").files;
        if (filelist.length > 0) {
          var reader = new FileReader();
          reader.onload = function(e) {
            var data = e.target.result;
            LwAPI.openImageFromBase64(data)
            .then(function(result){
              if(result.error !== null) alert(result.msg);
            });
          }
          reader.readAsDataURL(filelist[0]);
        }
      }
      </script>
      

Demo on technia.com

highlightImage

Highlight a square region of the displayed image.

Highlighting is intended for TIFF images with 1-bit color depth (black and white) and CCITT Group 4 compression. Highlighting is not supported for other sub-formats.

The highlighting color is defined in the configuration by UI_HIGHLIGHTCOLOR or service.liteweb.ui.highlightColor.

     highlightImage(x:Number, y:Number, d:Number) : Promise<void>
     

• xX coordinate [pixel] of the center of the square.

• yY coordinate [pixel] of the center of the square.

• dSide length [pixel] of the square.

Example

     LwAPI.highlightImage(600, 300, 20);
     

Demo on technia.com

fitInImage

Zoom to the given square region of an image.

     fitInImage(x:Number, y:Number, d:Number) : Promise<void>
     

• xX coordinate [pixel] of the center of the square zoom region.

• yY coordinate [pixel] of the center of the square zoom region.

• dSide length [pixel] of the square zoom region.

Example

     LwAPI.fitInImage(50, 50, 20);
     

Demo on technia.com

highlightByOrigin

Highlight a given PMI item defined by its text-origin property.

The numbers in the textOrigin property do not need to match exactly. Rounding errors are tolerated.

     highlightByOrigin(x:Number, y:Number, z:Number) : Promise<void>
     

• xX position [millimeters] of the text origin.

• yY position [millimeters] of the text origin.

• zZ position [millimeters] of the text origin.

Example

     LwAPI.highlightByOrigin(12.5, 30.0, 19.8);
     

Demo on technia.com

fitInByOrigin

Fit a given PMI item to the viewing area. The PMI item is given by its textOrigin property.

The numbers in the textOrigin property do not need to match exactly. Rounding errors are tolerated.

     fitInByOrigin(x:Number, y:Number, z:Number) : Promise<void>
     

• xX position [millimeters] of the text origin.

• yY position [millimeters] of the text origin.

• zZ position [millimeters] of the text origin.

Example

     LwAPI.fitInByOrigin(138.49, 1081.69, -411.04);
     

Demo on technia.com