Надоело вручную считать плитку для ванной: как я создал собственный калькулятор раскладки

Во время ремонта ванной комнаты дело дошло до укладки плитки, и сразу возникли сложности. Помещение имеет Г-образную форму с вентиляционным коробом в углу, а плитку хотелось положить по диагонали. Стандартный метод «разделить общую площадь на размер одной плитки» в таком случае категорически не подходит: мои предварительные расчеты существенно разошлись с оценкой мастера, причем происхождение этой разницы было совершенно непрозрачным.

Плиточник предложил традиционный подход — заложить 15% сверху на подрезку. Но при цене материала более 2000 рублей за квадратный метр такая переплата ощутимо бьет по бюджету. Простые калькуляторы в сети умеют лишь перемножать квадратуру на стоимость, а CAD-системы требуют полноценного черчения и моделирования с нуля, что избыточно для простой задачи расчета материалов.

В итоге я разработал собственное решение. Ниже описаны основные возможности и прикреплены скриншоты интерфейса.

Контур помещения задается по сетке либо выбирается из готовых шаблонов (прямоугольник, Г-образная планировка). Предусмотрено добавление внутренних выступов и коробов под коммуникации или вентиляцию. Доступны различные типы раскладки: шов в шов, со смещением (вразбежку) и диагональная. Справа в реальном времени формируется смета — количество плитки, клея, затирки, крестиков/СВП и итоговая сумма, а также доступен экспорт схемы в PDF.

Инструмент работает прямо в браузере без регистрации, поддерживает офлайн-режим и корректно открывается на мобильных устройствах. Состояние проекта кодируется непосредственно в URL-хэш, поэтому готовым проектом можно легко делиться через адресную строку.

Технологический стек: React, TypeScript, Vite. Графическая часть реализована на Konva (HTML5 Canvas), поскольку SVG при отображении сотен плиток начинал заметно подтормаживать при кликах. Состояние хранится в Zustand и синхронизируется с localStorage, бэкенд не используется. При формировании PDF пришлось повозиться со стилями печати: артефакты вроде служебных надписей браузера ушли после корректного обнуления правила @page.

Оптимизация подрезки и повторного использования остатков потребовала больше всего усилий. Задача заключалась в том, чтобы остаток от одной плитки автоматически примерялся к другим зонам подрезки. Первоначальный алгоритм сравнивал лишь площади, из-за чего узкий длинный обрез ошибочно назначался на короткий широкий участок. После учета геометрии и поворотов деталей на 90 градусов расчет стал корректным. На примере моего санузла это сохранило две целые плитки — около полутора тысяч рублей экономии.

Также были внедрены технологические пороги: например, программа не предлагает вырезать полосы тоньше 5 см или площадью менее 150 см², так как столь мелкие фрагменты неизбежно раскалываются при ручном плиткорезе.

Для удобства монтажа добавлена сквозная нумерация элементов: на чертеже и в PDF-отчете видно, какой именно фрагмент куда укладывается.

Появилась функция быстрой привязки целой плитки к опорному углу (например, у входа или зоны зеркала). Достаточно нажать на нужный угол на плане, и вся раскладка мгновенно пересчитывается от этой точки без необходимости подбирать сдвиг вручную.

Ограничение минимальной подрезки по умолчанию настроено на 5 см. Если конфигурация стен приводит к образованию узких полос, система сигнализирует об этом предупреждением (например, «узкая подрезка 2.3 см у стены 3») и подсвечивает соответствующий участок оранжевым цветом.

При оптимизации рендеринга под мобильные платформы удалось сократить время пересчета при перетаскивании вершин с 26 мс до 1.5 мс благодаря разделению логики на live/commit и отключению событий мыши (listening={false}) на статичных слоях.

Интерактивный тур выполнен с помощью библиотеки driver.js, помогая новым пользователям быстро сориентироваться в возможностях интерфейса.

В планах развития — добавление развертки стен, раскладки «елочкой» и возможность одновременного ведения нескольких независимых проектов.

Фактические расходы на материалы для моей ванной составили 16 341 ₽ (плитка, клей, затирка и клинья СВП) — без абстрактных наценок «на глаз» и с точным контролем количества.

Калькулятор доступен по адресу: tilely.ru — полностью бесплатно и без необходимости регистрироваться. Обратная связь и пожелания приветствуются в комментариях.

Источник