Добавление иконки приложения к любой теме metacity (рамки окон Linux).

Современная мода по какой-то неясной мне причине диктует тенденцию НЕ рисовать иконки приложения в верхних рамках ("загривках") окон. Так, этих иконок нет в новых версиях Windows и в подавляющем большинстве тем для DE Linux. В данной статье легко и без заморочек научимся добавлять иконки к любой metacity-теме.

Отрисовка иконок в metacity производится всего одной простой командой\тегом - <icon>. Именно его необходимо добавить в нужное место той или иной темы. Вооружаемся текстовым редактором (желательно, с подсветкой синтаксиса - встроенный в MC вполне сгодится) и вперёд. Но сперва кратко опишем необходимую часть окна, дабы понимать, с чем мы вообще будем работать.

Структура окна.

Структура интересующей нас части окна.

Итак, перед нами:

1 - Загривок. Так мы будем называть всю верхнюю часть окна.

2 - Заголовок. Название приложения, окна. Без иконки.

3 - Иконка. Собственно, виновница торжества.

4 - Основные кнопки работы с окном. Стандартные развернуть, свернуть и закрыть.

5 - Кнопка сворачивания в полосу и 6 - кнопка меню. Необязательные кнопки, присутствующие в некоторых темах оформления.

В статье мы будем касаться только первых трех элементов, остальные даны для общей наглядности.

Алгоритм работы.

  1. Для начала найдем xml  файл интересующей нас темы. Он может быть в двух местах:
    ~\Themes\<Имя_темы>\metacity-1\metacity-theme.xml или
    \Usr\Share\Themes\<Имя_темы>\metacity-1\metacity-theme.xml. В первом случае - тема располагается в домашнем каталоге пользователя, во втором - в общем каталоге системы (обязательно загляните в Пример №1). Открываем файл для редактирования (для надежности, можно создать резервную копию исходного файла).
  2. Теперь необходимо найти все(!) моменты отрисовки заголовка (названия приложения), т.к. иконка приложения располагается непосредственно перед ним (или после - в зависимости от предпочтений, мы разберем стандартные варианты с иконкой, находящейся слева от заголовка и в самом начале загривка). За отрисовку заголовка отвечает тег <title>.
    Помните, что необходимо найти ВСЕ теги <title>, обычно, в зависимости от состояния окна (см. полянку ссылок под номером 1) применяется несколько вариантов отрисовки элементов, в т.ч. и заголовка. Если иконка приложения нужна вам всегда (в активном и не активном окне и т.д.) - её отрисовку также нужно прописать во всех состояниях.
  3. Формируем содержимое <icon>. Разберем как минимум два варианта + рассмотрим универсальную формулу.
    1. Первый, нарисует иконку с левого края заголовка окна, который располагается по середине:
      Иконка слева от заголовка
      <icon x=»((width-title_width)/2)-mini_icon_width» y=»(height / 2) — ( mini_icon_width / 2)» width=»mini_icon_width» height=»mini_icon_height»/>
      Поясним. Координата  X (положение по горизонтали) вычисляется по формуле: ((ширина окна МИНУС ширина текста заголовка) РАЗДЕЛИТЬ на 2) МИНУС ширина иконки. Тем самым, мы сперва находим координату начала текста заголовка, т.е., его X (при условии, что он находится по середине), затем отнимаем ширину иконки, дабы вписать её рядом (слева). С координатой Y еще проще, тут просто вычисляется середина загривка окна по вертикале и отнимается половина высоты иконки, чтобы та вошла и оказалась ровно по центру (относительно вертикали). С шириной и высотой иконки всё еще понятней: она просто берётся из уже имеющихся констант, содержащих ширину и высоту мини-иконки (именно она по традиции используется в загривке окна).
    2. Второй вариант отобразит иконку в левом углу загривка:
      Иконка в левом углу загривка
      <icon x=»1″ y=»(height / 2) — ( mini_icon_width / 2)» width=»mini_icon_width» height=»mini_icon_height»/>
      Как видно, здесь поменялась только координата X - теперь она указывает значение один, что обозначает практически самый левый угол загривка. Все остальные значения менять нет необходимости.
    3. Универсальный вариант. Любое положение иконки всегда можно задать относительно заголовка. Достаточно взять координату X у <title>  и подставить его в первую часть формулы для <icon>. А именно в часть до отнимания mini_icon_width. Вот так: (X у <title>)-mini_icon_width. В таком случае, вы всегда получите иконку, находящуюся ровно слева от текста заголовка.
  4. Добавляем составленный <icon> рядом с <title>. Сохраняем изменение. Затем, выбираем в темах оформлениях любую другую тему рамки окон (metacity) и вновь выбираем только что отредактированную. Если же текущей тема была тема, отличная от редактируемой - можно сразу выбрать её: переключение необходимо лишь для подгрузки изменений в случае, если редактируемая тема использовалась.
    1. Иногда, бывает недостаточно просто добавить <icon> рядом с <title>. Есть несколько тем, которые отрисовывают загривок особым образом. Например, используя какие-либо текстуры (изображения). В таком случае отображение иконки в них может быть непредусмотрено. Но выход есть: нужно найти отрисовку этих злополучных текстур и вставить <icon> после них, чтобы тот рисовался поверх. См. пример № 2 для детального разбора данного случая.
  5. Проверяем результат. Необходимо проверить все состояния окон и убедиться, что всё получилось, как было задумано и всё всегда корректно отрисовывается.

Примеры.

Пример №1. Обычная тема.

Рис. 1.1. Первоначальный вид темы MintX

Для разбора обычного варианта возьмем тему Linux Mint под одноименными названием Mint-X. Данная тема у меня находится в системной папке /usr/share/theme/MintX. Обратите внимание, в некоторых темах содержится несколько файлов metacity-theme.xml. Отличаются они лишь конечными числами. Тема будет использовать самый последний по номеру, игнорируя все предыдущие. В моем случае, последним оказался файл metacity-theme-3.xml.

Редактирование темы MintX. Первая группа тегов.

Редактирование темы MintX. Вторая группа тегов.

Открываем его в встроенном редакторе MC. Находим элемент <title>. Здесь видно, что титлов в данной теме несколько, используется это для "красивости" отрисовки. Находим окончание первой группы\функции отрисовки титлов (найти его можно по закрывающемуся тегу </draw_ops>). Вписываем после первой группы <title> элемент <icon>, используя универсальную формулу (Шаг 3.C у алгоритма выше) для подсчета координаты X . После этого не забываем про еще одну группу тегов <title>, которые отрабатывают, когда окно не в фокусе. Добавляем им в конец точно такой же тег <icon>, как и ранее. Сохраняем результирующий файл. Тема готова.

Преобразование темы MintX.

Пример №2. Тема с текстурными вставками, перекрывающими иконку.

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

Если мы попробуем найти тег <title> то увидим, что рядом нет <icon>.

Здесь вставлять <icon> было бы бесполезно.

Находим, где используется функция рисования draw_title_text_normal и draw_title_text_inactive. Видим, что после него идет прорисовка title_bar, которая и перекроет иконку в предыдущей функции.

Находим, что именно перекрывает нашу иконку.

Сама же иконка находится в функциях button_menu_*, которые на предыдущем рисунке выше идут в самом конце.

Место прорисовки иконо в теме Hello.

Тема же выглядит вот так:

Тема Hello.

Полянка ссылок.

  1. О темах Metacity на Opennet.ru. Основа для моей статьи.
  2. Архив с темами, рассмотренными в примерах.
Метки: , , , , , . Закладка Постоянная ссылка.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *