Скины Mumble (Шкурки). Создание, изменение и использование.

мануалы
Ответить
B0nuse
Site Admin
Сообщения: 1588
Зарегистрирован: 27 июл 2009, 08:58
Благодарил (а): 40 раз
Поблагодарили: 363 раза
Контактная информация:

Скины Mumble (Шкурки). Создание, изменение и использование.

Сообщение B0nuse »

Введение

Вид Mumble может быть настроен при использовании так называемых Qt (http://ru.wikipedia.org/wiki/Qt) таблиц стилей (кратко QSS). Они сильно похожи на широко применяемые каскадные таблицы стилей (CSS), используемые в web разработке. Если у Вас есть хоть какой-нибудь опыт работы с ними (CSS), Вы легко сможете создавать скины для Mumble.
Ничего страшного, если у Вас нет опыта работы с CSS. Мы попытаемся объяснить основные аспекты создания скинов в этой статье.
Для лучшего понимания, во всем гиде мы будем использовать один скин, который имеет название Chocolate.
Уверяем Вас, создание скина для Mumble – задача не сложная, но требующая определенного времени и терпения.
Начнем с объяснения точного расположения скина Mumble.
Во-первых, чтобы использовать скин, у Вас должна быть папка для скинов в Program Files\Mumble. В папке скинов, нужно будет создать другую папку. Название этой папки будет названием Вашего скина.
Например, если бы Вы хотели создать скин под названием "Chocolate", тогда у Вас была бы следующая структура папок:

Код: Выделить всё

C:\Program Files\Mumble\skins\Chocolate
А это то, что лежало бы в папке Chocolate:
emblems/emblem-favorite.svg *
categories/applications-internet.svg *
places/network-workgroup.svg *
Chocolate.qss
authenticated.svg
channel.svg
channel_active.svg
channel_linked.svg
comment.svg
comment_seen.svg
config_asio.png
config_basic.png
config_dsound.png
config_lcd.png
config_msgs.png
config_network.png
config_osd.png
config_plugin.png
config_shortcuts.png
config_ui.png
deafened_self.svg
deafened_server.svg
layout_classic.svg
layout_custom.svg
layout_hybrid.svg
layout_stacked.svg
mumble.osx.png
mumble.svg
muted_local.svg
muted_self.svg
muted_server.svg
muted_suppressed.svg
rec.svg
talking_alt.svg
talking_off.svg
talking_on.svg
talking_whisper.svg
Если Вы хотите посмотреть любое из этих изображений, Вы можете найти их здесь (https://github.com/mumble-voip/mumble/tree/master/icons).

Все, что представляет собой скин - это один файл, который содержит кодирующие элементы скина (Chocolate.qss) - код, который определяет цвет фона, шрифтов, и т.д. - и изображения, использующиеся в Mumble.

Любое из вышеперечисленных изображений подключается простым размещением их в Program Files\Mumble\skins\Chocolate или в правильно указанный подкаталог.
Вот пример изображений, которые могут быть использованы в QSS:
arrow_down.png
arrow_left.png
arrow_right.png arrow_*.png dimensions: 7x7
arrow_up.png
branch.png
branch_closed.png
branch_end.png branch_*.png dimensions: 10x18
branch_more.png
branch_open.png
checkbox_0.png
checkbox_0_d.png
checkbox_0_hover.png
checkbox_0_hover_d.png
checkbox_0_pressed.png
checkbox_1.png checkbox_*.png dimensions: 13x13
checkbox_1_d.png
checkbox_1_hover.png
checkbox_1_hover_d.png
checkbox_1_pressed.png
radiobutton_0.png
radiobutton_0_hover.png
radiobutton_0_pressed.png
radiobutton_1.png radiobutton_*.png dimensions: 13x13
radiobutton_1_hover.png
radiobutton_1_pressed.png
Для этих изображений Вы должны использовать формат PNG вместо SVG.

Определения и Использование SVG

"SVG (от англ. Scalable Vector Graphics — масштабируемая векторная графика) — язык разметки масштабируемой векторной графики, созданный Консорциумом Всемирной паутины (W3C) и входящий в подмножество расширяемого языка разметки XML, предназначен для описания двумерной векторной и смешанной векторно/растровой графики в формате XML. Поддерживает как неподвижную, так анимированную и интерактивную графику — или, в иных терминах, декларативную и скриптовую. " (взято с Wikipedia http://ru.wikipedia.org/wiki/SVG).

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

Чтобы создавать файлы SVG, Вам необходима программа по созданию SVG файлов.

Inkscape (http://www.inkscape.org/), вероятно, одна из лучших программ такого рода.
Единственная проблема, похоже, может состоять только в том, что большинству людей чуждо создание SVG файлов. Уверяем, создание SVG файлов в Inkscape – процесс не сложный. И у Вас не должно возникнуть лишних проблем с этим. Помните, что в SVG, нет единиц измерений. Все масштабируемо.
Вам необходимо использовать формат svgtiny для своего файла SVG. Если Вы используете Inkscape, сохраняйте его как "Plain SVG".

Преобразование PNG в SVG

Изменение формата PNG изображений может изменить их размер.
Итак, переходим к преобразованию файлов PNG -> SVG:
  1. Запускаем Inkscape.
  2. Открываем нужный файл .png
  3. Переходим в: Effects -> Images -> Embed All Images...
  4. Жмем OK
  5. Сохраняем: Save image as "Plain SVG".
  6. И используем получившийся SVG файл в своем стиле.
Создание Mumble скина

Вот превосходный гид (http://doc.trolltech.com/qq/qq20-qss.html), который объяснит структуру Qt скинов и как узнать название определенного параметра или элемента класса.

QSS файлы

Qt таблицы стилей состоят в основном из синтаксиса, применяемого в каскадных таблицах стилей (CSS), используемых в web разработке. Вам будет проще, если у Вас есть опыт работы с CSS.
В Configure -> Settings -> User Interface -> Skin Вы можете указать QSS файл, который будет использоваться. Этот файл содержит все кодовые элементы стиля.

Базовая структура файла QSS включает в себя:

Код: Выделить всё

/* this is a comment */
QTreeView {
  background-color: white;
  color: black;
}
QTextBrowser {
  background-color: #CCCCFF; /* 3 digit hex colors also acceptable: #CCF */
}
QMenuBar {
  /* place more stuff here */
}
QMenu {
  /* place more stuff here */
}
Вы можете использовать background-color(фоновые цвета) и color(цвета) как в CSS.
  • QTreeView относится к области канала/пользователя Mumble.
  • QTextBrowser относится к области напечатанных сообщений.
  • QMenuBar и QMenu относятся к главному меню.
Отметим, что в простых цветах Вы можете использовать сокращенный цветовой код. Например, чтобы воспользоваться белым цветом вместо #FFFFFF Вы можете использовать #FFF.
Для более сложного изменения внешнего вида Mumble в Вашем файле QSS должно быть описано много главных элементов, таких как полос прокрутки, чекбоксы, кнопки и текст. Для этого рекомендуем Вам обратиться к документации Qt по таблицам стилей (http://doc.trolltech.com/stylesheet.html). Чтобы изменить вид специфичной части Mumble, ознакомьтесь с его Qt структурой (http://wiki.mumble.info/wiki/Qt_Structure).

Вот небольшая часть QSS, которая используется почти во всех скинах для Mumble. Это может помочь Вам в Ваших начинаниях по созданию скинов.

Код: Выделить всё

QHeaderView::section {
 background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #fff, stop:1 #333);
 color: #333;
 border: 1px solid #333;
 border-color: #fff #333 #333 #fff;
 height: 1.54em;
}
QMainWindow#MainWindow * {
    background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #fff, stop:1 #333);
}
QMainWindow#MainWindow{
    background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #fff, stop:1 #333);
border: 0;
}
QMenuBar {
 background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #fff, stop:1 #333);
 color: #333;
 font-weight: bold;
 border: 1px solid transparent;
 border-bottom-color: #333;
}
QMenuBar::item {
 background: transparent;
 color: #333;
 border: 0;
}
Поиск Классов и Названий

Самая тяжелая часть в создании скина - это поиск названия того, что должно быть изменено. К счастью, есть довольно легкий способ сделать это.
Во-первых, Вы должны скачать zip-архив с источника Mumble (https://github.com/mumble-voip/mumble/a ... master.zip). Извлеките из него файлы, затем перейдите в *\mumble\src\mumble.

Затем установите Qt Creator (http://qt-project.org/downloads). Теперь можете открыть с помощью Qt Designer необходимые *.ui файлы (находятся в папке *\mumble\src\mumble), которые относятся к любой части Mumble.

Например, если Вы хотите изменить стиль главного окна, то нужно открыть файл MainWindow.ui. Если файлы этого типа не открывается автоматически в Qt Designer, то нужно правой кнопкой мышки щелкнуть по .ui файлу, выбирать «открыть с помощью», щелкнуть по кнопке «Обзор» и перейти к

Код: Выделить всё

C:\Qt\2009.05\qt\bin\designer.exe
Теперь Вы можете получить общее представление о том, какие классы и названия используются в создании скина. Например, в верхнем правом углу можно увидеть древовидную структуру Qt. В ней видно, что все окна Mumble сгруппированы в класс "QMainWindow" и что название окна Mumble - "MainWindow". Поэтому, если бы Вы хотели изменить внешний вид всего этого, то Вы должны использовать следующий QSS:

Код: Выделить всё

QMainWindow * {
    background-color: #000;
}
Кроме того, Вы можете нажать на компонент окна, которое Вы открываете в Qt Designer и он должен выделить имя класса в левом верхнем углу.
Например, откройте ConfigDialog.ui. Щелкните на вертикальном белом поле слева. В верхнем левом углу Qt Designer Вы должны увидеть на первом плане "qlwIcons QListWiget". Благодаря этому, Вы поймете, что можете изменить вид этого поля, используя описание класса:

Код: Выделить всё

QListWidget#qlwIcons {
attribute: value;
}
Затем Вы можете указать параметры этого класса. Например:

Код: Выделить всё

QListWidget#qlwIcons::item {
background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #fff, stop:1 #333);
}
В данном случае есть пункты скина, которые вложены в этот раздел. Например, такие пункты как: "Shortcuts". Если Вы хотите изменить стиль этого пункта, когда он будет нажат, Вам нужно использовать следующий код:

Код: Выделить всё

QListWidget#qlwIcons::item:selected {
background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #fff, stop:1 #333);
}
Панель инструментов Mumble

Размещение иконок на панели инструментов:
"applications-internet.svg" ----->/icons/tango/categories/applications-internet.svg Подключение
"Information_icon.svg" ---->/icons/publicdomain/Information_icon.svg Это информация для сервера
"self_undeafened.svg"----->/icons/self_undeafened.svg Включение наушников и микрофона
"deafened_self.svg" ----->/icons/deafened_self.svg Отключение наушников и микрофона
"comment.svg"---->/icons/comment.svg коментарий
"audio-input-microphone.svg" ----->/icons/tango/actions/audio-input-microphone.svg Включение микрофона
"audio-input-microphone-muted.svg" ----->/icons/tango/actions/audio-input-microphone-muted.svg Отключение микрофона
Изменение внешнего вида окна логов

Начиная с 1.2.1 были добавлены определенные аспекты стиля log сообщений. Доступны следующие новые классы QSS:
Timestamps: log-time
Servers: log-server
Channels: log-channel
Operation targets: log-target
Operation sources: log-source
Privileges: log-privilege
Имейте в виду, что каналы, цели и источники в окне логов Mumble – описываются одинаково. Изменить их вид можно, наример, так:

Код: Выделить всё

.log-time {
        color: blue;
}
Стандарты

Тут больше рекомендаций, чем стандартов, но, в любом случае, это должно уменьшить путаницу.

Обращение с изображениями

Если Вы используете дополнительные изображения, не определенные Mumble, Вы должны разместить изображения в пределах директории скина. Вот пример такого случая:

Код: Выделить всё

/* change the left arrow of the scrollbar */
QScrollBar::left-arrow {
  image: url(skin:arrow_left.svg);
}
Заметьте двоеточие ":" означает текущий каталог скина. В нашем случае, текущий каталог – корень каталога Chocolate. Т.е.: "C:\Program Files\Mumble\skins\Chocolate". Таким образом, изображение расположено в "C:\Program Files\Mumble\skins\Chocolate\arrow_left.png".
За дополнительной информацией Вы можете обратиться к документации Qt по таблицам стилей, как было сказано ранее.
Код означает, что файл arrow_left.png должен находиться в том же каталоге, что и текущий файл QSS. Если Вы хотите поместить его в папку "images" в Вашей папке скина, то это выглядело бы так:

Код: Выделить всё

/* change the left arrow of the scrollbar */
QScrollBar::left-arrow {
  image: url(skin:images/arrow_left.svg);
}
Стиль

Рекомендуется использовать стиль "WindowsXP" или "WindowsVista" для всех стилей. Это потому что у них есть наименьшее количество визуальных дефектов.

Смотрите также

Синтаксис стилей http://qt-project.org/doc/qt-4.8/stylesheet-syntax.html
Примеры стилей http://qt-project.org/doc/qt-4.8/styles ... mples.html
Дополнительные стили http://qt-project.org/doc/qt-4.8/styles ... rence.html

Данная статья являяется переводом этой статьи
Мы в Telegramm https://t.me/mumbleru
Пожалуйста, при персональном обращении сразу формулируйте его цель. Спасибо.
Подпишитесь на Новости форума feed/news :rtfm:

Изображение <--- Хочешь себе такой? Читай тут

Ответить