JinxFramer редактор анимации, роликов, картинок
- Назначение утилиты
- Элементы управления
- Выбор папки, список файлов, типы файлов
- Размер и тип матрицы, порядок пикселей, структура цвета
- Обрезка ролика по размеру кадра, перекодирование типа подключения и структуры цвета
- Просмотр ролика, выбор начала и конца фрагмента
- Обрезка ролика по количеству кадров
- Сохранение кадра как картинки пользователя
- Экспорт ролика как эффект анимации в код скетча
- Экспорт кадра в код скетча
- Как создать свой ролик
- Как создать свою картинку пользователя
- Удаление ненужных файлов роликов и картинок
-
Редактор кадра
- Начало редактирования
- Задание цвета кисти, выбор активной кисти
- Палитра цветов, создание цвета пользователя
- Рисование точки на кадре
- Заливка кадра выбранным цветом
- Копирование кадра в буфер обмена
- Вставка кадра из буфера обмена
- Завершение редактирования
-
Техническое
- Структура файла ролика *.out
- Структура файла картинки *.p
- Структура кадра анимации в коде
Утилита JinxFramer предназначена для обработки роликов, созданных при помощи программы «Jinx!».
- Вырезка фрагмента из исходного ролика, задавая начальный и конечный кадры фрагмента и сохранение вырезанной последовательности кадров в отдельный файл нового ролика.
- Перекодировка исходного ролика для изменения угла подключения матрицы, направление цепочки диодов из угла, а также порядок следования компонент цвета кадра (R,G,B).
- Изменение размера кадров ролика, вырезка из исходных кадров бОльшего размера части с указанием левого нижнего угла и размера нового кадра. Например, это позволяет, из роликов, подготовленных для матрицы 20x20 создать ролик для матрицы 16x16.
- Изменение кадров ролика с дорисовкой их попиксельно во встроенном редакторе.
- Добавление новых кадров к существующему ролику, помещая их в конец.
- Создание нового ролика из заданного количества кадров с последующей ручной прорисовкой созданного ролика покадрово.
- Сохранение любого кадра из ролика в файл картинки, пригодный для загрузки в микроконтроллер как "картинка пользователя".
- Создание новой картинки пользователя с попиксельным рисованием ее во встроенном редакторе.
- Экспорт отдельных кадров или выбранного фрагмента ролика в код скетча на языке Си для последующего добавление к проекту для создания собственного эффекта анимации.
Интерфейс программы поддерживает в настоящее время два языка - русский и английский.
Переключение языка интерфейса выполняется выбором соответствующего значения в комбобоксе в правом нижнем углу окна программы.
Для применения языковых настроек требуется перезапуск программы.
Функциональные зоны интерфеса:
- Отображение активной папки с роликами и картинками. Выбор папки - кнопкой "Выбрать папку...", расположенной в зоне кнопок управления 3.
- Зона просмотра ролика. Ниже зоны отображения - слайдер, позволяющий перемещаться по кадрам ролика.
- Зона элементов управления - позволяет выполнять действия, связанные с обработкой выбранных роликов - обрезка, экспорт и т.д.
- Список файлов роликов
(*.out)и картинок(*.p), найденных в выбранной папке. Ниже списка - кнопка "Удалить выбранные", позволяющая удалить ненужные ролики/картинки прямо из программы, не переключаясь на другое приложение. - Зона редактирования текущего кадра.
Для начала работы выберите папку, содержащую файлы роликов (*.out) и картинок пользователя (*.p)
Нажмите кнопку "Выбрать папку..." в оранжевой зоне 3.
В открывшемся диалоге выберите папку, содержащую ролики и нажмите кнопку "Выбор папки". Программа просканирует выбранную папку и отобразит найденные файлы в списке в зоне 4. Полный путь к текущей выбранной папки отображается в зеленой зоне 1.
Файлы роликов Jinx! в списке отображаются синим цветом (*.out), картинок пользователя - зеленым (*.p).
В области просмотра и навигации 2 отобразится первый кадр выбранного ролика / картинки.
Выбор файла для обработки - осуществляется указателем мыши или клавишами стрелок на клавиатуре.
Список поддерживает множественный выбор файлов. Для выбора нескольких файлов в списке нажмите и удерживайте
на клавиатуре клавишу Shift и укажите мышкой в списке последний файл выбираемого диапазона.
Изменить диапазон выбора можно также с клавиатуры клавишами со стрелками, удерживая зажатой клавишу Shift.
Снять/установить отметку выбора отдельного файла в списке можно щелкнув по нему мышкой с зажатой на клавиатуре клавишей Ctrl.
При создании ролика в программе Jinx!, он создается под матрицу определенного размера, с учетом угла подключения матрицы, ее типа (зигзаг/параллельная) и направления следования цепочки светодиодов из точки подключения.
Для корректного отображения кадров ролика в области просмотра, необходимо правильно задать размеры кадра, тип матрицы, угол подключения и направление из угла, цветовую схему.
Если установленный размер кадра не соответствует размеру кадра в ролике - будет выведено предупреждение. Изображение в области просмотра кадра будет нарушено.
При корректном выборе размера кадра ролика, но неправильном выборе параметра в комбобоксе "Тип матрицы" изображение может быть перевернуто, отображено зеркально или рассыпаться на симметричные части.
Некорректный выбор значения в комбобоксе "Порядок цвета" приведет к искажению цветов изображения кадра.
Для файла ролика
(*.out)невозможно автоматически определить размер и параметры кадра. Каждый кадр в файле содержит байт разделителя кадра, за которым следуют триплеты байтов цветов каждого пикселя кадра. Так для размера кадра 16x16, размер данных кадра равен 1 + 16 * 16 * 3 = 769 байт. Корректность указанного размера кадра можно проверить, определив что байт разделителя кадра повторяется через каждые 768 байт данных.
В то же время - определить правильность кадра можно только визуально, поскольку кадр 16x8 будет иметь тот же размер, что и кадр 8x16. Предупреждения о некорректном размере кадра выведено не будет, однако изображение кадра в области просмотра будет искажено.
В то же время, структура файла картинки пользователя (*.p) в заголовке содержит данные о размерах (ширине и высоте) кадра,
поэтому при выборе в списке файлов картинки, значения в поле "Размеры матрицы" будут подставлены автоматически.
Параметры "Тип матрицы" и "Порядок цвета" к файлам картинок неприменимы и будут скрыты.
Пиксели в данных кадра картинки пользователя всегда следуют слева направо, сверху вниз и имеют структуру цвета - RGB.
Если у вас есть в наличии ролики, созданные в программе Jinx! для матрицы с другим типом подключения, порядком цветов или бОльшего размера - такие ролики можно сконверировать для вашей матрицы.
В оранжевой области 3 активируйте чекбокс "Обрезка" - параметры перекодировки данных ролика станут доступными для изменения.
Выберите в комбобоксах "Тип матрицы" и "Порядок цвета" значения, соответствующие физическим параметрам вашей матрицы - угол подключения, направление из угла и порядок цветов. Укажите в поле "WxH" размеры вашей матрицы - ширину и высоту. В поле "X,Y" укажите координаты левого нижнего угла изображения кадра, если вам нужно уменьшить его размер в результирующем ролике. Область обрезки обрамляется зеленым прямоугольником. Если изменять размер кадра не требуется - укажите в поле "WxH" размеры исходного кадра, в поле "X,Y" оставьте значения 0,0.
В приведенном примере производится обрезка ролика с размером кадра 16x16 до кадра 16x11 с изменением типа подключения матрицы.
Утилита поддерживает пакетный режим выполнения операции перекодировки и обрезки. Для вовлечения в операцию нескольких файлов выберите все нужные ролики в списке в сиреневой области 4.
После того, как все параметры будут заданы, нажмите кнопку "Обрезать".
В открывшемся диалоге выбора папки укажите папку для сохранения обработанных роликов.
Чтобы не испортить исходные ролики, папка результата должна отличаться от исходной папки.
После нажатия на кнопку "Выбрать папку" в диалоге, операция перекодирования будет запущена в обработку.
В операцию вовлекаются только фалы роликов (*.out), файлы картинок будут исключены из обработки.
В ходе обработки прогресс операции будет отображаться на экране в progress bar, а также ролики будут "прокручиваться" в области просмотра.
Для контроля содержимого ролика выберите один или несколько роликов в списке в сиреневой области 4, затем в оранжевой области 3 нажмите на кнопку "cтарт". В синей области просмотра 2 начнется последовательное воспроизведение выбранных роликов.
Отрегулировать скорость воспроизведения можно сдвигая слайдер "Скорость".
Чекбокс "Рисовать сетку" позволяет включать/отключать визуальное разделение пикселей кадра.
Для завершения просмотра нажмите кнопку "стоп".
Запустить просмотр ролика также можно двойным кликом мышкой по выбранному в списке файлу.
Обычно при захвате программой Jinx! в сохраненный фрагмент в начало и в конец ролика попадают ненужные кадры, препятствующие гладкому зацикливанию ролика при воспроизведении на матрице. Утилита JinxFramer позволяет отметить первый и последний желаемые кадры ролика и сохранить выбранный фрагмент в новый файл.
В синей области просмотра кадров 2 слайдером перемещения по кадрам ролика выберите первый кадр сохраняемого фрагмента и в оранжевой области параметров 3 нажмите кнопку "Начало". Переместитесь к последнему кадру сохраняемого фрагмента и нажмите кнопку "Конец".
Для проверки гладкой стыковки краев фрагмента запустите просмотр кнопкой "старт". Убедитесь, что фагмент выбран правильно и нажмите кнопку "стоп" для остановки воспроизведения ролика. Чтобы сохранить выбранный фрагмент в файл ролика - нажмите кнопку "Фрагмент" под меткой "Сохранить файл". Выберите файл для сохранения и нажмите кнопку "Сохранить" в диалоге выбора файла. Если файл не существует - он будет создан. Если файл существует - подтвердите намерение перезаписать файл, новый фрагмент будет сохранен в этот существующий файл. Фрагмент ролика может быть сохранен в исходный файл, перезаписав его содержимое новыми данными.
Утилита JinxFramer позволяет сохранить любой кадр файла ролика (*.out) в виде картинки пользователя (*.p).
Для сохранения нажмите кнопку "Кадр" ниже метки "Сохранить как".
Выберите файл, в который будет сохранена картинка. Если файл не существует - он будет создан. Если файл существует - он будет перезаписан, после запроса подтверждения выполнения операции. Сохраненный кадр (картинка пользователя) будет автоматически добавлен в список файлов в сиреневой области 4.
Утилита JinxFramer позволяет экспортировать ролик или отдельный фрагмент ролика в код на языке Си. Сгенерированный код можно подключить к проекту для формирования кадров анимации в эффекте "Анимация".
Выберите начальный и конечный кадр фрагмента ролика и нажмите кнопку "Фрагмент", расположенную ниже метки "Сохранить код".
Выберите файл для сохранения кода и нажмите кнопку "Сохранить" в диалоге выбора файла. Если файл не существует - он будет создан. Если файл существует - подтвердите намерение перезаписать файл. Код будет сгенерирован и сохранен в выбранный файл.
Инструкцию по подключению нового эффекта анимации можно изучить здесь
Экспорт выбранного кадра в файл кода выполняется аналогично экспорту фрагмента ролика. Для запуска операции нажмите кнопку "Кадр", расположенную ниже метки "Сохранить код"
Наряду с редактрованием роликов (*.out), созданных в программе "Jinx!", утилита JinxFramer позволяет создавать ролики
в этом же формате "с нуля".
Введите в поле "Имя файла" имя файла для нового ролика. Выберите вариант "Создать ролик". Укажите сколько кадров должен содержать новый ролик и нажмите кнопку "Создать".
Новый ролик, состоящий из указанного количества пустых кадров будет сохранен в текущей выбранной папке и автоматически добавлен в список файлов. Нарисуйте кадры ролика вручную, используя возможности встроенного редактора.
Аналогично созданию новых роликов "с нуля", утилита позволяет также создавать картинки пользователя в формате (*.p).
Введите в поле "Имя файла" имя файла для новой кпртинки. Выберите вариант "Создать картинку". Нажмите кнопку "Создать".
Новыая картинка (пустой кадр) будет сохранена в текущей выбранной папке и автоматически добавлена в список файлов. Отредактируйте с сохраните кадр картинки вручную, используя возможности встроенного редактора.
Удалить ненужные файлы роликов и картинок можно не переключаясь в другие программы, непосредственно их интерфейса утилиты.
Выберите файлы для удаления в списке, затем нажмите кнопку "Удалить выбранные", расположенную ниже списка файлов. Подтвердите выполнение операции. Файлы будут удалены и из списка и из файловой системы.
Утилита JinxFramer дает возможность редактирования кадра анимации / картинки пользователя. Элементы управления редактроа расположены в красной зоне 5.
Интерфейс панели редактора:
1 - выбор цвета в формате RGB, HLS или из именованного списка цветов
2 - текущие активные цвета для левой и правой кнопок мыши, инструмент "пипетка" для взятия пробы цвета с экрана
3 - палитра цветов для быстрого выбора цвета
4 - цветовой круг для выбора цвета
5 - кнопки выполнения действия "Заливка", "Копирование кадра в буфер", "Вставка кадра из буфера".
6 - кнопки начала редактирования кадра, сохранения изменений или отмены редактирования кадра.
Чтобы начать редактирование кадра, нажмите кнопку "Редактировать кадр" в зоне 6 редактора. Элементы управления редактора разблокируются, утилита перейдет в режим редактирования. Другие элементы управления, не относящиеся к редактированию будут заблокированы.
В зоне 2 редактора размещены два одинаковых элемента "пипетка". Левый элемент отображает текущий цвет кисти для левой кнопки мыши, правый - для правой кнопки мыши. Выбор цвета инструмента можно осуществить следующими способами:
-
Щелкните левой кнопкой мыши на инструменте "пипетка" и, удерживая кнопку мыши нажатой, переместите указатель мыши на область экрана, содержащую нужный цвет. Внутренняя область панели инструмента будет отображать увеличенное изображение области экрана, находящееся в данный момент под курсором мыши. Активный цвет пробы находится в центральной клетке панели инструмента. Когда пиксель нужного цвета находится под курсором, отпустите кнопку мыши. Цвет будет выбран и зафиксирован.
-
Под панелями инструмента пипетка находится индикатор активности инструмента. Активная панель отмечена индикатором голубого цвета. Изменяя параметры инструмента редактора цвета 1 отрегулируйте цвет активной панели кисти.
-
Цвет кисти можно выбрать кликом мыши на элементе палитры в области редактора 3. Клик левой кнопкой мыши на элементе цвета палитры выбирает цвет кисти для левой кнопки мыши (левая панель пипетки), клик правой кнопкой мыши выбирает цвет кисти для правой кнопки мыши (правая панель пипетки).
-
Выбор цвета активной кисти из цветового круга. Щелкните левой кнопкой мыши в области цветового круга и цвет из области клика будет передан в активную панель цвета кисти. Выбранный цвет будет отмечен маркером на цветовом круге.
Палитра цветов 3, кроме набора предопределенных основных цветов, содержит 16 плашек для задания цветов пользователя. Для установки цвета плашки щелкните на ней средней кнопкой мыши (колесиком). Откроется окно диалога выбора цвета.
Выберите цвет, как это описано в предыдущем пункте и подтвердите выбор нажатием кнопки "ОК" в окне диалога. После закрытия окна выбранный цвет сохранится в палитре в области пользовательских цветов.
После того, как цвета рисования выбраны, переместите курсор мыши в область отображения текущего кадра. Курсор мыши приобритет форму кисти. Щелчок левой кнопкой мыши закрасит "пиксель" кадра выбранным цветом для левой кнопки, щелчок правой кнопкой мыши закрасит пиксель выбранным цветом для правой кнопки.
Щелкните на кнопке инструмента "Заливка" (обозначена черной цифрой 1 на рисунке) для заполнения всего кадра цветом активного инструмента цвета кисти (красная цифра 2 на картинке области редактирования).
Щелкните на кнопке инструмента "Копирование в буфер" (обозначена черной цифрой 2 на рисунке) для сохранения кадра во временный буфер в памяти. В дальнейшем вы сможете вставить кадр, сохраненный в буфере в область текущего редактируемого кадра.
Щелкните на кнопке инструмента "Вставка из буфера" (обозначена черной цифрой 3 на рисунке) для замены текущего содержимого редактируемого кадра на изображение, сохраненное во временном буфере.
Завершите редактирование кадра с сохранением изменений нажатием на кнопку "Сохранить" в области 6 редактора. Кадр будет сохранен в текущем файле ролика / картинки пользователя на диске. Если вы решите отказаться от сохранения изменений - нажмите кнопку "Отменить". Все сделанные правки будут потеряны, кадр восстановится из файла в исходное неизмененное состояние. Программа выйдет из состояния редактирования.
Ролики Jinx! имеют следующий формат данных:
- Разделитель кадров (1 байт), обычно имеет значение 0x01
- Данные кадра (N байт) - WIDTH * HEIGHT "пикселей" по 3 байта на цвет.
3 байта цвета содержит 8-ми битные компоненты цвета R,G,B. Порядок следования зависит от настроек Jinx! при экспорте. Возможные варианты - RGB, RBG, GBR, GRB, BRG, BGR.
Порядок пикселей в кадре так же зависит от настроек Jinx! при экспорте - угол расположения координаты (0,0) - точки отсчета, направление следования линеек пикселей из угла точки отсчета, способ следования линеек пикселей - параллельно или зигзагом.
Размер файла = (WIDTH * HEIGHT * 3 + 1) * N, где N - количество кадров в ролике
Картинки пользователя для загрузки на матрицу имеют следующий формат данных:
- Заголовок кадра (3 байта), 0x33 - маркер начала кадра; W - ширина кадра (1 байт); H - высота кадра (1 байт)
- Данные кадра (N байт) - WIDTH * HEIGHT "пикселей" по 3 байта на цвет.
3 байта цвета содержат 8-ми битные компоненты цвета R,G,B. Порядок следования компонент цвета - RGB. Точка начала кадра - всегда верхний левый угол, пиксели кадра всегда расположены слева направо, сверху вниз.
Размер файла = WIDTH * HEIGHT * 3 + 3; для картинки 16x16 - 771 байт
При экспорте кадра в код Си формируется массив пикселей кадра
Массив пикселей кадра содержит WIDTH x HEIGHT 16-битных слов, определяющих цвет пикселя кадра. Пиксели расположены построчно по ширине кадра, порядок следования - слева направо, сверху вниз. Каждое значение пикселя - цвет в формате RGB565. При переводе 24-битного цвета RGB888 в 16-битный цвет RGB565 используется гамма-коррекция со значением 2.8, используя табличный метод перевода.
Таблицы и алгоритмы пересчета RGB888 в RGB565 и гамма-коррекции можно найти в исходном коде утилиты в файле ColorConveret.cs, а также в исходном коде скетча матрицы в файле animation.ino, начиная примерно со строки 582 и ниже (таблицы gammaR, gammaG, gammaB, gamma5, gamma6 и функции gammaCorrection(). gammaCorrectionBack(), expandColor().