Плагин foo_title

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

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

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

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

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

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

• поддержка жирности и курсива для текста, переписан текстовый слой
• исправлена ошибка, когда компонент не загружался в случае запуска плеера не из своей директории (fooManagedWrapper)
• добавлена функция сохранения положения окна
• исправлена ошибка, связанная с показом обложек из папки, название которой включает символы юникода
• список шкур обновляется при открытии окна настроек
• исправлена ошибка с заполняющими изображениями, когда они лишь частично перекрывали панель
• теперь при нажатии на Alt+Tab вы не увидите иконку окна
• добавлена опция показа панели (при свёрнутом главном окне, неактивном главном окне и постоянное отображение панели)
• используется интерфейс 32-разрядных Windows-приложений для отображения поверх всех окон
• теперь текст обновляется нажатии на кнопки «стоп» и «пауза»
• добавлена поддержка текста по умолчанию, отображающегося в момент, когда ни одна композиция не проигрывается
• появилась возможность устанавливать параметры выравнивания для прокручивающегося текста в том случае, когда его длина меньше размера слоя
• поддержка изменения прозрачности при наведении курсора мыши
• исправлены мелкие ошибки

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

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

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

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

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

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

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

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

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

Таким образом начало 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» требует наличия элемента «padding» (заполнение) со следующими атрибутами: left, top, right, bottom. Эти атрибуты определяют позицию заполняемой зоны в пределах основного слоя. Например:

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

Слой имеет постоянный абсолютный размер. У него есть позиционный подэлемент с аттрибутами 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».

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

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

Содержит 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», в зависимости от того, хотите ли Вы, чтобы картинка повторялась или была растянута.

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

    <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, который отображается, когда проигрывание остановлено.

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

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

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

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

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

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

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

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

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

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

Этот слой создаёт кнопку с присваиваемой ей функцией. Её определяет подэлемент «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~~