Robot Position Map

A highly customizable Vue 3 SVG map component designed specifically for robot positioning, tracking and navigation management.

✨ Features

• 🗺️ SVG Map Support - Support for SVG maps of any size
• 🤖 Real-time Robot Positioning - Display robot position and direction in real-time
• 📍 Smart Marker Management - Right-click to add/delete markers
• 🛤️ Motion Trail Tracking - Automatically record and display robot movement trails
• 🎨 Highly Customizable - Fully customizable styles via slots and props
• 🖱️ Interactive - Rich interactions with right-click menus and click events
• 📱 Responsive Design - Adapts to different screen sizes

📦 Installation

# using pnpm
pnpm add robot-position-map

# using npm
npm install robot-position-map

# using yarn
yarn add robot-position-map

🚀 Quick Start

Basic Usage

<template>
  <div style="width: 1000px; height: 600px;">
    <RobotPositionMap
      :map-src="mapImageUrl"
      :robot-pos="robotPosition"
      :points="points"
      @robot-click="handleRobotClick"
      @add-point="handleAddPoint"
      @delete-point="handleDeletePoint"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import RobotPositionMap from 'robot-position-map'

const mapImageUrl = ref('/map.jpg')
const robotPosition = ref({ x: 1000, y: 800 })
const points = ref([
  { id: 1, pointx: 500, pointy: 400, pointname: 'Charging Station' },
  { id: 2, pointx: 1500, pointy: 600, pointname: 'Work Station' }
])

const handleRobotClick = (position) => {
  console.log('Robot position:', position)
}

const handleAddPoint = (point) => {
  points.value.push({
    id: Date.now(),
    ...point
  })
}

const handleDeletePoint = (point) => {
  const index = points.value.findIndex(p => p.id === point.id)
  if (index > -1) {
    points.value.splice(index, 1)
  }
}
</script>

⚙️ Props

Basic Configuration

| Prop | Type | Default | Description | |------|------|---------|-------------| | mapSrc | String | - | Required Map image URL | | robotPos | Object | {x:0,y:0} | Current robot position {x, y} | | points | Array | [] | Array of marker points |

Map Configuration

| Prop | Type | Default | Description | |------|------|---------|-------------| | mapDimensions | Object | {width:8502,height:6000} | Map dimensions | | scale | Number | 1 | Scale factor |

Robot Configuration

| Prop | Type | Default | Description | |------|------|---------|-------------| | robotImg | String | - | Robot image URL | | robotWidth | Number | 210 | Robot image width | | robotHeight | Number | 162 | Robot image height | | robotOffsetX | Number | 40 | Robot X offset | | robotOffsetY | Number | 850 | Robot Y offset |

Trail Configuration

| Prop | Type | Default | Description | |------|------|---------|-------------| | homePosition | Object | {x:2042,y:1487} | Home position | | homeTolerance | Number | 80 | Home tolerance range | | maxTrailPoints | Number | 800 | Maximum trail points | | trailColor | String | '#00ff00' | Trail color | | trailWidth | Number | 30 | Trail width |

Marker Configuration

| Prop | Type | Default | Description | |------|------|---------|-------------| | pointImg | String | - | Marker point image URL | | pointWidth | Number | 120 | Marker width | | pointHeight | Number | 120 | Marker height | | pointFontSize | Number | 42 | Marker font size | | pointTextColor | String | '#1afa29' | Marker text color |

📡 Events

| Event | Parameters | Description | |-------|------------|-------------| | robot-click | position | Triggered when robot is clicked | | add-point | point | Triggered when a marker point is added | | delete-point | point | Triggered when a marker point is deleted | | svg-click | event | Triggered when SVG background is clicked |

🎨 Slots

Available Slots

• #map-background: Custom map background
• #robot: Custom robot display
• #points: Custom markers container
• #point: Custom individual marker
• #trail: Custom motion trail
• #popup: Custom add marker popup
• #delete-popup: Custom delete confirmation popup
• #filters: Custom SVG filters

📄 License

MIT License - see LICENSE file for details.