← Все кейсыВеб-приложение

Калькулятор ЛКМ

Интерактивный калькулятор расхода лакокрасочных материалов с 2D SVG-редактором плана помещений, 3D CSS-визуализацией и каталогом из 15 000+ товаров. Vanilla JavaScript, без фреймворков.

Клиент: CalculatorLKM
Год: 2025
Срок: 2 месяца
JavaScriptSVGCSS 3DFastAPIPostgreSQL
calculatorlkm.ru
11 000+
строк JS-кода
15 000+
товаров в каталоге
< 1 сек
время загрузки
99.5%
точность расчётов
23
модуля 2D-редактора
0
npm-зависимостей

Задача клиента

1Два режима расчёта — внутренние помещения и фасадные работы
22D-редактор для рисования плана помещения с точными размерами
33D-визуализация комнаты и здания с выделением окрашиваемых поверхностей
4Интеллектуальный расчёт с учётом основания, инструмента, слоёв
5Каталог реальных товаров с подбором фасовки и расчётом стоимости
6Мгновенная работа в браузере без серверных вычислений
Фича 1

2D-редактор плана

23 модуля, 336 КБ кода

Полноценный SVG-редактор с 5 инструментами рисования, snap-привязкой к сетке и объектам, undo/redo, контекстными меню. Окна рисуются с рамами и стеклом, двери — с ручками. Экспорт плана в PDF.

Select, Wall, Pen, Polygon — 5 инструментов
Snap-to-grid (10 см) + snap-to-objects
Полигональные комнаты любой формы
Экспорт в PDF с размерами
5.0 м3.8 м
Фича 2

3D без Three.js

CSS 3D Transforms, 60 fps

Принципиальное решение — 3D на чистом CSS, без WebGL. Каждая стена, потолок и пол — HTML div с transform3d. Вращение мышью, зум колесом, клик по грани = выбор поверхности. Работает на любых устройствах.

perspective + preserve-3d
Динамический пересчёт translate3d
GPU-ускорение без оптимизаций
Полная 3D-модель дома (97 КБ)
rotateX: 15°rotateY: -25°CSS 3D
Фича 3

Умный расчёт

Многофакторная формула

Ядро калькулятора учитывает площадь с вычетом проёмов, расход л/м², количество слоёв, впитываемость основания (7 типов), инструмент нанесения и настраиваемый резерв. Алгоритм DP подбирает оптимальную фасовку банок.

7 типов оснований (K = 1.00–1.35)
3 инструмента с разными коэффициентами
DP-алгоритм подбора фасовки
Расчёт колеровки (50–150 ₽/л)
calculation.js
const area = 25.4 // м²
const consumption = 0.12 // л/м²
const layers = 2
const substrate = 1.10 // штукатурка
const tool = 1.00 // валик

const liters = area * consumption
  * (substrate + (layers-1) * 1.0)
  * tool

// → 6.4 л + 10% резерв = 7.0 л
Фича 4

Каталог товаров

200+ брендов, 50+ палитр

Встроенный каталог подключён к PostgreSQL с 15 000+ товаров. Фасетная фильтрация по бренду, типу работ, глянцу, материалу. 10 000+ цветов из палитр Tikkurila, RAL, NCS. Ежедневная автосинхронизация.

FastAPI + asyncpg backend
6 REST-эндпоинтов
Автосинхронизация (ежедневно)
Фасетная фильтрация
Каталог товаров
Tikkurila Harmony
Tikkurila · 2.7 л
1 890 ₽
Dulux Diamond Matt
Dulux · 5 л
3 450 ₽
Marshall Maestro
Marshall · 9 л
2 190 ₽
15 234 товараОбновлено сегодня

UX-решения

Интерактивный тур

Coach-marks с подсветкой, анимированная дырка в оверлее, ожидание появления элемента до 18 сек

Два уровня

«Просто» — быстрый расчёт за 3 шага. «Подробно» — проёмы, основания, слои, колеровка

4 палитры + темы

Amber, teal, indigo, terracotta. Светлая/тёмная тема. Мгновенная смена через CSS Custom Properties

Защита от ошибок

SpinHold, блокировка колеса мыши, валидация диапазонов, подтверждение сброса

Технический стек

JavaScript
Frontend
ES6+, vanilla, zero deps
SVG
2D Graphics
Dynamic DOM API rendering
CSS 3D
3D Graphics
perspective, preserve-3d
FastAPI
Backend
Python, asyncpg
PostgreSQL
Database
12 tables, 15K+ products
localStorage
Storage
Offline persistence
jsPDF
Export
2D plan to PDF
nginx
Deploy
Ubuntu 24.04, SSL

Результаты

99.5%
точность расчётов vs. профессиональные маляры
< 1 сек
загрузка на мобильном 4G
60 fps
3D-визуализация на CSS transforms
0 deps
фронтенд написан полностью с нуля

«Мы сделали инструмент, который не просто считает литры краски, а позволяет спроектировать помещение, увидеть его в 3D и получить готовый список покупок с ценами — всё в одном окне браузера»

Нужен похожий проект?

Обсудим вашу задачу и предложим оптимальное решение.

Обсудить проект