Несколько лет назад я наткнулся на Project Jacquard, проект Google ATAP по созданию интерактивной джинсовой куртки для управления приложениями на вашем телефоне, такими как прием или отклонение вызовов, изменение музыки и т. Д.

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

Мне очень нравится изучать инновационные технологии таким образом, чтобы это было доступно множеству людей, поэтому я провел несколько дней во время рождественских каникул, создав быстрый прототип, используя некоторые компоненты Arduino и JavaScript. Вот конечный результат:

Это очень грубая 1-я версия, она чрезвычайно хакерская как со стороны оборудования, так и со стороны кода, поэтому я делюсь этим постом только для объяснения общей концепции, так что любой может воспроизвести ее, если вам интересно :) . Он определенно не готов к производству, и в него нужно внести много улучшений!

Концепция

Перед тем, как приступить к созданию прототипа, я потратил некоторое время, пытаясь понять, как работает жаккардовая куртка Project Jacquard, чтобы иметь лучшее представление о том, как ее строить.

Я знал, что здесь используется токопроводящая нить, которая выглядит и ведет себя как обычная швейная нить, но также является токопроводящей. Это позволяет использовать его для замены проводов, но его также можно превратить в емкостной датчик, чтобы он мог определять, касаетесь вы его или нет. В «классическом» емкостном измерении, когда вы читаете значение емкости, вы получаете 0, если к компоненту не прикасались, и 1, если касались. В этом проекте я использовал более продвинутый тип емкостного зондирования, с помощью которого мы можем получать данные в более широком диапазоне.

Если мы подумаем о простом жесте «смахивания», мы могли бы начать с попытки разрешить пользователю выполнять «смахивание вправо», сшивая 2–3 нитки в макете в виде столбца, соединяя их с контактами 7–9 на Arduino и обнаруживаем, касаемся ли мы их, например, от соединения, подключенного к выводу 7, до соединения, подключенного к выводу 9.

Давайте разберемся немного подробнее.

Материал

Для этого на аппаратной стороне я использовал:

А со стороны программного обеспечения:

  • Ардуино
  • Node.js
  • Three.js

Шаги

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

Как упоминалось выше, прикосновение к потокам в определенном порядке слева направо было бы довольно просто, я полагаю, мне пришлось бы проверить, изменились ли данные, которые я получаю от прикосновения к потоку, с 0 на 1 на контакте 7, затем 8, затем 9; но в приведенной выше 3D-анимации у них было более интересное взаимодействие.

Проведя небольшое исследование и прочитав их статью, я понял, что они сшили нити в виде сетки, чтобы иметь возможность переводить каждую точку (где пересекаются горизонтальные и вертикальные нити) в координаты x и y. Затем их можно использовать так же, как вы можете использовать координаты x и y мыши для анимации объектов в браузере.

1) Пришиваем нитки

Я в жизни ничего не шила.

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

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

Кроме того, убедитесь, что каждая нить не соприкасается с другой, иначе ваше чтение будет неправильным.

В итоге после нескольких попыток у меня получилась вот такая сетка:

Как видите, у меня 3 строки и 3 столбца, поэтому я могу коснуться в общей сложности 9 возможных точек.

Поскольку эти «точки» будут переведены в координаты (x, y), чем больше столбцов и строк, тем лучше, потому что чем больше у вас точек, тем больше вы можете разделить экран и интерфейс, чтобы получить более плавную анимацию.

Теперь, когда я пришил нитки, перейдем к сборке фурнитуры.

2) Подключаем Arduino к ткани

Базовая настройка следующая:

Резистор 10МО (мегаом) подключается к контактам 4 и 8, а зажим «крокодил» обеспечивает связь между контактом 4 и всем, что вы решите прикрепить к другой руке (токопроводящая нить, провод, монета, банан и т. Д.).

Резистор 10МО необходим для того типа емкостного датчика, который мы здесь делаем, если вы используете более низкий резистор, он также может не работать.

Это работает для 1 куска резьбы, но в моем случае у меня их 6, поэтому мне пришлось отказаться от прямого подключения к Arduino и вместо этого использовать макетную плату.

Вот пример для 2 частей потока, но если вам нужно подключить больше, просто повторите ту же настройку для каждого потока.

На самом деле так это выглядит… 😱

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

Каждая клипса-крокодил соединяется с одной рукой каждой нити. Теперь перейдем к коду.

3) Получение емкости в Arduino

Ниже приведены несколько примеров кода из моей установки, но вы можете начать с этого скрипта.

Я использовал библиотеку CapacitiveSense. Ниже приведена начальная настройка различных переменных.

Мы указываем, какие контакты используются для емкостного считывания, мы объявляем целые числа x и y, которые будут содержать координаты, которые мы собираемся отправить в Node.js, мы также создаем целые числа для хранения прошлых отправленных координат, чтобы мы не отправляли ненужные данные в Node.js, и, наконец, мы создаем строки для отправленного результата. Я использовал строки, потому что Arduino не имеет встроенных массивов или хэш-карт, поэтому сейчас я просто использовал строки и позже найду способ провести рефакторинг.

Затем в функции настройки мы начинаем со сброса значений на всех контактах, инициируем наши результирующие переменные, которые мы отправим позже по последовательному каналу, и начинаем последовательную связь.

В функции цикла мы считываем значение, поступающее со всех контактов емкостного датчика, проверяем, достигают ли они определенного порога (если затронут нить, подключенный к этим контактам), и если мы еще не отправили эти координаты (x, y) , мы отправляем их по серийному номеру.

Вот и все! Как я уже сказал, это очень быстрое и грязное решение, которое необходимо улучшить, но оно работает! : D

4) Серверная часть JavaScript

В Node.js моей первоначальной мыслью было использовать модуль Serialport для получения данных и использовать веб-сокеты для отправки их с сервера в браузер для изменения анимации. Раньше я работал с подобными вещами без каких-либо проблем, но по какой-то причине с этой настройкой связь через последовательный порт сначала была в порядке, но как только я попытался подключить веб-сокеты, все было очень медленно и много данных были потеряны, поэтому мне пришлось искать другой способ.

Я решил использовать дочерние процессы, чтобы иметь один, который обрабатывает связь с Arduino, и тот, который настраивает веб-сервер и отправляет данные в браузер.

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

Основной файл Node.js выглядит так:

Файл arduinoData.js выглядит так:

В этом файле нам нужны модули, откройте последовательную связь на том же порту, что и Arduino, с той же скоростью передачи, и когда мы получим данные, мы отправим их обратно, поэтому функция arduino.on('message') в предыдущем файле запускается, а затем отправляет данные в файл webServer.js, который выглядит так:

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

5) Анимация интерфейса

В нашем интерфейсном файле для получения данных, поступающих с сервера, мы пишем что-то вроде этого:

var socket = new WebSocket('ws://localhost:8000');
socket.onmessage = function(e){
  var msg = e.data;
}

Теперь вся связь между датчиками и клиентской частью должна быть настроена, чтобы мы могли делать с ней все, что захотим! Я решил поработать над анимацией, похожей на ту, что сделал Google, но вы могли бы делать много чего другого! :)

Было бы слишком долго подробно объяснять, как работает 3D-анимация, но я в основном создал плоскость каркасов с помощью Three.js, разделил ее на 9 частей и анимировал ту часть, которая активируется при прикосновении к потоку.

Я надеюсь, что смогу получить более подробную информацию в будущем посте! :)

Возможности

Честно говоря, я не особо задумывался о различных возможностях, которые могут открыться с помощью таких технологий. Меня больше волновала задача воссоздать это!

Однако, поскольку Google использовал его в куртке, одна из самых очевидных возможностей - иметь такую ​​технологию в одежде, но не только! Его также можно встроить в диваны, одеяла и т. Д. В ситуациях, когда вы можете взаимодействовать с некоторыми интерфейсами или устройствами, не поднимая телефон.

Пределы

Как видите, на данный момент все это довольно хакерское и громоздкое, поэтому основным ограничением является то, что его нельзя носить или переносить простым способом. Однако со временем это можно исправить, поскольку вы можете заменить Arduino чем-то меньшим, например, ATTiny85.

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

Кроме того, на данный момент он работает с Arduino UNO, поэтому его нужно подключить к моему компьютеру. В идеале я бы хотел заменить его на микроконтроллер с поддержкой Wi-Fi или Bluetooth, чтобы он был полностью портативным.

Наконец, я чувствую, что скорость передачи данных между Arduino и JavaScript немного медленнее по сравнению с другими проектами, которые я создавал ранее, поэтому для его улучшения потребуется оптимизация кода.

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

Я, наверное, напишу еще несколько, когда улучшу прототип и построю другие! :)