ESP32 Кликер / Хабр

Мини проект для esp32 уровня hello world. Используем esp32 как подобие геймпада.

Вдохновившись постом Электрокликер с таймером, логом и блюпуп захотелось сделать что-то тактильное, одно кнопочное, но без паяльника, станков и при условии что руки растут отнюдь не из плеч. Немного помаявшись и покрутив в руках фиджет кубик, пришла простоя идея - а что если просто считать сколько раз потеребонькал кубик? Спойлер - после подсчёта размеров платы разработки, платы зарядки и аккумулятора, стало понятно, что впихнуть это во вменяемый размер никак не получится. Но плата и несколько кнопок-тумблеров на волне энтузиазма уже были куплены, поэтому идея несколько трансформировалась. Было решено сделать управление простой мини игрой через тумблеры.

В итоге из подручных материалов имелось:

Плата esp32 devkit + expansion board.
Кнопки тумблеры.
Набор проводов перемычек.
Сувенирная картонная коробка в качестве корпуса.

К esp32 с помощью проводов перемычек подключил пару тумблеров. В картонной коробке канцелярским ножом не очень аккуратно вырезал отверстия под кнопки. Коробка была взята достаточно большой, что бы тестировать и с небольшим повер-банком. Следуя туториалам по esp32 запустил веб сервер который поддерживает SSE. SSE был выбран как самый быстрый в реализации вариант реалтайма. Далее нагуглил html+js реализацию понга - Basic Pong HTML and JavaScript Game. Добавил управление через сигналы по SSE. После этого захотел усложнить себе жизнь и запускать html страницу с понгом отдельно, а не с esp32. Тут уже пришлось пободаться с браузером - CORS и защита от смешанного содержимого. Когда понг успешно заработал на компе, стал тестировать на телефоне. Вёртска оказалась не адаптивной, а я css магией никогда не владел, поэтому с помощью ИИ закрыл вопрос за минуту.

Всё в сборе это сейчас работает так:

Прописываем ssid и пароль от своей сети в скетч для esp32.
Скетч заливаем на esp32 по проводу. Как только стартует wifi в консоль падает ip адрес.
- Для удобства можно переключить питание на повер-банк.
Открываем html с игрой как файл или с локального веб сервера. В localstorage через консоль или любым другим способом сохраняем ip адрес esp32.
Из javascript открывается SSE коннект до esp32 и прослушиваются события. Так как используются тумблеры (вкл-выкл), а не тактовые кнопки, то просто запоминаем последнее состояние тумблера. Тумблер включен - ракетка едет вверх. Тумблер выключен - ракетка едет вниз. Двумя тумблерами можно играть или с самим с собой или с товарищем.

Потенциально можно докрутить до состояния, что бы можно было цеплять esp32 к любому телефону по wifi/bluetooth. В законченом состоянии проект видится как аналог старых тетрисов, только вместо встроенного экрана - смартфон.

По техническим моментам:

Всё взаимодействие через wifi, все пароли и адреса - хардкод. Делать страницу с настройками wifi оставил на следующий раз.
Браузеры, безопасность и CORS не дают расслабиться и захостить страницу на github pages. Для проверки запуска с телефона пришлось отдавать html на голом http через свой домен.
- В CORS кроме Allow-Origin необходимо добавить редкий заголовок Access-Control-Allow-Private-Network. Но для firefox надо явно разрешить “доступ к устройствам в локальной сети”. В тоже время в мобильном firefox всё заработало без особых разрешений (либо они синхронизировались по сети).
События через SSE иногда подвисают, а потом прилетают пачками - видимо забивается tcp стэк, не справляется esp32 или что-то подобное. Спросил ИИ, мне сказали отключить алгоритм Нейгла. Алгоритм Нейгла призван объединять маленькие пакеты в один. Это подходит под наблюдаемое поведение, но после отключения алгоритма через setNoDelay(true) существенной разницы я не заметил. Да и в исходниках библиотеки есть код отключения сразу при старте сервера WebServer.cpp. Реализацию отправки событий через web socket или через BLE оставил на когда нибудь.

Сиюминутный зуд потрогать что-то новое был удовлетворён. Управление ракетками с помощью тумблеров - это как минимум забавно и челенджово, так как ракетками в этом случае всегда в движении и отбить мяч становится гораздо труднее.