Самохостятам привет!
Решил, что это может быть кому-то полезным.
Скачать: wifiheatmap.by.samohosting.ru
ГдеРаботает: в Desktop Chrome(chromium) браузерах(датели ниже)
Wi-Fi Heatmap by samohosting.ru
- одностраничное веб-приложение
для построения тепловой карты покрытия Wi-Fi - HTML5 / CSS3 / JavaScript (ES2020+) — нативный, без фреймворков
- днные хранятся только в браузере
- импорт подложки карты или базовая отрисовка рукой
- регулировка размеров показателей и градиента заливки\перехода
- 3 источника : cloudflare, yandex, openspeedtest
- 4 базовых метрики: задержка (пинг), джиттер, скорость загрузки и отдачи
- экспорт в CSV/JSON
Сценарий использования:
Пользователь загружает план квартиры (или рисует его прямо в браузере), ходит с телефоном/ноутбуком по точкам и в каждой делает замер: задержка (пинг), джиттер, скорость загрузки и отдачи.
По этим точкам строится цветная тепловая карта (красный → жёлтый → зелёный), наглядно показывающая «мёртвые зоны».
Данные хранятся только в браузере, есть экспорт в CSV/JSON. Всё умещается в один HTML-файл (~850 строк), без сервера и сборки.
Технический стек
HTML5 / CSS3 / JavaScript (ES2020+) — нативный, без фреймворков.
Рендеринг: Canvas 2D API (не WebGL) — тепловая карта методом обратных расстояний (IDW) с гауссовым ядром, режим «4 квадранта» рисуется во вспомогательные offscreen-canvas.
Измерения: Fetch API + ReadableStream (getReader()) для потокового скачивания, performance.now() для таймингов, Blob (application/octet-stream) для upload-нагрузки.
Хранение: localStorage (ключ wifiHeatmap) — точки, стены, план, выбранные метрика/сервер.
План: FileReader → data URL, плюс toDataURL() — редактор стен сохраняет схему как PNG.
Экспорт: Blob + URL.createObjectURL() → программная загрузка CSV/JSON.
Прочее: ResizeObserver + resize для авто-масштаба, navigator.clipboard / getSelection() для копирования лога, isSecureContext / navigator.onLine в диагностике, crypto.randomUUID() для ID точек.
Инструменты и интеграции
Нет зависимостей, CDN и сборщиков — файл открывается сам по себе; нет npm/webpack/бандлеров.
Серверы замера:
Cloudflare Speed (speed.cloudflare.com: __down, __up);
OpenSpeedTest по LAN (/upload, /downloading) — поддерживает произвольный URL сервера.
Архитектура файла wifi-heatmap.html
Единый монолит с секциями: стили → разметка (панель + canvas + модалки редактора/диагностики) → JS-модули по смыслу: замеры (Cloudflare/OST), IDW-рендер, редактор плана, список точек, сохранение/экспорт, окно диагностики.
Особенности запуска, где работает\ где нет:
Desktop:
- Linux Chrome\Chromium - штатно
- Windows - не проверял, пишите
- MacOS - не проверял, пишите
Mobile:
- Android Chrome
-
- замеры из интернета работают
-
- openspeedtest не работает из-за ограничения доступа к сети при открытии локального файла. В китайских браузерах - работает.
- iPhone
-
- не работает, попопробую починить, но пока не общаю
Почему появился мини-проект\проект-однодневник?
С сервисами по замеру скоростей дома
- iperf \ iperf3
- openspeedtest
- librespeedtest
мы уже знакомились
Но в момент подготовки ролика про бюджетный wifi7
Я не нашел сервиса, которы мог бы простыми кликами замерять скорость с ноутбука или телефона и делать отрисовку, пришлось использовать лучший в мире редактор PAINT и ручной труд
Проекты существуют, но:
- они требуют установки или клонирования репозитория + зависимостей(в основном python)
- используют доступ к железу(wifi модулям), что хорошо для повышения точности - но не подходит под мое ТЗ “просто открыть страницу и кликнуть”
Open-source проекты для отрисовки Wi-Fi heatmap
Подборка открытых инструментов для визуализации покрытия Wi-Fi: от готовых приложений «из коробки» до библиотек рендеринга. Добавляйте свои находки в комментариях.
Готовые приложения (замер + heatmap)
| Проект |  |
Стек / Лицензия | Особенности |
|---|---|---|---|
| python-wifi-survey-heatmap | 496 | Python · AGPL-3.0 | Site survey на Linux, heatmap поверх плана этажа, активно (2025) |
| wifi-heatmapper | 254 | TypeScript · MIT | Кросс-платформенный (веб-интерфейс), самый активный — обновлялся в 2026 |
| wifi-heat-mapper (whm) | 241 | Python · GPL-3.0 | CLI + Python-библиотека, метрики и генерация heatmap |
| wifi-heatmap | 90 | Python · MIT | Минималистичный, хорош как основа для своего кода |
| kismapping | 57 | Haskell | Потребляет вывод Kismet, рисует heatmap на Google Maps (старый, 2020) |
Wardriving / на основе Kismet
- WarMapPy — heatmap/выпуклые карты из Kismet или Airodump.
- wigle-dashboard — дашборд с heatmap для данных WiGLE.
- spadra_smelter — один HTML-файл, heatmap + аналитика из WiGLE CSV.
Инструменты на роботах / ESP / Android
- rosbot-demo-wifi-heatmap — автоматический сбор RSSI на ROSbot (ROS).
- xiaomiWifiMapper и aerodust — карта через робот-пылесос Xiaomi.
- wifi_scanner — Android-приложение для съёмки и heatmap.
- espectre-sense — ESP32 Wi-Fi CSI, триангуляция и heatmap в реальном времени.
