# Map Dynamic QR

# Overview

The **Map Navigation QR** configuration is used to place a **Dynamic Map QR** at a specific position on a background image and control the map and navigation movement within a defined segment.

The configuration primarily uses:

- **Background Image**
- **Width**
- **Height**
- **Padding**
- **Map (cx, cy)**
- **Map Navigation (cx, cy)**
- **Vertical (cx, cy)**

Correct configuration of these values ensures that the Dynamic Map QR, map, and navigation elements are displayed at the required position.

---

## Background Image

The **Background Image** is the image used as the base for the Map Navigation interface.

Any image configured through the **Modules** section can be used as the background image. The configured image will be displayed in the Map Navigation interface.

### Background Image Behaviour

The image configured in the relevant module is displayed as the background image for Map Navigation.

```text
Modules
   ↓
Configured Image
   ↓
Map Navigation
   ↓
Background Image
```

## Width and Height

The **Width** and **Height** values define the dimensions of the background image used for Map Navigation configuration.

The Width and Height should correspond to the actual dimensions of the background image.

### Width

**Width** represents the horizontal dimension of the background image.

For example, if the background image width is `1000 px`:

```text
Width = 1000
```

### Height

**Height** represents the vertical dimension of the background image.

For example, if the background image height is `600 px`:

```text
Height = 600
```
### Example

If the background image dimensions are:

```text
Width  = 1000 px
Height = 600 px
```

> **Important:** The Width and Height should match the actual dimensions of the background image for accurate coordinate and padding calculations.

# Coordinate System

Coordinates are used to identify the exact position of an element within the background image.

Coordinates are represented in the following format:

```text
(X, Y)
```

Where:

- **X** represents the horizontal position.
- **Y** represents the vertical position.

For example:

```text
(200, 400)
```

means:

```text
X = 200
Y = 400

(0,0)
   ┌───────────────────────────────→ X
   │
   │
   │
   │
   ↓
   Y

```

# Dynamic Map QR

The **Dynamic Map QR** is placed at a specific position inside the background image.

To position the QR accurately, its coordinates must first be identified from the background image.

The QR position can be identified using two main points:

- **Top-Left Coordinate**
- **Bottom-Right Coordinate**

For example:

```text
Top-Left     = (200, 400)
Bottom-Right = (300, 450)
```
These coordinates are then used to calculate the required padding values.

---

# Padding

**Padding** is used to position the Dynamic Map QR correctly inside the background image.

The padding configuration consists of:

- **Padding Left**
- **Padding Top**
- **Padding Right**
- **Padding Bottom**

The padding values are calculated using the QR coordinates and the background image dimensions.

---

## Padding Left

**Padding Left** represents the horizontal distance between the left edge of the background image and the left edge of the Dynamic Map QR.

The **X-coordinate of the QR's left side** is used as the Padding Left value.

### Formula

```text
Padding Left = QR Left X Coordinate
```

### Example

If the QR starts at:

```text
X = 200
Y = 400

Then:

Padding Left = 200
```

## Padding Top

**Padding Top** represents the vertical distance between the top edge of the background image and the top edge of the Dynamic Map QR.

The **Y-coordinate of the QR's top side** is used as the Padding Top value.

### Formula

```text
Padding Top = QR Top Y Coordinate
```

### Example

If the QR starts at:

```text
X = 200
Y = 400

Then

Padding Top = 400
```

## Padding Right

**Padding Right** represents the horizontal distance between the right edge of the Dynamic Map QR and the right edge of the background image.

To calculate Padding Right, subtract the QR's **right-side X-coordinate** from the total background image width.

### Formula

```text
Padding Right = Background Image Width - QR Right X Coordinate
```

**Example**

```text
Suppose:

Background Image Width = 1000 px
QR Right X Coordinate  = 300

Then:

Padding Right = 1000 - 300

Padding Right = 700

Therefore:

Padding Right = 700
```

## Padding Bottom

**Padding Bottom** represents the vertical distance between the bottom edge of the Dynamic Map QR and the bottom edge of the background image.

To calculate Padding Bottom, subtract the QR's **bottom-side Y-coordinate** from the total background image height.

### Formula

```text
Padding Bottom = Background Image Height - QR Bottom Y Coordinate
```

**Example**

```
Suppose:

Background Image Height = 600 px
QR Bottom Y Coordinate  = 450

Then:

Padding Bottom = 600 - 450

Padding Bottom = 150

Therefore:

Padding Bottom = 150
```

# Complete Padding Example

Suppose the background image dimensions are:

```text
Width  = 1000 px
Height = 600 px
```
The Dynamic Map QR coordinates are:

```text
Top-Left     = (200, 400)
Bottom-Right = (300, 450)
```
The padding values will be calculated as follows:

### Padding Left

```text
Padding Left = 200
```
### Padding Top

```text
Padding Top = 400
```
### Padding Right
```
Padding Right = 1000 - 300
Padding Right = 700
```

### Padding Bottom
```
Padding Bottom = 600 - 450
Padding Bottom = 150
```

### Final Padding Configuration
```
Padding Left   = 200
Padding Top    = 400
Padding Right  = 700
Padding Bottom = 150
```


## Padding Calculation Summary

| Padding            | Calculation                                      |
| ------------------ | ------------------------------------------------ |
| **Padding Left**   | QR Left X Coordinate                             |
| **Padding Top**    | QR Top Y Coordinate                              |
| **Padding Right**  | Background Image Width - QR Right X Coordinate   |
| **Padding Bottom** | Background Image Height - QR Bottom Y Coordinate |

---

# Map (cx, cy)

The **Map (cx, cy)** configuration controls the movement and positioning of the complete map within the defined segment.

It is used when the entire map needs to be moved or positioned so that the required area of the map is displayed inside the segment.

The `(cx, cy)` values define the position or movement of the map.

Where:

```text
cx = Horizontal movement/position
cy = Vertical movement/position

```

**Example**
```
Map (cx, cy) = (500, 300)

Here:

cx = 500
cy = 300
```

The map will be positioned or moved according to these coordinate values while remaining within the defined segment.

### Purpose

**Map (cx, cy)** is used to control:

- The overall movement of the map.
- The position of the map within the segment.
- Which portion of the map should be visible.
- How far the map should move horizontally and vertically.

---

# Map Navigation (cx, cy)

The **Map Navigation (cx, cy)** configuration is used for the navigation movement that is displayed when the user clicks **Take Me There**.

When **Take Me There** is selected, the map moves along the navigation path and displays the navigation route.

The `(cx, cy)` values determine where the navigation should be positioned and displayed during this movement.

Where:

```text
cx = Horizontal navigation position
cy = Vertical navigation position
```
**Example**

```
Map Navigation (cx, cy) = (450, 250)

Here:

cx = 450
cy = 250
```

These values determine where the navigation view should be positioned within the defined navigation area.

### Purpose

**Map Navigation (cx, cy)** is used to control:

- Where the navigation is displayed.
- How the map is positioned during navigation.
- The visible area while moving through the navigation path.
- The position of the navigation view when using **Take Me There**.

---

# Vertical (cx, cy)

The **Vertical (cx, cy)** configuration is used when the map or navigation needs to be positioned or displayed vertically.

It determines the required position of the map/content when the vertical positioning is required.

Where:

```text
cx = Horizontal position
cy = Vertical position
```

**Example**
```
Vertical (cx, cy) = (300, 500)

Here:

cx = 300
cy = 500
```

These values determine the required vertical positioning of the map or navigation content.

### Purpose

**Vertical (cx, cy)** is used to control:

- Vertical positioning of the map.
- Positioning of content in a vertical layout.
- The visible area of the map in vertical navigation.
- Alignment of the map within the defined segment.

---

# Difference Between Map, Map Navigation and Vertical

| Configuration               | Purpose                                                                               |
| --------------------------- | ------------------------------------------------------------------------------------- |
| **Map (cx, cy)**            | Controls the overall movement and positioning of the complete map within the segment. |
| **Map Navigation (cx, cy)** | Controls the positioning of the map/navigation view when using **Take Me There**.     |
| **Vertical (cx, cy)**       | Controls the positioning of the map/content for vertical display or movement.         |

---

# Background Image and Module Configuration

The background image used in Map Navigation is obtained from the image configured in the relevant **Module**.

Any image added to the Modules section can be displayed as the background image.

For example:

```text
Module
   ↓
Add/Configure Image
   ↓
Image is displayed in Map Navigation
```

This means the Map Navigation background is not limited to a single fixed image. The image configured for the relevant module is used accordingly.


# Dynamic Map QR Placement Workflow

Follow the steps below to configure the Dynamic Map QR accurately:

1. Select the required background image.
2. Check the actual **Width** of the image.
3. Check the actual **Height** of the image.
4. Enter the image **Width** and **Height** in the configuration.
5. Identify the **Top-Left** coordinate of the Dynamic Map QR.
6. Identify the **Bottom-Right** coordinate of the Dynamic Map QR.
7. Set **Padding Left** using the QR's left X-coordinate.
8. Set **Padding Top** using the QR's top Y-coordinate.
9. Calculate **Padding Right** using the background image width.
10. Calculate **Padding Bottom** using the background image height.
11. Configure **Map (cx, cy)** according to the required map movement.
12. Configure **Map Navigation (cx, cy)** according to the required **Take Me There** navigation position.
13. Configure **Vertical (cx, cy)** when vertical positioning is required.
14. Save the configuration.
15. Verify the Dynamic Map QR and navigation position on the Map Navigation screen.

---

# Configuration Example

Assume the background image has the following dimensions:

```text
Width  = 1000 px
Height = 600 px
```


The Dynamic Map QR has the following coordinates:
```
Top-Left     = (200, 400)
Bottom-Right = (300, 450)
```
### Width and Height
```
Width  = 1000
Height = 600
```
### Padding
```
Padding Left   = 200
Padding Top    = 400
Padding Right  = 1000 - 300 = 700
Padding Bottom = 600 - 450  = 150

```

### Final Configuration
```
Width  = 1000
Height = 600

Padding Left   = 200
Padding Top    = 400
Padding Right  = 700
Padding Bottom = 150
```

Map positioning can then be configured according to the required movement:


```
Map (cx, cy)            = (500, 300)
Map Navigation (cx, cy) = (450, 250)
Vertical (cx, cy)       = (300, 500)
```

The (cx, cy) values are example values and should be configured according to the required map and navigation position.

**Configuration Flow**
```
Background Image
       ↓
Check Image Width & Height
       ↓
Identify QR Coordinates
       ↓
Calculate Padding
       ↓
Configure Dynamic Map QR
       ↓
Configure Map (cx, cy)
       ↓
Configure Map Navigation (cx, cy)
       ↓
Configure Vertical (cx, cy) if required
       ↓
Save Configuration
       ↓
Verify Map Navigation

```
### Important Notes: 
- The Width and Height should match the actual dimensions of the background image.
- The QR coordinates should be identified from the actual background image.
- Padding Left is calculated from the QR's left X-coordinate.
- Padding Top is calculated from the QR's top Y-coordinate.
- Padding Right is calculated by subtracting the QR's right X-coordinate from the background image width.
- Padding Bottom is calculated by subtracting the QR's bottom Y-coordinate from the background image height.
- Map (cx, cy) controls the overall movement and positioning.
- Map Navigation (cx, cy) controls the map/navigation positioning during Take Me There navigation.
- Vertical (cx, cy) controls the positioning of the map/content when vertical positioning is required.
- Images configured through the Modules section are displayed as the corresponding background images in Map Navigation.
- Coordinate values should be checked carefully to ensure accurate QR placement and map positioning.
- Any change in the background image dimensions may require the Width, Height, and Padding values to be recalculated.