Статьи:

Профиль:

Создание внешнего вида ВСТ плагина с помощью XML


Существует несколько способов задать внешний вид (GUI) вашему ВСТ плагину. Одним из вариантов является использование языка XML. В данной публикации описываются все теги этого языка, которые могут Вам понадобиться во время проработки внешнего вида плагина.

Кратко о  XML

XML — в дословном переводе звучит как «расширяемый язык разметки». Используется для форматирования структурированых документов и данных.

XML тэги <tag attribute1=»…» attribute2=»…» >
</tag>или<tag attribute1=»…» attribute2=»…» />
комментарии <!— Ваш комментарий тут —>

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

Типичная XML структура

<skin>

<header><!— В загаловке хранится мета информация —></header>
<resources><!— Тут подключаются все ресурсы —></resources>
<templates><template name=»…><!— описание стиля окна —>

</template>

<!— дополнительные описания… —>

</templates>

<scheme><!— Тут задаётся стиль — стандартные цвета, размеры и т.д. —></scheme>

</skin>

Стиль данной документации

Жирный синий текст => название тэга
Красный жирный текст => атрибут ( должен быть задан!)
Зелёный жирный текст => необязательный атрибут
Маленький синий текст => доступные значения атрибута

Заголовок

<header>
<!—  тут размещаются мета-данные —>
</header>

Секция заголовка может содержать <info> тэки с мета информацией и <include> тэги, которые используются для добавления дополнительных xml  файлов.

<include file=»…»/>

Мета информация

<info name=»…» value=»…»/>

Стандартная информация содержащаяся в этом тэге:

Имя значение
«Application» Должно быть указано (например «мой плагин»)
«Skin-Name» Имя скина, настройки внешнего вида плагина.
«Author» Ваше имя
«Contact» например mailto:xml@corpuscul.net

Ресурсы

Добавление растровых изображений

<bitmap name=»…» path=»…» mask=»#color» alpha=»byte» />

Атрибуты:

name полное название изображения
path относительный путь к файлу (например «bitmaps\playbtn.bmp»)
mask цвет
alpha Значение между 0 и 255, »#7F» соответствует «128″. Для смешивания пикселей задайте»"#FF!»

Параметр цвета будет проигнорирован в случае задания альфа значения.

<section name=»…» path=»…» rect=»left,top,right,bottom»/>

Секция описывает прямоугольную область внутри изображения. Программа «выделяет» данную часть из соответствующего изображения используя атрибут path.

Атрибуты:

path Патч может быть внутренним именем тэга <bitmap>, описаным в секции ресурсов или названия файла.
rect Координаты прямоугольника, например »0,0,20,10″

Анимация - Filmstrip

<filmstrip name=»…» path=»…» framecount=»int» framealign=»…» interval=»int» defaultframe=»int» />

Изображение, которое содержит в себе несколько кадров. Тэг <filmstrip> наследует такие атрибуты как mask или alpha от тэга <bitmap>.

Атрибуты:

framecount колличество кадров
framealign выравнивание кадров, может быть »vertical«ьным или «horizontal«ьным.
interval промежуток времени между кадрами, стандартно 100 мс.
defaultframe Кадр с которого начинается анимация, стандартно нулевой.

Динамическое изображение

<dbitmap name=»…» path=»…» center=»left,top,width,height» style=»…» />

Изображение делится на 9 частей.

При этом углы изображения всегда имеют фиксированый размер.

Атрибуты:

center Центр прямоугольника
style Может быть комбинацией »hrepeat» и «vrepeat«, определяет повторяемые части.

Коллекции изображений

<collection name=»…»>
<bitmap name=»… />

</collection>

Коллекция описывает несколько изображений.

Как подключать курсоры

<cursor name=»…» path=»…»/>

Атрибуты:

name название курсора
path относительный путь к файлу курсора (например «cursors\arrow.cur»)

Анимация

<animation name=»…» bitmap=»…» mode=»…»/>

Атрибуты:

name названия анимации, для использования в onMouseover, onMousedown
bitmap ссылается на <filmstrip> в секцию ресурсов, которая содержит анимацию.
mode может работать в циклическом и одиночком режимах: «repeat» и «once«.

Дополнительные флаги:

forward - воспроизвидение в прямом режиме
backward - воспроизведение задом на перёд
interrupt - прекращение анимации в случае если событие закончилось

Как оформлять анимацию переходов

Для оформления переходов, Вы можете задать имя нужной анимации в одном из следующих  событий:

onMouseover курсор наводится на объект
onMouseout курсор покидает объект
onMousedown пользователь нажимает по объекту
onMouseup пользователь отпускает кнопку мыши
onSwitchon перключатель включён
onSwitchoff переключатель выключен

Анимация:

blend Плавные переходы с периодом 20 мс.
rotate один раз поворачивает объект  вокруг своей оси

Пример:

<resources>
<filmstrip name=»anim1″ path=»bitmaps\anim1.bmp» framecount=»10″/>
<animation name=»animation1″ bitmap=»anim1″ />
</resources>

<template …>
<switch … style=»push» onMouseover=»blend» onMousedown=»animation1″/>
</template>

Формы окон

<shape name=»…»>
<area bitmap=»…» attach=»…» offset=»…»/>
</shape>

Описывает формы окон с изменяемыми размерами.

Атрибуты (для тега area):

bitmap ссылается на изображение в секции ресурсов. Изображение должно иметь цвет прозрачности (mask=»#color»)
attach Авторизует такие флаги как <view>,  может быть комбинацией »left«, «top«, «right«, «bottom«, например »left|top»,
offset Дистанция между площадьми и углами окна.

Пример:

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

<resources>
<bitmap name=»shapeTL» path=»tl.bmp» mask=»green»/>
<bitmap name=»shapeTR» path=»tr.bmp» mask=»green»/>
<bitmap name=»shapeBL» path=»bl.bmp» mask=»green»/>
<bitmap name=»shapeBR» path=»br.bmp» mask=»green»/>

<shape name=»myshape»>
<area bitmap=»shapeTL» attach=»top|left»/>
<area bitmap=»shapeTR» attach=»top|right»/>
<area bitmap=»shapeBL» attach=»bottom|left»/>
<area bitmap=»shapeBR» attach=»bottom|right»/>
</shape<
</resources>

<template … style=»noframe» shape=»myshape»>

</template>

Настройки блокового вида

Настройки блокового вида используются для разделения окна на несколько логических площадей, которые могут показываться или же прятаться пользователем. Настройки блокового вида включаются в секцию <resources>.

Группировка

Блоки могут быть сгруппированы в группы. Каждая группа имеет свои собственные настройки вертикального и горизонтального выравнивания. Группы могут быть размещены одна в другой (иерархия).

Слои

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

<customsettings name=»Example.default» style=»extended|default»><customitem name=»Певый блок» title=»Item 1″ style=»fixed» group=»left«/>
<customitem name=»Второй блок» title=»Item 2″ style=»sizable» group=»left«/>
<customitem name=»Третий блок» title=»Item 3″ style=»sizable» group=»right«/><customgroup name=»all» attach=»all»/>
<customgroup name=»left» parent=»all» style=»vertical» attach=»top|bottom»/>
<customgroup name=»right» parent=»all» style=»vertical» attach=»all»/>

</customsettings>

Тэги блокового вида

<customsettings name=»…» title=»…» style=»…» category=»…» >

Описывает настройки объектов, если программа поддерживает слои, то тэг <customsettings> представляет один слой.

Атрибуты:

name имя, зависит от программы
title загаловок, показывается в контекстном меню
style смотри заметки (ниже)
category категория команды с клавиши

Заметки:

reorder порядок объектов может быть изменён пользователем, например второй объект перемещён перед первым.
sizewindow Изменение размера окна
extended расширенный стиль, позволяет группировать объекты
commands наличие команд с клавиатуры
default стандартные установки

<customitem name=»…» alternative=»…» title=»…» style=»…» group=»…» condition=»…» command=»…» shortcut=»…» >

Пользователь может отображать и прятать окна, группы объектов. Стандартное отображение объекта задаётся в независимом шаблоне (смотри тэг template), который должен иметь то же имя, что и объект.

Атрибуты:

name название шаблона
alternative альтернативное название шаблона
title загаловок объекта, показываемый в контекстном меню
style смотри заметки (ниже)
group название группы, в которой содержится объект
condition Условие, при котором показывается данный объект. Например для объекта «3″ условие может быть «2 ИЛИ 1″. Это значит то что объект «3″ показывается только если показывается второй или первый объекты (описано ниже, в условиях шаблона).
command выполнение определённого действия после нажатия определённой клавиши
shortcut стандартная горячая клавиша для отображения/спрятывания этого объекта (например Ctrl+b)

Заметки:

fixed Объект не может быть спрятан пользователем. Должен быть как минимум один такой объект.
hidden Объект изначально спрятан.
variant Данный объект показывается эксклюзивно, когда все остальные объекты спрятаны.
sizable Данный объект может изменять свои размеры.
floating Объект является независимым (перемещающимся) окном (не содержится в группе).

<customgroup name=»…» parent=»…» style=»…» attach=»…» >

Модульные группы поддерживают одно горизонтальное или вертикальное выравнивание. Группы могут быть размещены иерархически, одна в другой.

Атрибуты:

name название группы
parent название родительской группы
style стиль группы (смотри заметки)
attach прикрипление группы (см. раздел «контроллеры»)

Заметки:

vertical вертикальное выравнивание объектов (стандатно — горизонтальное)

Модульный режим просмотра - Custom View

<customview name=»…» size=»…»>

Может быть использован где-угодно внутри шаблона.  Он наследует все атрибуты тэга <view>. Также поддерживается иерархия, благодаря чему пользователь может отображать/прятать объекты внутри других объектов.

Атрибуты:

name название объекта <customsettings>, описывающего данный вид

Шаблоны

Шаблоны описывают группы объектов (контроллеров). Окно может иметь несколько шаблонов, которые используются программой для создания более сложного и детального визуального оформления плагина. Например Вы можете описать только один канал микшера а не делать это несколько раз. Заметка: названия шаблонов и объектов должны быть известны хост-программе!

<template name=»…» title=»…» background=»…» buttons=»…» help=»…» style=»…» shape=»…»>
<!— размещайте типы видов тут —>
</template>

Атрибуты:

name название шаблона (задаётся для хост-программы)
title загаловок окна
background Вы можете задать фоновое изображение для шаблона (в этом случае размер изображения определяется параметром размера окна).
buttons Стандартные кнопки «ok», «отмена»
help Если шаблон используется в качестве диалога — то будет создана вспомогательная кнопка
style
windowstyle - стандартное окно с кнопками минимизирования и максимизирования…
dialogstyle - диалоговое окно (без изменения размера)
panelstyle - панельное небольшое окно
noframe - нет заданного типа окна
shape Ассоциация шаблона с определённой формой окна

Варианты / Условия

<variant condition=»…»>
<!— размещайте тут контроллеры —>
</variant>

Контроллеры внутри тэга <variant> появляются только при соблюдении определённого условия. Условия создаются с использованием логических предикатов И, ИЛИ и НЕ.

Ниже приведён пример задания шаблона канала микшера:

<variant condition=»surround»>
<variant condition=»stereo»>

</variant>
<variant conditionNOT stereo»>

</variant>
</variant><variant conditionNOT surround»>

</variant>
<variant condition=»surround AND stereo»>
</variant><variant condition=»surround AND NOT stereo»>
</variant><variant conditionNOT surround AND stereo»>
</variant>

<variant conditionNOT surround AND NOT stereo»>
</variant>

К сожалению XML написана на английском языке, а Виндоус сделан не на орбитальной станции МИР :)

Автоматическое выравнивание

<row [col] width=»integer» height=»integer» margin=»integer»>
<!— разместите объекты тут —>
</row [/col]>

Всё стандартно, тэг  <row> используется для горизонтального выравнивания. Размер зависит от объекта, Вы можете задать минимальный размер по вертикали и горизонтали.

Атрибуты:

width минимальная ширина в пиксилях
height минимальная высота в пиксилях
margin Дистанция между объектами.

Изменение шрифта объектов

<font name=»…» face=»…» size=»integer» style=»…» mode=»…» color=»#color»>
<!— размещайте объекты тут —>
</font>

Тэг <font> предназначен для изменения шрифта всех описанных внутри него объектов.

Атрибуты:

name Может быть названием шрифта
face Вы можете задать альтернативы, например »Verdana, Arial, Helvetica». Стандартные шрифты: «System», «Geneva», «Helvetica», «Courier», «Times», «Symbol»
size Размер шрифта в пикселях.
style Может быть комбинацией «bold», «italic», «underline» (жирный, курсив, подчёркнутый) (например:  »bold|underline»).
mode может быть задан режим «opaque»
color цвет текста

Контроллеры

Что такое объект

Объект — это отдельный визуальный элемент и составляющая визуального интерфейса (GUI) плагина, кирпичик из которых создаётся внешний вид. Типичным примером объекта является контроллер, с помощью которого пользователь может изменять определённые значения, влияющие на синтез или обработку звука.

<view name=»…» title=»…» size=»left,top,width,height» attach=»…» tip=»…» cursor=»…»/>

Атрибуты:

name название объекта, хост-программа должна быть знакома с ним
title загаловок, который видит пользователь
size размер объекта
attach Авторизированы флаги прилипания, такие как »all» или комбинация из «left«, «top«, «right«, «bottom«, например »left|top».
tip подсказка
cursor определённые стандартные курсоры (было рассмотрено ранее)

Кнопки

<button name=»… />

Тэг <button> наследует все атрибуты тэга <view>.

<helpbutton locator=»…»/>

нажатие по кнопке открывает справку из определённого места

<switch name=»…» title=»…» style=»…» bitmap=»…» icon=»…» blink=»…» />

Атрибуты:

style
push - изображение состоит из двух частей (нормальное и в режиме нажатия)
on
onoff - изображение имеет четыре части, нормальное и каждый этап нажатия кнопки.
edit - строка загаловка объекта может быть изменена после двойного щелчка по ней

Дополнительные стили:

immediate - переключатель реагирует на опускание кнопки мыши а не на подъём
rollover - изображение имеет три части для каждого состояния: нормальное, нажатое, возобновлённое
bitmap ссылается на изображение, описанное в секции «ресурсы»
icon если задано, то будет создана иконка переключения.
blink Определяет имя конкретного значения программы, которое контролирует переключение
title заданный заголовок

Состояния кнопок:
onoff/on стиль:

выкл, не нажата
выкл, нажата
выкл, возобновление
вкл, не нажата
вкл, нажата
вкл, возобновление

push стиль:

не нажата
нажата
возобновление

Переключатели

<checkbox name=»… />

Переключатели определяются по разному в различных операционных системах. Тэг <checkbox> наследует все атрибуты тэга <view>.

<radiobutton name=»… />

Радио-переключатель, также определяется по разному в различных операционных системах. Также наследует все атрибуты тэга <view>.

Группа переключателей

<radiogroup name=»…» align=»…»>
<!— Добавляйте контроллеры сюда —>
</radiogroup>

Только один контроллер может быть изменён за раз, пример — переключение формы волны.

Атрибуты:

align выравнивание контроллеров по «horiz«онтали или по «vert«икали.

Полоса прокрутки

<scrollbar name=»…» style=»…» bitmaps=»…»/>

Атрибуты:

style может быть «horizontal«ьной или «vertical«ьной
bitmaps ссылается на коллекцию изображений со следующими типами изображений:

<collection name=»… >
<bitmap name=»UpButton» … />
<bitmap name=»DownButton» … />
<bitmap name=»VerticalBack» … />
<bitmap name=»VerticalHandle» … />
<bitmap name=»VerticalHandleTop» … />
<bitmap name=»VerticalHandleBottom» … />
<bitmap name=»LeftButton» … />
<bitmap name=»RightButton» … />
<bitmap name=»HorizontalBack» … />
<bitmap name=»HorizontalHandle» … />
<bitmap name=»HorizontalHandleLeft» … />
<bitmap name=»HorizontalHandleRight» … />
</collection>

Если полоса прокрутки не задана — то автоматически будет создана характерная для Вашей ОС полоса прокрутки.

Регулятор

<slider name=»…» style=»…» handle=»…» background=»…» offset=»x,y» defaultval=»int» />

Если не задано фоновое изображение или атрибут «handle», то будет создан стандартный для вашей ОС регулятор.

Атрибуты:

style Определяет направление: horizontal,
horizontal-small, vertical или vertical-small
handle изображение
background фоновое изображение
offset офсет изображения (???)
defaultval стандартные установки

Ручка

1) <knob name=»…» handle=»…» background=»…» offset=»x,y» [knobmode="..."]/>
2) <knob name=»…» bitmap=»…»/>

Ручка может быть описана как изображение и анимация.
Атрибуты:

handle изображение
background фоновое изображение
offset фоновый офсет (???)
bitmap анимация, каждый кадр которой соответствует определённой позиции ручки
knobmode Изменяет режим работы для всех ручек на: circular, relativ-circular или linear

Текстовое поле

<text name=»…» style=»…» just=»…» bgcolor=»#color» displaywidth=»integer»/>

<edit name=»…» style=»…» just=»…» bgcolor=»#color» displaywidth=»integer»/>

Атрибуты:

style Может быть комбинацией:

border — контроллер имеет границу
no-title — котроллер не имеет заголовка
title-right — заголовок выравнено по правой стороне
no-clipboard — отсутствие возможности копирования/вставки
visible-inactive — текст доступен, если не активный
led — чёрный фон
fit-string — размещение ширины
transparent — прозрачный режим.

Пример:  »border|title-right|fit-string»

just текстовое подтверждение, может быть комбинацией «left», «top», «right», «bottom», например »left|top».
bgcolor фоновый цвет
displaywidth отображение ширины

<valuebox name=»…» style=»…»/>

Атрибуты:

style Дополнительные стили:
no-updown - нет верх/низ переключателя
popup-slider - всплывающий регулятор
doubleclick - редактирование после двойного щелчка

<rationalbox name=»…» style=»…»/>

Атрибуты:

style Дополнительные стили:
border - определённая граница

<optmenu name=»…» style=»…»/>

Атрибуты:

style Дополнительные стили:
transparent - контроллер прозрачен
nodropdown - нет режима «нажато»
commandmenu - меню появляется в командном виде
menubreak - отсутствие широких меню (только в ОС Виндоус)

UpDown Box

<updownbox name=»…» style=»…»/>

Атрибуты:

style
updown
leftright
up
down
left
right
transparent
repeat

Изображение

<image bitmap=»…» style=»…» />

Атрибуты:

bitmap отображаемое изображение
style Стиль определяет характер изображения:
scale - изображение масштабируется под размер объекта
hrepeat - изображение циклически повторяется по ширине объекта
vrepeat - изображение циклически повторяется по высоте объекта
animate - анимированое изображение

Слой

<label title=»…» just=»…» style=»…» />

Атрибуты:

just подтвержтение текста ( смотри раздел релактирования текстовых полей )
style
autowidth - ширина слоя задаётся размером текстового поля, игнорируется ширина в  size.

Декорации

<decor style=»…» bgcolor=»…» />

Атрибуты:

style может быть один из следующих:
workarea
dialogframe
groupframe
solidrect - рисует прямоугольник с фоном, заданным в bgcolor
bgcolor фоновый цвет, используется только со стилем «solidrect«.

Шкала изображения

<bitmapscale name=»…» maximum=»…» style=»…» bitmap=»…» segmentsize=»pixels» background=»…» offset=»x,y» />

Атрибуты:

maximum название заданного в программе значения будем отображено как максимум (например — вершина измеителя уровня звука)
style можен быть «horizontal»ьным или «vertical»ьным, совмещённым с «manipulate».
bitmap изображение
segmentsize размер секмента в пикселях
background фоновое изображение
offset офсет фонового изображения

Отобрежаемое изображение

<bitmapdisplay name=»…» bitmap=»…»/>

Это пассивный элемент, который используется для отображения значения. Изображение горизонтально разделено на определённое колличество секций, с равномерно разделёнными шагами от минимального до максимального значения.

Listbox

<listbox name=»…» style=»…»/>

Атрибуты:

style hscroll — горизонтальная полоса прокрутки
vscroll — вертикальная полоса прокрутки
title — отображение заголовка
border — границы
transparent — прозрачность
vlines — вертикальные линии сетки
hlines — горизонтальные линии сетки
select — возможно выделение
exclusive — эксклюзивное выделение
selectAlways — отсутствие возможности пустого выбора
close — закрывает окно после двойного щелчка, нажатия на картку или пробел

Progressbar

<progressbar name=»…» style=»…» title=»…»/>

Атрибуты:

style border — контроллер имеет границу
nodigits — нет процентного текста
title задаёт текст заголовка

Контроллеры программы

<control name=»…» class=»…» [attribute list]/>

Предназначен для определённых контроллеров программы, идентифицируемых по имени класа. Может иметь любое число дополнительных атрибутов.

Один комментарийСоздание внешнего вида ВСТ плагина с помощью XML

  • corp

    Схема

    Схема — это стандартные цвета, размеры, шрифты программы, которые заданы в схемах. Описание в XML позволяет задать стандартные цвета, грифты и т.д.

    <scheme>
    <!— размещайте цвета, шрифты и т.д. тут —>
    </scheme>

    Цвета

    <color name=»…» value=»#color»/>

    buttonface
    buttontop
    buttonbottom
    buttontop2
    buttonbottom2
    frame
    frametop
    framebottom
    datafieldback
    datafieldfore
    datafieldtop
    datafieldbottom
    windowback
    dialogback
    panelback
    labelcolor
    labelcolorinactive
    workarea
    multipane
    focus
    select
    text
    textselect
    listback
    listfore
    listselect
    listselecttext
    tooltipback
    tooltipfore
    menuback
    hyperlink
    preferenceheader
    sortmarker

    Размеры

    <size name=»…» value=»integer»/>

    margin
    buttonheight
    buttonwidth
    datafieldheight
    datafieldwidth
    datafieldborder
    scrollbarwidth
    listrowheight
    radiobuttonheight
    checkboxheight
    texteditframe
    listboxframe
    tabheight
    tabwidth
    taboverlap

    Стандартные курсоры

    <cursor name=»…» path=»…»/>

    arrow
    thin-cross
    beam
    cross
    pointhand»
    movehand
    size-horizontal
    size-vertical
    split-horizontal
    split-vertical
    wait
    pencil
    erasor
    scissor
    brush
    magnifier
    paint
    mute
    speaker

    Шрифты

    <font name=»…» face=»…» …/>

    message
    label
    smalllabel
    tinylabel
    data
    smalldata
    largedata
    monospaced
    smallmonospaced
    list
    tab
    column
    songpos
    smallsongpos

Вы должны быть залогинены для комментирования.