Laser Robot Vacuum Map UI API

This topic describes the APIs used to implement the laser map UI on top of the Laser Robot Vacuum SDK.

TYRCTLaserMap

The map component of a laser robot vacuum.

Example

<TYRCTLaserMap {...props} />

Properties

The following color properties follow the hexadecimal Alpha, Red, Green, and Blue (ARGB) format. The first 2 bits represent a transparency level and the last 6 bits represent a color. For example, #ff000000 represents black with a transparency level of 1.

Field name	Type	Description	Default value
width	number	The width of the map component.	/
height	number	The height of the map component.	/
minZoomScale	number	The minimum magnification of the map.	1.0
maxZoomScale	number	The maximum magnification of the map.	/
mapData	Object	The details of the map.	/
factorInfo	Object	The distance displayed in meters.	/
pathWidth	number	The width of the path.	/
pathColor	string	The color of the path.	/
pathData	string	The details of the path.	/
planPathWidth	number	The width of the planned path.	/
planPathColor	string	The color of the planned path.	/
planPathData	string	The details of the planned path.	/
markerIcon	string	The icon of the robot vacuum.	/
pilePosition	Object	The details of the charging station.	/
pileIcon	string	The icon of the charging station.	/
edit	Boolean	The edit mode.	false
appointIcon	string	The icon of the “Point and Go” feature that allows users can point in the map exactly where to clean.	/
minAreaWidth	number	The minimum side length of a cleaning area or a no-go area.	/
isRotate	Boolean	Specifies whether a no-go area supports rotation.	/
scale	Object	The scale by which the map is zoomed to a point.	/
hasTypeMap	Boolean	Specifies whether to use a new drawing protocol.	false
areaInfoList	string	The details of a virtual area.	/
splitColor	string	The color of a divider.	/

width

The width of the map component.

height

The height of the map component.

minZoomScale

The minimum magnification of the map. Default value: 1.0.

maxZoomScale

The maximum magnification of the map.

mapData

The details of the map.

The property labels in an area are classified into the following types:

• Non-foldable: Property labels are displayed.

• Foldable: Property labels can be hidden from an area. Users can tap the area to show or hide the property labels.

If non-foldable property labels are used, the optional properties in roomInfo are not required. Otherwise, these properties are required.

Example

{
  // The width of the map.
  width: 255.0,
  // The height of the map.
  height: 255.0,
  // A pixel on the map. Two hexadecimal numbers are used to represent one pixel.
  data: 'f3f3f3f3f3f3f3f3f3f0f0f0f0f0......f3f3f3f3',
  // The coordinates of the origin on the map.
  origin: {
    x: 0,
    y: 0
  },
  // The color data of an area in the JSON format.
  roomIdColorMap: "{f3:'#88001122',f0:'#88334455'}",
  // The details of an area, including the data of each pixel.
  roomInfo: {
    // Each key corresponds to a pixel in `data`.
    f3: {
      // The cleaning sequence.
      defaultOrder: 0,
      // The details in the JSON format.
      extend:"{roomId:3,normalColor:'#FF218BFC',highlightColor:'#FF007AFC',name:'room1',fan:'0',order:'0',water_level:'0',sweep_count:'1',mop_count:'0',sweep_forbiden:'0',mop_forbidden:'0',y_mode:'255',vertexData:[]}",
      // The color of a highlighted area that is selected when areas are merged or split or when the cleaning sequence is configured.
      highlightColor: '#ff007afc',
      // Specifies whether to hide property labels from an area. It is optional and applies to foldable property labels.
      isFoldable?: false,
      // The name of an area. It is optional and applies to foldable property labels.
      name?: 'room1',
      // The color of an area.
      normalColor: '#ff218bfc',
      // The text color of an area name. It is optional and applies to foldable property labels.
      roomNameTextColor?: '#ff000000',
      // The properties of an area, including the water volume icon, suction icon, and cleaning times text.
      roomProperty: [
        {
          0: {
            propertyType: 'uri',
            value: 'https://images.tuyacn.com/app/robot/png/Water_close.png'
          },
          1: {
            propertyType: 'uri',
            value: 'https://images.tuyacn.com/app/robot/png/Fan_1.png'
          },
          2: {
            propertyType: 'text',
            value: '×1'
          }
        }
      ],
      // The background color of a property label in an area. It is optional and applies to foldable property labels.
      roomPropertyBgColor?: "#80225344",
      // Specifies whether property labels are foldable in an area. It is optional and applies to foldable property labels.
      roomPropertyStyle?: "foldable",
  		// The text color of a property label in an area. It is optional and applies to foldable property labels.
      roomPropertyTextColor?: "#FFFFFFFF"
    }
  },
	// The details of a virtual object in the JSON format.
	materialObject: "{}",
	// The total number of pixels in the format of width × height.
	pointCount: 65025,
	// The details of a carpet.
	textureObject: "[{url:'https://images.tuyacn.com/app/robot/png/carpet1.png',pointList:[],width:255,height:255}]"
}

factorInfo

The distance displayed in meters.

Example

{
  factor: 0.05, // The scale.
  font: 10, // The font size.
  color: '#ff000000' // The font color.
}

pathWidth

The width of the path.

pathColor

The color of the path.

pathData

The details of the path in the JSON format.

Path points are classified into three types: common, transitions, and charge.

The last point on the path represents the robot vacuum and it is also the current point. Besides the coordinates and type, this point includes additional information.

Example

[
  {
    x: 1,
    y: 1,
    type: 'transitions'
  },
  {
    x: 1,
    y: 2,
    type: 'common'
  },
  {
    x: 1,
    y: 3,
    type: 'charge'
  },
  {
    // The coordinates.
    x: 1,
    y: 2,
    // The type.
    type: 'transitions',
    // The color of the path point type.
    dataColors: {common: '#ffffffff', charge: '#00000000', transitions: '#ffffd700'},
    // The color of a breathing circle.
    bgColor: "#7f000000",
    // The blinking frequency of a breathing circle.
    duration: 2,
    // Specifies whether to hide a breathing circle.
    hidden: false,
    // The maximum radius of a breathing circle in the blinking status.
    rate: 2
  },
]

planPathWidth

The width of the planned path.

planPathColor

The color of the planned path.

planPathData

The details of the planned path, similar to pathData.

markerIcon

The icon of the robot vacuum.

Example

http://xxxxxxxxxx

pilePosition

The details of the charging station.

When users edit a no-go area or a virtual wall, an alert circle appears to indicate the shortest distance between the no-go area or virtual wall and the charging station. This way, the no-go area or virtual wall will not overlap the charging station. Otherwise, the robot vacuum cannot return to the charging station.

Example

{
  // The coordinates.
  x: 10,
  y: 10,
  // Specifies whether to hide an alert circle.
  hidden: false,
  // The radius of an alert circle.
  radius: 30,
  // The frame color of an alert circle.
  borderColor: '#ff333333',
  // The color of an alert circle.
  bgColor: '#ff333333'
}

pileIcon

The icon of the charging station.

Example

http://xxxxxxxxxx

edit

Specifies whether the map is editable.

For example, when users plan or select a cleaning area, or edit a virtual area, they need to select or edit a cleaning area, a no-go area, or a virtual wall. In this case, set edit to true.

appointIcon

The icon of the “Point and Go” feature.

Example

http://xxxxxxxxxx

minAreaWidth

The minimum side length of the cleaning area or no-go area.

isRotate

Specifies whether a no-go area supports rotation.

scale

The scale by which the map is zoomed to a point. It applies to a special vision map.

Example

{
  // Default value: `1.0`.
  scale: 1,
  // Optional.
  x?: 1,
  // Optional.
  y?: 1
}

hasTypeMap

Specifies whether to use a new drawing protocol.

areaInfoList

The details of a virtual area in the JSON format.

Virtual areas are classified into five types:

• No-go area for sweeping and mopping
• No-go area for mopping
• Virtual wall
• Cleaning area
• The spot to be cleaned with the “Point and Go” feature.

The properties can vary, depending on different virtual area types. They are distinguished by type, as listed in the following table.

Virtual area name	Value of type
No-go area for sweeping and mopping	3
No-go area for mopping	3
Virtual wall	4
Cleaning area	2
The spot to be cleaned with the “Point and Go” feature.	1

The no-go area for sweeping and mopping has the same value of type as the no-go area for mopping. Both types are distinguished from each other by forbidType in extend.

Example

[
  // The no-go area for sweeping and mopping.
  {
    box: {
      // The frame background color of the no-go area.
      bgColor: '#7ff81c1c',
      // The frame color of the no-go area.
      borderColor: '#ffffffff'
    },
    content: {
      // The name of the no-go area.
      text: '',
      // The text color of the name.
      textColor: '#ff000000',
      // The font size of the name.
      textSize: 12,
      // Specifies whether the area can be renamed.
      renameEnable: false
    },
    // The additional information.
    extend: "{forbidType:'sweep'}",
    // The unique identifier.
    id: '1',
    // The coordinates.
    points: [
      {x: 126, y: 165},
      {x: 164, y: 202},
      {x: 129, y: 238},
      {x: 91, y: 201}
    ],
    // The type.
    type: 3,
    viewType: ''
  },
  // The no-go area for mopping.
  {
    box: {
      bgColor: '#7f4685ff',
      borderColor: '#ffffffff'
    },
    content: {
      text: '',
      textColor: '#ff000000',
      textSize: 12,
      renameEnable: false
    },
    extend: "{forbidType:'mop'}",
    id: '2',
    points: [
      {x: -20.9, y: 16},
      {x: 54.7, y: 17.3},
      {x: 53.6, y: 81.4},
      {x: -22, y: 80.1}
    ],
    type: 3,
    viewType: ''
  },
  // The virtual wall.
  {
    // The additional information, such as `isWall:true`.
    extend: "{forbidType:'sweep',isWall:true}",
    id: '3',
  	line: {
      // The color of the line segment.
  		bgColor: '#fff81c1c',
      // The width of the line segment.
  		lineWidth: 2
  	},
    points: [
      {x: 182, y: 104},
      {x: 298, y: 103}
    ],
    type: 4,
    viewType: ''
  },
	// The cleaning area.
	{
    box: {
      bgColor: '#7f4685ff',
      borderColor: '#ffffffff'
    },
    content: {
      text: '',
      textColor: '#ffffffff',
      textSize: 12,
      renameEnable: false
    },
    // No additional information is required for the cleaning area.
    extend: '{}',
    id: '4',
    points: [
      {x: 102, y: 98},
      {x: 145, y: 98},
      {x: 145, y: 142},
      {x: 102, y: 142}
    ],
    type: 2,
    viewType: ''
  },
  // The "Point and Go" feature.
  {
    id: '5',
    points: [{x: 125, y: 125}],
    type: 1
  }
]

splitColor

The color of a divider on the map.

Component events

Field name	Description
onLaserMapPoints	The callback for real-time virtual area data.
onMapId	The callback for mapId is executed when a map component instance is created.
onLongPressInAreaView	The callback that is executed when a no-go area or a cleaning area is pressed and held to be renamed.
onClickSplitArea	The callback that is executed when an area is tapped for cleaning.
onClickRoom	The callback that is executed when an area is tapped.

onLaserMapPoints

The callback for real-time virtual area data.

This callback event is triggered when a no-go area or a virtual wall is moved. This callback can be used to process the distance between the no-go area or virtual wall and the robot vacuum or charging station. This avoids certain problems that might arise if the virtual area overlaps the robot vacuum or charging station.

Parameters

Parameter	Description
type	The type of virtual area. Valid values: 3: no-go area 4: virtual wall
data	The coordinates.

Sample of parameters

// The virtual wall.
{
  type: 4,
  data: [[{x: 119, y: 58}, {x: 235, y: 57}]]
}

// The no-go area.
{
  type: 3,
  data: [[
    {x: 225, y: 117},
    {x: 274, y: 201},
    {x: 213, y: 238},
    {x: 164, y: 154}
  ]]
}

Example

const onLaserMapPointsFn = (data) => {
  // do something
}

<TYRCTLaserMap onLaserMapPoints={onLaserMapPointsFn} />

onMapId

The callback for the map ID (mapId) when a map component instance is created.

After the component TYRCTLaserMap is called, this event will be called when the native instance of the map component is created.

The parameter mapId represents the unique identifier of the map instance.

Sample of parameters

{
  mapId: 'laser_1653444189948'
}

Example

const onMapIdFn = (data) => {
  // do something
}

<TYRCTLaserMap onMapId={onMapIdFn} />

onLongPressInAreaView

The callback that is executed when a no-go area or cleaning area is pressed and held to be renamed.

In the map editing state, this event will be triggered when the name of a no-go area or cleaning area is pressed and held. This way, the area can be renamed.

The parameter specifies the virtual area ID. For more information about a virtual area, see areaInfoList in Component properties.

Sample of parameters

{
  id: '1'
}

Example

const onLongPressInAreaViewFn = (data) => {
  // do something
}

<TYRCTLaserMap onLongPressInAreaView={onLongPressInAreaViewFn} />

onClickSplitArea

The callback that is executed when an area is tapped to be selected for cleaning, area renaming, or area customization.

After an area is selected for cleaning, this callback event will be triggered when the area is tapped.

The parameters id and extend are involved. For more information about area properties, see mapData > roomInfo in Component properties.

Sample of parameters

{
  type: 4,
  data: [{
    pixel: '0c',
    extend: "{roomId:3,normalColor:'#FF218BFC',highlightColor:'#FF007AFC',name:'room3',fan:'0',order:'0',water_level:'0',sweep_count:'1',mop_count:'0',sweep_forbiden:'0',mop_forbidden:'0',y_mode:'255',vertexData:[]}"
  }]
}

Example

const onClickSplitAreaFn = (data) => {
  // do something
}

<TYRCTLaserMap onClickSplitArea={onClickSplitAreaFn} />

onClickRoom

The callback that is executed when an area is tapped.

This event will be triggered when an area is tapped. This callback is used to show and hide property labels of the area.

The parameters isFoldable and roomId are involved. The parameter roomId specifies the area ID. For more information about area properties, see mapData > roomInfo in Component properties.

Sample of parameters

{
  isFoldable: true,
  roomId: '1f'
}

Example

const onClickRoomFn = (data) => {
  // do something
}

<TYRCTLaserMap onClickRoom={onClickRoomFn} />

TYRCTLaserManager

The map component API of a laser robot vacuum.

TYRCTLaserManager is an earlier API and TYRCTTypeMapManager is the latest API (rnVersion is 3.25 or later).

Method name	Description
setLaserMapState	Changes the map state.
refreshStateView	Redraws the map.
addLaserMapRectWithType	Adds a virtual area to the map.
getLaserMapPoints	Returns coordinates in a virtual area.

setLaserMapState

Changes the map state. The map state needs to be changed along with the robot vacuum status and working mode.

Parameters

Parameter	Type	Description
state	number	The map state. Valid values: 0: normal 1: “Point and Go” 2: select and clean an area 3: edit a no-go area 4: edit a virtual wall 5: edit an area 6: select an area
callback	function	The callback.

Example

import { NativeModules } from 'react-native';
const TYLaserManager = NativeModules.TYRCTLaserManager;

const callback = () => {
  // do something
};
TYLaserManager.setLaserMapState(0, callback); // The map is changed to the normal state.

refreshStateView

Redraws the map.

import { NativeModules } from 'react-native';
const TYLaserManager = NativeModules.TYRCTLaserManager;

TYLaserManager.refreshStateView()
	.then(() => {})
	.catch(err => {})

addLaserMapRectWithType

Adds a virtual area to the map.

Parameters

Parameter	Type	Description
type	number	The type of virtual area. Valid values: 1: the “Point and Go” type 2: cleaning area 3: no-go area 4: virtual wall

Example

import { NativeModules } from 'react-native';
const TYLaserManager = NativeModules.TYRCTLaserManager;

TYLaserManager.addLaserMapRectWithType(3); // Adds a no-go area to the map.

getLaserMapPoints

Returns coordinates in a virtual area.

Parameters

Parameter	Type	Description
callback	function	The callback.

Example

import { NativeModules } from 'react-native';
const TYLaserManager = NativeModules.TYRCTLaserManager;

const callback = (data) => {
  // do something
}
TYLaserManager.getLaserMapPoints(callback);

TYRCTTypeMapManager

Method name	Description
refreshStateViewWithMapId	Redraws the map.
setMapStateAndEdit	Changes the map state and edits the map.
addArea	Adds a virtual area to the map.
getMapPointsInfo	Returns details of a virtual area.
removeAreaList	Removes a list of virtual areas.
updateAreaInfo	Updates details of a virtual area.
getMapSplitPointWithMapId	Returns information required for area editing.
setMapSplitTypeWithMapId	Sets the area state when it is edited.

refreshStateViewWithMapId

Redraws the map specified by map ID.

The return value of this method is Promise.

Parameters

Parameter	Type	Description
mapId	string	The map ID.

Example

import { NativeModules } from 'react-native';
const TYRCTTypeMapManager = NativeModules.TYRCTTypeMapManager;

TYRCTTypeMapManager.refreshStateViewWithMapId('laser_1653444189948')
	.then(() => {})
	.catch(err => {})

setMapStateAndEdit

Changes the map state and edits the map.

Parameters

Parameter	Type	Description
mapId	string	The map ID.
state	number	The map state. Valid values: 0: normal 1: the “Point and Go” type 2: cleaning area 3: no-go area 4: virtual wall 5: edit an area 6: select an area
edit	Boolean	Specifies whether the map is in the edit state. Valid values: true: yes false: no
callback	function	The callback.

Example

import { NativeModules } from 'react-native';
const TYRCTTypeMapManager = NativeModules.TYRCTTypeMapManager;

const callback = () => {
  // do something
}
TYRCTTypeMapManager.setMapStateAndEdit('laser_1653444189948', 0, false, callback);

addArea

Adds a virtual area to the map. Only one area can be added in each call.

Parameters

Parameter	Type	Description
mapId	string	The map ID.
areaInfo	string	The details of the virtual area.
success	function	The success callback.
failure	function	The failure callback.

The details of a virtual area are in the JSON format. A virtual area can be a no-go area, a virtual wall, or a cleaning area. For more information, see areaInfoList in Component properties.

No-go area

{
  id: "1",
  box: {
    bgColor: "#7ff81c1c",
    borderColor: "#ffffffff",
  },
  content: {
    text: "",
    textColor: "#ff000000",
    textSize: 10,
    renameEnable: false,
  },
  type: 3,
  viewType: "",
  points: [
    {
      x: 158,
      y: 148,
    },
    {
      x: 178,
      y: 148,
    },
    {
      x: 178,
      y: 168,
    },
    {
      x: 158,
      y: 168,
    },
  ],
  extend: '{"forbidType":"sweep"}',
}

Virtual wall

{
  id: "2",
  line: {
    bgColor: "#fff81c1c",
    lineWidth: 2,
  },
  type: 4,
  viewType: "",
  points: [
    {
      x: 138,
      y: 128,
    },
    {
      x: 198,
      y: 128,
    },
  ],
  extend: '{"forbidType":"sweep","isWall":true}',
}

Cleaning area

{
  id: "3",
  box: {
    bgColor: "#7f4685ff",
    borderColor: "#ffffffff",
  },
  content: {
    text: "",
    textColor: "#ffffffff",
    textSize: 10,
    renameEnable: false,
  },
  type: 2,
  viewType: "",
  points: [
    {
      x: 138,
      y: 128,
    },
    {
      x: 198,
      y: 128,
    },
    {
      x: 198,
      y: 188,
    },
    {
      x: 138,
      y: 188,
    },
  ],
  extend: "{}",
}

Example

import { NativeModules } from 'react-native';
const TYRCTTypeMapManager = NativeModules.TYRCTTypeMapManager;

// The details of the virtual area to be added.
const areaInfo = {
  id: "4",
  line: {
    bgColor: "#fff81c1c",
    lineWidth: 2,
  },
  type: 4,
  viewType: "",
  points: [
    {
      x: 138,
      y: 128,
    },
    {
      x: 198,
      y: 128,
    },
  ],
  extend: '{"forbidType":"sweep","isWall":true}',
};
const success = () => {}; // The success callback.
const failure = () => {}; // The failure callback.

TYRCTTypeMapManager.addArea('laser_1653444189948', JSON.stringify(areaInfo), success, failure);

getMapPointsInfo

Returns the details of a virtual area according to the current map state.

Parameters

Parameter	Type	Description
mapId	string	The map ID.
callback	function	The callback.

The following code block describes the callback parameters:

{
  // The type of virtual area.
  type: 2, // A cleaning area.
  data: [
    {
      // The coordinates.
      points: [
        {
          x: 108,
          y: 98,
        },
        {
          x: 158,
          y: 98,
        },
        {
          x: 158,
          y: 147,
        },
        {
          x: 108,
          y: 147,
        },
      ],
      id: "4",
      areaType: 0,
      extend: "{}",
      content: {
        text: "",
      },
    },
  ],
}

Example

import { NativeModules } from 'react-native';
const TYRCTTypeMapManager = NativeModules.TYRCTTypeMapManager;

const callback = (data) => {
  // do something
}
TYRCTTypeMapManager.getMapPointsInfo('laser_1653444189948', callback);

removeAreaList

Removes a list of virtual areas.

Parameters

Parameter	Type	Description
mapId	string	The map ID.
areaIds	string	The list of IDs for the virtual areas to be removed.
success	function	The success callback.
failure	function	The failure callback.

The list of virtual area IDs is an array of JSON strings.

['1', '2', '3']

Example

import { NativeModules } from 'react-native';
const TYRCTTypeMapManager = NativeModules.TYRCTTypeMapManager;

const areaIds = ['1', '2', '3'];
const success = () => {};
const failure = () => {};
TYRCTTypeMapManager.removeAreaList('laser_1653444189948', JSON.stringify(areaIds), success, failure);

updateAreaInfo

Updates the details of a virtual area. Only one area can be updated in each call. Specifically, the name of a no-go area or a cleaning area.

Parameters

Parameter	Type	Description
mapId	string	The map ID.
areaInfo	string	The details to be updated for the virtual area.
success	function	The success callback.
failure	function	The failure callback.

The details to be updated for the virtual area are in the JSON format.

{
  id: "4",
  content: {
    text: "test area",
  },
}

Example

import { NativeModules } from 'react-native';
const TYRCTTypeMapManager = NativeModules.TYRCTTypeMapManager;

const areaInfo = {
  id: "4",
  content: {
    text: "test area",
  },
};
const success = () => {};
const failure = () => {};
TYRCTTypeMapManager.updateAreaInfo('laser_1653444189948', JSON.stringify(areaInfo), success, failure);

getMapSplitPointWithMapId

Returns information required for area editing.

Scenarios:

• Get the IDs of areas to be merged.
• Get information about a divider to split an area.

Parameters

Parameter	Type	Description
mapId	string	The map ID.
callback	function	The callback.

The following code block describes the callback parameters. When type is 3, an area is split, and when it is 2, areas are merged.

// Splits an area.
{
  type: 3,
  data: [
    {
      // The coordinates of a divider.
      points: [
        {
          x: 171,
          y: 128,
        },
        {
          x: 91,
          y: 128,
        },
      ],
      // The value of `hex id` for the target area.
      pixel: "0c",
    },
  ],
}

// Merges two areas.
{
  type: 2,
  // The value of `hex id` for each target area.
  data: [
    {
      pixel: "14",
    },
    {
      pixel: "0c",
    },
  ],
}

Example

import { NativeModules } from 'react-native';
const TYRCTTypeMapManager = NativeModules.TYRCTTypeMapManager;

const callback = (data) => {
  // do something
};
TYRCTTypeMapManager.updateAreaInfo('laser_1653444189948', callback);

setMapSplitTypeWithMapId

Sets the area state when it is edited.

Parameters

Parameter	Type	Description
mapId	string	The map ID.
state	number	The state of the target area. 0: normal state 1: reset (⚠️deprecated) 2: merged 3: split 4: tapped
success	function	The success callback.
failure	function	The failure callback.

Currently, the following four states are supported:

• Normal state: The map cannot be edited.
• Merged: The adjacent areas to be tapped on the map can be merged.
• Split: A divider will appear in an area to split this area into two areas.
• Tapped: The target area can be tapped to trigger a specified callback.

Example

import { NativeModules } from 'react-native';
const TYRCTTypeMapManager = NativeModules.TYRCTTypeMapManager;

const success = () => {};
const failure = () => {};
TYRCTTypeMapManager.setMapSplitTypeWithMapId('laser_1653444189948', 2, success, failure);