Наши партнеры








Книги по Linux (с отзывами читателей)

Библиотека сайта rus-linux.net

Создаем свою собственную тему для e17

Оригинал: e17: Create Your Own Custom e17 Themes
Автор: Agustin J. Verdegal T (Agust)
Дата публикации: май 2011 г.
Перевод: В. Семененко
Дата перевода: сентябрь 2011 г.


В этой статье я попытаюсь объяснить вам простой способ создания собственной темы для e17. Пример, который будет использоваться в качестве показательного, основывается на моей теме под названием "The Night".

Часть первая

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

Для того, чтобы открыть редактируемую тему, в терминале выполните команду:

edje_decc (filename.edj)

Конечно, все зависит от личных предпочтений, но для себя всю работу над темой я разбил на три этапа:

  • создание обоев темы в формате .edj
  • создание графических объектов для темы в формате .png
  • редактирование самого файла темы .edc

Теперь приступим. Открываем тему, находим файл default.edc и редактируем его, чтобы применить к нему созданные нами собственные обои.

Графический файл обоев я сохранил в формате .edj, так как в этом случае он более реалистичен, при любом масштабировании. Обои состоят из семи картинок. Пример редактирования файла:

Если мы хотим использовать в качестве обоев обычный формат файла (например, .png) вместо формата .edj, то нам нужно отредактировать файл .edc следующим образом:

Если у вас есть желание использовать те обои, которые мы только что сделали, вы можете смело их выбрать. В нашем примере они созданы c масштабированием 1680х1050. Переименуйте файл в grill_dark_tiny_pattern.png и сохраните в папку, в которой мы создаем тему. Таким образом мы создадим обои для нашей темы.

Часть вторая

Как видно на скриншоте, все графические файлы, созданные нами, имеют формат .png. Я попробую объяснить назначение наиболее важных из них.

Директория, содержащая графические файлы для темы

Директория, содержащая графические файлы для темы

Первые три файла - about_bot.png, about_mid.png, about_top.png. Эти три картинки создают нижнюю часть окна "О теме", доступного в меню Enlightenment - About. Стрелки панели Arrows создаются графическими элементами (arrow_down.png, arrow_left.png, arrow_right.png, arrow_up.png), которые отображают наши перемещения по файловой системе вверх, вниз, вправо или влево.

Следующие файлы (bat_content.png, bat_content1b.png, ... bat_shadow.png) принадлежат иконке, обозначающей состояние батареи компьютера. Они служат для отображения ее различных состояний.

Теперь наступила очередь самой важной части нашего примера - это файл base_bg.png. Он используется для отрисовки Главного меню. Как видим, картинка имеет очень темный цвет. Но это не является недостатком. Наоборот, в дальнейшем мы можем изменить цвет надписей Меню на светлый или же вообще белый. Тогда они будут контрастировать с черным цветом и хорошо смотреться в общем плане. Давайте откроем файл default.edc и изменим цвет надписей Главного меню следующим образом:

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

Применение цвета для надписей Главного меню

Применение цвета для надписей главного меню

Декорация окон

Файл bd_bottom.png отрисовывает нижнюю часть окна, а файл bd_top.png - его верхнюю часть. Файл bd_title_bg.png используется для создания границ открытого окна, когда оно активно. К нему я применил эффект transparent glass (смотрите скриншот):

Отрисовка края открытого окна

Отрисовка края открытого окна

Файл bd_bottom используется также, когда окно минимизируется или максимально раскрывается.

На скриншоте (ниже) видны иконки (bluetooth-hidden.png, bluetooth-inactive.png, bluetooth-powered.png), используемые для обозначения значка bluetooth в системе. Файл bnw.png используется для отображения информации о самой теме, ее разработчиках и т. п.

Значки для отображения иконки bluetooth

Значки для отображения иконки bluetooth

Для прорисовки вкладок применяются графические файлы bt_base1.png, bt_base2.png, bt_dis-base.png и т. д. Файл bt_base1.png - это картинка, используемая темой, когда мы нажмем на кнопку. Файлик bt_sm_base2.png применяется, когда выбрана и используется полоса прокрутки.

Ниже представлен образец нашей работы (вкладки):

Пример нашей работы

Пример нашей работы - вкладки

Часть третья

Одним из важнейших компонентов, с помощью которых создается тема, является скрипт build.sh. Он представляет из себя всего две строки:

Этот скрипт используется для компиляции темы (в нашем случае это файл A-Noche.edj), которую мы только что создали. Наша тема состоит из десяти графических файлов и рабочих окон (смотрите скриншот ниже):

Графические файлы, составляющие нашу тему

Графические файлы, составляющие нашу тему и скрипт build.sh

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

Графические файлы часов Часы

Графические файлы, составляющие тему часов и сами часы

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

Например, рассмотрим такую часть темы, как Календарь. Я добавил его в свою тему и отредактировал файл default.edc таким образом, чтобы можно было применить его в ней. Для выполнения такой настройки нужно выполнить следующее.

Отредактируем файл default.edc и редактируем его:

Как часть необходимой настройки нашей темы, мы должны добавить графический файл e17_calendar.png и указать источник шрифтов VeraBd.ttf & VeraMono.ttf. Теперь мы получили наш Календарь.

Теперь давайте рассмотрим графические файлы, используемые в теме для отрисовки входа в систему (окно входа в систему login manager). Для этого окна применяются следующие картинки: exq-bglight.png, exq-dot-glow.png, exq-dot.png, exq-logo.png. Также обратите внимание на файл grill_dark_tiny_pattern.png. Как уже упоминалось ранее, этот файлик обычно используется в качестве обоев по умолчанию для темы. Но, так как наша тема имеет свои собственные обои, то мы не применяем этот файл никаким образом.

Обои по умолчанию для темы

Обои по умолчанию grill_dark_tiny_pattern.png для нашей темы

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

Иконки темы

Системные иконки темы

Теперь давайте рассмотрим картинки, отображающие логотип темы. А также подсветку пунктов, выбранных в Главном меню.
Файлом, используемым в качестве логотипа темы по умолчанию является logo_white_128.png. Когда мы выбираем пункт в Меню, первым пунктом открываемого подменю будет картинка logo_black_128.png. Визуально это будет выглядеть следующим образом:

Открытое подменю главного меню темы

Открытое подменю Главного меню темы

Часть четвертая

В этом окне мы видим иконки, которые используются для отрисовки значка контроля громкости звука в системе (mixer.png, mixer_high_left.png, mixer_high_right.png и т. д.). Также видны значки для гаждета pager (pager_base1.png, pager_base2.png, pager_base_pattern.png). Они имеют прозрачный цвет с ободком темного цвета (pager_hi1.png, pager_hi2.png):

Иконки для значка регулировки громкости звука и гаджета pager

Иконки для значка регулировки громкости звука и гаджета pager

Продолжим рассмотрение эффектов перехода в теме.

Для курсора мыши имеется набор графических файлов, с помощью которых осуществляется отрисовка самого указателя и эффектов к нему, что делает работу с ним очень приятной и красивой для глаз (pointer.png, pointer_glint_01.png, pointer_glint_01.png).

Значок электропитания относится к съемной батарее компьютера. Если такая имеется в наличии, то иконка отображает степень ее заряда. Когда батарея полностью заряжена, значок пропадает.

Значки для отрисовки курсора мыши

Значки для отрисовки курсора мыши

Давайте взглянем на цвет панели, используемой в нашей теме. Обратите внимание, что предустановленный цвет для нее имеет тоже значение, что и для главного меню нашей темы. В среде e17 имеется опция для изменения цвета панели на более прозрачный (именно то, что использовал я). В нашем примере я установил черный цвет в качестве опции для панели.

Смотрим дальше. Вы видите на скриншоте картинки для отображения ползунка и отрисовки того момента, когда мы нажимаем на мышью на этот ползунок. Я добавил эффект осветления к нему, поэтому, когда мы будем использовать слайдер, он будет изменять свой цвет на более светлый. Иконки tacho_bg и tacho_dial_xx принадлежат модулю отображения частоты работы процессора Cpufreq.

Отображение модуля частоты процессора

Файлы для отображение модуля частоты процессора

В заключение, видим еще несколько иконок для отображения значка температуры компьютера. Графический файл vgrad применяется в теме для модуля everything. Обратите внимание, что для этого файлика используются те же шрифты ttf, которые используются и в Календаре.

Отображение температуры компьютера

Отображение температуры компьютера

Когда наша тема будет готова, нам осталось ее скомпилировать. Если вы будете использовать ее в качестве основой, то процесс компиляции выполняется очень просто - двойной щелчок для запуска скрипта build.sh.

Если процесс прошел без осложнений, то будет создан готовый файл темы с расширением .edj. В нашем случае, таким файлом будет A-Noche.edj. Помните, что если процесс компиляции темы завершился с ошибкой, то причина ее заключается в содержимом самой темы.

Существуют некоторые темы для e17, которые используют функцию enlightenment_remote. Для таких тем процесс компиляции выглядит несколько по иному. Откройте терминал и введите в нем следующие команды:

P.S.

Хочу выразить благодарность всем тем людям, которые потратили свое личное время для того, чтобы научить меня всему тому, что я знаю.

Это:

  • Toma (Tom Haste), член команды разработчиков Enlightenment
  • Rui Pais, член команды разработчиков Enlightenment и руководитель OzOs
  • Aubrey, дизайнер OzOs
  • Luca di Marini (Darkmaster), дизайнер и руководитель OPen GEU
  • Roxville Prince AMD (команда разработчиков), на основе работ которой базируется большая часть моих трудов.

Я также выражаю благодарность главному редактору журнала PCLinuxOS Magazin Parnote, который проявил интерес и оказал мне помощь в написании этой статьи. Надеюсь, что данный материал послужит ему в качестве не только справочного материала при создании тем, но и как пособие в понимании операций, выполняемых в среде e17. Эта статья также посвящается Textar; и, особенно, Smurfslover в благодарность за большую работу и заинтересованность, которую он проявил при работе со мной в среде Enlightenment.

Примечание редактора: выражаю благодарность Agust за то, что он опубликовал данное руководство по созданию тем под e17. Особую благодарность я хотел бы выразить моей крестной матери, Lupe Warnock, за перевод введения и самой статьи с испанского на английский для журнала The PCLinuxOS Magazine.


Другие статьи серии переводов о рабочем столе E17.