Интерактивный стол «Родной край» для краеведческого музея
Киоск-приложение для сенсорного стола 4K: летопись нефтедобычи района, фотоархив, геология, карта месторождений и три обучающие игры — с админ-панелью прямо на столе и полностью офлайн-работой.
О проекте
Обратились с запросом на замену статичных стендов экспозиции интерактивным сенсорным столом: посетитель сам листает хронологию нефтедобычи Чернушинского района, разглядывает архивные снимки, изучает карту месторождений и закрепляет материал в играх. Стол стоит в зале без интернета и без ИТ-специалиста рядом.
Это десктоп-приложение на Electron + React + TypeScript под сенсорный стол 3840×2160: киоск-оболочка с автозапуском и защитой от выхода на рабочий стол, пять разделов экспозиции, три обучающие игры и админ-панель для правки контента прямо на столе. Вся сцена свёрстана в фиксированных 4K-координатах и масштабируется под фактический экран одним преобразованием.
Технологии
- Electron
- React
- TypeScript
- Vite
- Node.js
- electron-builder
- AppImage / deb / rpm
- Docker
Что разработано
- Киоск-оболочка на Electron: полноэкранное окно без рамки, перехват закрытия, блокировка Alt+F4, F11, Ctrl+R, Ctrl+W, Ctrl+Q и DevTools, запрет новых окон и внешней навигации, single-instance lock
- Фиксированная 4K-сцена 3840×2160 с автомасштабированием — единая раскладка на столе, мониторе разработчика и в веб-превью
- Раздел «Летопись»: вертикальный таймлайн от разведки 1947–1948 годов до сегодняшнего дня (18 записей) и блок «Люди нефтяного края» с биографиями первооткрывателей
- Раздел «Фотографии»: карточки архивных снимков музея с подписями и полноэкранным просмотром
- Разделы «Геология» и «Карта месторождений»: схема района с метками промыслов, список месторождений с годами и справкой по каждому
- Викторина по нефтяной истории района: несколько верных ответов, разбор после каждого вопроса, итог в процентах с кольцевой диаграммой и текстовой оценкой
- Филворд: генератор поля раскладывает 20 отраслевых терминов с приоритетом пересечений и наращивает поле, пока не поместятся все слова; поиск касанием, факт по каждому найденному слову, таймер
- Пятнашки на снимках заказчика: сложность 3×3 или 4×4, перемешивание только допустимыми ходами, доска в пропорциях исходного кадра, счётчик шагов
- Экран-заставка с видеороликом заказчика и логотипом музея, вход в приложение по касанию
- Рекорды между запусками: лучший процент викторины, лучшее время филворда и выбранная сложность пятнашек
- Админ-панель на самом столе: вход по PIN, вкладки «Фотографии», «Летопись · годы», «Люди нефтяного края» и смена PIN, добавление / удаление / порядок карточек
- Экранная клавиатура админ-панели: русская и латинская раскладки, цифры, пунктуация, регистр и перенос абзаца — в киоске системная клавиатура недоступна
- Загрузка снимков администратором: системный диалог выбора файла, копирование в хранилище приложения и отдача в интерфейс через собственный протокол media:// с защитой от выхода за пределы каталога
- Внешний файл наполнения с посекционной валидацией: некорректный раздел подменяется встроенным образцом, остальные продолжают работать; формат совместим с внешней CMS
- Поставка на Linux (включая РЕД ОС): AppImage, deb и rpm, сборка в контейнере electronuserland/builder, готовая папка для флешки со скриптами установки, удаления и запуска и инструкциями для музея
- Автозапуск при включении устройства: автозапуск-ярлык на Linux и login item на Windows; веб-превью интерфейса в Docker для показа и приёмки без сенсорного стола
Ключевые фичи
- Правка контента руками сотрудника музея прямо на столе: PIN, редакторы разделов, фотографии — без удалённого подключения, интернета и пересборки приложения
- Полная автономность: шрифты, видео и снимки внутри сборки, ни один экран не обращается в сеть
- Защита экспозиции от посетителя: киоск-режим, заблокированные системные комбинации и скрытый служебный выход по тройному касанию угла с подтверждением
- Возврат на заставку после 90 секунд бездействия — но не во время работы администратора, чтобы длинная правка текста не прервалась на середине
- Филворд, который всегда решается: раскладка подбирается заново на каждую партию, поле растёт, пока не поместятся все 20 слов, свободные клетки добиваются случайными буквами
- Пятнашки без нерешаемых позиций: доска перемешивается только допустимыми ходами, а не случайной перестановкой плиток
- Перемешивание вариантов викторины: в исходном списке верный ответ всегда стоял первым — без перемешивания игра проходилась вслепую нажатием на верхнюю строку
- Фотография с флешки копируется в хранилище приложения — носитель можно извлечь сразу, снимок остаётся в экспозиции
- Наполнение хранится отдельно от программы и переживает переустановку — обновление версии не стирает работу музея
- Установка с флешки двумя способами на выбор: двойным щелчком по deb/rpm или скриптом без пароля администратора — результат и автозапуск одинаковые
- Запуск на «неудобном» Linux: скрипт сам обходит отсутствие libfuse2 и запрет песочницы Chromium вместо показа ошибки в зале
Решение задачи
Главное ограничение проекта — не интерфейс, а условия эксплуатации: стол стоит в зале, рядом нет ни интернета, ни ИТ-специалиста, а работать он должен весь день без присмотра. Отсюда три опоры решения: полная офлайн-автономность, киоск-режим с перехватом всех штатных способов выйти из приложения и автовозврат на заставку, чтобы каждый следующий посетитель заставал стол в исходном состоянии.
Вторая часть задачи — сделать музей независимым в наполнении. Вместо удалённой CMS правка вынесена в саму панель: PIN, экранная клавиатура и выбор фотографий с флешки. Контент лежит отдельно от программы, валидируется по разделам и переживает переустановку, поэтому ошибка в одном блоке не роняет экспозицию, а обновление версии не стирает работу сотрудников.
Игры сделаны как часть экспозиции, а не как отдельные развлечения: вопросы, слова филворда и снимки для пятнашек — материал заказчика об истории нефтедобычи района, а генераторы поля и перемешивания написаны так, чтобы у посетителя физически не могло получиться нерешаемой партии.
Метрики
Результаты
Заказать похожий проект
Оставьте заявку — обсудим задачу и предложим решение под ваш бизнес.
Оставить заявку













