foobar2000

Эта страница только для чтения. Вы можете посмотреть её исходный текст, но не можете его изменить. Сообщите администратору, если считаете, что это неправильно.
====== Создание цветовой схемы ======

В этой главе мы добавим цветовую раскраску к нашей текстовой информации. Мы разработаем структуру нашей цветовой  схемы таким образом, чтобы упростить добавление дополнительных наборов цветов. В результате для добавления нового цветового набора будет достаточно определить все необходимые цвета лишь в одном месте. 

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

===== Определение цветов. =====

Перейдите к вкладке **Globals** в разделе **Playlist view** настроек Columns UI и выберите вкладку **Variables**. Здесь уже есть несколько наших строчек: код для определения альбомных трэков. Теперь добавьте туда эти строки:

    // --- Определяем цвета ---
    // Цвет текста
    $set_global(cTxtStd,$rgb(255,255,255))
    $set_global(cTxtSel,$rgb(255,255,255))
    $set_global(cTxtTrk,$rgb(0,0,0))
    $set_global(cTxtVA,$rgb(126,16,16,220,129,129))
    $set_global(cTxtVA1,$rgb(220,129,129,220,129,129))
    $set_global(cTxtVAPlay,$rgb(126,16,16,126,16,16))
    $set_global(cTxtDim,$rgb(160,160,160,160,160,160))
    $set_global(cTxtPlay,$rgb(255,255,255))

Вам уже должна быть знакома функция ''$set_global'', которая определяет глобавльные переменные для всего дизайна. Для того чтобы определить наши цвета, мы используем эту функцию в сочетании с ''$rgb()''. ''$Rgb()'' в качестве аргументов принимает 3 числа, соответствующие красному, зеленому и синему компонентам цвета. Это обычный метод определения цветов в [[wpru>RGB|модели RGB]]. Внизу окна ввода, возле кнопки **Tools**, есть кнопка <key>...</key>, которая вызывает стандартный диалог Windows для выбора цветов.

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

''cTxtStd'': Цвет обычного текста. Т.к. 255 это максимальное возможное значение для каждого из цветовых компонентов, то (255,255,255) означает ярко-белый цвет.

''cTxtSel'': Цвет выделенного текста. Используется для отображения выделенных в плэйлисте строк.

''cTxtTrk'': Цвет текста в столбце ''Track''. Черный. Для этого столбца будет использоваться светло-серый цвет фона (см. ниже), поэтому белый цвет текста здесь неуместен. Так же мы будет использовать этот цвет для первых пяти строк в столбце ''Album/Artist''.

''cTxtVA'', ''cTxtVA1'', ''cTxtVAPlay'': Цвет текста для имен исполнителей в столбце ''Track''. Мы будем использовать его при отображении сборников различных исполнителей, когда столбец ''Track'' будет содержать так же и имя исполнителя. Этот цвет будет служить для визуального различения имени исполнителя и названия композиции. Как Вы уже заметили, в этих строках функции ''$rgb()'' имеют шесть аргументов, не пугайтесь, это обычный способ определения двух цветов за один раз. Первые три аргумента определяют цвет текста, вторая тройка аргументов определяет цвет выделенного текста. В нашем случае это темно-красный для обычного текста и ярко-красный для выделенного текста. В следующих главах мы рассмотрим различия между этими тремя переменными.

''cTxtDim'': Светло-серый цвет текста для неяркого отображения нулей в столбце с номером трэка.

''cTxtPlay'': Цвет текста, используемый для подсветки текущей проигрываемой композиции. Он понадобится нам только в следующей главе.

    // Цвет фона
    $set_global(cBgStd,$rgb(0,0,0))
    $set_global(cBgSel,$rgb(126,16,16))
    $set_global(cBgTrk,$rgb(200,200,200))
    $set_global(cBgAlt,$rgb(25,25,25))
    $set_global(cBgPlay,$rgb(150,150,150))

Это следующая часть нашего скрипта, определяющая цвета фона. Также вставьте эти строки в окно **Variables**.

''cBgStd'': Стандартный цвет для фона. Черный.

''cBgSel'': Цвет фона для выделенных строк. Тот же темно-красный что и ''cTxtVA''.

''cBgTrk'': Это уже упомянутый нами выше светло-серый цвет фона для столбца ''Track''.

''cBgAlt'': Альтернативный темно-серый цвет фона. Мы будем использовать его для одной фишки, по которой сходит с ума очень много народу: чередование цветных строчек в плэйлисте, на манер iTunes.

''cBgPlay'': Умеренно-серый цвет фона для подсветки текущей проигрываемой композиции. Так же как и ''cTxtPlay'' понадобится нам только в следующей главе.

    // Цвет рамок 
    $set_global(cFrmStd,$rgb(255,43,43))

Эта строка задает умеренно-красный в качестве цвета рамок, которые являются границами ячейки плэйлиста. Если Вы разделите строки плэйлиста столбцами, то получите набор из ячеек, подобный тому что Вы видите в программах табличной обработки (напр. Excel). Каждая сторона такой ячейки может иметь цветную рамочку. Мы будем использовать эту возможность для рисования границ между альбомами. 

===== Создание глобального цветового скрипта =====

Переключитесь на вкладку **Style**. Здесь мы введем цветовой скрипт, который будет применяться ко всем столбцам.

Команда для установки цветов называется ''$set_style()''. В первую очередь определим с помощью нее цвета текста.

<html><pre class="code">$set_style(<b>text</b>,$get_global(cTxtStd),<b>$get_global(cTxtSel)</b>)</pre></html>

Параметр ''text'' сообщает Foobar2000  о том что эти цвета нужно использовать в качестве цветов для текста. Затем мы используем наши глобальные переменные для получения значений цветов для обычного (cTxtStd) и выделенного текста (cTxtSel). В следующем шаге мы устанавливаем цвета фонов.

<html><pre class="code"><font color="#808080">$set_style(text,$get_global(cTxtStd),$get_global(cTxtSel))</font>

$set_style(back
,$ifequal($mod(%_playlist_number%,2),0,$get_global(cBgStd),$get_global(cBgAlt))
,$get_global(cBgSel)
)
</pre></html>

Принцип такой же как и в предыдущем примере. Мы используем ''back'' для того чтобы указать, что мы устанавливаем цвета фонов, и затем указываем значения цветов, по аналогии с предыдущим примером, это цвета фона для обычного и выделенного текста. Будьте внимательны при разбивке команд ''$set_style()'' на несколько строк, как в этом примере. Запятая обязательно должна находиться в начале строки!

C помощью длинной строки, включающей в себя выражение ''$ifequal()'', мы достигаем эффекта чередующихся цветных строк a-la iTunes в плэйлисте. Посмотрим на нее более внимательно.

<html><pre class="code"><font color="#808080">$set_style(back</font>

,$ifequal(<b>$mod(%_playlist_number%,2)</b>,0,
$get_global(cBgStd),
$get_global(cBgAlt))

<font color="#808080">,$get_global(cBgSel)</font>
)
</pre></html>

Мы не может узнать цвет фона предыдущей строки из-за того, что Tagz работает по принципу "строчка за строчкой". Поэтому единственный способ идентифицировать определенную строку в плэйлисте это использовать ''%playlist_number%'', который просто считает строчки сверху вниз.

Вместо того чтобы сказать //Используй другой цвет, нежели на предыдущей строке// мы используем номер строки и говорим //Используй черный для всех строк с четными номерами и темно-серый для строк с нечетными номерами//. Результат получаем идентичный. 

Мы можем определить четность или нечетность номера строки, используя функцию ''$mod(x,y)'', которая делит ''x'' на ''y'' и возвращает остаток от деления. Например, 11 поделенное на 2 равно 5 и остаток равен 1, поэтому ''$mod(11,2)'' вернет 1. Деля номер строки на 2 и смотря на остаток, мы можем сказать четная строка или нет.

''$Ifequal()'' сравнивает равен ли остаток от деления нулю - что справедливо для четных чисел - и устанавливает цвет фона в ''cBgStd'' (черный). В противном случае (для нечетных строк) цвет фона будет темно-серым (''cBgAlt'').

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

{{colours_and_fonts.png}}

Перейдите на вкладку **Colours and Fonts** и измените оба шрифта в секции **Fonts** на //Franklin Gothic Medium, 9pt// (или на любой другой, который Вас больше устраивает). Затем поставьте галочку **Use custom colours** и для **Background** установите черный. Это гарантирует нам что когда в плэйлитсте будет всего несколько трэков, то цвет остальной части плэйлиста будет черный.

Здесь же установите галочку **Use custom active item frame** и установите этот цвет в черный. Этот значение определяет цвет рамки вокруг текущего выбранного элемента плэйлиста, и обычно (если явно не определено) это инвертированный цвет фона, что смотрелось бы очень некрасиво в нашем дизайне.

===== Столбец Artist/Album =====


{{columns_style_tab.png}}

Вернитесь на вкладку **Columns**, выберите столбец ''Artist/Album'' и активируйте вкладку **Style**. Это место для определения цветового скрипта, так же как и вкладка **Globals**, но скрипт определенный здесь будет применятся только к указанному столбцу. И снова нам не нужно полностью определять цветовую схему, потому что Fooobar2000 автоматически применяет глобальные значения для всех значений цветов которые мы не указали явно. 

Установите галочку **Use custom color spec** для того чтобы заставить Foobar2000 использовать цветовой скрипт столбца (а не глобальный).

С первого взгляда цветовой скрипт для этого столбца кажется достаточно сложным. И, конечно же, нам предстоит много чего сделать в этом столбце. Снова посмотрим на [[http://wiki.foobar2000.ru/_media/foobar2000:tagz:tutorial:dark_connections_fb2k.png|скриншот]] законченного дизайна. Вот что нам нужно реализовать в столбце ''Artist/Album'':

  * Белый текст на черном фоне и красная верхняя граница для первого трэка в альбоме.
  * Черный текст на сером фоне для трэков со второго по четвертый.
  * Белый текст на черном фоне и красная нижняя граница для пятого трэка в альбоме.
  * Черный фон и красная граница справа для всех остальных трэков в альбоме.
  * В дополнение красная нижняя граница для последнего трэка в альбоме.
  * Не указываем выделенные трэки в плэйлисте, это задача других столбцов.
  * Красная рамка для одиночных трэков. Прочие настройки будут определены глобальным цветовым скриптом.

Первая часть скрипта позаботиться от цветах текста и фона.

    $if($get_global(isAlbum),
    // Цвет текста/фона
    $ifgreater(%tracknumber%,4,
    $set_style(text,$get_global(cTxtStd),$get_global(cTxtStd))
    $set_style(back,$get_global(cBgStd),$get_global(cBgStd))
    ,
    $ifequal(%tracknumber%,1,
    $set_style(text,$get_global(cTxtStd),$get_global(cTxtStd))
    $set_style(back,$get_global(cBgStd),$get_global(cBgStd))
    ,
    $set_style(text,$get_global(cTxtTrk),$get_global(cTxtTrk))
    $set_style(back,$get_global(cBgTrk),$get_global(cBgTrk))
    ))
    )

Сейчас Вам уже должны быть знакомы используемые здесь функции, поэтому я буду краток. ''$Ifgreater()'' берет заботу о альбомных трэках начиная с 5-го. Часть //иначе// этого выражения содержит вызов функции ''$ifequal()'' для определения первого трэка. Значения цветов одинаковые для обоих случаев, что в общем то делает возможным реализовать это в одном выражении ''$if()'', но приведенный здесь вариант легче читать и редактировать.

Ну и завершение последние два вызова ''$set_style()'' задают серый цвет фона для трэков со второго по четвертый

Вторая часть скрипта определяет все необходимые рамки.

<html><pre class="code"><font color="#808080">$if($get_global(isAlbum),

<i>[...]</i></font>

// Рамка сверху и снизу
$ifequal(%tracknumber%,1,
$set_style(frame-top,1,$get_global(cFrmStd)),
$ifequal(%tracknumber%,5,
$set_style(frame-bottom,1,$get_global(cFrmStd)),
$ifequal(%tracknumber%,%album tracks%,
$set_style(frame-bottom,1,$get_global(cFrmStd)),
)))

// Рамка справа
$ifgreater(%tracknumber%,5,
$set_style(frame-right,1,$get_global(cFrmStd))
,)

)</pre></html>



Три первые ''$ifequal()'' определяют первый, пятый и последний трэк альбома и устанавливают цвет рамки. Используемый здесь вызов ''$set_style()'' немного отличается оттого, что мы использовали ранее для задания цвета текста и фона. В общем виде он выглядит так:

<html><pre class="code">$set_style(<i>часть рамки</i>,<i>вклвыкл</i>,<i>цвет</i>)</pre></html>

//Часть рамки// - указывает на положение границы и может принимать одно из этих значений: ''frame-left'', ''frame-right'', ''frame-top'' или ''frame-bottom''.

//Вклвыкл// равен либо 1, что для показа этой стороны рамки, либо 0, в этом случае сторона рамки не рисуется и следующий параметр (//цвет//) пропускается.

//Цвет// - конечно же определяет цвет рамки.

Как Вы помните, мы не определили цвета рамок в глобальном цветовом скрипте, поэтому нам не нужно явно выключать ненужные нам рамки (т.к. они не указаны в глобальном скрипте, то они выключены по умолчанию). Поэтому нам достаточно просто включить те рамки, которые нам необходимы. Выражение ''$ifgreater()'' рисует рамку справа для всех трэков, начиная с 5-го

Наконец-то мы закончили с альбомами. Последняя строка задаст цвета для одиночных трэков. Вот скрипт целиком:

<html><pre class="code"><font color="#808080">$if($get_global(isAlbum),

// Цвет текста/фона
$ifgreater(%tracknumber%,4,
$set_style(text,$get_global(cTxtStd),$get_global(cTxtStd))
$set_style(back,$get_global(cBgStd),$get_global(cBgStd))
,
$ifequal(%tracknumber%,1,
$set_style(text,$get_global(cTxtStd),$get_global(cTxtStd))
$set_style(back,$get_global(cBgStd),$get_global(cBgStd))
,
$set_style(text,$get_global(cTxtTrk),$get_global(cTxtTrk))
$set_style(back,$get_global(cBgTrk),$get_global(cBgTrk))
))

// Рамка сверху и снизу
$ifequal(%tracknumber%,1,
$set_style(frame-top,1,$get_global(cFrmStd)),
$ifequal(%tracknumber%,5,
$set_style(frame-bottom,1,$get_global(cFrmStd)),
$ifequal(%tracknumber%,%album tracks%,
$set_style(frame-bottom,1,$get_global(cFrmStd)),
)))

// Рамка справа
$ifgreater(%tracknumber%,5,
$set_style(frame-right,1,$get_global(cFrmStd))
,)
</font>
,
// -- для одиночных трэков
$set_style(frame-right,1,$get_global(cFrmStd))
)</pre></html>

===== Столбец Tracknumber =====

Для этого столбца нам предстоит сделать:

  * Белый текст на черном фоне и красная верхняя граница для первого трэка в альбоме.
  * Черный текст на сером фоне для всех остальных.
  * Красная граница снизу для последнего трэка в альбоме.
  * Темно-красный фон для выбранного одиночного трэка.
  * Никакой индикации выбранных трэков для альбомов.
  * Затемненные нули в начале номеров трэков.

    $if($get_global(isAlbum)
    ,
    // -- для альбомов
    $set_style(text,$get_global(cTxtTrk),$get_global(cTxtTrk))
    $set_style(back,$get_global(cBgTrk),$get_global(cBgTrk))
    //
    $ifequal(%tracknumber%,1,
    $set_style(text,$get_global(cTxtStd),$get_global(cTxtStd))
    $set_style(back,$get_global(cBgStd),$get_global(cBgStd))
    $set_style(frame-top,1,$get_global(cFrmStd))
    ,
    //
    $ifequal(%tracknumber%,%album tracks%,
    $set_style(frame-bottom,1,$get_global(cFrmStd)),
    ))
    )

Это скрипт для альбомных трэков. В первую очередь мы по умолчанию задаем черный текст на сером фоне. Затем изменяем эти значения для первого трэка и задаем верхнюю сторону рамки для него. Второй ''$ifequal()'' задает нижнюю сторону рамки для последнего трэка в альбоме. Ниже приведен скрипт целиком, включая настройки цветов для одиночных трэков.

<html><pre class="code"><font color="#808080">$if($get_global(isAlbum)
,
// -- для альбомов
$set_style(text,$get_global(cTxtTrk),$get_global(cTxtTrk))
$set_style(back,$get_global(cBgTrk),$get_global(cBgTrk))

$ifequal(%tracknumber%,1,
$set_style(text,$get_global(cTxtStd),$get_global(cTxtStd))
$set_style(back,$get_global(cBgStd),$get_global(cBgStd))
$set_style(frame-top,1,$get_global(cFrmStd))
,

$ifequal(%tracknumber%,%album tracks%,
$set_style(frame-bottom,1,$get_global(cFrmStd)),
))
</font>
,
// -- для одиночных трэков
$set_style(text,$get_global(cTxtTrk),$get_global(cTxtSel))
$set_style(back,$get_global(cBgTrk),$get_global(cBgSel))
)</pre></html>

У нас все еще отсутствуют затемненные нули в начале номеров трэков. Но на вкладке **Style** мы не можем управлять отображением отдельных символов, поэтому эта часть должна быть сделана на вкладке **Display**.

<html><pre class="code">
<font color="#808080">$if($get_global(isAlbum),
$ifgreater(%tracknumber%,15,
$hex(%tracknumber%,1),</font>
$get_global(cTxtDim)<font color="#808080">'0'</font>$rgb()<font color="#808080">$hex(%tracknumber%,1)
))</font>
</pre></html>

Вставьте ''$get_global(cTxtDim)'' в уже существующий скрипт, как показано на примере выше. Этим Вы перекроете настройки из таба **Style** и установите цвет текста в светло серый, как нам и нужно. После вывода нулей, нам нужно вернуть цвет текста к значению по умолчанию определенному на вкладке **Style**, для этого мы используем вызов ''$rgb()''. Запомните, что на вкладке **Display** не возможно изменять цвет фона.

===== Столбец Track =====

Вот что нам нужно сделать в столбце //Track//:

  * Черный текст на сером фоне по умолчанию.
  * Белый текст на черном фоне и красная верхняя граница для первого трэка в альбоме.
  * Красная граница снизу для последнего трэка в альбоме.
  * Белый цвет текста на темно-красном фоне для выбранных трэков.
  * Красный текст для имен исполнителей в сборниках.

<html><pre class="code">
$set_style(text,$get_global(cTxtTrk),$get_global(cTxtSel))
$set_style(back,$get_global(cBgTrk),$get_global(cBgSel))


$if($get_global(isAlbum)
,
$ifequal(%tracknumber%,1,
$set_style(text,$get_global(cTxtStd),$get_global(cTxtSel))
$set_style(back,$get_global(cBgStd),$get_global(cBgSel))
$set_style(frame-top,1,$get_global(cFrmStd))
,)

$ifequal(%tracknumber%,%album tracks%,
$set_style(frame-bottom,1,$get_global(cFrmStd))
,)
)
</pre></html>

Это скрипт целиком. Первые 2  ''$set_style()'' определяют цвета по умолчанию для обычных и выделенных трэков. С помощью первого ''$ifequal()'' мы перекрываем эти значения для первого трэка в альбоме, устанавливая необходимые нам значения, а также добавляя красную границу с верху. Второй ''$ifequal()'' добавляет нижнюю границу для последнего трэка.

По аналогии с отображением затемненных нулей в начале номеров трэков, красный  цвет текста для отображения имен исполнителей в сборниках мы будем реализовывать на вкладке **Display**.

Отображение имен исполнителей другим цветом вызвало больше всего проблем при реализации этого дизайна. Для нормального отображения их на светло-сером фоне используемый цвет должен быть достаточно темным красным. Я выбрал точно такой же как и для отображения выделенных строк, конечно же, при этом мне пришлось выбрать немного отличающийся по оттенку красный для выделения, т.к. в противном случае имена исполнителей бы просто исчезли при выделении строки. Это было легко сделать с помощью варианта команды ''$rgb()'' с шестью параметрами. Другая проблема состояла в том, что выбранный темно-красный оттенок плохо смотрелся на черном фоне строк соответствующих первым трэкам в альбомах, для решения этой проблемы пришлось вводить второю переменную для цвета. Поэтому в результате мы имеем ''cTxtVA'' по умолчанию и отдельно ''cTxtVA1'' для первых трэков в альбомах. Что и отображено в этом скрипте:

<html><pre class="code">
<font color="#808080">$if($and($get_global(isAlbum),$meta(album artist)),</font>
$ifequal(%tracknumber%,1,$get_global(cTxtVA1),$get_global(cTxtVA))
<font color="#808080">[$meta(artist)' - ']</font>$rgb()
<font color="#808080">)

%title%</font>
</pre></html>

''$Ifequal()'' устанавливает соответствующий цвет для первого трэка. После отображения имени исполнителя мы с помощью ''$rgb()'' возвращаем значения цветов к значениям заданным на вкладке **Style**.

===== Столбец Time =====

Столбец //Time// проще, чем предыдущие

    * Белый текст на черном фоне и красная граница снизу для всего.
    * Красная граница сверху для первого трэка в альбоме.

<html><pre class="code">
$set_style(back,$get_global(cBgStd),$get_global(cBgSel))
$set_style(frame-bottom,1,$get_global(cFrmStd))

$if($get_global(isAlbum),
$ifequal(%tracknumber%,1,
$set_style(frame-top,1,$get_global(cFrmStd)),
))
</pre></html>

В общем-то, про этот скрипт и говорить-то особенно нечего. Он достаточно понятен и без комментариев. Первые 2 строки устанавливаю цвет фона и цвет нижней границы. Не надо беспокоиться про цвет текста, он не будет отличаться от цвета по умолчанию, заданного глобально. Оставшаяся часть скрипта проверяет, что мы отображаем альбом, затем, в случае первого трэка, устанавливает цвет верхней границы.

===== Столбец RGain =====

Еще один простой столбец. Вот что нам нужно:

  * Белый текст на черном фоне и красная граница справа для всего.
  * Красная граница сверху для первого трэка в альбоме.
  * Красная граница снизу для последнего трэка в альбоме.

<html><pre class="code">
$set_style(back,$get_global(cBgStd),$get_global(cBgSel))
$set_style(frame-right,1,$get_global(cFrmStd))


$if($get_global(isAlbum),
$ifequal(%tracknumber%,1,
$set_style(frame-top,1,$get_global(cFrmStd)),

$ifequal(%tracknumber%,%album tracks%,
$set_style(frame-bottom,1,$get_global(cFrmStd)),
))
)
</pre></html>

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

===== Результат =====

Общая цветовая схема готова. Вы уже могли заметить, что Foobar2000 до сих пор не выделяет текущую проигрываемую композицию в плэйлисте, но это уже задача следующей главы.  Сейчас же Ваш Foobar2000 должен выглядеть как на этой картинке:

{{stage_2.png?250x183|Щелкните для увеличения}} 

Если вдруг у Вас не показываются цвета для столбцов, то прежде чем бросаться искать ошибку в скриптах, проверьте, что галочка **Use custom color spec** выставлена.

~~DISCUSSION~~
foobar2000

Инструменты пользователя

Инструменты сайта

Инструменты страницы
