Здравствуйте, хочу сегодня поведать вам об одном некоммерческом проекте.
Для тех, кто не в теме: существует опенсорсный графический редактор, который называется Gimp. Чтобы рассказать о нем, для простых людей был создан сайт, на котором были размещены уроки и описания этого редактора. Но речь пойдет не о самом сайте.
Редактор использует свой формат кистей. Пришла мысль о создании каталога, в котором можно было бы искать нужные кисти и быстро их скачивать.
В чем плюсы проекта для пользователей:
Собственно, что такое этот сам предпросмотр — всего лишь эскиз внешнего вида самой кисточки и пробный штрих ею же в разных цветах.
Для начала разработки была найдена документация по кистям, используемым в GIMP. Как оказалось, кисть Гимпа в формате GBR устроена достаточно просто — она состоит из заголовка, описывающего саму кисть и битмапа хранимого изображения.
Основной проблемой, которая стояла, было получение корректной картинки из битмапа. Сначала была идея делать unpack для всего участка файла, содержащего битмап, но это привело к тому, что на полноцветных кистях размером в 500х500 точек просто заканчивалась память (интерпретатору отводилось вплоть до 256 МБ ОЗУ). Судя по всему это как-то связано с моделью памяти при организации массивов PHP, но копать вглубь я не стал, а решил изменить алгоритм. Немного изучив документацию пришел к выводу, что можно спокойно, хоть и медленно, читать файл маленькими порциями используя пресловутый file_get_contents(), а потом работать с unpack().
Но кроме самого генератора штрихов и эскизов кисти, был создан и интерфейс позволяющий отбирать кисти по интересующим признакам.
Естественно было принято решение, что он должен быть быстрым и удобным, ну а этому как раз и способствовала концепция аякс запросов к серверу.
Как известно, самым медленным при работе в сети считается обращение к серверу и ожидание ответа от него. Опираясь на эту парадигму было решено сделать максимум работы при минимуме запросов, поэтому при любой выборке делался 1 запрос, который получал всю необходимую информацию о всем наборе кистей в формате JSON-структуры.
Если вы посмотрите на сервис, то увидите, что по клику на эскиз кисточки происходит открывание окна, в котором есть вся необходимая информация по кисти, уже полученная от сервера. Зато после открывания окна запускается асинхронный запрос, вызывающий серверный обработчик, подсчитывающий просмотры кисти. Кроме информации в этом окне реализована флеш-вставка позволяющая опробовать кисть «не отходя от кассы».
Казалось бы, аякс-аяксом и все хорошо. Но хорошо не для всех. Есть некоторые товарищи, которые отключают JS, а также поисковые системы, для которых мы сделали по обычной веб-страничке про каждую кисть. На этой странице есть и кисть и ее полное подробное описание. Кроме самих страниц с кистями, были сделаны и страницы выборок с метками. Реализовано было и то, что если включен JS, то с этих самых страниц можно будет пользоваться выборками как обычно.
Посмотреть и пощупать интерфейс можно тут: www.progimp.ru/downloads/brushes
Для тех, кто не в теме: существует опенсорсный графический редактор, который называется Gimp. Чтобы рассказать о нем, для простых людей был создан сайт, на котором были размещены уроки и описания этого редактора. Но речь пойдет не о самом сайте.
Редактор использует свой формат кистей. Пришла мысль о создании каталога, в котором можно было бы искать нужные кисти и быстро их скачивать.
В чем плюсы проекта для пользователей:
- Отказ от системы «пакетов кистей». Человек будет скачивать только те кисти, которые ему интересны.
- Подбор кистей по фильтрам и ключевым словам. То, что будет реализовано в GIMP 2.8 мы попытались реализовать на страницах сайта.
- Удобный просмотр кистей. Пользователь видит кисть перед скачиванием. Может изменить цвет кисти и посмотреть ее в полном размере.
- Перед скачиванием пользователь может опробовать кисть в действии. Порисовать ей в специальном графическом редакторе.
- Скачивание со страниц сайта. Никаких тебе турбобитов, летитбитов и других файлообменников.
- Рейтинг кистей. Сортировка кистей по качеству. Мы видим сколько раз кисть просмотрели, сколько раз ее скачали (показатель отказов), сколько раз ей подняли (в будущем и опустили) рейтинг. И в зависимости от этого, сортировать кисти по их качеству, а не дате добавления.
Организация предпросмотра кистей
Собственно, что такое этот сам предпросмотр — всего лишь эскиз внешнего вида самой кисточки и пробный штрих ею же в разных цветах.
Для начала разработки была найдена документация по кистям, используемым в GIMP. Как оказалось, кисть Гимпа в формате GBR устроена достаточно просто — она состоит из заголовка, описывающего саму кисть и битмапа хранимого изображения.
Основной проблемой, которая стояла, было получение корректной картинки из битмапа. Сначала была идея делать unpack для всего участка файла, содержащего битмап, но это привело к тому, что на полноцветных кистях размером в 500х500 точек просто заканчивалась память (интерпретатору отводилось вплоть до 256 МБ ОЗУ). Судя по всему это как-то связано с моделью памяти при организации массивов PHP, но копать вглубь я не стал, а решил изменить алгоритм. Немного изучив документацию пришел к выводу, что можно спокойно, хоть и медленно, читать файл маленькими порциями используя пресловутый file_get_contents(), а потом работать с unpack().
Интерфейс подбора кистей
Но кроме самого генератора штрихов и эскизов кисти, был создан и интерфейс позволяющий отбирать кисти по интересующим признакам.
Включив фильтр (1) и выбрав одну или несколько меток для кисти (2) вам покажут кисти, которые соответствуют вашим требованиям (5). Кисти показываются в виде небольших штрихов, чтобы сразу можно было определить как кисть будет себя вести при рисовании. Цифры — это размер кисти в пикселях.
При включении меток (2), параметры поиска можно уточнить активными метками (4). Метка серого цвета (3) неактивна, кистей с такими параметрами нет.
Естественно было принято решение, что он должен быть быстрым и удобным, ну а этому как раз и способствовала концепция аякс запросов к серверу.
Как известно, самым медленным при работе в сети считается обращение к серверу и ожидание ответа от него. Опираясь на эту парадигму было решено сделать максимум работы при минимуме запросов, поэтому при любой выборке делался 1 запрос, который получал всю необходимую информацию о всем наборе кистей в формате JSON-структуры.
Если вы посмотрите на сервис, то увидите, что по клику на эскиз кисточки происходит открывание окна, в котором есть вся необходимая информация по кисти, уже полученная от сервера. Зато после открывания окна запускается асинхронный запрос, вызывающий серверный обработчик, подсчитывающий просмотры кисти. Кроме информации в этом окне реализована флеш-вставка позволяющая опробовать кисть «не отходя от кассы».
Работоспособность без JS
Казалось бы, аякс-аяксом и все хорошо. Но хорошо не для всех. Есть некоторые товарищи, которые отключают JS, а также поисковые системы, для которых мы сделали по обычной веб-страничке про каждую кисть. На этой странице есть и кисть и ее полное подробное описание. Кроме самих страниц с кистями, были сделаны и страницы выборок с метками. Реализовано было и то, что если включен JS, то с этих самых страниц можно будет пользоваться выборками как обычно.
Посмотреть и пощупать интерфейс можно тут: www.progimp.ru/downloads/brushes
