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

Книги по 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, так как в этом случае он более реалистичен, при любом масштабировании. Обои состоят из семи картинок. Пример редактирования файла:

/*** DEFAULT WALLPAPER ***/
  images {
   image: "pclos-logo.png" COMP;
   image: "pclos-logo-effect.png" COMP;
   image: "pclos-effect.png" COMP;
   image: "topleft.png" COMP;
   image: "topright.png" COMP;
   image: "bottomleft.png" COMP;
   image: "bottomright.png" COMP;
  }
  group { name:
   "e/desktop/background";
  data { item: "style" "2";
   }
  parts {
   part {
    name: "base";
    type: RECT;
    description {
    state: "default" 0.0;
    min: 800 600;
    color: 0 0 0 255;
      }
     }
   part {
    name: "effect";
    description {
    state: "default" 0.0;
    min: 230 800;
    max: 230 800;
    align: 0.5 0.0;
    rel1 {
     to: "cause";
     offset: -40 179;
    }
    rel2 {
     to: "cause";
     offset: 0 140;
    }
    image {
    normal: "pclos-logo-effect.png";
      }
    }
   }
   part {
    name: "cause";
    description {
    state: "default" 0.0;
    min: 400 400;
    max: 400 400;
    image {
    normal: "pclos-logo.png";
     }
    }
   }
   part {
    name: "baseeffect";
    description {
    state: "default" 0.0;
    min: 1680 1050;
    normal: "pclos-effect.png";
     }
    }
   }
   part {
    name: "topleft";
    description {
    state: "default" 0.0;
    max: 150 150;
    align: 0.0 0.0;
    rel1 {
     relative: 0.0 0.0;
     offset: 0 -1;
    }
    rel2 {
     relative: 1.0 1.0;
     offset: 0 -1;
    }
    image {
    normal: "topleft.png";
     }
    }
   }
   part {
    name: "topright";
    description: {
    state: "default" 0.0;
    max: 150 150;
    align: 1.0 0.0;
    rel1 {
     relative: 0.0 0.0;
     offset: -0 -1;
    }
    rel2 {
     relative: 1.0 1.0;
     offset: -0 -1;
    }
    image {
    normal: "topright.png";
     }
    }
   }
   part {
    name: "bottomright";
    description: {
    state: "default" 0.0;
    max: 150 150;
    align: 1.0 1.0;
    rel1 {
     relative: 0.0 0.0;
     offset: -0 0;
    }
    rel2 {
     relative: 1.0 1.0;
     offset: -0 0;
    }
    image {
    normal: "bottomright.png";
     }
    }
   }
  }
 }

Если мы хотим использовать в качестве обоев обычный формат файла (например, .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

Для прорисовки вкладок применяются графические файлы 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 и редактируем его:

/*** MOD: CALENDAR ***/

images
 {
  image: "e17_calendar.png" COMP;
 }

fonts
 {
  font: "VearMono.ttf" "VeraMono";
  font: "VearBd.ttf" "VearBold";
 }

group
 {
  name: "modules/calendar/main";
  parts
   {
   part
   {
    name: "calendar";
    description
   {
    state: "default" 0.0;
    aspect: 1.0 1.0;
    aspect_preference: BOTH;
    rel1 { relative: 0.0 0.0; }
    rel2 { relative: 1.0 1.0; }
    image { normal: "e17_calendar.png"; }
   }
  }
   part
   {
    name: "monthday";
    type: TEXT;
    mouse_events: 0;
    description
    {
     state: "default" 0.0;
     rel1
     {
      relative: 0.1 0.2;
      offset: 0 0;
      to: "calendar";
     }
     rel2
     {
      relative: 1.0 0.7;
      offset: -1 -1;
      to: "calendar";
     }
    color: 46 52 54 255;
    color_class: "module_label";
    text
    {
     text: "??";
     font: "VeraBold";
     size: 13;
     min: 1 1;
     fit: 1 1;
     text_class: "module_large";
    }
   }
  }
  part
  {
   name: "weekday";
   type: TEXT;
   mouse_events: 0;
   description
   {
    state: "default" 0.0;
    rel1
    {
     relative: 0.4 0.7;
     offset: 0.0;
     to: "calendar";
    }
    rel2
    {
     relative: 0.7 0.9;
     offset: -1 -1;
     to: "calendar";
    }
   color: 46 52 54 255;
   color_class: "module_label";
   text
   {
    text: "??";
    font: "VeraMono";
    sixe: 9;
    min: 1 1;
    fit: 1 1;
    text_class: "module_large";
   }
  }
 }

}
}

Как часть необходимой настройки нашей темы, мы должны добавить графический файл 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

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

Для курсора мыши имеется набор графических файлов, с помощью которых осуществляется отрисовка самого указателя и эффектов к нему, что делает работу с ним очень приятной и красивой для глаз (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.