Содержание

Плагин foo_title

Оригинал (англ.)

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

Скачать

Плагин можно взять здесь. Дистрибутив также включает 2 моих скина. Актуальная версия - 0.6 от 1 августа 2006 года.

Множество готовых шкур на HydrogenAudio и на Foobar2000.ru

Скриншоты

Что нового?

Во-первых, компонент был портирован на версию плеера 0.9 и он не будет работать со старыми релизами. Я переписал огромное количество кода.

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

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

Инсталляция

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

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

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

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

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

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

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

<?xml version="1.0" encoding="utf-8"?>
 
<skin
    author="Roman Plasil"
    name="White skin"
    width="400"
    height="22">

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

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

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

    <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>

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

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

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

full

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

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

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

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

Например:

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

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

Типы слоёв

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

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

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

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

	<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>

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

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

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

    <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>

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

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

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

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

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

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

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

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

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

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

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

<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>

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

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

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

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

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

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

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

~~DISCUSSION~~