====== Плагин foo_title ======

[[http://www.fi.muni.cz/~xplasil/foo_title.html|Оригинал]] (англ.)


**foo_title** - это мой компонент для foobar2000. При написании foo_title мною ставилась цель создать панель, которая бы всегда находилась в верхней части экрана (как окно winamp в режиме windowshade). Компонент поддерживает шкуры (скины) и написан на С# (и частично С++/CLI для связи с плеером, конечно). Поэтому Вам понадобится .NET Framework 2.0.


===== Скачать =====

[[https://sourceforge.net/project/showfiles.php?group_id=178279|Плагин можно взять здесь]]. Дистрибутив также включает 2 моих скина. Актуальная версия - 0.6 от 1 августа 2006 года.

[[http://www.hydrogenaudio.org/forums/index.php?showtopic=46619|Множество готовых шкур на HydrogenAudio]]
и на [[http://foobar2000.ru/forum/index.php/topic,557.0.html|Foobar2000.ru]]


===== Скриншоты =====

{{http://www.fi.muni.cz/~xplasil/images/foo_title/screen1.png}}

===== Что нового? =====

Во-первых, компонент был портирован на версию плеера 0.9 и он не будет работать со старыми релизами. Я переписал огромное количество кода.
  * Прозрачность для шкур. Благодаря классу PerPixelAlphaForm Rui Godinho Lopes, компонент теперь поддерживает прозрачные шкуры с несколькими слоями
  * Окно с настройками. Теперь Вы можете настроить все свойства в окне (Display->foo_title), хотя их пока не мого :)
  * Перезагрузка шкуры без перезагрузки плеера. Без этого было плохо :-)
  * Поддержка новых элементов. Обложка, прокручивающийся текст и кнопки
  * Компонент стал проще и теперь ещё сильнее привязан к .NET. Это должно положительно сказаться на его стабильности
  

=====   Изменения в версии 0.6 =====

  * поддержка жирности и курсива для текста, переписан текстовый слой
  * исправлена ошибка, когда компонент не загружался в случае запуска плеера не из своей директории (fooManagedWrapper)
  * добавлена функция сохранения положения окна
  * исправлена ошибка, связанная с показом обложек из папки, название которой включает символы юникода
  * список шкур обновляется при открытии окна настроек
  * исправлена ошибка с заполняющими изображениями, когда они лишь частично перекрывали панель
  * теперь при нажатии на <key>A-tab</key> вы не увидите иконку окна
  * добавлена опция показа панели (при свёрнутом главном окне, неактивном главном окне и постоянное отображение панели)
  * используется интерфейс 32-разрядных Windows-приложений для отображения поверх всех окон
  * теперь текст обновляется нажатии на кнопки "стоп" и "пауза"
  * добавлена поддержка текста по умолчанию, отображающегося в момент, когда ни одна композиция не проигрывается
  * появилась возможность устанавливать параметры выравнивания для прокручивающегося текста в том случае, когда его длина меньше размера слоя
  * поддержка изменения прозрачности при наведении курсора мыши
  * исправлены мелкие ошибки

Все изменения обратно совместимы и все Ваши шкуры будут работать и с версией 0.6.


===== Инсталляция =====

Инсталляция теперь предельно проста. Вам нужно переписать файлы из архива в папку с плеером: библиотеки должны находится в папке с компонентами, а шкуры с папке ''<папка плеера>\foo_title''.



===== Создание шкур =====

Шкуры foo_title состоят из одного XML файла и нескольких изображений. XML файл описывает, где и какие изображения отображать. Типы поддерживаемых изображений определяются .NET Framework - BMP, JPEG, PNG (для прозрачных изображений) и возможно некоторые другие.

Каждая шкура располагается в отдельной папке внутри папки ''foo_title''. В каждой папке должен находится файл skin.xml со следующей структурой.



==== Структура файла XML ====


Основной элемент - это шкура. У него есть следующие атрибуты:

  * **author (автор)** - автор шкуры. Эта информация нигде не отображается, просто бывает интересно знать, чью шкуру ты используешь.

  * **name (имя)** - название шкуры. Довольно бесполезный атрибут.

  * **width (ширина)** - исходная ширина окна. Хотя ширина устанавливается автоматически.

  * **height (длина)** - исходная длина окна, но она также устанавливается автоматически.

Таким образом начало XML файла должно выглядеть следующим образом:

<code xml><?xml version="1.0" encoding="utf-8"?>

<skin
    author="Roman Plasil"
    name="White skin"
    width="400"
    height="22">
</code>

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

У каждого слоя есть элемент геометрии, который определяет позицию, размер и поведение слоя при изменении его размера.

Код одного слоя выглядит примерно так:

<code xml>
    <layer name="main" type="absolute-images">
        <geometry type="absolute">
            <size x="370" y="58" />
            <position x="0" y="0" align="left" />
        </geometry>

        <contents>
            <image src="main.png" />
        </contents>
        <!-- optionally, another <layer> element (or more) go here -->
   </layer>
</code>

Атрибут "**name**" имеет информативный характер, в то время как атрибут "**type**" более важен. Он определяет способ отображения содержимого. Но об этом чуть позже.





==== Геометрия слоя ====


У каждого слоя есть своя геометрия, которая определяет его позицию и размер в пределах основного слоя. Существует 2 типа геометрии.

=== full ===

Слой занимает все пространство основного слоя. Тип "**full**" требует наличия элемента "**padding**" (заполнение) со следующими атрибутами: ''left'', ''top'', ''right'', ''bottom''. Эти атрибуты определяют позицию заполняемой зоны в пределах основного слоя. Например:

<code xml>
  <geometry type="full">
     <padding left="66" top="4" right="55" bottom="0" />
  </geometry>
</code>


=== absolute (абсолютный) ===

Слой имеет постоянный абсолютный размер. У него есть позиционный подэлемент с аттрибутами ''x'', ''y'' и ''align'' (выравнивание). Атрибут ''align'' может принимать значения ''left'' и ''right''. Аттрибуты ''x'' и ''y'' задают позицию слоя по отношению к его выравниванию. 

Например:

<code xml>
	<geometry type="absolute">
		<size x="200" y="22" />
		<position x="0" y="0" align="left" />
	</geometry>
</code>

{{http://www.fi.muni.cz/~xplasil/images/foo_title/layers2.png}}

Например: тип геометрии красного слоя - "**full**", все атрибуты элемента ''padding'' установлены в "0", кроме ''right'', значение которого равно примерно ''60''. Он содержит другой слой с типом геометрии "''full''" (зеленого цвета) с большими значениями атрибутов ''top'' и ''right'' и маленькими ''left'' и ''bottom padding''. Если менять размер основного (белый) слоя, другие слои с типом геометрии "''full''" будут автоматически менять свои размеры. Синий слой имеет абсолютный тип геометрии ("''absolute''") и свой размер он менять не будет. Атрибут ''align'' для этого слоя установлен в значение "''right''".




==== Типы слоёв ====


Теперь, когда Вы поняли (я надеюсь), как располагать и изменять размер слоёв, мы посмотрим, что же они могут содержать.

Существуют следующие типы слоёв:

=== Слой "заполненный-изображениями" (fill-images) ===


Содержит 3 изображения, которые рисуются один за другим для более качественного изменения размера. Одна картинка для левой стороны, одна по центру и ещё одна справа. 

<code xml>
	<contents>
		<image position="left" src="white\left_back.png" />
		<image position="center" repeat="true" src="white\repeat_back.png" />
		<image position="right" src="white\right_back.png" />
	</contents>
</code>

Центральная картинка имеет логический атрибут "''repeat''" (повторять), который может принимать значения "''true''" или "''false''", в зависимости от того, хотите ли Вы, чтобы картинка повторялась или была растянута.

=== Слой с текстом (text) ===


Этот тип слоя отображает текст и код его выглядит примерно так:

<code xml>
    <contents spacing="20" font="Verdana" size="8" bold="true" italic="true">
        <defaultText>foobar2000</defaultText>
        <label position="left" color="ff1234f6" bold="false" font="tahoma" >%artist% '('%album%')' - %title%</label>
        <label position="right" color="ff000000">%_time_elapsed%/%_length%</label>
    </contents>
</code>

атрибут "''spacing''" - это пространство между левой и правой надписями. Атрибут "''color''" задаёт цвет похожим на HTML способом. Первые 2 числа - это альфа слой. Как Вы могли заметить, текстовый слой использует коды плеера (title formatting) и это единственный слой, который может изменять размер шкуры. Это делается в соответствии с шириной текста. Геометрия слоя должна иметь значение "''full''" для того, чтобы работала эта функция.

Теперь Вы можете задавать параметры шрифта, его размера, курсива и жирности для обеих надписей и элемента "''contents''". Его содержимое принимается как текст по умолчанию и может быть переопределён при помощи элемента "''label''". В примере, указанном выше, левая надпись будет иметь следующие параметры: шрифт Tahoma, размер 8, курсив.

Слой "''contents''" может также иметь элемент defaultText, который отображается, когда проигрывание остановлено.

=== Слой "Прокручивающийся-текст" (scrolling-text) ===

Прокручивающийся текст - это почти то же самое, что и нормальный текст, кроме следующего:

  * он может иметь только один элемент
  * теперь Вы можете задать выравнивание текста, если он короче размера слоя. Просто впишите "''left''" или "''right''" или "''center''" в значение аттрибута ''position'' элемента "''label''".

<code xml><label position="center">%artist%</label></code>

  * он не меняет размер шкуры
  * у него есть ещё 2 дополнительных аттрибута: "''speed''", который задаёт скорость скриллинга (советую значение "50") и "''pause''" в мс, который определяет задержку, когда текст достигает одной из своих границ. Советую - "1000".

=== Слой с "абсолютными-изображениями" (absolute-images) ===

Отображает изображения растянутые на весь слой, одно накладывается на другое.

<code xml>
<contents>
    <image src="default\logo.png"/> 
</contents></code>

=== Слой с "анимацией" (animation) ===

Проигрывает анимацию растянутую на весь слой.

<code xml><contents>
    <frame src="white\logoa1.png" />
    <frame src="white\logoa2.png" />
    <frame src="white\logoa3.png" />
    <frame src="white\logoa4.png" />
    <frame src="white\logoa5.png" />
    <frame src="white\logoa6.png" />
    <frame src="white\logoa5.png" />
    <frame src="white\logoa4.png" />
    <frame src="white\logoa3.png" />
    <frame src="white\logoa2.png" />
</contents></code>

=== Слой с обложкой альбома (album-art) ===

Этот слой отображает обложку альбома. Каждый пользователь может задать имена файлов с обложками альбомов. Также существует один подэлемент, задающий картинку "''nocover''".

<code xml>
<contents>
    <NoAlbumArt>
        noAlbumArt.png
    </NoAlbumArt>
</contents>
</code>

=== Слой с кнопками (buttons) ===

Этот слой создаёт кнопку с присваиваемой ей функцией. Её определяет подэлемент "''action''". Вы можете выбрать любую команду из главного меню плеера, такую как Play. Такие подэлементы как ''normalImg'', ''overImg'', ''downImg'' определяют изображения кнопок в нормальном состоянии, при наведении курсора и при нажатии.

<code xml>
<contents>
    <action>
        Next
    </action>
    <normalImg src="buttons-normal_07.png" />
    <overImg src="buttons-over_07.png" />
    <downImg src="buttons-down_07.png" />
</contents>
</code>

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

~~DISCUSSION~~