Случайная картинка
Новые секреты на сайте
Kingdom Come: Deliverance
(+7 секретов)
L.A. Noire
(+4 секрета)
Grand Theft Auto V
(+6 секретов)
Mad Max
(+6 секретов)
WarCraft III: The Frozen Throne
(+1 секрет)
WarCraft III: Reign of Chaos
(+2 секрета)
Online: 3 человека
Голосование

Как Вам новый вид сайта?






Архив голосований
KD Player
KD Player
Реклама
FAQ  •  История  •  RU Versions  •  EN Versions  •  Other Languages  •  Создание Скинов  •  Скины (Skins)
Дата:31.08.07
Автор:© Кныжов Дмитрий
E-mail:kdplayer@yandex.ru

Данная статья описывает процесс создания скинов для приложения KD Player, начиная с версии 0.8.1

Общая информация:

Скин для KD Player состоит из двух файлов с одинаковым именем, но с разными расширениями. После создания этих файлов, Вы можете поместить их в архив приложения в папку «/skin/», причем имена файлов должны быть «default.kds» и «default.kdi» - это обязательно. Также их можно просто скопировать в память телефона, в этом случае пользователь сам выбирает скин через файловый менеджер в проигрывателе.

Итак, состав скина:

  1. Первый файл – файл с расширением *.kds. Это обычный текстовый файл в кодировке ANSI. Он обязательно должен начинаться с зарезервированного слова «kdskin». Это слово частично уведомляем приложение о том, что перед ним именно файл скина. Здесь хранится текстовая информация о расположении графических элементов проигрывателя, а также цветовая схема меню. Все параметры представлены виде тегов, которые имеют следующий вид: <имя_тега параметры_тега>. Далее будет дано подробное описание каждого тега.
     
  2. Второй файл – файл с расширением *.kdi. Это графический файл, он может быть любого графического формата, который понимает телефон, для которого Вы делаете скин. Практически все устройства понимают формат PNG и JPEG, также некоторые понимают формат GIF и BMP. Рекомендуется, конечно же, формат PNG, т.к. он обеспечивает хорошее сжатие картинки и к тому же без потерь. Этот формат также поддерживает полупрозрачность, но нужно учитывать, что при прорисовке элементов меню с полупрозрачностью телефон затрачивает гораздо больше ресурсов и памяти, к тому же, насколько мне известно, только телефоны Sony Ericsson полноценно поддерживают полупрозрачность, остальные могут не поддерживать, либо поддерживать частично. (По состоянию на 2007 год. - Прим. Владельца Сайта).

Описание тегов и их параметров:

Основное:
 
Типы шрифтов:
  1. 0 - Мелкий жирный
  2. 1 - Мелкий обычный
  3. 2 - Средний жирный
  4. 3 - Средний обычный
  5. 4 - Большой жирный
  6. 5 - Большой обычный
Цвета:
  1. R - количество красного цвета
  2. G - количество зелёного цвета
  3. B - количество синего цвета
Начало координат:
  1. Может иметь следующие значения:
  2. T – обычное начало координат, которое начинается в левом, верхнем углу дисплея телефона.
  3. B – начало координат начинается в левом, нижнем углу дисплея телефона.
Выравнивание:
  1. Может иметь следующие значения:
  2. L – выравнивание по левому краю.
  3. C – выравнивание по центру.
  4. R – выравнивание по правому краю.

Типы заполнения:
Может принимать следующие значения и виды (указан пример):

0 -

1 -

2 -

3 -

Обозначения:
 
P1,P2,P3...Pn – параметры тега, их количество
 
R,G,B – задание цвета в RGB
 
X1, Y1, X2,Y2 – указывают по каким координатам вырезать нужное изображение.
 

Рисунки:

Риc. 1

Риc. 2

Риc. 3

Теги в файле KDS и их назначение:

ТЕГ <rot P1>
Этот тег отвечает за ориентацию экрана в скине. Имеет только один параметр.
Значения P1:
true – горизонтальная ориентация
false – обычная, вертикальная ориентация
 
ТЕГ <border R,G,B>
Этот тег указывает, какого цвета рисовать рамку в окне плеера. Цвет задается через RGB. Если первый параметр, т.е. параметр R равен -1, то рамка не рисуется.
На рис.1 эта рамка зеленого цвета.
 
ТЕГ <bkgnd1 X1,Y1,X2,Y2>
Этот тег указывает, какое изображение рисовать на фоне в окне проигрывателя, если изображение меньше размера дисплея телефона, то оставшееся место зарисовывается повторно.
 
ТЕГ <bkgnd2 X1,Y1,X2,Y2>
Этот тег указывает, какое изображение рисовать на фоне в окне главного меню, если изображение меньше размера дисплея телефона, то оставшееся место зарисовывается повторно.
 
ТЕГИ <menu_top_l X1,Y1,X2,Y2> <menu_top_c X1,Y1,X2,Y2> <menu_top_r X1,Y1,X2,Y2>
Эти теги указывают на изображения, которые формируют заголовок окна главного меню. Изображение, заданное в menu_top_c растягивается на всю ширину экрана.
На рис.2 обведено зеленым.
 
ТЕГИ <menu_bot_l X1,Y1,X2,Y2> <menu_bot_c X1,Y1,X2,Y2> <menu_bot_r X1,Y1,X2,Y2>
Эти теги указывают на изображения, которые формируют нижнюю часть окна главного меню. Изображение, заданное в menu_bot_c растягивается на всю ширину экрана.
На рис.2 обведено черным.
 
ТЕГИ <menu_sel_l X1,Y1,X2,Y2> <menu_sel_c X1,Y1,X2,Y2> <menu_sel_r X1,Y1,X2,Y2>
Эти теги указывают на изображения, которые формируют изображение выделенного пункта главного меню. Изображение, заданное в menu_sel_c растягивается на всю ширину экрана.
На рис.2 обведено голубым.
 
ТЕГ <menu_text_font P1,R1,G1,B1,R2,G2,B2>
Этот тег указывает шрифт главного меню, его цвет, а также цвет выделенного текста.
Параметры:
P1 – тип шрифта главного меню (см. выше)
R1,G1,B1 – цвет текста меню, цвет полосы прокрутки, цвет обычного текста (к примеру в окне «О программе…»), цвет сообщения «добавлено».
R2,G2,B2 – цвет выделенного текста в главном меню.
 
ТЕГ <menu_caption R,G,B>
Этот тег указывает цвет текста заголовка в главном меню.
 
ТЕГ <menu_time R,G,B>
Этот тег указывает цвет текста часов в главном меню.
 
ТЕГ <menu_msg_bkgnd R,G,B>
Этот тег указывает цвет фона сообщения в главном меню (например, сообщение «Добавлено…», при добавлении файлов).
 
ТЕГ <soft_text1 R,G,B>
Этот тег указывает цвет фона софт меню, на рис.3 он указан серым.
 
ТЕГ <soft_text2 R,G,B>
Этот тег указывает цвет фона выделенного пункта софт меню, на рис.3 он указан красным.
 
ТЕГ <soft_text3 R,G,B>
Этот тег указывает цвет основного текста софт меню, на рис.3 он указан белым.
 
ТЕГ <soft_sel_text4 R,G,B>
Этот тег указывает цвет текста выделенного пункта софт меню, на рис.3 он указан голубым.
 
ТЕГ <soft_border1 R,G,B>
Этот тег указывает цвет рамки софт меню, на рис.3 он указан розовым.
 
ТЕГ <soft_border2 R,G,B>
Этот тег указывает цвет рамки выделенного пункта софт меню, на рис.3 он указан черным.
 
ТЕГ <soft_player P1>
Этот тег указывает высоту открытия софт меню в режиме проигрывателя. Начало видеться от нижней кромки дисплея.
Параметр P1 – это число-высота.
 
ТЕГ <title X1,Y1,X2,Y2>
Задает изображение, которое будет рисоваться на фоне. В стандартном скине этим изображением является надпись «KD Player».
 
ТЕГ <title_pos P1,P2,P3,P4>
Этот тег задает положение изображения заданного в теге title.
Параметры:
P1 – Начало координат (см. выше)
P2 – Выравнивание элемента (см. выше)
P3 – Задает смещение элемента после выравнивания по оси X
P4 – Задает смещение элемента после выравнивания по оси Y
 
ТЕГ <albumart X1,Y1,X2,Y2>
Задает изображение обложки альбома (Album art), которое будет изображено по умолчанию. Размер обложки, которую удастся загрузить из файла будет равен размеру этого изображения.
 
ТЕГ <albumart_pos P1,P2,P3,P4>
Этот тег задает положение изображения обложки альбома заданного в теге albumart.
Параметры:
P1 – Начало координат (см. выше)
P2 – Выравнивание элемента (см. выше)
P3 – Задает смещение элемента после выравнивания по оси X
P4 – Задает смещение элемента после выравнивания по оси Y
 
ТЕГ <back1 X1,Y1,X2,Y2>
Задает изображение не нажатой кнопки «Назад».
 
ТЕГ <back2 X1,Y1,X2,Y2>
Задает изображение нажатой кнопки «Назад».
 
ТЕГ <back_pos P1,P2,P3,P4>
Этот тег задает положение изображения кнопки «Назад» заданного в теге back1 и back2.
Параметры:
P1 – Начало координат (см. выше)
P2 – Выравнивание элемента (см. выше)
P3 – Задает смещение элемента после выравнивания по оси X
P4 – Задает смещение элемента после выравнивания по оси Y
 
ТЕГ <play1 X1,Y1,X2,Y2>
Задает изображение не нажатой кнопки «Воспроизведение/Пауза».
 
ТЕГ <play2 X1,Y1,X2,Y2>
Задает изображение нажатой кнопки «Воспроизведение/Пауза».
 
ТЕГ <play_pos P1,P2,P3,P4>
Этот тег задает положение изображения кнопки «Воспроизведение/Пауза» заданного в теге play1 и play2.
Параметры:
P1 – Начало координат (см. выше)
P2 – Выравнивание элемента (см. выше)
P3 – Задает смещение элемента после выравнивания по оси X
P4 – Задает смещение элемента после выравнивания по оси Y
 
ТЕГ <next1 X1,Y1,X2,Y2>
Задает изображение не нажатой кнопки «Вперед».
 
ТЕГ <next2 X1,Y1,X2,Y2>
Задает изображение нажатой кнопки «Вперед».
 
ТЕГ <next_pos P1,P2,P3,P4>
Этот тег задает положение изображения кнопки «Вперед» заданного в теге next1 и next2.
Параметры:
P1 – Начало координат (см. выше)
P2 – Выравнивание элемента (см. выше)
P3 – Задает смещение элемента после выравнивания по оси X
P4 – Задает смещение элемента после выравнивания по оси Y
 
ТЕГ <sound1 X1,Y1,X2,Y2>
Задает изображение уровня громкости, когда он равен 0.
 
ТЕГ <sound2 X1,Y1,X2,Y2>
Задает изображение уровня громкости, когда он равен максимуму.
 
ТЕГ <sound_pos P1,P2,P3,P4,P5,P6>
Этот тег указывает расположение регулятора громкости и его тип.
Параметры:
P1 – Начало координат (см. выше)
P2 – Выравнивание элемента (см. выше)
P3 – Задает смещение элемента после выравнивания по оси X
P4 – Задает смещение элемента после выравнивания по оси Y
P5 – Задает начальную позицию отображения. (Например, кружок в полосе прокрутки, можно задать его размер, чтоб он был виден, а не выезжал сбоку)
P6 – Задает тип заполнения (см. выше)
 
ТЕГ <repeat X1,Y1,X2,Y2>
Задает изображение для спрайта «Режима повтора».
 
ТЕГ <repeat_pos P1,P2,P3,P4>
Этот тег задает положение изображения «Режима повтора» заданного в теге repeat.
Параметры:
P1 – Начало координат (см. выше)
P2 – Выравнивание элемента (см. выше)
P3 – Задает смещение элемента после выравнивания по оси X
P4 – Задает смещение элемента после выравнивания по оси Y
 
ТЕГ <shuff X1,Y1,X2,Y2>
Задает изображение для спрайта «Режима перемешивания».
 
ТЕГ <shuff_pos P1,P2,P3,P4>
Этот тег задает положение изображения «Режима перемешивания» заданного в теге shuff.
Параметры:
P1 – Начало координат (см. выше)
P2 – Выравнивание элемента (см. выше)
P3 – Задает смещение элемента после выравнивания по оси X
P4 – Задает смещение элемента после выравнивания по оси Y
 
ТЕГ <key X1,Y1,X2,Y2>
Задает изображение индикатора блокировки клавиатуры.
 
ТЕГ <key_pos P1,P2,P3,P4>
Этот тег задает положение индикатора блокировки клавиатуры заданного в теге key.
Параметры:
P1 – Начало координат (см. выше)
P2 – Выравнивание элемента (см. выше)
P3 – Задает смещение элемента после выравнивания по оси X
P4 – Задает смещение элемента после выравнивания по оси Y
 
ТЕГ <wait X1,Y1,X2,Y2>
Задает изображение значка «Подождите». Например, при навигации по меню или обновлении музыкальной библиотеки.
 
ТЕГ <bar X1,Y1,X2,Y2>
Задает изображение, которое будет рисоваться на фоне. В стандартном скине этим изображением является полоска над надписями софт клавиш – Меню, Стоп, Воспр.
 
ТЕГ <bar_pos P1,P2,P3,P4>
Этот тег задает положение изображения заданного в теге bar.
Параметры:
P1 – Начало координат (см. выше)
P2 – Выравнивание элемента (см. выше)
P3 – Задает смещение элемента после выравнивания по оси X
P4 – Задает смещение элемента после выравнивания по оси Y
 
ТЕГ <posbar1 X1,Y1,X2,Y2>
Задает изображение пустой полосы прокрутки в самом начале воспроизведения.
 
ТЕГ <posbar2 X1,Y1,X2,Y2>
Задает изображение заполненной полосы прокрутки в конце воспроизведения.
 
ТЕГ <posbar_pos P1,P2,P3,P4,P5,P6>
Этот тег указывает расположение полосы прокрутки и её тип.
Параметры:
P1 – Начало координат (см. выше)
P2 – Выравнивание элемента (см. выше)
P3 – Задает смещение элемента после выравнивания по оси X
P4 – Задает смещение элемента после выравнивания по оси Y
P5 – Задает начальную позицию отображения. (Например, кружок в полосе прокрутки, можно задать его размер, чтоб он был виден, а не выезжал сбоку)
P6 – Задает тип заполнения (см. выше)
 
ТЕГ <softL_font P1,R,G,B>
Этот тег указывает шрифт и цвет текста для левой софт клавиши.
Параметры:
P1 – Тип шрифта (см. выше)
R,G,B – Цвет текста
 
ТЕГ <softC_font P1,R,G,B>
Этот тег указывает шрифт и цвет текста для «серединной» софт клавиши.
Параметры:
P1 – Тип шрифта (см. выше)
R,G,B – Цвет текста
 
ТЕГ <softR_font P1,R,G,B>
Этот тег указывает шрифт и цвет текста для правой софт клавиши.
Параметры:
P1 – Тип шрифта (см. выше)
R,G,B – Цвет текста
 
ТЕГ <stop_text P1,P2,P3,P4,P5>
Этот тег задает положение надписи «Стоп» в окне проигрывателя.
Параметры:
P1 – Начало координат (см. выше)
P2 – Выравнивание элемента (см. выше)
P3 – Задает смещение элемента после выравнивания по оси X
P4 – Задает смещение элемента после выравнивания по оси Y
P5 – Задает максимальную ширину надписи в точках, если текст не умещается, он урезается с «…» в конце.
 
ТЕГ <play_text P1,P2,P3,P4,P5>
Этот тег задает положение надписи «Воспр.» в окне проигрывателя.
Параметры:
P1 – Начало координат (см. выше)
P2 – Выравнивание элемента (см. выше)
P3 – Задает смещение элемента после выравнивания по оси X
P4 – Задает смещение элемента после выравнивания по оси Y
P5 – Задает максимальную ширину надписи в точках, если текст не умещается, он урезается с «…» в конце.
 
ТЕГ <menu_text P1,P2,P3,P4,P5>
Этот тег задает положение надписи «Меню» в окне проигрывателя.
Параметры:
P1 – Начало координат (см. выше)
P2 – Выравнивание элемента (см. выше)
P3 – Задает смещение элемента после выравнивания по оси X
P4 – Задает смещение элемента после выравнивания по оси Y
P5 – Задает максимальную ширину надписи в точках, если текст не умещается, он урезается с «…» в конце.
 
ТЕГ <artist_text P1,P2,P3,P4,P5>
Этот тег задает положение надписи «Исполнитель» в окне проигрывателя.
Параметры:
P1 – Начало координат (см. выше)
P2 – Выравнивание элемента (см. выше)
P3 – Задает смещение элемента после выравнивания по оси X
P4 – Задает смещение элемента после выравнивания по оси Y
P5 – Задает максимальную ширину надписи в точках, если текст не умещается, он урезается с «…» в конце.
 
ТЕГ <artist_font P1,R,G,B>
Этот тег указывает шрифт и цвет текста для надписи «Исполнитель».
Параметры:
P1 – Тип шрифта (см. выше)
R,G,B – Цвет текста
 
ТЕГ <title_text P1,P2,P3,P4,P5>
Этот тег задает положение надписи «Название дорожки» в окне проигрывателя.
Параметры:
P1 – Начало координат (см. выше)
P2 – Выравнивание элемента (см. выше)
P3 – Задает смещение элемента после выравнивания по оси X
P4 – Задает смещение элемента после выравнивания по оси Y
P5 – Задает максимальную ширину надписи в точках, если текст не умещается, он урезается с «…» в конце.
 
ТЕГ <title_font P1,R,G,B>
Этот тег указывает шрифт и цвет текста для надписи «Название дорожки».
Параметры:
P1 – Тип шрифта (см. выше)
R,G,B – Цвет текста
 
ТЕГ <album_text P1,P2,P3,P4,P5>
Этот тег задает положение надписи «Название альбома» в окне проигрывателя.
Параметры:
P1 – Начало координат (см. выше)
P2 – Выравнивание элемента (см. выше)
P3 – Задает смещение элемента после выравнивания по оси X
P4 – Задает смещение элемента после выравнивания по оси Y
P5 – Задает максимальную ширину надписи в точках, если текст не умещается, он урезается с «…» в конце.
 
ТЕГ <album_font P1,R,G,B>
Этот тег указывает шрифт и цвет текста для надписи «Название альбома».
Параметры:
P1 – Тип шрифта (см. выше)
R,G,B – Цвет текста
 
ТЕГ <file_text P1,P2,P3,P4,P5>
Этот тег задает положение надписи «Имя файла» в окне проигрывателя. Отображается при отсутствии тегов в текущей дорожке.
Параметры:
P1 – Начало координат (см. выше)
P2 – Выравнивание элемента (см. выше)
P3 – Задает смещение элемента после выравнивания по оси X
P4 – Задает смещение элемента после выравнивания по оси Y
P5 – Задает максимальную ширину надписи в точках, если текст не умещается, он урезается с «…» в конце.
 
ТЕГ <file_font P1,R,G,B>
Этот тег указывает шрифт и цвет текста для надписи «Имя файла». Отображается при отсутствии тегов в текущей дорожке.
Параметры:
P1 – Тип шрифта (см. выше)
R,G,B – Цвет текста
 
ТЕГ <index_text P1,P2,P3,P4,P5>
Этот тег задает положение надписи «Номер текущей дорожки» в окне проигрывателя (например: 21/145).
Параметры:
P1 – Начало координат (см. выше)
P2 – Выравнивание элемента (см. выше)
P3 – Задает смещение элемента после выравнивания по оси X
P4 – Задает смещение элемента после выравнивания по оси Y
P5 – Задает максимальную ширину надписи в точках, если текст не умещается, он урезается с «…» в конце.
 
ТЕГ <index_font P1,R,G,B>
Этот тег указывает шрифт и цвет текста для надписи «Номер текущей дорожки» в окне проигрывателя (например: 21/145).
Параметры:
P1 – Тип шрифта (см. выше)
R,G,B – Цвет текста
 
ТЕГ <mediatime_text P1,P2,P3,P4,P5>
Этот тег задает положение надписи «Текущее время воспроизведения» в окне проигрывателя (например: 03:55).
Параметры:
P1 – Начало координат (см. выше)
P2 – Выравнивание элемента (см. выше)
P3 – Задает смещение элемента после выравнивания по оси X
P4 – Задает смещение элемента после выравнивания по оси Y
P5 – Задает максимальную ширину надписи в точках, если текст не умещается, он урезается с «…» в конце.
 
ТЕГ <mediatime_font P1,R,G,B>
Этот тег указывает шрифт и цвет текста для надписи «Текущее время воспроизведения» в окне проигрывателя (например: 03:55).
Параметры:
P1 – Тип шрифта (см. выше)
R,G,B – Цвет текста
 
ТЕГ <duration_text P1,P2,P3,P4,P5>
Этот тег задает положение надписи «Общее время воспроизведения» и «Оставшееся время воспроизведения» в окне проигрывателя (например: -01:02).
Параметры:
P1 – Начало координат (см. выше)
P2 – Выравнивание элемента (см. выше)
P3 – Задает смещение элемента после выравнивания по оси X
P4 – Задает смещение элемента после выравнивания по оси Y
P5 – Задает максимальную ширину надписи в точках, если текст не умещается, он урезается с «…» в конце.
 
ТЕГ <duration_font P1,R,G,B>
Этот тег указывает шрифт и цвет текста для надписи «Общее время воспроизведения» и «Оставшееся время воспроизведения» в окне проигрывателя (например: -01:02).
Параметры:
P1 – Тип шрифта (см. выше)
R,G,B – Цвет текста
 

Удачного создания скинов для приложения KD Player.
С Уважением, Кныжов Дмитрий и Борисов Сергей.