---
title: "Schemas"
description: "Create interactive schemas with device placement on floor plans or photos. Visual dashboard for your TapHome smart home system."
url: "https://taphome.com/en/docs/schemas/"
language: en
lastmod: 2026-11-06
generator: hugo
ai:
  topics: ["schemas","floor-plans","device-visualization","interactive-dashboards","schema-editor"]
  questions: ["How do I create a schema with a floor plan in TapHome?","What image formats are supported for schema backgrounds?","How to make devices larger on a schema using Global scale?","What keyboard shortcuts work in the schema editor?","How to add multiple devices at once to a schema?","What is the difference between pinned panel and floating panel display modes?","Where are schema images stored and how much space do they use?"]
---

# Schemas

Last updated: 2026-11-06

A schema in TapHome is an interactive floor plan or visualization of your home or building, on which you place devices over a photo or floor plan, display sensor values and add text labels. You create it on any surface in the **Edit** mode by adding a section of type **Scheme** and selecting a background image in the jpg, jpeg, png, webp or svg format. The result is a schema in which clicking a device opens its details, where you can change its values. You can also start from the sample backgrounds offered for download further down this page.

[YouTube video](https://www.youtube.com/watch?v=ojq6wAqoNWM)

## Introduction

Schemas allow you to create interactive floor plans or visualizations of your home/building, where you can:
- Place devices on a photo or floor plan
- Display sensor values directly on the schema
- Add text labels and descriptions
- Control devices by clicking

> [!NOTE]
> Currently, devices can only be controlled by clicking to open the device details, where you can change their values.

### Examples of Schemas

![Example scheme - TapHome Showroom with interactive devices on the room photo](https://taphome.com/documentation/schemes/Schema%20-%20TapHome%20Showroom.webp)

![Example scheme - Hydraulic scheme of the heat pump with temperature and status visualizations](https://taphome.com/documentation/schemes/Schema%20-%20TapHome%20Heat%20Pump.png)

### AI-Generated Visualizations from Floor Plan

Using AI tools, you can generate realistic interior visualizations from a simple floor plan. These visualizations can then be used as backgrounds for your schemas in TapHome.

![Apartment floor plan - technical drawing](https://taphome.com/documentation/schemes/Scheme-floorplan.jpeg)

*Floor plan (source)*
![Day render of interior generated from floor plan](https://taphome.com/documentation/schemes/Scheme-floorplan-day.webp)

*Day render*
![Night render of interior generated from floor plan](https://taphome.com/documentation/schemes/Scheme-floorplan-night.webp)

*Night render*

**Tool used:** Google Nano Banana Pro

**Prompt for day render:**

```
render a high-quality architectural visualization, maintaining all details
from the line drawing, including rooms, furniture and proportions.
Render the textures, lighting, and shadows effectively, according to
the source plan's layout. Make the lighting soft, natural and cosy
```

**Prompt for night render** (based on the generated day image):

```
make a night render of this exact same interior.
add a soft lighting so we can see the details well
```

> [!TIP]
> You can download these images and use them as backgrounds for your schemas in TapHome.

### Sample Backgrounds for Download

You can download sample backgrounds for your schemas:

#### 3D Floor Plans

![3D floor plan - light](https://taphome.com/documentation/schemes/thumbnails/Floor%20plan%203D%20Light.webp)
[Download 3D floor plan – light](https://taphome.com/documentation/schemes/Floor%20plan%203D%20Light.png)

![3D floor plan - dark](https://taphome.com/documentation/schemes/thumbnails/Floor%20plan%203D%20Dark.webp)
[Download 3D floor plan – dark](https://taphome.com/documentation/schemes/Floor%20plan%203D%20Dark.png)

#### Hydraulic Schemas

![Heat pump hydraulics - light](https://taphome.com/documentation/schemes/thumbnails/Heat%20pump%20hydraulics%20-%20LIGHT.svg.png)
[Download heat pump hydraulics – light](https://taphome.com/documentation/schemes/Heat%20pump%20hydraulics%20-%20LIGHT.svg)

![Heat pump hydraulics - dark](https://taphome.com/documentation/schemes/thumbnails/Heat%20pump%20hydraulics%20-%20DARK.svg.png)
[Download heat pump hydraulics – dark](https://taphome.com/documentation/schemes/Heat%20pump%20hydraulics%20-%20DARK.svg)

#### Industrial Schemas

![Industrial scheme - light](https://taphome.com/documentation/schemes/thumbnails/Scheme%20industrial%20-%20LIGHT.svg.png)
[Download industrial scheme – light](https://taphome.com/documentation/schemes/Scheme%20industrial%20-%20LIGHT.svg)

![Industrial scheme - dark](https://taphome.com/documentation/schemes/thumbnails/Scheme%20industrial%20-%20DARK.svg.png)
[Download industrial scheme – dark](https://taphome.com/documentation/schemes/Scheme%20industrial%20-%20DARK.svg)

#### Residential Schemas

![Residential scheme - light](https://taphome.com/documentation/schemes/thumbnails/Scheme%20residential%20-%20LIGHT.svg.png)
[Download residential scheme – light](https://taphome.com/documentation/schemes/Scheme%20residential%20-%20LIGHT.svg)

![Residential scheme - dark](https://taphome.com/documentation/schemes/thumbnails/Scheme%20residential%20-%20DARK.svg.png)
[Download residential scheme – dark](https://taphome.com/documentation/schemes/Scheme%20residential%20-%20DARK.svg)

#### Boiler Rooms

![Boiler room](https://taphome.com/documentation/schemes/thumbnails/Boiler%20room.webp)
[Download boiler room scheme](https://taphome.com/documentation/schemes/Boiler%20room.jpg)

## Creating a New Schema

### Adding a Schema Section

1. On any surface, switch to **Edit** mode.
2. Add a new section of type **Scheme**.
3. In the schema properties, select the image to be used as the background.

> [!NOTE]
> **Supported file formats:** *.jpg, *.jpeg, *.png, *.webp, *.svg  
> Images larger than 3200x3200 will be automatically resized.

### **Global scale**

If your devices appear too small, adjust **Global scale** in the schema properties (for example to 250% or 300%).

## Editor Tools

The schema editor offers the following tools:

### ✓ **Select**

Basic tool for selecting and moving objects on the schema.

- **Click** to select an object
- **Double-click** to open the main properties of the object

### **Text**

Add a text label or description to the schema. You can:
- **Align** (left, center, right)
- **Bold text**
- Adjust for light/dark mode
- Set background opacity

### **Device**

Add a device to the schema:
- Select a device from the list
- Filter by zones
- Configure **Visualization** (icon, name, value)
- Set scale, corner radius, and background opacity

### **Value**

Add statistical values from devices.

## Working with Objects

### Duplicating Objects

If you have defined the appearance of one device, you can use it as a template:
1. Select the device with the desired appearance.
2. Use **Ctrl + D** or **Duplicate**.
3. All newly created devices will have the same properties.

### Bulk Adding Devices

You can add multiple devices at once:
1. Click on the device icon in the tools.
2. Filter devices by zone (e.g. living room).
3. Select all devices you want to add.
4. Place them in the desired locations.

## Object Properties

### Visual Settings for Devices

- **Name** – show/hide device name
- **Icon** – show icon
- **Value** – show current value
- **Controls** – the device's control buttons right on the scheme; only users who may control the device see them. It needs TapHome Next 2026.1.36783+. The object does not grow by itself when you turn this on, so the icon and the last control get clipped — increase the **Width** in the **Position** section.
- **Center** – center alignment
- **Scale** – object size
- **Round corners** – corner rounding
- **Opacity** – background opacity (0–100%)

### **Theme**

Set the theme according to the application:
- **Light** – for the application in light mode
- **Dark** – for the application in dark mode
- **Match app setting** – automatic switching

## Schema Properties

Global settings for the entire schema:

### **Background**

- **Width** – schema width in pixels
- **Height** – schema height in pixels
- **Color** – background color (e.g. #000000)
- **Image** – upload background image
- **Dark color** – background color for dark mode (visible if dark mode is enabled)
- **Dark image** – background image for dark mode (visible if dark mode is enabled)

### **Global scale**

Slider to adjust the size of all objects on the schema (100%–400%).

## Display Modes

The schema operates in two modes:

### Pinned Panel

The device detail is displayed in a sidebar that remains open.

### Floating Panel

The device detail is displayed as a floating window above the schema. The panel automatically hides when you click outside.

## **Keyboard shortcuts**

### **Editing**

| Shortcut | Action |
|----------|--------|
| **Ctrl + S** / **Ctrl + Enter** | **Save** |
| **Esc** | **Close** |
| **Ctrl + Z** | **Undo** |
| **Ctrl + Y** | **Redo** |
| **← / ↑ / → / ↓** | **Move object** |
| **Shift + ← / ↑ / → / ↓** | **Move object (fast)** |
| **Ctrl + C** | **Copy object** |
| **Ctrl + V** | **Paste object** |
| **Ctrl + D** | **Duplicate object** |
| **Delete** / **Backspace** | **Delete object** |

### **Appearance**

| Shortcut | Action |
|----------|--------|
| **Ctrl + H** | **Change skin** |
| **Ctrl + J** | **Change dark mode** |
| **Ctrl + K** | **Change dark theme** |

## **Media library**

All images used in schemas are stored on the Core drive.

You can check the storage status in **Media library**, where you can see:
- How much space the images occupy
- How much storage capacity is still available

## Synchronization

All changes in schemas are automatically:
- Uploaded to the drive
- Distributed to all devices
- Synchronized across all platforms (Windows, Android, iOS)

**See also** — [Dashboards, Zones, and Categories](https://taphome.com/en/docs/configuration/dashboards-zones-categories/), [Custom Device Icons](https://taphome.com/en/docs/configuration/custom-icons/).