---
title: "Old floorplan (deprecated)"
canonical: "https://docs.cuesystem.com/space/TAM/154763316/Old%20floorplan%20(deprecated)"
format: markdown
---
### Introduction

The touchONE-assist uses floorplans in **SVG file format**. The floorplans need to be prepared by another editor and uploaded onto the touchONE-admin.

A great tool for SVG file editing is e.g. [Boxy SVG](https://boxy-svg.com/).

### File formats

The ideal file format is an SVG file. Usually, many building floor plans are coming from AutoCAD, where the broadly used file format is DWG. Then is necessary to do some clean-up (typically unwanted layers), and then converted it into an SVG file.

### Fonts

Suggested fonts used for area and resource namings are **Montserrat** or **Sans-serif**.

> ℹ️ It is strictly recommended to use SVG files without embedded fonts to reduce the file size.

### Areas and resources

An area is typically country, city, building, floor, office space, etc. A resource is typically a meeting room, workplace, parking place, etc.

Each area or resource is defined by the SVG **group** containing:

**More shapes**

- Defines the area or resource. The shape must copy the actual outline of the area or resource.
- The following shape can be used: polygon, path, polyline, rectangle, circle, ellipse. These shapes are described [here](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Basic_Shapes).
- The shape can be filled with any color, opacity must be 0 (shape must be transparent).
- It is recommended to set the stroke width to 0.

**More texts**

- Defines display name of area or resource.
- For all texts use the fonts suggested above.
- Texts must be in front of shapes – they have a greater z-order index.


For identification, each group must have Class and ID filled in according to the following rules:

- **Class** filled by word **touchONE** for all groups.
- Unique **ID** filled by small caps.

Class and ID are used for connection to the resource account. Great attention must be paid to this data.

### Instructions for the preparation of SVG

To prepare the SVG file follow the instructions:

1. Prepare clean SVG with floor plan.
2. Define groups `<g class="touchONE" id="uniqueid">` with **touchONE **class and id unique inside the file.
3. Define basic shapes as `<polygon>`, `<path>`, `<polyline>`, `<rect>`, `<circle>` and `<ellipse>` inside group. Changing of colors and the clickable area will be applied on polygon(s) and path(s) in touchONE-assist.
4. Define text(s) `<text>` inside group. Changing of colors will be applied on text(s) in touchONE-assist.
5. The final SVG file shouldn’t contain embedded fonts to reduce size.
6. You can assign one resource or one child area to each group in touchONE-admin.

### An example of a group used for one resource  
`<g id="cz_prg_pan_r1801" class="touchONE"> `

`<polygon style="stroke: rgb(0, 0, 0); stroke-width: 0px; fill-opacity: 0;" points="141.383 452.775 131.298 458.279 119.585 466.787 105.388 477.243 90.473 491.359 78.373 503.726 67.072 518.909 53.532 538.221 37.547 568.63 29.615 589.383 22.014 618.39 56.232 610.472 179.063 650.118 187.241 627.513 196.283 613.85 203.698 604.81 217.691 594.23 229.79 587.513 238.38 584.347 238.458 484.949 146.284 453.601" bx:origin="-0.092471 -1.911624">`

`</polygon>`

`<text style="fill: rgb(51, 51, 51); font-family: &quot;Open Sans&quot;; font-size: 14px; text-anchor: middle; white-space: pre;" x="144.087" y="570.81">Praha</text>`

`</g>`