От датчика до интерфейса. Практическое руководство по созданию инженерных десктоп приложений на Python и web-технологиях

Нави Тулаг

От датчика до интерфейса. Практическое руководство по созданию инженерных десктоп приложений на Python и web-технологиях

ОТ ДАТЧИКА ДО ИНТЕРФЕЙСА

Практическое руководство по созданию инженерных десктоп-приложений на Python и web-технологиях

Нави Тулаг

Предисловие. Между физическим и цифровым миром

Представьте себе на мгновение современную инженерную лабораторию.

С одной стороны — физический мир. Датчики температуры, вибрации, давления. Микроконтроллеры Arduino и ESP32, которые снимают показания 24/7. COM-порты, по которым бегут байты данных. Провода, паяльник, осциллограф. Это мир сигналов, шумов и реальных измерений.

С другой стороны — цифровой мир. Графики в реальном времени, базы данных, облачные сервисы, веб-интерфейсы. Это мир визуализации, анализа и принятия решений.

Долгое время эти миры были разделены.

Инженеры, умеющие работать с железом, часто останавливались на консоли или Excel. Веб-разработчики создавали красивые интерфейсы, но не могли получить данные с датчика. Python-скрипты анализировали данные, но не имели удобного GUI для коллег.

Но что, если бы существовал мост?

Мост, который позволяет принять данные с Arduino через COM-порт и сразу отобразить их на красивом графике в окне приложения? Мост, который позволяет превратить скрипт на Python в полноценную программу с кнопками и меню, которую можно отправить коллеге одним файлом? Мост, который позволяет получать данные с ESP32 из любой точки мира через облако?

Этот мост был построен. И он имеет несколько мощных опор: Python Eel, Electron и Neutralino.

Эта книга — ваш путеводитель по этому мосту.

Почему эта книга? И для кого она?

Когда я только начинал создавать инструменты для своей лаборатории, я столкнулся с парадоксом. Информации было много, но она была разрозненна. Туториалы по веб-разработке не говорили о COM-портах. Примеры для Arduino заканчивались на «мигающем светодиодах» и простом взаимодействии с датчиками. Мне приходилось методом проб и ошибок, тратя много времени, собирать по крупицам понимание: как сделать так, чтобы кнопка в интерфейсе реально включала реле?

Я написал эту книгу, чтобы сэкономить вам это время и избавить от этих ошибок.

Эта книга для Вас:

Таблица 1. Эта книга для Вас

Наша философия: от простого к сложному

В интернете полно священных войн на холиварную тему «Какой фреймворк лучше?». Эта книга не участвует в них. Наша главная цель — дать вам инструмент для решения задачи.

Мы пойдём по пути постепенного усложнения:

Часть 1: Поймём, зачем вообще нужно своё приложение.

Часть 2: Освоим Python Eel — самый простой способ для инженера.

Часть 3: Подключим Arduino и научимся работать с COM-портами.

Часть 4: Выйдем в IoT — получим данные с ESP32 из облака через MQTT.

Часть 5: Рассмотрим альтернативы и научимся упаковывать приложения для коллег.

Уникальная особенность: Режим эмуляции

Одна из главных проблем инженерного ПО — зависимость от железа. Что делать, если Arduino нет под рукой? Или она в другой лаборатории?

В этой книге вы узнаете, как внедрить режим эмуляции (DEBUG_MODE). Вы сможете тестировать интерфейс и логику приложения, генерируя правдоподобные данные программно. Это ускорит разработку в 3–5 раз и позволит демонстрировать приложение заказчику без необходимости везти с собой установку.

Что вас ждёт внутри?

Каждая глава — это готовое решение, которое можно скопировать и адаптировать:

Режим эмуляции — тестируйте код без Arduino/ESP32

Графики в реальном времени — Chart.js + Python

Работа с COM-портами — pyserial, обработка ошибок

IoT-мониторинг — MQTT, HiveMQ Cloud, GitHub Pages

Упаковка в .exe — PyInstaller, один файл для коллег

Исходный код всех приложений, упомянутых в статье, доступен в открытом репозитории на GitHub:

https://github.com/Book-From-the-sensor-to-the-interface/sketch_for_book.git

Технологии — это не просто инструменты. Это расширители возможностей. Они стирают границы между «железом» и «программой». Моя задача как автора — не просто научить вас пользоваться тремя фреймворками, а дать вам свободу создавать инструменты, которые облегчают вашу инженерную работу.

Готовы стереть границы между датчиком и интерфейсом? Тогда начнём наше путешествие.

С наилучшими пожеланиями,

Нави Тулаг.

Часть 1. Введение в инженерную разработку ПО

Зачем инженеру своё приложение?

О чём эта глава?

Вы, вероятно, слышали фразу: «Зачем писать приложение, если есть Excel или Serial Monitor?»

Иногда это звучит как истина. Но на практике — готовые инструменты часто не подходят под специфические задачи лаборатории или производства.

В этой главе мы разберём четыре ключевые причины, по которым инженеру стоит писать своё ПО:

Производительность (автоматизация рутины)

Доступ к оборудованию (COM-порты, GPIO, датчики)

Автономная работа (без интернета, в цеху, в «поле»)

Визуализация и контроль (графики в реальном времени, кнопки управления)

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

1.1. Excel и консоль — это не панацея

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

В Excel:

Нет прямого доступа к COM-порту (нужны макросы или плагины).

Обновление данных в реальном времени тормозит на больших объёмах.

Нельзя отправить команду «Включить нагрев» обратно на устройство.

В Serial Monitor (Arduino IDE):

Только текст, нет графиков.

Нет сохранения данных в удобном формате (CSV/JSON).

Нельзя создать кнопки управления.

А в своём приложении — всё это возможно. И даже необходимо.

1.2. Причина №1: Доступ к оборудованию

Веб-приложения (в браузере) работают в «песочнице». Они не знают, где на диске лежит файл, не видят USB-устройства (без сложных API).

Инженерное десктоп-приложение:

Читает данные с COM-порта напрямую (через Python pyserial).

Работает с локальными базами данных (SQLite) без ограничений.

Управляет реле, моторами, источниками питания через интерфейс.

Пример. Приложение для калибровки датчиков давления. Оно должно опросить 10 датчиков по очереди, сравнить показания с эталоном и записать коэффициенты в память устройства. В браузере это невозможно. В приложении на Python Eel — легко.

1.3. Причина №2: Визуализация в реальном времени

Инженер мыслит графиками. Таблица из 1000 чисел ничего не скажет о тренде.

Современные веб-технологии (Chart.js, Plotly) позволяют строить красивые, интерактивные графики прямо внутри десктопного приложения.

Преимущества своего UI:

Мгновенная реакция: График обновляется по мере поступления данных.

Интерактивность: Можно выделить участок, приблизить, сохранить скриншот.

Аварийная сигнализация: Цвет меняется на красный, если значение превысило порог.

1.4. Причина №3: Автономная работа

Интернет — не всегда надёжен. Цех, подвал, полевые условия… Часто сеть отсутствует вообще.

Веб-сервис зависит от соединения. Десктопное приложение:

Работает полностью локально.

Хранит данные на устройстве.

Синхронизирует их с облаком только когда появляется сеть (если нужно).

Пример. Система мониторинга вибрации двигателя на удалённой насосной станции. Приложение пишет данные в локальный файл 24/7. Раз в сутки, когда появляется связь, оно отправляет отчёт на сервер.

1.5. Причина №4: Производительность и автоматизация

Рутина съедает время. Если вы каждый день запускаете тест по одному и тому же сценарию — автоматизируйте это.

Своё приложение позволяет:

Записать сценарий теста (нагреть до 50°C, ждать 5 мин, снять показания).

Запускать его одной кнопкой.

Сразу получать готовый отчёт (PDF/Excel).

1.6. Когда своё приложение — избыточно?

Честность важна. Писать ПО нужно не всегда.

Используйте готовые инструменты, если:

Нужно просто один раз снять показания (подойдёт мультиметр + блокнот).

Задача одноразовая (не стоит тратить 2 дня на код).

Есть готовое промышленное ПО (например, LabVIEW), которое уже куплено и настроено.

Но если ваш продукт — это инструмент для ежедневной работы, — своё приложение часто даёт лучший UX и экономию времени в долгосрочной перспективе.

1.7. Что мы узнали?

Готовые инструменты (Excel, Serial Monitor) часто ограничены для инженерных задач.

Ключевые преимущества своего ПО: доступ к железу, визуализация, автономность, автоматизация.

Современные фреймворки (Eel, Electron) позволяют использовать веб-технологии для создания удобного UI.

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

Чек-лист. Практическое задание

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

Для каждого ответьте:

2.a. Есть ли у него автоматизация?

2.b. Какие функции занимают больше всего времени вручную?

2.c. Какие из четырёх причин (доступ, визуализация, автономность, автоматизация) могли бы улучшить этот процесс?

Представьте, что вы создаёте приложение для одного из этих процессов.

Напишите 2–3 предложения: какую главную проблему решит ваше приложение?

Пример. «Я создаю панель для тестирования датчиков температуры. Сейчас я записываю показания вручную в журнал. Приложение позволит автоматически собирать данные с 4 датчиков одновременно, строить график и сохранять отчёт в CSV. Это сэкономит 30 минут на каждом тесте».

В следующей главе мы сравним традиционные подходы к созданию GUI (Tkinter, PyQt) с современными веб-обёртками, чтобы вы понимали все компромиссы и выбрали правильный инструмент.

Обзор архитектур: традиционные GUI (Tkinter, PyQt) vs WEB-обёртки

О чём эта глава?

Вы уже поняли, зачем инженеру своё приложение. Теперь возникает главный вопрос: «На чём писать?»

Если вы знаете Python, логичным кажется использовать стандартные библиотеки для интерфейсов. Но есть нюанс: инженеру нужны не просто кнопки, а графики, логи и удобная вёрстка.

В этой главе мы сравним два подхода:

Традиционные GUI (Tkinter, PyQt) — классика Python-разработки.

Веб-обёртки (Eel, Electron) — современный гибрид Python + HTML/CSS.

Архитектурные компромиссы — что вы получаете и что теряете в каждом случае.

Почему для инженерных задач веб-технологии часто выигрывают.

Вы поймёте, почему в этой книге мы делаем ставку на связку Python + Web, и когда всё-таки стоит выбрать старый добрый Tkinter.

2.1. Классический путь: Tkinter и PyQt

Когда Python-разработчик слышит «нужен интерфейс», первая мысль — Tkinter. Он встроен в Python, не требует установки и работает «из коробки».

Пример на Tkinter:

Рис. 2. Пример на Tkinter

Плюсы традиционных GUI:

Нативность: Приложение выглядит как часть ОС (особенно PyQt).

Лёгкость: Tkinter не тянет за собой браузер и весит килобайты.

Отсутствие сервера: Не нужно поднимать локальный веб-сервер, всё работает в одном процессе.

Минусы для инженера:

Визуализация: Построить красивый интерактивный график в Tkinter сложно (нужен matplotlib, который тяжёлый и не всегда интерактивный).

Вёрстка: Выравнивание элементов («сетка») в Tkinter часто превращается в боль. Сделать адаптивный интерфейс под разные экраны трудно.

Порог входа PyQt: PyQt мощнее, но у него сложный синтаксис (сигналы/слоты), и он требует изучения Qt-фреймворка.

Инженерный вердикт. Tkinter подойдёт для простой «кнопки вкл/выкл». Но если нужно отображать графики в реальном времени, логи и дашборды — вы потратите больше времени на борьбу с интерфейсом, чем на логику работы с железом.

2.2. Современный путь: Веб-обёртки (Hybrid Apps)

Идея проста: логика на Python, интерфейс в браузере.

Вы пишете backend на Python (работа с COM-портами, расчёты), а frontend — на HTML/CSS/JS (кнопки, графики Chart.js). Специальная оболочка (Eel, Electron) связывает их.

Пример архитектуры Eel:

Рис. 3. Пример архитектуры Eel

Рис. 4. Пример архитектуры Eel (продолжение)

Плюсы веб-обёрток:

Визуализация: Библиотеки вроде Chart.js или Plotly позволяют строить потрясающие графики несколькими строками кода.

Вёрстка: CSS даёт полный контроль над дизайном. Легко сделать тёмную тему, адаптивность под планшеты.

Разделение ответственности: Инженер пишет Python, дизайнер (или готовый шаблон) отвечает за красоту.

Минусы:

Вес: Даже простое приложение тянет за собой движок браузера (хотя Eel использует системный браузер, что легче).

Сложность: Нужно знать основы HTML/JS (но для инженера это уровень «скопировать и поменять цифры»).

Важно. В этой книге мы используем Eel, потому что он максимально лёгкий для Python-разработчика. Electron мощнее, но требует знания Node.js, что избыточно для задач лаборатории.

2.3. Сравнительная таблица: Что выбрать инженеру?

Давайте посмотрим на цифры и факты. Представим, что мы создаём панель мониторинга температуры с графиком.

Рис. 5.

Вывод: Если ваша цель — быстро сделать удобный инструмент для себя и коллег, веб-обёртки выигрывают за счёт готовых библиотек визуализации.

2.4. Почему мы выбираем Eel для этой книги?

В первой книге мы рассматривали Electron, NW.js и Eel на равных. Но для инженерных задач есть нюансы:

Python — язык инженера. Большинство скриптов для Arduino, обработки данных и расчётов уже написаны на Python. Eel позволяет использовать их без переписывания.

Electron избыточен. Он требует Node.js и собирает свой браузер. Для панели управления двигателем это как стрелять из пушки по воробьям.

Eel — это мост. Он не требует глубокого погружения в веб-разработку. Вы вызываете функции Python из JS так же легко, как из другого модуля Python.

Наша философия. Не становиться веб-разработчиком. Использовать веб-технологии как инструмент для отображения данных, оставляя Python для работы с железом.

2.5. Когда всё-таки стоит выбрать Tkinter?

Честность — важнее моды. Есть случаи, когда веб-обёртки не подходят:

Сверхлёгкие утилиты. Если нужно просто окно с одним полем ввода, которое должно весить 5 МБ.

Работа на старых ПК. В цехах иногда стоят компьютеры с 2 ГБ памяти. Запуск браузера может быть проблематичен.

Полная изоляция. Если политика безопасности запрещает запуск любых браузерных движков (редко, но бывает).

Но для 90% задач современной лаборатории — гибридный подход (Python + Web) является золотым стандартом.

Что мы узнали?

Традиционные GUI (Tkinter) легки, но сложны в вёрстке и визуализации.

Веб-обёртки дают современный интерфейс и мощные графики «из коробки».

Eel идеально подходит инженерам: логика на Python, интерфейс на HTML.

Выбор инструмента зависит от задачи: для дашбордов — веб, для микро-утилит — Tkinter.

В этой книге мы фокусируемся на Eel как на наиболее сбалансированном инструменте.

Чек-лист. Практическое задание

Найдите в интернете скриншоты интерфейсов на Tkinter и на веб-технологиях (например, дашборды Grafana или любые веб-приложения).

Сравните их визуально:

2.a. Где легче читать данные?

2.b. Где графики выглядят современнее?

Подумайте о вашем текущем проекте (из Главы 1):

→ Если бы вы делали его на Tkinter, сколько времени ушло бы на построение графика?

→ Если на Eel — сколько времени уйдёт на подключение Chart.js?

Напишите короткий вывод (2–3 предложения): почему для вашей задачи подходит гибридный подход?

Пример. «Для мониторинга вибрации мне нужно 4 графика в реальном времени. На Tkinter я бы потратил неделю на настройку matplotlib. На Eel я возьму готовый шаблон Chart.js за 1 час. Выбираю Eel».

В следующей главе мы познакомимся с инструментами поближе: Python Eel, Electron и Neutralino. Мы разберём их философию и поймём, почему Eel станет нашим основным рабочим инструментом.

Знакомство с инструментами: Python Eel, Electron, Neutralino. Их философия и применение в инженерии

О чём эта глава?

Вы уже понимаете, зачем инженеру своё приложение и почему веб-технологии в оболочке — правильный выбор.

Теперь пришло время познакомиться с тремя главными инструментами этой книги:

Python Eel — минималистичный мост для Python-разработчиков.

Electron — промышленный стандарт для сложных продуктов.

Neutralino — лёгкая современная альтернатива без Node.js.

В этой главе вы узнаете:

Заметка. Какую проблему каждый из них решает в инженерном контексте.

Заметка. Какая философия лежит в основе каждого фреймворка.

Заметка. Кто их целевая аудитория — и почему вы среди них.

Заметка. Какие сильные и слабые стороны у каждого для задач лаборатории.

Эта глава поможет вам не просто «выбрать фреймворк», а понять, какой язык вам использовать.

3.1. Python Eel: «Мой скрипт заслуживает интерфейс»

История и философия

Eel родился в 2017 году из простой идеи:

«Почему бы не использовать HTML/CSS/JS для интерфейса, а всю логику оставить на Python?»

В отличие от Electron и Neutralino, Eel не встраивает браузер. Вместо этого он:

Запускает локальный веб-сервер на Python (через bottle или gevent-websocket).

Открывает окно системного браузера (Chrome, Edge, Safari).

Связывает Python и JavaScript через HTTP/WebSocket.

Философия Eel:

Не становиться веб-разработчиком. Использовать веб-технологии как инструмент для отображения данных, оставляя Python для работы с железом.

Целевая аудитория

Таблица 2. Целевая аудитория

Заметка. Сильные стороны для инженеров

Очень простой старт: 10 строк Python + 10 строк HTML = готовое приложение.

Полный доступ к экосистеме Python: pyserial, pandas, numpy, scikit-learn, opencv — всё работает «из коробки».

Минимальный порог входа: Не нужно знать JavaScript глубоко — достаточно базовых вызовов функций.

Идеален для скриптов с GUI: Панели управления, сбор данных, визуализация.

Ошибка. Слабые стороны

Нет встроенного доступа к нативным API ОС: Нет меню, трея, уведомлений «из коробки» (требуются доп. библиотеки вроде pystray).

Ограниченные возможности UI: Сложные интерфейсы (drag-and-drop, анимации) — сложнее, чем в Electron.

Производительность вызовов: Каждый вызов Python → JS проходит через HTTP/WebSocket (не критично для 95% задач).

Сборка в .exe: Требует PyInstaller, что может быть громоздко с большими зависимостями.

Пример из практики. Панель мониторинга Arduino

Вот как выглядит типичное Eel-приложение для инженера (из ваших проектов):

Рис. 6.

Рис. 7. Python Eel: «Мой скрипт заслуживает интерфейс» (продолжение)

Что это даёт инженеру:

Режим эмуляции — тестируйте код без Arduino

Графики в реальном времени — Chart.js + Python

Упаковка в .exe — PyInstaller, один файл для коллег

Важно. В этой книге мы делаем ставку на Eel как основной инструмент, потому что он максимально близок к мышлению инженера: Python для логики, HTML для красоты.

3.2. Electron: «Веб-приложение как десктопный продукт»

История и философия

Electron разработан в 2013 году в компании GitHub как внутренний инструмент для редактора Atom. Идея была простой:

«Почему бы не использовать те же технологии, что и для веба, чтобы создавать десктопные приложения?»

Философия Electron:

Чёткое разделение ответственности: Main-процесс (Node.js) управляет ОС, Renderer-процесс (Chromium) отвечает за UI.

Это делает архитектуру предсказуемой, масштабируемой и безопасной.

Целевая аудитория

Таблица 3. Целевая аудитория

Заметка. Сильные стороны

Зрелая экосистема: electron-builder, DevTools, TypeScript-поддержка.

Чёткая архитектура с изоляцией процессов.

Огромное сообщество и документация.

Полный доступ к API ОС: меню, трей, уведомления, диалоги — всё «из коробки».

Поддержка всех современных веб-фреймворков: React, Vue, Svelte.

Ошибка. Слабые стороны для инженеров

Высокое потребление памяти: Каждое окно — отдельный процесс Chromium (~150 МБ минимум).

Большой размер дистрибутива: Минимум ~50–70 МБ даже для «Hello World».

Сложность для новичков: Нужно понимать IPC, preload, sandbox.

Требует знания Node.js: Если ваша логика на Python — придётся поднимать Flask-сервер отдельно.

Пример из практики. Electron + Python (Flask)

Для инженеров Electron чаще всего используется в связке с Python-бэкендом:

Рис. 8.

Когда это оправдано:

Нужен очень сложный UI (редакторы, дашборды с десятками графиков).

Планируется масштабирование (команда разработчиков, версии, обновления).

Требуется нативная интеграция (трей, меню, автозапуск).

Важно. Для большинства инженерных задач это избыточно. Electron — как стрелять из пушки по воробьям, если нужно просто читать данные с датчика.

3.3. Neutralino: «Лёгкий и современный»

История и философия

Neutralino — самый молодой из трёх (появился в 2020 году). Его миссия:

«Создавать лёгкие кроссплатформенные приложения без зависимости от Node.js и тяжёлых браузерных движков.»

Философия Neutralino:

Использовать системный WebView (как Eel), но с нативным API и без Node.js.

Целевая аудитория

Таблица 4. Целевая аудитория

Заметка. Сильные стороны

Очень лёгкий: Дистрибутив ~2–5 МБ (в 10–20 раз меньше Electron!).

Не требует Node.js: Меньше зависимостей, проще сборка.

Системный WebView: Использует Edge WebView2 (Windows), WebKit (macOS), GTK (Linux).

Нативный API: Доступ к файловой системе, диалогам, трею — без дополнительных библиотек.

Безопасность: Песочница по умолчанию, нет Node.js в контексте.

Ошибка. Слабые стороны

Молодое сообщество: Меньше примеров, документации, готовых решений.

Ограниченный API: Не всё, что есть в Electron, доступно «из коробки».

Требует знания JavaScript: Логика пишется на JS, Python подключается отдельно.

Меньше инструментов отладки: DevTools есть, но не такие мощные, как в Electron.