Автор оригинала: Tim Grossmann.
Что если все ваши мобильные устройства были одним экраном? Это, вероятно, не самый распространенный вопрос, чтобы спросить себя.
Но, только на секунду, на самом деле думать об этом. Подумайте обо всех возможностях возможности объединить любое мобильное устройство, независимо от своей операционной системы. Это то, что делает Swip.js.
Идея довольно проста: поместите несколько устройств любого размера рядом друг с другом и «SWIP» (щипнуть) пальцы на своих краях, чтобы объединить отдельные экраны на один большой экран.
С Swip.js вы можете построить сложные многоустройства, как это:
Истоки идеи
Когда мы искали идею развивать у хайматона, Павел вспомнил этот уловитель, он видел довольно давно:
Мы оба понравились идею отдельных «глупых» вещей, которые мы могли бы объединить, чтобы создать рабочую систему. Мы думали о создании чего-то похожего с малиной PI.
Но так как мы не были аппаратными людьми, мы не смогли построить что-то подобное. Вот когда мы поняли, что почти у каждого есть маленький компьютер (с веб-браузером) в их кармане. Компьютер достаточно мощный для обработки даже сложных задач.
Мы знали, что наш язык выбора будет Javascript , поскольку это полностью независимая платформа, и работает на любом устройстве с браузером.
Прототипирование в Inno {Hacks} -hackathon
Первая идея, на самом деле, должна была построить демонстрацию физики, где телефоны могут «бросить», как кубики на более крупное устройство (например, iPad), который будет содержать физическую среду.
Идеи быстро обострились и после некоторого звона и кодирования, и мы решили немного уменьшить сложность. К концу хакатона у нас была работающая демо.
Наша следующая идея состояла в том, чтобы построить игру, где у вас был iPad, лежащий на столе, и вам пришлось взаимодействовать с ним, используя свой телефон.
Если вы взгляните на концепцию, вы можете увидеть, что планшет должен служить «настольной игрой» и с телефонами, которые вы расширили доску, чтобы победить уровень. Идея состояла в том, чтобы иметь разные пути пути на вашем телефоне, из которого вы можете выбрать один. Мяч будет двигаться, постоянно становится быстрее, а цель либо выживет дольше, чем другие игроки, либо достичь позиции цели.
Через некоторое время мы также бросили эту идею за бортом (потому что мы не смогли получить планшет) и решили сделать слияние отображения главной особенности нашего поля, а не в какой-то творческой игре, которая быстро станет скучным.
Вот когда мы решили пойти на 2 простых примера: классика Понг игра И, чтобы продемонстрировать, что это не просто весело с играми, немного делиться фотографиями приложение.
Итак, вот результат ~ 20 часов взлома на хакатоне:
Что это за колдовство?
Поверьте, или нет, это просто JavaScript, Canvas и технология, называемая Websockets Отказ
Библиотеки всегда хорошая вещь для хататонов, поэтому вам не нужно будет обращаться с голым JavaScript. Поэтому мы использовали Разъем. Ио Чтобы дать нам более приятный API для обработки WebSockets в SWIP.
По сути, вы можете представить подключение WebSocket для рабочей линии туннель, который соединяет клиент и сервер с постоянным, двунаправленным соединением в реальном времени. Обе стороны могут просто отправлять и получать и отвечать на сообщения.
Быстрый пример с использованием сокета. Доверие
Давайте сначала начнем с сервера. Поскольку мы хотим держать его легко и быстро, мы будем использовать Express для быстрого настройки сервера.
const app = require('express')();
const http = require('http').Server(app);
const io = require('socket.io')(http);
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
io.on('connection', (socket) => {
console.log('a user connected');
});
http.listen(3000);Это все, что вам нужно на стороне сервера для начала.
Теперь откройте браузер и отправьтесь до localhost: 3000 И спросите себя, почему это не введет что-нибудь в консоль. Вам нужно сделать еще одну вещь. Вам нужно также запустить подключение WebSocket на стороне клиента. Это будет index.html Вы можете увидеть в app.get Функция на стороне сервера.
Если вы сейчас отправитесь на localhost: 3000 И посмотрите на терминал, где вы начали сервер, вы увидите Пользователь подключен там.
розетка это часть, которую вы хотите сосредоточиться на сейчас. В index.html Мы делаем Socket.emit («Сообщение», «Hello») . Мы издание Новое сообщение с Имя сообщение и данные Привет И хочу реагировать на это сообщение на сервере. Для этого нам нужно работать с розеткой, которую мы получаем при звонке IO.ON («Соединение», ( сокет ) =>. ..). Поэтому мы просто добавляем следующие строки.
io.on('connection', (socket) => {
socket.on('message', (msg) => {
console.log('message: ' + msg);
socket.emit('messageBack', { message: 'Hello to you!'});
});
});Теперь вы увидите Привет Напечатано к консоли всякий раз, когда новый клиент присоединяется к серверу. К настоящему времени это не слишком особенное. Но мы также можем отправлять данные с сервера на клиента, на одном сокете и даже использовать все объекты вместо просто строк. Клиент просто должен реагировать на исходное событие с Socket.ON («Сообщение», (данные) =>. ..) И может затем использовать отправленные данные.
Если вы хотите узнать больше о розетке. Ио, проверь их Учебник Чатаппа , где вы быстро построите базовый слабый клон.
Так как вы сейчас немного знаете о технологии позади него, вы, вероятно, можете уже догадаться, как он в основном работал.
Мы просто отправляем данные о положении элементов все время и визуализации E.g. понг-шар на каждом клиенте.
Это действительно не является исполнением в масштабе. Но мы узнали, что при прототипировании в хакатоне Вы действительно не должны беспокоиться о производительности Отказ
Люди там были довольно впечатлены и озадачены, как это может работать а также Мы закончили выиграть технологию инновационной премии Отказ Они даже спросили нас, если мы думаем о работе над этим дальше.
Распространение слова и получение первых 1000 звезд GitHub
Когда мы закончили нашу первую доступную версию Swip.js. Мы были очень гордится тем, что оказалось такой развлекательный проект.
Мы хотели показать ей больше людей, получить некоторые отзывы и (конечно) получить звезды GitHub, чтобы улучшить нашу аудиторию. Tech-News Источник нашего выбора был Hackernews . У него есть специальный раздел, чтобы продемонстрировать вашу работу.
Павел прислал мне сообщение около получаса после Размещение ссылки Говорят мне, что мы уже ударили более 100 звезд Github. С этого момента я проверил на комментарии на Hackernews как каждую минуту. Мы оба не могли поверить, как быстро это взлетело.
Я начал спамен каждый возможный блоггер, JavaScript Guru и Subreddit, который я мог бы подумать со ссылкой на репо. У нас есть действительно потрясающие отзывы. Один человек, который заметил, был Куинси Ларсон:
Это выглядит как магия, но это просто JavaScript. https://t.co/1mgitjyxpx.
Полс Твиттер затопил уведомления И мы даже получили в Японский блог Отказ
Это было просто потрясающе!
paulsonnentag/swip SWIP – библиотека для создания нескольких экспериментов по устройству github.com
О строительстве библиотеки JavaScript
После того, как мы услышали невероятную обратную связь от всех конкурентов и судей, мы обсуждали, следует ли нам работать над этим немного больше. Мы решили поставить Еще 2 дня в него, чтобы построить библиотеку.
Ну, мы закончили Инвестирование 2 целых недели в проект, потому что мы чрезвычайно недооценили рабочую нагрузку. Нам пришлось начать с нуля, потому что наша кодовая база была почти непригодна.
Работая над этим, мы столкнулись с несколькими проблемами. Одна из самых больших задач была Как мы это делаем с более чем 2 устройствами? Работая над этим в хакатоне у нас было только 2 телефона, поэтому мы никогда не думали о проблемах, которые мы станем при добавлении большего количества.
Получить вполне технический
Если вы не в технических аспектах проекта, не стесняйтесь пропустить эту часть и посмотреть демонстрацию, которые мы построили с библиотекой.
Принимая грубый и грязный прототип и превращая его в работу и фактически используемая библиотека поставляется с целым количеством проблем, которые мы никогда не думали о создании прототипа.
Насколько большой физический пиксель?
Для первого доказательства концепции мы создаем небольшой тест, где мы будем отображать статическое изображение и расширить его через два устройства после того, как они были «свернуты».
После того, как мы поступили, мы поняли, что было что-то выключено: картинки не совсем совпадают, и масштабирование не было правильно. Проблема в том, что в зависимости от размера и разрешения устройства 100px может быть немного больше или меньше, чем на другом устройстве.
Мы измерили несколько смартфонов и таблеток и просто взяли в среднем все измерения. Для SWIP.JS мы поэтому определили, что 60 пикселей должны быть эквивалентны 1 сантиметру и масштабировали холст в соответствии с этим.
Это был ключ, если бы мы хотели создать впечатление крупного непрерывного игрового мира, в котором вы можете взглянуть со своими смартфонами.
Без стандартизированных размеров визуализированные частицы имели разные размеры на разных экранах.
К сожалению, мы не выяснили способ автоматически рассчитать этот коэффициент масштабирования, поэтому при первом запуске приложения мы предлагаем пользователю вводить диагональную длину устройства.
Государственная обработка
Синхронизация состояния на нескольких устройствах в реальном времени – это сложная проблема. Там нет глобального времени, потому что внутренние часы каждого устройства могут быть установлены на несколько сотен миллисекунд в будущем или нескольких миллисекундах в прошлом. Сеть не всегда надежна, и сообщения могут быть отложены или полностью потеряны. Мы подробно рассмотрели все эти проблемы, но вместо этого направлены на решение, которое достаточно хорошо, чтобы проверить нашу идею.
Логика приложения живет на сервере, а смартфоны являются просто глупыми клиентами. Клиент отправляет событие на сервер, если пользователь вызывает действие, как касание экрана. Сервер реагирует на то, что изменение вычисляет следующее игровое состояние и отправляет это обновление клиентам. Таким образом, клиенты все получают такие же изменения и не станут без синхронизации через некоторое время. Это не идеальное решение и становится отстающим, если задержка сети увеличивается, но легко реализовать и отлично работает.
Мы использовали Redux для реализации этого шаблона, если вы заинтересованы в технических деталях, которые вы можете Об этом подробнее здесь!
Первоначально каждое устройство имеет свой кластер. Разработчик может указать, что должно произойти, когда два устройства проводятся и поэтому объединяются. Это все происходит на стороне сервера. В этом примере мы просто хотим объединить все шары в сцене.
Как на самом деле выглядел мир Canvas?
Вы можете подумать о «окружающей среде» как бесконечно длинную и широкую область. Каждое устройство просто делает содержимое, которое было бы видно в оконной области.
После того, как устройство начнется как происхождение. С «SWIP», простым жестким жестом вы определяете два контрольных точка, которые используются для расчета смещений с учетом высоты и ширины устройства, а также физического перевода X и Y нового устройства.
Хорошо, так как мы сейчас сделаны с боеприпасами, вот еще одна демонстрация, чтобы показать, что может сделать библиотека SWIP.JS. Наслаждаться!
Кто мы есть
Пол Соннентаг
Ведущий разработчик, идея-инициатор и мастерм этого проекта
Тим Гросманн
Разработчик, идея-формирователь, разбрасыватель слов и писатель
Спасибо за чтение, мы хотели бы услышать ваши мысли и мнение об этом, так что не стесняйтесь комментировать или напрямую ударили меня или Пол с помощью электронной почты.
Также обязательно следите за нами на YouTube и к star swip.js на github Отказ
Мы всегда ищем новые возможности. Вы из Top Tech Company и поиск стажеров или организатора конференции JS? Пожалуйста свяжитесь с нами . Мы хотели бы связаться!
Оригинал: “https://www.freecodecamp.org/news/what-if-all-your-mobile-devices-formed-a-single-screen-9c6ff01ed0c3/”