Как Scribblify позволяет создать межплатформенный графический пользовательский интерфейс с Node.js* и встроенной платформой Chromium*

By Edward J. Correia

 

Введение

 

Для разработчика Мэтта Пильца, уроженца Висконсина, тройка явно является счастливым числом. Пильц — основатель компании LinkedPIXEL, , и благодаря своим творческим способностям и упорному труду он одержал победу подряд на трех конкурсах разработчиков проводимых корпорацией Intel. Недавно его приложение для рисования Scribblify с 10-точечным сенсорным управлением и графическим пользовательским интерфейсом на базе Google Chrome* получило главный приз на конкурсе Intel® App Innovation Contest 2013 При разработке приложения использовались ресурсы с портала Intel® Developer Zone. Весной 2013 года Пильц выиграл конкурс Intel® Perceptual Computing Challenge, представив приложение Magic Doodle Pad,для рисования с управлением с помощью жестов руки. В 2012 году он выпустил игру Ballastic, оптимизированную для ультрабуков.

Как и в прошлых конкурсных работах, замысел приложения Scribblify (рис. 1) родился задолго до начала конкурса, но приложение Scribblify получило путевку в жизнь именно на мобильных устройствах. Будучи одним из 200 участников конкурса, получивших компьютер-моноблок Lenovo Horizon* от спонсора, корпорации Lenovo, Пильц с радостью принял идею переделать свое приложение для полноразмерного экрана. «Когда я узнал про моноблок Lenovo Horizon с огромным 27-дюймовым сенсорным экраном высокой четкости с разрешением 1920х1080, я понял, как здорово будет создать версию этого приложения для большого полотна, чтобы можно было рисовать прямо на праздничном столе или на других больших поверхностях, — говорит он. — Вот куда меня привела концепция программы». Для этого Пильцу пришлось изменить программу таким образом, чтобы она хорошо работала на экране вшестеро большем, чем раньше, и принимала сенсорный ввод с 10 точек касания вместо одной.

Рисунок 1.Scribblify позволяет пользователям создавать любые наброски и рисунки, от каракулей до настоящего искусства

 

Происхождение Scribblify

Пильц начал заниматься разработкой мобильных приложений в 2010 году, когда он приобрел свое первое мобильное устройство — Apple iPod touch*. Компания LinkedPIXEL выпустила раннюю версию Scribblify в следующем году. «Сначала интерфейс был предназначен для разрешения 480x320. Все было очень маленьким и компактным, чтобы поддерживать крайне ограниченные на тот момент аппаратные ресурсы», — вспоминает он. Приложение Scribblify для iOS* поступило в магазин App Store в январе 2011 года. «Его стали устанавливать, причем с каждым месяцем все больше», — говорит Пильц. Поэтому примерно год назад он выпустил версию для Google Android* .

Пильц описывает Scribblify как программу для непрофессионального рисования и набросков с некоторыми особыми возможностями. «Моя программа отличается от остальных кистями и цветовыми эффектами», — говорит он. Кисти (см. рис. 2), которые он создал сам, включают текстуры, отсутствующие в большинстве подобных приложений для рисования. «Мне нравится думать, что большинство их уникально», — говорит он, но тут же добавляет, что Scribblify не следует считать конкурентом мощных приложений для профессиональной работы над иллюстрациями. «Научиться работать с предназначенным для iPad эквивалентом такого приложения, как Photoshop, очень непросто, — заявляет Пильц. — С другой стороны, есть очень простые приложения для рисования, в которых только одна обычная круглая кисть и совсем немного разных параметров. А на промежуточном уровне, для которого я и задумал Scribblify, не было ничего подобного. Это приложение для пользователей любого возраста, и не нужно обучаться работе с ним: его достаточно просто запустить и можно сразу использовать».

 

Рисунок 2. В приложении Scribblify поддерживается 62 оригинальных кисти

 

Проблемы

 

Первое затруднение возникло, когда пришлось выбрать технологию для создания версии Scribblify для Microsoft Windows*. Сначала Пильц использовал пакет App Game Kit* (AGK) компании TGC, с помощью которого он ранее сделал игру Ballastic. «Мне удалось создать грубый прототип, но его функциональность была крайне ограничена по сравнению с тем, чего я хотел добиться в этом приложении», — говорит Мэтт. Для участия в конкурсе приложения должны быть разработаны для многопользовательского интерфейса Lenovo Aura* и не должны опираться на крупные фрагменты используемой операционной системы. Из правил следовало, что разработчики не должны были использовать никакие встроенные диалоговые окна Windows. «Было бы очень просто использовать в моем приложении стандартные диалоговые окна открытия и выбора файлов или их сохранения при взаимодействии с файловой системой, например, — говорит Пильц. — Но при этом исчезла бы нестандартность, к которой мы стремились на конкурсе Intel: сделать каждое приложение уникальным».

Для решения проблемы Пильц использовал Node.js*, — это серверная платформа JavaScript* на основе событий для создания сетевых служб для V8 — обработчика JavaScript в составе браузера Chrome. По словам Райана Даля, создателя Node эта платформа обеспечивает неблокирующий ввод-вывод с помощью цикла событий, а благодаря встроенному пулу событий поддерживает асинхронный файловый ввод-вывод.

«Основное назначение Node.js — разработка веб-приложений и использование их на настольных компьютерах вне зависимости от операционной системы, — говорит Пильц. — Нет необходимости даже в установке Windows. Базой всего приложения является Node.js». С помощью этой платформы и библиотеки под названием Node-Webkit, Пильц реализовал сохранение и загрузку файлов изображений с помощью интерфейса и галереи, которые он создал сам с помощью стандартных веб-технологий. Приложение работает на платформе Chromium* Embedded Framework (CEF), которая предоставляет мощные средства отображения HTML и JavaScript, такие же, как в браузере Chrome.

Как в Scribblify сохраняются и удаляются изображения
При первой загрузке приложения Scribblify общедоступная папка «Мои документы» пользователя открывается через Node.js.


// Initialize Node.js file system
var fs = require('fs');

// Get User's Documents Folder (Win 7+)
var galleryPath = process.env['USERPROFILE'] + "\Documents\Scribblify\";
galleryPath = galleryPath.replace(/\/g, "/"); // Use forward slashes

// See if folder exists, otherwise create it
if(!fs.existsSync(galleryPath))
{
    fs.mkdir(galleryPath);  
}



Когда пользователь запрашивает сохранение файла, полотно HTML5 преобразуется в данные изображения.


var saveImg = canvas.toDataURL();

A unique filename is generated based on timestamp, and Node.js saves the image data to the system.
// Write image data buffer to file
var data = saveImg.replace(/^data:image/w+;base64,/, "");
var buf = new Buffer(data, 'base64');
var fName = galleryPath + destFilename;
fs.writeFile(fName, buf, function(err) {
    if(err)
    {
        console.log(err);
    }
});



Если пользователь хочет удалить изображение из галереи, в Node.js это делается очень просто.


fs.unlinkSync(galleryPath + targetImg);



Получить список существующих файлов для отображения в галерее несколько сложнее, поскольку необходимо получить только PNG-файлы, а не папки и не другие файлы, которые могут там быть.


var fileList = fs.readdirSync(currentPath);
var result = [];
for (var i in fileList) {
    var currentFileFull = currentPath + '/' + fileList[i];
    var currentFile = fileList[i];
    var fileExt = currentFile.split(".").pop().toUpperCase();
    var stats = fs.statSync(currentFileFull);
    if (stats.isFile() && fileExt == "PNG") {
       result.push(currentFile);
    }
    else if (stats.isDirectory()) {
         // Directory instead...
    }
}



После создания списка пути к изображениям сохраняются в массиве, их можно загрузить с помощью стандартных технологий HTML и JavaScript. Такой подход используется и для отображения галереи, и для импорта определенных изображений обратно на полотно.

Пильцу удалось создать прототип части функций приложения с помощью уже привычных технологий, включая встроенный в HTML5 элемент полотна для пользовательского интерфейса и Node.js для внутренней обработки, но некоторые из новых возможностей приложения оказалось не так просто реализовать. «Я попытался сделать то, что не так часто реализуется в виде веб-приложения: я хотел создать полное творческое приложение для рисования с кистями со сложными текстурами вместо фигур, которые образуются процедурами», — говорит он.

Сначала программа работала хорошо, но потом в ней обнаружилась проблема. «При использовании нескольких точек касания или при слишком быстром рисовании приложения зависало на несколько секунд из-за недостаточной производительности элемента полотна, а затем продолжало работу», — заявляет автор. Поиск решения привел разработчика к Cocos2d-x, это межплатформенная среда с открытым исходным кодом, доступная по лицензии Массачусетского технологического института (МТИ). Недавно в ее ветвь JavaScript была добавлена поддержка WebGL.

С помощью Cocos2d-Javascript удалось намного удобнее перенести код на WebGL, где производительность была намного выше, учитывая хорошую поддержку видеокарты, которой был оборудован моноблок. «Теперь Cocos2d-Javascript отрисовывает изображения на экране с помощью WebGL, кадровая скорость при этом достигает 60 кадров в секунду. Теперь пользоваться программой стало удобно и интересно», — говорит Пильц. В Scribblify используется стандартный HTML для элементов интерфейса и взаимодействия с пользователями. Пильц описывает решение как гибрид стандартного HTML и JavaScript вместе с другими обработчиками, включая Node.js для внутренней обработки и Cocos2d-Javascript для упрощенной отрисовки WebGL.

Для решения общих вопросов Пильц использовал бесплатный сайт Stack Overflow, на котором профессиональные разработчики и программисты-любители обмениваются ответами на вопросы. «Несколько раз бывало, что я изучал определенные задачи или сталкивался с разными затруднениями, — говорит разработчик. — В таких случаях самый быстрый и удобный способ найти решение — это посмотреть, что рекомендуют другие». Для справки по Cocos2d-x и Node.js, Пильц активно использовал API этих продуктов, и, разумеется, он использовал CodeProject* не только для этого проекта, но и для других своих работ. «Я обращаюсь туда всякий раз, когда мне нужна более подробная информация по определенным вопросам программирования, — говорит Пильц. — Там очень полезные форумы обсуждений, связанные с этим конкурсом, и всегда можно очень быстро получить ответ на вопрос».

Пильц также обнаружил ошибку в обработке касаний в Chromium с набором драйверов Lenovo Horizon: после некоторых касаний не срабатывает высвобождение, особенно при быстром использовании. Для решения этой проблемы он создал небольшую «систему сдержек и противовесов», которая выдает предупреждение, если по ошибке записано избыточное количество касаний. Изображение пользователя будет автоматически сохранено в галерее, после чего пользователю будет предложено перезапустить приложение. Затем предоставляются советы по устранению таких проблем в будущем. «Если пользователь коснется экрана, к примеру, всей ладонью, то программа покажет оповещение с предупреждением, что так делать не следует, нужно касаться экрана кончиками пальцев. Помимо этого, программа предложит перезапустить ее, — сказал он. — Я сообщил об этом, отправив формальное сообщение об ошибке разработчикам Chromium в ходе конкурса.»


var canvas = document.getElementById('canvas');
canvas.addEventListener('touchstart', touchStartFunction, false);
canvas.addEventListener('touchend', touchEndFunction, false);
canvas.addEventListener('touchcancel', touchCancelFunction, false);
canvas.addEventListener('touchmove', touchMoveFunction, false);
canvas.addEventListener('touchleave', touchLeaveFunction, false);



Платформа Chromium* Embedded Framework (на основе которой построен браузер Google Chrome*) уже долгое время поддерживает сенсорное управление, а внедрять ее очень просто. Можно фиксировать различные формы касаний с помощью простых обработчиков событий, таких как touchstart, touchend, touchcancel, touchmove и touchleave.

 

Из-за ограничений конкурса по времени, а также из-за технических ограничений платформы, с которой работал Пильц, от реализации некоторых функций в Scribblify пришлось отказаться. «Важная функция, которую мне очень хотелось добавить — это полноценная система отмены всех действий и их повтора, но для меня это - «терра инкогнита», мне не удалось разобраться, как реализовать эту функциональность без снижения скорости работы всей системы», — заявляет Пильц. Поэтому на данный момент есть ластик и кнопка для очистки всего полотна. Разработчик также собирается добавить еще несколько режимов рисования и новые кисти.

Отладка

 

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

«Для меня наиболее удобным оказалось то, что средства Chrome для разработчиков включают полнофункциональный отладчик JavaScript. Это дало мне возможность создавать точки остановки и пошагово проходить по коду, отслеживая определенные переменные и свойства, особенно при возникновении проблем», — говорит разработчик. При этом Пильцу удалось проанализировать специфичные элементы модели DOM и обновлять стили на лету, чтобы быстрее достичь нужного результата. Пильц также обнаружил полезные ресурсы для разработчиков, предоставленные корпорацией Lenovo на сайте lenovodev.com, в частности, требования по интеграции для приложений Horizon (требуется регистрация).

Многопользовательский режим

 

Scribblify для моноблока поддерживает 10 одновременных точек касания. Это означает, что одновременно рисовать изображение на полотне могут 10 пользователей. Учитывая временные рамки конкурса, Пильц уделял основное внимание удобству, с которым можно было интегрировать возможности мультисенсорного управления. «Когда я принял окончательное решение разрабатывать веб-приложение с помощью HTML5 и соответствующих технологий, я знал, что сложности обработки мультисенсорного ввода можно обойти, если используемая веб-платформа уже будет поддерживать мультисенсорный ввод», — говорит он.

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

Дополнительные статьи

 

Новые возможности

Чтобы оценить необыкновенность кистей, нужно попробовать Scribblify в работе или посмотреть один из демонстрационных видеороликов LinkedPIXEL. «Лично мне самым современным аспектом Scribblify представляются именно кисти, — говорит Пильц. — Все эти кисти — мое собственное изобретение, каждая из них обладает множеством разных свойств, которые определяют, как кисть выглядит и как она работает, когда вы рисуете на экране. Они все уникальны».

Пильц также гордится пользовательским интерфейсом, который ему удалось создать практически с нуля всего за 6 недель. «Рисовать всеми десятью пальцами одновременно с помощью 10-точечного мультисенсорного ввода, или когда один пользователь сидит с одной стороны от экрана, а другой — с другой стороны, и они оба одновременно рисуют — по-моему, это совершенно новый подход», — заявляет автор. Пильц признает, что в некоторых возможных случаях он использовал уже готовые решения. «Я использовал кое-какие библиотеки, например, для расширенного выбора цветов, — говорит он. — Некоторые библиотеки с лицензией МТИ ускоряют этот процесс, так что мне не пришлось изобретать велосипед».

В Scribblify также поддерживается новый способ выбора и смешения цветов. «Можно добавить много разных цветовых эффектов, поэтому вы не просто выбираете какой-то базовый цвет, — говорит Пильц. — Можно смешать два цвета вместе или использовать цвета плазмы или даже добавить то, что я называю цветовой переменной, где по мере рисования чередуются темные и светлые оттенки, чтобы картинка получилась более естественной».

Недавно Пильц приступил к работе над переделкой Scribblify в приложении для Windows 8, чтобы можно было распространять его через Магазин Windows, в том числе и с помощью специализированного «отдела» Магазина Windows 8 для Lenovo. Для выполнения требований самым простым способом будущая версия Scribblify будет работать на базе Internet Explorer* 11 вместо Chromium и будет использовать новые способы обработки ввода-вывода файлов, поскольку Node.js не поддерживается. Выпуск версии Scribblify для Магазина Windows ожидается в апреле или мае 2014 года.

О конкурсе

 

В конкурсе Intel App Innovation Contest 2013 разработчикам приложений с порталов Code Project, Habrahabr, ThinkDigit и CSDN, tбыло предложено предоставить идеи приложений для планшетов под управлением Windows и ПК-моноблоков для финансов, здравоохранения, розничной торговли, образования, игр и развлечения. Авторам лучших идей выдавали системы разработки — 200 планшетов и 300 ПК-моноблоков спонсора конкурса, корпорации Lenovo, и предоставляли 6 недель, чтобы воплотить идею в демонстрационную версию приложения. Победившие в конкурсе приложения перечислены здесь, на сайте Intel® Developer Zone.

500 идей было использовано для создания 276 демонстрационных приложений, из которых было отобрано по 5 лучших в 6 категориях. Таким образом, всего в конкурсе 30 приложений-победителей. Приложения оценивались по следующим критериям: насколько хорошо каждое приложение демонстрирует возможности платформы, насколько хорошо оно удовлетворяет потребности данного сегмента рынка, и насколько успешно оно отвечает нуждам предполагаемых конечных пользователей. Разумеется, приложения-победители должны выглядеть достаточно профессионально и использовать хорошую графику, работать быстро и без ошибок и в нужных случаях использовать датчики и сенсорное управление.

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