23 мая 2010 г.

Howto по созданию кнопки для GnoMenu

Для GnoMenu можно создавать темы самостоятельно. Как это делать, несложно понять, изучив файлы в папке /usr/share/gnomenu/Themes/, а также сверяясь со спецификацией, любезно предоставленной разработчиками (формат pdf).
Пока я освоила на практике создание кнопки запуска. Пожалуй, это самое простое. Насколько можно показать, результат - на скриншоте.
gnomenu tux button process
В качестве кнопки - тукс, при наведении курсора он становится более ярким (с оранжевыми лапками), а при нажатии кнопки - монохромным. Конечно, хотелось бы более интересных вариантов - хотя бы каких-нибудь эффектов свечения и утопленности кнопки, но я поняла, что для этого мне придётся надолго засесть за освоение GIMP. Впрочем, можно считать этого тукса пока версией 1.0, а 2.0 возможно и будет круче.

Итак, для меню нужно подготовить все картинки.
Можно использовать любую приглянувшуюся картинку подходящих размеров, либо создать её самостоятельно. Я взяла иконку tux из темы иконок oxygen (лицензия GPL позволяет) - если тема установлена в системе, то она должна найтись по адресу: /usr/share/icons/default.kde4/48x48/apps/tux.png (другие размеры в соответствующих папках).
Затем необходимо создать варианты исходной картинки для нажатой кнопки и для кнопки, на которую наведён курсор. Выше написано, какие эффекты я использовала - они очень простые и сделать такое можно даже простейшим редактором (я пользовалась gthumb). Если кнопка по высоте не будет превышать высоту панели, то трёх этих файлов достаточно.
Но если картинка больше панели, то каждую из трёх иконок нужно разрезать на две части - первую побольше - для части кнопки, которая будет непосредственно на панели (я сделала её высотой 32 пиксела), а вторая меньше - для выступающей за пределы панели части кнопки (от 48 пикселов осталось 16).
Итак, должно получиться 6 графических файлов - 3 для разных состояний части кнопки на панели и 3 для тех же состояний но для части над панелью (либо только 3 файла, если кнопка не выше панели). Плюс нужна ещё картинка для "предпросмотра" в окне настройки gnomenu - она может быть копией исходной иконки, но с другим именем, а может и отличаться. Все эти файлы видны на скриншоте в окне файлового браузера. Естественно, при работе с другим рисунком, размеры и эффекты могут быть другие, но вот назвать картинки лучше так же, потому что тогда конфигурационный файл можно будет просто скопировать, поменяв в нём самый минимум.
Итак, имена файлов:
start-here.png - часть кнопки на панели, основной вид
start-here-depressed.png - часть кнопки на панели, нажатая
start-here-glow.png - часть кнопки на панели, на которую наведён курсор
start-here-top.png - "шапка" кнопки основного вида
start-here-top-depressed.png - "шапка" нажатой кнопки
start-here-top-glow.png - "шапка" кнопки, на которую наведён курсор
themepreview.png - картинка для "превьюшки" в меню настроек программы

И если все картинки готовы, нужно создать и поместить в папку с ними ещё один файл - конфигруационный, без которого программа просто не будет знать, как использовать картинки. Файл должен называться themedata.xml и создать его можно в простом текстовом редакторе. На самом деле проще просто скопировать, изменив несколько слов, особенно если имена файлов были взяты те же (ну а в противном случае, придётся поменять их на нужные в тексте файла).

<?xml version="1.0" ?>
<content type="Button">
<ContentData Name="Tux" Author="Opossum" Copyright="GPL" id="Contentdata"/>
<theme Top="1" id="HasTop">
<Background Image="start-here.png" ImagePressed="start-here-depressed.png" ImageHover="start-here-glow.png"/>
<Top Image="start-here-top.png" ImagePressed="start-here-top-depressed.png" ImageHover="start-here-top-glow.png"/>
</theme>
</content>
Теперь значение элементов, согласно спецификации (красным цветом выделены те функции, значения которых нужно поменять):
  • первая строка указывает на версию xml - это можно просто скопировать
  • content type - может принимать значения Button, Menu, Icon, Sound, в зависимости от того, конфигурацию какого элемента описывает файл; в данном случае это конфигурация кнопки меню, поэтому использоваться может только "Button".
  • ContentData содержит функции:
    Name - название темы
    Author - имя или ник создателя темы
    Copyright - авторство или просто лицензия GPL, если тема распространяется под ней
    id - идентификатор (можно оставить как есть)
  • theme:
    Top - определяет, использует ли данная тема "шапку", соответственно принимает значения 1 - если использует или 0 - если не использует
    id - имеет значение "HasTop" (это можно оставить)
  • Background - тут перечисляются основные картинки для кнопки (той её части, что находится на самой панели):
    Image - картинка для основного вида, значение по-умолчанию - start_here.png (такое имя должен иметь соответствующий файл, если имя у него другое, то и тут его нужно будет поменять - это же относится ко всем последующим именам файлов картинок; дефолтные значения есть в примере конфига и в списке выше)
    ImagePressed - картинка для нажатой кнопки
    ImageHover - картинка для кнопки, на которую наведён курсор
  • Top - определяет файлы для "шапки" кнопки (если "шапки" у кнопки нет, то всю строчку можно и даже нужно удалить):
    Image - шапка обычной кнопки
    ImagePressed - шапка нажатой кнопки
    ImageHover - шапка кнопки, на которую наведён курсор
  • Label - в данной теме не используется, поэтому чисто теория: вообще эта строчка нужна для тех тем, где на кнопке имеется надпись (Start, Menu или что-то в этом роде, например)
    Name - имя кнопки, например "Start" (должно соответствовать тексту в следующей функции; но на самом деле будет работать и без этого соответствия, но если, например прописано слово "Start", то при соответствии оно будет переведено на текущий язык интерфейса, в противном случае оно останется точно таким же как указано строчкой ниже)
    MarkupNormal - текст на кнопке, описанный с помощью языка разметки pango (в общем случае должно хватить примера, для более подробного руководства лучше потормошить google)
    LabelX - положение текста по оси X (по горизонтали - от левого края рабочего стола до первой буквы надписи)
    LabelY - положение текста по оси Y (по вертикали - от верхней линии на кнопке (воображаемой, находится примерно на расстоянии в одну четверть высоты панели от её верхнего края) до верхней границы текста)
Пример для раздела Label (размещать его нужно перед закрывающим тегом </theme>):
<Label Name="Start" MarkupNormal="&lt;span foreground='#FFFFFF' font_desc='sans 12' stretch='normal' style='italic' weight='bold'&gt;Start&lt;/span&gt;" LabelX="34" LabelY="2"/>

Итак в папке должно оказаться 8 файлов с определёнными именами - 7 графических и один xml (в более простом случае файлов будет 5). Теперь папку нужно назвать тем же именем, что названа тема кнопки и заархивировать её (именно папку, а не файлы, находящиеся в ней - чтобы при просмотре архива видеть сначала папку). Предпочтителен формат tar.gz (хотя tar.bz2 тоже работает, а с остальными не пробовала). Такой архив можно устанавливать прямо из настроек gnomenu. Хотя можно просто разместить получившуюся папку по адресу /usr/share/gnomenu/Themes/Button, но если созданная тема будет как-то распространяться, то лучше правильно запаковать.
На этом всё. Пожалуй howto получилось более чем подробное для того, чтоб создать любую новую тему.

Нужно ещё отметить, что подобного вида кнопка хорошо будет смотреться только на панели, размещённой внизу рабочего стола, а если панель переместить наверх, то картинка перевернётся вверх ногами (в данном случае "вверх ногами" буквально). Поэтому если нужна кнопка в виде тукса на панели сверху, то придётся создавать новую тему, где в качестве "шапки" будут фигурировать отрезанные ноги тукса и тогда при переворачивании картинки, он должен будет "перевернуться" головой вверх.
Данную тему я рискнула выложить на gnome-look.org. Критика приветствуются, а также, потому как лицензия свободная, любой может переделать тему по своему вкусу.

6 комментариев:

  1. Добавил Вас в свой гуглоридер, например.

    ОтветитьУдалить
  2. прочел пару постов и тоже добавил в тоже место =)

    ОтветитьУдалить
  3. Ещё бы узнать как темы для меню делать... А то набросок сделал, а как сделать из него меню не знаю.

    ОтветитьУдалить
  4. В начале поста же есть ссылка на спецификацию - там для всех элементов подробно.

    ОтветитьУдалить