# JinxFramer - редактор анимации, роликов, картинок

- [Назначение утилиты](https://github.com/vvip-68/GyverPanelWiFi/wiki/JinxFramer---%D1%80%D0%B5%D0%B4%D0%B0%D0%BA%D1%82%D0%BE%D1%80-%D0%B0%D0%BD%D0%B8%D0%BC%D0%B0%D1%86%D0%B8%D0%B8%2C-%D1%80%D0%BE%D0%BB%D0%B8%D0%BA%D0%BE%D0%B2%2C-%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BE%D0%BA/#%D0%9D%D0%B0%D0%B7%D0%BD%D0%B0%D1%87%D0%B5%D0%BD%D0%B8%D0%B5-%D1%83%D1%82%D0%B8%D0%BB%D0%B8%D1%82%D1%8B)  
- [Элементы управления](https://github.com/vvip-68/GyverPanelWiFi/wiki/JinxFramer---%D1%80%D0%B5%D0%B4%D0%B0%D0%BA%D1%82%D0%BE%D1%80-%D0%B0%D0%BD%D0%B8%D0%BC%D0%B0%D1%86%D0%B8%D0%B8%2C-%D1%80%D0%BE%D0%BB%D0%B8%D0%BA%D0%BE%D0%B2%2C-%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BE%D0%BA/#%D0%AD%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D1%8B-%D1%83%D0%BF%D1%80%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D1%8F)  
- [Выбор папки, список файлов, типы файлов](https://github.com/vvip-68/GyverPanelWiFi/wiki/JinxFramer---%D1%80%D0%B5%D0%B4%D0%B0%D0%BA%D1%82%D0%BE%D1%80-%D0%B0%D0%BD%D0%B8%D0%BC%D0%B0%D1%86%D0%B8%D0%B8%2C-%D1%80%D0%BE%D0%BB%D0%B8%D0%BA%D0%BE%D0%B2%2C-%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BE%D0%BA/#%D0%92%D1%8B%D0%B1%D0%BE%D1%80-%D0%BF%D0%B0%D0%BF%D0%BA%D0%B8-%D1%81%D0%BF%D0%B8%D1%81%D0%BE%D0%BA-%D1%84%D0%B0%D0%B9%D0%BB%D0%BE%D0%B2-%D1%82%D0%B8%D0%BF%D0%B0-%D1%84%D0%B0%D0%B9%D0%BB%D0%BE%D0%B2)  
- [Размер и тип матрицы, порядок пикселей, структура цвета](https://github.com/vvip-68/GyverPanelWiFi/wiki/JinxFramer---%D1%80%D0%B5%D0%B4%D0%B0%D0%BA%D1%82%D0%BE%D1%80-%D0%B0%D0%BD%D0%B8%D0%BC%D0%B0%D1%86%D0%B8%D0%B8%2C-%D1%80%D0%BE%D0%BB%D0%B8%D0%BA%D0%BE%D0%B2%2C-%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BE%D0%BA/#%D0%A0%D0%B0%D0%B7%D0%BC%D0%B5%D1%80-%D0%B8-%D1%82%D0%B8%D0%BF-%D0%BC%D0%B0%D1%82%D1%80%D0%B8%D1%86%D1%8B-%D0%BF%D0%BE%D1%80%D1%8F%D0%B4%D0%BE%D0%BA-%D0%BF%D0%B8%D0%BA%D1%81%D0%B5%D0%BB%D0%B5%D0%B9-%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0-%D1%86%D0%B2%D0%B5%D1%82%D0%B0)  
- [Обрезка ролика по размеру кадра, перекодирование типа подключения и структуры цвета](https://github.com/vvip-68/GyverPanelWiFi/wiki/JinxFramer---%D1%80%D0%B5%D0%B4%D0%B0%D0%BA%D1%82%D0%BE%D1%80-%D0%B0%D0%BD%D0%B8%D0%BC%D0%B0%D1%86%D0%B8%D0%B8%2C-%D1%80%D0%BE%D0%BB%D0%B8%D0%BA%D0%BE%D0%B2%2C-%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BE%D0%BA/#%D0%9E%D0%B1%D1%80%D0%B5%D0%B7%D0%BA%D0%B0-%D1%80%D0%BE%D0%BB%D0%B8%D0%BA%D0%B0-%D0%BF%D0%BE-%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%80%D1%83-%D0%BA%D0%B0%D0%B4%D1%80%D0%B0-%D0%BF%D0%B5%D1%80%D0%B5%D0%BA%D0%BE%D0%B4%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5-%D1%82%D0%B8%D0%BF%D0%B0-%D0%BF%D0%BE%D0%B4%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%BD%D0%B8%D1%8F-%D0%B8-%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D1%8B-%D1%86%D0%B2%D0%B5%D1%82%D0%B0)  
- [Просмотр ролика, выбор начала и конца фрагмента](https://github.com/vvip-68/GyverPanelWiFi/wiki/JinxFramer---%D1%80%D0%B5%D0%B4%D0%B0%D0%BA%D1%82%D0%BE%D1%80-%D0%B0%D0%BD%D0%B8%D0%BC%D0%B0%D1%86%D0%B8%D0%B8%2C-%D1%80%D0%BE%D0%BB%D0%B8%D0%BA%D0%BE%D0%B2%2C-%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BE%D0%BA/#%D0%9F%D1%80%D0%BE%D1%81%D0%BC%D0%BE%D1%82%D1%80-%D1%80%D0%BE%D0%BB%D0%B8%D0%BA%D0%B0-%D0%B2%D1%8B%D0%B1%D0%BE%D1%80-%D0%BD%D0%B0%D1%87%D0%B0%D0%BB%D0%B0-%D0%B8-%D0%BA%D0%BE%D0%BD%D1%86%D0%B0-%D1%84%D1%80%D0%B0%D0%B3%D0%BC%D0%B5%D0%BD%D1%82%D0%B0)  
- [Обрезка ролика по количеству кадров](https://github.com/vvip-68/GyverPanelWiFi/wiki/JinxFramer---%D1%80%D0%B5%D0%B4%D0%B0%D0%BA%D1%82%D0%BE%D1%80-%D0%B0%D0%BD%D0%B8%D0%BC%D0%B0%D1%86%D0%B8%D0%B8%2C-%D1%80%D0%BE%D0%BB%D0%B8%D0%BA%D0%BE%D0%B2%2C-%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BE%D0%BA/#%D0%9E%D0%B1%D1%80%D0%B5%D0%B7%D0%BA%D0%B0-%D1%80%D0%BE%D0%BB%D0%B8%D0%BA%D0%B0-%D0%BF%D0%BE-%D0%BA%D0%BE%D0%BB%D0%B8%D1%87%D0%B5%D1%81%D1%82%D0%B2%D1%83-%D0%BA%D0%B0%D0%B4%D1%80%D0%BE%D0%B2)  
- [Сохранение кадра как картинки пользователя](https://github.com/vvip-68/GyverPanelWiFi/wiki/JinxFramer---%D1%80%D0%B5%D0%B4%D0%B0%D0%BA%D1%82%D0%BE%D1%80-%D0%B0%D0%BD%D0%B8%D0%BC%D0%B0%D1%86%D0%B8%D0%B8%2C-%D1%80%D0%BE%D0%BB%D0%B8%D0%BA%D0%BE%D0%B2%2C-%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BE%D0%BA/#%D0%A1%D0%BE%D1%85%D1%80%D0%B0%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5-%D0%BA%D0%B0%D0%B4%D1%80%D0%B0-%D0%BA%D0%B0%D0%BA-%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D0%B8-%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D1%82%D0%B5%D0%BB%D1%8F)  
- [Экспорт ролика как эффект анимации в код скетча](https://github.com/vvip-68/GyverPanelWiFi/wiki/JinxFramer---%D1%80%D0%B5%D0%B4%D0%B0%D0%BA%D1%82%D0%BE%D1%80-%D0%B0%D0%BD%D0%B8%D0%BC%D0%B0%D1%86%D0%B8%D0%B8%2C-%D1%80%D0%BE%D0%BB%D0%B8%D0%BA%D0%BE%D0%B2%2C-%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BE%D0%BA/#%D0%AD%D0%BA%D1%81%D0%BF%D0%BE%D1%80%D1%82-%D1%80%D0%BE%D0%BB%D0%B8%D0%BA%D0%B0-%D0%BA%D0%B0%D0%BA-%D1%8D%D1%84%D1%84%D0%B5%D0%BA%D1%82-%D0%B0%D0%BD%D0%B8%D0%BC%D0%B0%D1%86%D0%B8%D0%B8-%D0%B2-%D0%BA%D0%BE%D0%B4-%D1%81%D0%BA%D0%B5%D1%82%D1%87%D0%B0)  
- [Экспорт кадра в код скетча](https://github.com/vvip-68/GyverPanelWiFi/wiki/JinxFramer---%D1%80%D0%B5%D0%B4%D0%B0%D0%BA%D1%82%D0%BE%D1%80-%D0%B0%D0%BD%D0%B8%D0%BC%D0%B0%D1%86%D0%B8%D0%B8%2C-%D1%80%D0%BE%D0%BB%D0%B8%D0%BA%D0%BE%D0%B2%2C-%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BE%D0%BA/#%D0%AD%D0%BA%D1%81%D0%BF%D0%BE%D1%80%D1%82-%D0%BA%D0%B0%D0%B4%D1%80%D0%B0-%D0%B2-%D0%BA%D0%BE%D0%B4-%D1%81%D0%BA%D0%B5%D1%82%D1%87%D0%B0)  
- [Как создать свой ролик](https://github.com/vvip-68/GyverPanelWiFi/wiki/JinxFramer---%D1%80%D0%B5%D0%B4%D0%B0%D0%BA%D1%82%D0%BE%D1%80-%D0%B0%D0%BD%D0%B8%D0%BC%D0%B0%D1%86%D0%B8%D0%B8%2C-%D1%80%D0%BE%D0%BB%D0%B8%D0%BA%D0%BE%D0%B2%2C-%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BE%D0%BA/#%D0%9A%D0%B0%D0%BA-%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D1%82%D1%8C-%D1%81%D0%B2%D0%BE%D0%B9-%D1%80%D0%BE%D0%BB%D0%B8%D0%BA)  
- [Как создать свою картинку пользователя](https://github.com/vvip-68/GyverPanelWiFi/wiki/JinxFramer---%D1%80%D0%B5%D0%B4%D0%B0%D0%BA%D1%82%D0%BE%D1%80-%D0%B0%D0%BD%D0%B8%D0%BC%D0%B0%D1%86%D0%B8%D0%B8%2C-%D1%80%D0%BE%D0%BB%D0%B8%D0%BA%D0%BE%D0%B2%2C-%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BE%D0%BA/#%D0%9A%D0%B0%D0%BA-%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D1%82%D1%8C-%D1%81%D0%B2%D0%BE%D1%8E-%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D1%83-%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D1%82%D0%B5%D0%BB%D1%8F)  
- [Удаление ненужных файлов роликов и картинок](https://github.com/vvip-68/GyverPanelWiFi/wiki/JinxFramer---%D1%80%D0%B5%D0%B4%D0%B0%D0%BA%D1%82%D0%BE%D1%80-%D0%B0%D0%BD%D0%B8%D0%BC%D0%B0%D1%86%D0%B8%D0%B8%2C-%D1%80%D0%BE%D0%BB%D0%B8%D0%BA%D0%BE%D0%B2%2C-%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BE%D0%BA/#%D0%A3%D0%B4%D0%B0%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D0%BD%D0%B5%D0%BD%D1%83%D0%B6%D0%BD%D1%8B%D1%85-%D1%84%D0%B0%D0%B9%D0%BB%D0%BE%D0%B2-%D1%80%D0%BE%D0%BB%D0%B8%D0%BA%D0%BE%D0%B2-%D0%B8-%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BE%D0%BA)  
- [Редактор кадра](https://github.com/vvip-68/GyverPanelWiFi/wiki/JinxFramer---%D1%80%D0%B5%D0%B4%D0%B0%D0%BA%D1%82%D0%BE%D1%80-%D0%B0%D0%BD%D0%B8%D0%BC%D0%B0%D1%86%D0%B8%D0%B8%2C-%D1%80%D0%BE%D0%BB%D0%B8%D0%BA%D0%BE%D0%B2%2C-%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BE%D0%BA/#%D0%A0%D0%B5%D0%B4%D0%B0%D0%BA%D1%82%D0%BE%D1%80-%D0%BA%D0%B0%D0%B4%D1%80%D0%B0)  
    - Начало редактирования
    - Задание цвета кисти, выбор активной кисти
	- Палитра цветов, создание цвета пользователя
    - Рисование точки на кадре
    - Заливка кадра выбранным цветом
	- Копирование кадра в буфер обмена
	- Вставка кадра из буфера обмена
	- Завершение редактирования	
- [Техническое](https://github.com/vvip-68/GyverPanelWiFi/wiki/JinxFramer---%D1%80%D0%B5%D0%B4%D0%B0%D0%BA%D1%82%D0%BE%D1%80-%D0%B0%D0%BD%D0%B8%D0%BC%D0%B0%D1%86%D0%B8%D0%B8%2C-%D1%80%D0%BE%D0%BB%D0%B8%D0%BA%D0%BE%D0%B2%2C-%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BE%D0%BA/#%D0%A2%D0%B5%D1%85%D0%BD%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%BE%D0%B5)  
    - Структура файла ролика *.out
	- Структура файла картинки *.p
	- Структура кадра анимации в коде

## Назначение утилиты

Утилита JinxFramer предназначена для обработки роликов, созданных при помощи программы [«Jinx!»](https://github.com/vvip-68/GyverPanelWiFi/wiki/%D0%AD%D0%BA%D1%81%D0%BF%D0%BE%D1%80%D1%82-%D1%8D%D1%84%D1%84%D0%B5%D0%BA%D1%82%D0%BE%D0%B2-%D0%B0%D0%BD%D0%B8%D0%BC%D0%B0%D1%86%D0%B8%D0%B8-%D0%B8%D0%B7-%D0%9F%D0%9E-%C2%ABJinx!%C2%BB).

### Возможности утилиты

- Вырезка фрагмента из исходного ролика, задавая начальный и конечный кадры фрагмента и сохранение вырезанной последовательности
  кадров в отдельный файл нового ролика.
- Перекодировка исходного ролика для изменения угла подключения матрицы, направление цепочки диодов из угла, 
  а также порядок следования компонент цвета кадра (R,G,B).
- Изменение размера кадров ролика, вырезка из исходных кадров бОльшего размера части с указанием левого нижнего угла и размера нового кадра.
  Например, это позволяет, из роликов, подготовленных для матрицы 20x20 создать ролик для матрицы 16x16.
- Изменение кадров ролика с дорисовкой их попиксельно во встроенном редакторе.
- Добавление новых кадров к существующему ролику, помещая их в конец.  
- Создание нового ролика из заданного количества кадров с последующей ручной прорисовкой созданного ролика покадрово.
- Сохранение любого кадра из ролика в файл картинки, пригодный для загрузки в микроконтроллер как "картинка пользователя".
- Создание новой картинки пользователя с попиксельным рисованием ее во встроенном редакторе.
- Экспорт отдельных кадров или выбранного фрагмента ролика в код скетча на языке Си для последующего добавление к проекту
  для создания собственного эффекта анимации.
  
![Главное окно](https://github.com/vvip-68/GyverPanelWiFi/blob/master/wiki/JinxFramer/screen-01.png)
  
  Интерфейс программы поддерживает в настоящее время два языка - русский и английский.  
  Переключение языка интерфейса выполняется выбором соответствующего значения в комбобоксе в правом нижнем углу окна программы.  
  
![Выбор языка](https://github.com/vvip-68/GyverPanelWiFi/blob/master/wiki/JinxFramer/screen-02.png)  

  Для применения языковых настроек требуется перезапуск программы.

![Выбор языка](https://github.com/vvip-68/GyverPanelWiFi/blob/master/wiki/JinxFramer/screen-03.png)  

## Элементы управления

![Элементы управления](https://github.com/vvip-68/GyverPanelWiFi/blob/master/wiki/JinxFramer/screen-04.png)  

Функциональные зоны интерфеса:  

1. Отображение активной папки с роликами и картинками. Выбор папки - кнопкой **"Выбрать папку..."**, расположенной в зоне кнопок управления 3.
2. Зона просмотра ролика. Ниже зоны отображения - слайдер, позволяющий перемещаться по кадрам ролика.
3. Зона элементов управления - позволяет выполнять действия, связанные с обработкой выбранных роликов - обрезка, экспорт и т.д.
4. Список файлов роликов `(*.out)` и картинок `(*.p)`, найденных в выбранной папке.
   Ниже списка - кнопка **"Удалить выбранные"**, позволяющая удалить ненужные ролики/картинки прямо из программы, не переключаясь на другое приложение.
5. Зона редактирования текущего кадра.    

## Выбор папки, список файлов, типы файлов

Для начала работы выберите папку, содержащую файлы роликов `(*.out)` и картинок пользователя `(*.p)`  
Нажмите кнопку **"Выбрать папку..."** в оранжевой зоне 3.

![Выбор папки](https://github.com/vvip-68/GyverPanelWiFi/blob/master/wiki/JinxFramer/screen-05.png)  

В открывшемся диалоге выберите папку, содержащую ролики и нажмите кнопку **"Выбор папки"**.
Программа просканирует выбранную папку и отобразит найденные файлы в списке в зоне 4.
Полный путь к текущей выбранной папки отображается в зеленой зоне 1.

![Список файлов](https://github.com/vvip-68/GyverPanelWiFi/blob/master/wiki/JinxFramer/screen-06.png) 

Файлы роликов *Jinx!* в списке отображаются синим цветом `(*.out)`, картинок пользователя - зеленым `(*.p)`. 
В области просмотра и навигации 2 отобразится первый кадр выбранного ролика / картинки.
Выбор файла для обработки - осуществляется указателем мыши или клавишами стрелок на клавиатуре.
Список поддерживает множественный выбор файлов. Для выбора нескольких файлов в списке нажмите и удерживайте 
на клавиатуре клавишу **Shift** и укажите мышкой в списке последний файл выбираемого диапазона.
Изменить диапазон выбора можно также с клавиатуры клавишами со стрелками, удерживая зажатой клавишу **Shift**. 

![Выбор файлов](https://github.com/vvip-68/GyverPanelWiFi/blob/master/wiki/JinxFramer/screen-07.png) 

Снять/установить отметку выбора отдельного файла в списке можно щелкнув по нему мышкой с зажатой на клавиатуре клавишей **Ctrl**.

## Размер и тип матрицы, порядок пикселей, структура цвета

При создании ролика в программе *Jinx!*, он создается под матрицу определенного размера, с учетом угла подключения матрицы, ее типа (зигзаг/параллельная) и направления следования цепочки светодиодов из точки подключения.  

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

![Настройки](https://github.com/vvip-68/GyverPanelWiFi/blob/master/wiki/JinxFramer/screen-08.png) 

Если установленный размер кадра не соответствует размеру кадра в ролике - будет выведено предупреждение.
Изображение в области просмотра кадра будет нарушено.

![Предупреждение](https://github.com/vvip-68/GyverPanelWiFi/blob/master/wiki/JinxFramer/screen-10.png)

При корректном выборе размера кадра ролика, но неправильном выборе параметра в комбобоксе **"Тип матрицы"** изображение может быть перевернуто, отображено зеркально или рассыпаться на симметричные части. 

![Неверный тип](https://github.com/vvip-68/GyverPanelWiFi/blob/master/wiki/JinxFramer/screen-11.png)

Некорректный выбор значения в комбобоксе **"Порядок цвета"** приведет к искажению цветов изображения кадра.

![Неверный тип](https://github.com/vvip-68/GyverPanelWiFi/blob/master/wiki/JinxFramer/screen-12.png)

> Для файла ролика `(*.out)` невозможно автоматически определить размер и параметры кадра. 
Каждый кадр в файле содержит байт разделителя кадра, за которым следуют триплеты байтов цветов каждого пикселя кадра.
Так для размера кадра 16x16, размер данных кадра равен 1 + 16 * 16 * 3 = 769 байт. 
Корректность указанного размера кадра можно проверить, определив что байт разделителя кадра повторяется через каждые 768 байт данных.

> В то же время - определить правильность кадра можно только визуально, поскольку кадр 16x8 будет иметь тот же размер, 
что и кадр 8x16. Предупреждения о некорректном размере кадра выведено не будет, однако изображение кадра в области просмотра 
будет искажено.

В то же время, структура файла картинки пользователя **`(*.p)`** в заголовке содержит данные о размерах (ширине и высоте) кадра,
поэтому при выборе в списке файлов картинки, значения в поле **"Размеры матрицы"** будут подставлены автоматически. 
Параметры ***"Тип матрицы"*** и ***"Порядок цвета"*** к файлам картинок неприменимы и будут скрыты. 
Пиксели в данных кадра картинки пользователя всегда следуют слева направо, сверху вниз и имеют структуру цвета - **RGB**.

## Обрезка ролика по размеру кадра, перекодирование типа подключения и структуры цвета

Если у вас есть в наличии ролики, созданные в программе *Jinx!* для матрицы с другим типом подключения, порядком цветов или бОльшего размера - 
такие ролики можно сконверировать для вашей матрицы.

В оранжевой области 3 активируйте чекбокс **"Обрезка"** - параметры перекодировки данных ролика станут доступными для изменения.

![Обрезка](https://github.com/vvip-68/GyverPanelWiFi/blob/master/wiki/JinxFramer/screen-13.png)

Выберите в комбобоксах **"Тип матрицы"** и **"Порядок цвета"** значения, соответствующие физическим параметрам вашей матрицы - 
угол подключения, направление из угла и порядок цветов. Укажите в поле **"WxH"** размеры вашей матрицы - ширину и высоту.
В поле **"X,Y"** укажите координаты левого нижнего угла изображения кадра, если вам нужно уменьшить его размер в результирующем ролике.
Область обрезки обрамляется зеленым прямоугольником. Если изменять размер кадра не требуется - укажите в поле **"WxH"** размеры 
исходного кадра, в поле **"X,Y"** оставьте значения 0,0.

![Перекодировка](https://github.com/vvip-68/GyverPanelWiFi/blob/master/wiki/JinxFramer/screen-14.png)

В приведенном примере производится обрезка ролика с размером кадра 16x16 до кадра 16x11 с изменением типа подключения матрицы.

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

После того, как все параметры будут заданы, нажмите кнопку **"Обрезать"**.
В открывшемся диалоге выбора папки укажите папку для сохранения обработанных роликов.
Чтобы не испортить исходные ролики, папка результата должна отличаться от исходной папки.
После нажатия на кнопку **"Выбрать папку"** в диалоге, операция перекодирования будет запущена в обработку.
В операцию вовлекаются только фалы роликов *`(*.out)`*, файлы картинок будут исключены из обработки.

![Перекодировка](https://github.com/vvip-68/GyverPanelWiFi/blob/master/wiki/JinxFramer/screen-15.png)

В ходе обработки прогресс операции будет отображаться на экране в *progress bar*, а также ролики будут "прокручиваться" 
в области просмотра.

## Просмотр ролика, выбор начала и конца фрагмента

Для контроля содержимого ролика выберите один или несколько роликов в списке в сиреневой области 4, 
затем в оранжевой области 3 нажмите на кнопку **"cтарт"**. В синей области просмотра 2 начнется последовательное
воспроизведение выбранных роликов. 

![Просмотр](https://github.com/vvip-68/GyverPanelWiFi/blob/master/wiki/JinxFramer/screen-16.png)

Отрегулировать скорость воспроизведения можно сдвигая слайдер **"Скорость"**.  
Чекбокс **"Рисовать сетку"** позволяет включать/отключать визуальное разделение пикселей кадра.  
Для завершения просмотра нажмите кнопку **"стоп"**.  

Запустить просмотр ролика также можно двойным кликом мышкой по выбранному в списке файлу.

## Обрезка ролика по количеству кадров

Обычно при захвате программой *Jinx!* в сохраненный фрагмент в начало и в конец ролика попадают ненужные кадры,
препятствующие гладкому зацикливанию ролика при воспроизведении на матрице. 
Утилита *JinxFramer* позволяет отметить первый и последний желаемые кадры ролика и сохранить выбранный фрагмент в
новый файл.

![Обрезка](https://github.com/vvip-68/GyverPanelWiFi/blob/master/wiki/JinxFramer/screen-17.png)

В синей области просмотра кадров 2 слайдером перемещения по кадрам ролика выберите первый кадр сохраняемого фрагмента 
и в оранжевой области параметров 3 нажмите кнопку **"Начало"**. Переместитесь к последнему кадру сохраняемого фрагмента
и нажмите кнопку **"Конец"**.

Для проверки гладкой стыковки краев фрагмента запустите просмотр кнопкой **"старт"**.
Убедитесь, что фагмент выбран правильно и нажмите кнопку **"стоп"** для остановки воспроизведения ролика.
Чтобы сохранить выбранный фрагмент в файл ролика - нажмите кнопку **"Фрагмент"** под меткой **"Сохранить файл"**.
Выберите файл для сохранения и нажмите кнопку **"Сохранить"** в диалоге выбора файла.
Если файл не существует - он будет создан. Если файл существует - подтвердите намерение перезаписать файл,
новый фрагмент будет сохранен в этот существующий файл. Фрагмент ролика может быть сохранен в исходный файл, 
перезаписав его содержимое новыми данными.

## Сохранение кадра как картинки пользователя

Утилита *JinxFramer* позволяет сохранить любой кадр файла ролика `(*.out)` в виде картинки пользователя `(*.p)`.  
Для сохранения нажмите кнопку **"Кадр"** ниже метки **"Сохранить как"**.

![Сохранение кадра](https://github.com/vvip-68/GyverPanelWiFi/blob/master/wiki/JinxFramer/screen-18.png)

Выберите файл, в который будет сохранена картинка. Если файл не существует - он будет создан. 
Если файл существует - он будет перезаписан, после запроса подтверждения выполнения операции.
Сохраненный кадр (картинка пользователя) будет автоматически добавлен в список файлов в сиреневой области 4.

## Экспорт ролика как эффект анимации в код скетча

Утилита *JinxFramer* позволяет экспортировать ролик или отдельный фрагмент ролика в код на языке Си.
Сгенерированный код можно подключить к проекту для формирования кадров анимации в эффекте ***"Анимация"***.

Выберите начальный и конечный кадр фрагмента ролика и нажмите кнопку **"Фрагмент"**, расположенную ниже метки **"Сохранить код"**.

![Код фрагмента](https://github.com/vvip-68/GyverPanelWiFi/blob/master/wiki/JinxFramer/screen-19.png)

Выберите файл для сохранения кода и нажмите кнопку **"Сохранить"** в диалоге выбора файла.
Если файл не существует - он будет создан. Если файл существует - подтвердите намерение перезаписать файл.
Код будет сгенерирован и сохранен в выбранный файл.

Инструкцию по подключению нового эффекта анимации можно изучить [здесь](https://github.com/vvip-68/GyverPanelWiFi/wiki/%D0%94%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D1%81%D0%B2%D0%BE%D0%B5%D0%B9-%D0%B0%D0%BD%D0%B8%D0%BC%D0%B0%D1%86%D0%B8%D0%B8--%D0%BA-%D1%8D%D1%84%D1%84%D0%B5%D0%BA%D1%82%D1%83-%C2%AB%D0%90%D0%BD%D0%B8%D0%BC%D0%B0%D1%86%D0%B8%D1%8F%C2%BB)  

## Экспорт кадра в код скетча

Экспорт выбранного кадра в файл кода выполняется аналогично экспорту фрагмента ролика.
Для запуска операции нажмите кнопку **"Кадр"**, расположенную ниже метки **"Сохранить код"**

![Код кадра](https://github.com/vvip-68/GyverPanelWiFi/blob/master/wiki/JinxFramer/screen-20.png)

## Как создать свой ролик

Наряду с редактрованием роликов `(*.out)`, созданных в программе *"Jinx!"*, утилита *JinxFramer* позволяет создавать ролики
в этом же формате "с нуля". 

![Новый ролик](https://github.com/vvip-68/GyverPanelWiFi/blob/master/wiki/JinxFramer/screen-21.png)

Введите в поле **"Имя файла"** имя файла для нового ролика. Выберите вариант **"Создать ролик"**.
Укажите сколько кадров должен содержать новый ролик и нажмите кнопку **"Создать"**.  

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

## Как создать свою картинку пользователя

Аналогично созданию новых роликов "с нуля", утилита позволяет также создавать картинки пользователя в формате **`(*.p)`**.

![Новая картинка](https://github.com/vvip-68/GyverPanelWiFi/blob/master/wiki/JinxFramer/screen-22.png)

Введите в поле **"Имя файла"** имя файла для новой кпртинки. Выберите вариант **"Создать картинку"**.
Нажмите кнопку **"Создать"**.  

Новыая картинка (пустой кадр) будет сохранена в текущей выбранной папке и автоматически добавлена в список файлов. 
Отредактируйте с сохраните кадр картинки вручную, используя возможности встроенного редактора.

## Удаление ненужных файлов роликов и картинок

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

![Удаление](https://github.com/vvip-68/GyverPanelWiFi/blob/master/wiki/JinxFramer/screen-23.png)

Выберите файлы для удаления в списке, затем нажмите кнопку **"Удалить выбранные"**, расположенную ниже списка файлов.
Подтвердите выполнение операции. Файлы будут удалены и из списка и из файловой системы.

## Редактор кадра

Утилита *JinxFramer* дает возможность редактирования кадра анимации / картинки пользователя. 
Элементы управления редактроа расположены в красной зоне 5.

![Редактор](https://github.com/vvip-68/GyverPanelWiFi/blob/master/wiki/JinxFramer/screen-24.png)

Интерфейс панели редактора:  

1 - выбор цвета в формате RGB, HLS или из именованного списка цветов  
2 - текущие активные цвета для левой и правой кнопок мыши, инструмент *"пипетка"* для взятия пробы цвета с экрана  
3 - палитра цветов для быстрого выбора цвета  
4 - цветовой круг для выбора цвета  
5 - кнопки выполнения действия ***"Заливка"***, ***"Копирование кадра в буфер"***, ***"Вставка кадра из буфера"***.  
6 - кнопки начала редактирования кадра, сохранения изменений или отмены редактирования кадра.  

### Начало редактирования    

Чтобы начать редактирование кадра, нажмите кнопку **"Редактировать кадр"** в зоне 6 редактора. Элементы управления редактора разблокируются, утилита перейдет в режим редактирования. Другие элементы управления, не относящиеся к редактированию будут заблокированы.

### Задание цвета кисти, выбор активной кисти

В зоне 2 редактора размещены два одинаковых элемента *"пипетка"*. Левый элемент отображает текущий цвет кисти для левой кнопки мыши, правый - для правой кнопки мыши. Выбор цвета инструмента можно осуществить следующими способами:

1. Щелкните левой кнопкой мыши на инструменте *"пипетка"* и, удерживая кнопку мыши нажатой, переместите указатель мыши на область экрана, содержащую нужный цвет. Внутренняя область панели инструмента будет отображать увеличенное изображение области экрана, находящееся в данный момент под курсором мыши. Активный цвет пробы находится в центральной клетке панели инструмента. Когда пиксель нужного цвета находится под курсором, отпустите кнопку мыши. Цвет будет выбран и зафиксирован.

2. Под панелями инструмента пипетка находится индикатор активности инструмента. Активная панель отмечена индикатором голубого цвета. Изменяя параметры инструмента редактора цвета 1 отрегулируйте цвет активной панели кисти.

3. Цвет кисти можно выбрать кликом мыши на элементе палитры в области редактора 3. Клик левой кнопкой мыши на элементе цвета палитры выбирает цвет кисти для левой кнопки мыши (левая панель пипетки), клик правой кнопкой мыши выбирает цвет кисти для правой кнопки мыши (правая панель пипетки).

4. Выбор цвета активной кисти из цветового круга. Щелкните левой кнопкой мыши в области цветового круга и цвет из области клика будет передан в активную панель цвета кисти. Выбранный цвет будет отмечен маркером на цветовом круге.

### Палитра цветов, создание цвета пользователя

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

![Выбор цвета](https://github.com/vvip-68/GyverPanelWiFi/blob/master/wiki/JinxFramer/screen-25.png)
	
Выберите цвет, как это описано в предыдущем пункте и подтвердите выбор нажатием кнопки **"ОК"** в окне диалога. После закрытия окна выбранный цвет сохранится в палитре в области пользовательских цветов.
	
### Рисование точки на кадре

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

### Заливка кадра выбранным цветом

Щелкните на кнопке инструмента **"Заливка"** (обозначена черной цифрой 1 на рисунке) для заполнения всего кадра цветом ***активного*** инструмента цвета кисти (красная цифра 2 на картинке области редактирования).

### Копирование кадра в буфер обмена

Щелкните на кнопке инструмента **"Копирование в буфер"** (обозначена черной цифрой 2 на рисунке) для сохранения кадра во временный буфер в памяти. В дальнейшем вы сможете вставить кадр, сохраненный в буфере в область текущего редактируемого кадра.

### Вставка кадра из буфера обмена

Щелкните на кнопке инструмента **"Вставка из буфера"** (обозначена черной цифрой 3 на рисунке) для 
замены текущего содержимого редактируемого кадра на изображение, сохраненное во временном буфере.

### Завершение редактирования	

Завершите редактирование кадра с сохранением изменений нажатием на кнопку "Сохранить" в области 6 редактора. Кадр будет сохранен в текущем файле ролика / картинки пользователя на диске. Если вы решите отказаться от сохранения изменений - нажмите кнопку **"Отменить"**. Все сделанные правки будут потеряны, кадр восстановится  из файла в исходное неизмененное состояние. Программа выйдет из состояния редактирования.

## Техническое

### Структура файла ролика *.out

Ролики *Jinx!* имеют следующий формат данных:  

  - Разделитель кадров (1 байт), обычно имеет значение 0x01
  - Данные кадра (N байт) - WIDTH * HEIGHT "пикселей" по 3 байта на цвет.
  
![Формат OUT](https://github.com/vvip-68/GyverPanelWiFi/blob/master/wiki/JinxFramer/screen-26.png)

  3 байта цвета содержит 8-ми битные компоненты цвета R,G,B. Порядок следования зависит от настроек *Jinx!* при экспорте. Возможные варианты - RGB, RBG, GBR, GRB, BRG, BGR. 
  
  Порядок пикселей в кадре так же зависит от настроек *Jinx!* при экспорте - угол расположения координаты (0,0) - точки отсчета, направление следования линеек пикселей из угла точки отсчета, способ следования линеек пикселей - параллельно или зигзагом.

  Размер файла = (WIDTH * HEIGHT * 3 + 1) * N,  где N - количество кадров в ролике

### Структура файла картинки *.p

Картинки пользователя для загрузки на матрицу имеют следующий формат данных:  

  - Заголовок кадра (3 байта), 0x33 - маркер начала кадра; W - ширина кадра (1 байт); H - высота кадра (1 байт)
  - Данные кадра (N байт) - WIDTH * HEIGHT "пикселей" по 3 байта на цвет.
  
![Формат PIC](https://github.com/vvip-68/GyverPanelWiFi/blob/master/wiki/JinxFramer/screen-27.png)

  3 байта цвета содержат 8-ми битные компоненты цвета R,G,B. Порядок следования компонент цвета - RGB. 
  Точка начала кадра - всегда верхний левый угол, пиксели кадра всегда расположены слева направо, сверху вниз.

  Размер файла = WIDTH * HEIGHT * 3 + 3; для картинки 16x16 - 771 байт

### Структура кадра анимации в коде

При экспорте кадра в код Си формируется массив пикселей кадра

![Код кадра](https://github.com/vvip-68/GyverPanelWiFi/blob/master/wiki/JinxFramer/screen-28.png)

Массив пикселей кадра содержит WIDTH x HEIGHT 16-битных слов, определяющих цвет пикселя кадра.
Пиксели расположены построчно по ширине кадра, порядок следования - слева направо, сверху вниз.
Каждое значение пикселя - цвет в формате [RGB565](https://github.com/marco-calautti/Rainbow/wiki/RGB565). 
При переводе 24-битного цвета *RGB888* в 16-битный цвет *RGB565* используется гамма-коррекция со значением 2.8,
используя табличный метод перевода.

Таблицы и алгоритмы пересчета *RGB888* в *RGB565* и гамма-коррекции можно найти в исходном коде утилиты в файле *ColorConveret.cs*,
а также в исходном коде скетча матрицы в файле *animation.ino*, начиная примерно со строки 582 и ниже
(таблицы *gammaR*, *gammaG*, *gammaB*, *gamma5*, *gamma6* и функции *gammaCorrection()*. *gammaCorrectionBack()*, *expandColor()*.

