TGViewer
Будни разработчика Будни разработчика @htmlshit · 14.4K subscribers
Post #2968 3K
#заметка дня

Судя по реакциям, машинки на иллюстрации к посту выше вам совсем не знакомы... Ну, давайте попробуем это исправить.

Итак, на фото — коллекционные машинки из серии Shell Motorsport.

Их можно купить на любой заправке Shell за 10 или 5 евро, в зависимости от наличия распродаж, но есть нюанс.

Нюанс заключается в том, что машинки — на радиоуправлении. А точнее, на Bluetooth-управлении. Вот только в самой машинке никакой электроники нет, есть только два моторчика и четыре провода.

А вот аккумулятор и электроника покупаются отдельно, за те же 10 или 5 евро. И расположены они в маленькой белой коробочке, на фото — перед машинками.

На ней, кстати, виден логотип Bluetooth 😛

Вот такой вот беспощадный маркетинг. Впрочем, машинки лицензированные и кто-то покупает их для коллекции, а один аккумулятор можно использовать для всех. Обеспечивает 5-10 минут игры.

Естественно, играть можно только включив пульт в проприетарном приложении от Shell.

На аккумуляторе есть два светодиода, разъём Micro USB для зарядки, четыре контакта и выключатель.

Понятное дело, что я не похвастаться вам их принёс (хотя я-то как раз умудрился попасть на распродажу и купить аккумуляторы и машинки по 5 евро), а показать, как можно работать с Bluetooth-устройствами прямо из браузера!

Да-да, получается, что за 5-10 евро можно приобрести готовый набор Bluetooth плюс аккумулятор и использовать его для чего угодно! Ведь что угодно лучше, если в нём есть Bluetooth. Потому, было бы неплохо научиться этим пользоваться. На входе радио, на выходе — четыре контакта, током на которых можно управлять.

И тут нам на помощь и придёт Web Bluetooth API. К сожалению, пока доступен он только в Chrome и я раньше вообще не понимал, зачем оно мне нужно. Не то, чтоб я теперь понимал больше, но почему бы и нет.

Ну что же, для начала было бы неплохо найти и прочитать протокол этих аккумуляторов. К счастью, эта работа уже проделана за нас: https://gist.github.com/scrool/e79d6a4cb50c26499746f4fe473b3768

Вокруг машинок образовалось целое сообщество энтузиастов! И это очень помогает. В итоге, нам стал доступен весь алгоритм работы и ключи шифрования.

Итак:

1. Организуем соединение по стандартному Bluetooth Low Energy протоколу, какое совпадение, ведь Web Bluetooth API как раз про него:

var device = await navigator.bluetooth.requestDevice({
filters: [
{ namePrefix: "QCAR-" },
],
optionalServices: [
CONTROL_SERVICE_UUID,
BATTERY_SERVICE_UUID,
CONTROL_CHARACTERISTICS_UUID,
BATTERY_CHARACTERISTICS_UUID,
]
});
await connectDevice(device);


2. Обмениваемся ключами шифрования
3. Формируем командный пакет, который состоит из последовательности байт: нажатые клавиши направления, включён ли турбо-режим, включены ли лампочки.
cmd[1] = 0x43;
cmd[2] = 0x54;
cmd[3] = 0x4c;
cmd[8] = 1;
cmd[9] = 0x50;

if (up) cmd[4] = 1;
if (down) cmd[5] = 1;
if (left) cmd[6] = 1;
if (right) cmd[7] = 1;

if (light) cmd[8] = 0;
if (turbo) cmd[9] = 0x64;

4. Отправляем!

Я отдаю себе отчёт в том, что не у всех может быть доступ к этим машинкам, да и не всем это может быть интересно, но мне очень нравится, что потребительская техника и embedded-разработка становятся намного ближе к веб-разработчикам, позволяя нам очень и очень многое :)

Саму страницу я выкатил на сервис Netlify Drop, мало ли у кого эти машинки имеются: https://6692b38da9380d4b1dbd0170--lucky-cat-37a5ab.netlify.app/

Доступ только с Chrome, даже в браузере Brave приходится отдельно включать нужные API.

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

И не надо мне говорить про клавиши на ноутбуке, это не мой 🙃

Ну что, котаны, все в embedded? :)
  • ❤ 29
  • 🤩 5
  • 👍 4
More from @htmlshit
  1. Oct 16, 2026#заметка дня Когда Гарри Каспаров проиграл DeepBlue в шахматы, всем, в целом, стало понятн…
  2. Oct 15, 2026Post #4324
  3. Oct 14, 2026Атмосфера HolyJS: ради чего стоит приехать на площадку 23–24 октября в Санкт Петербурге и…
  4. Oct 13, 2026#такое дня Сидим, разрабатываем дизайн систему, следуем WCAG, вычитываем эксплейнеры с htt…
  5. Oct 13, 2026🏁Тестовый собес на Frontend с разработчиком из R-Vision, ex-Сбер 15 октября в 19:00 (МСК)…
  6. Oct 13, 2026#инструмент дня Когда надоело, что ссылки из рабочего Slack открываются в личном профиле C…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →