Проектирование пользовательского интерфейса для аудиоплагина
Аудиоплагины позволяют вам настройкам параметров алгоритм обработки во время передачи потокового аудио в режиме реального времени. Для повышения удобства использования можно задать пользовательский интерфейс (UI), который сопоставляет параметры с интуитивно разработанными и позиционированными элементами управления. Можно использовать audioPluginInterface, audioPluginParameter, и audioPluginGridLayout для определения пользовательского интерфейса пользователя. Вы можете взаимодействовать со специальным пользовательским интерфейсом в MATLAB ®, используя parameterTunerили разверните плагин с пользовательским пользовательским интерфейсом на цифровой звуковой рабочей станции (DAW). Это руководство проходит по ключевым возможностям проекта аудиоплагинов, последовательно улучшая базовый аудиоплагин UI.
Чтобы узнать больше о аудиоплагинах в целом, смотрите Audio Plugins в MATLAB.
Пользовательский интерфейс по умолчанию
The equalizerV1 аудиоплагин позволяет настраивать коэффициенты усиления и центральные частоты трехполосного эквалайзера, настраивать общий объем и переключаться между включенным и отключенным состояниями.
classdef equalizerV1 < audioPlugin properties GainLow = 0 FreqLow = sqrt(20*500) GainMid = 0 FreqMid = sqrt(500*3e3) GainHigh = 0 FreqHigh = sqrt(3e3*20e3) Volume = 1 Enable = true end properties (Constant) PluginInterface = audioPluginInterface( ... audioPluginParameter('GainLow', ... 'Label','dB', ... 'Mapping',{'lin',-20,20}), ... audioPluginParameter('FreqLow', ... 'Label','Hz', ... 'Mapping',{'log',20,500}), ... audioPluginParameter('GainMid', ... 'Label','dB', ... 'Mapping',{'lin',-20,20}), ... audioPluginParameter('FreqMid', ... 'Label','Hz', ... 'Mapping',{'log',500,3e3}), ... audioPluginParameter('GainHigh', ... 'Label','dB', ... 'Mapping',{'lin',-20,20}), ... audioPluginParameter('FreqHigh', ... 'Label','Hz', ... 'Mapping',{'log',3e3,20e3}), ... audioPluginParameter('Volume', ... 'Mapping',{'lin',0,2}), ... audioPluginParameter('Enable')) end properties (Access = private) mPEQ end methods function obj = equalizerV1 obj.mPEQ = multibandParametricEQ('HasHighpassFilter',false, ... 'HasLowShelfFilter',false,'HasHighShelfFilter',false, ... 'HasLowpassFilter',false,'Oversample',false,'NumEQBands',3, ... 'EQOrder',2); end function y = process(obj, x) if obj.Enable y = step(obj.mPEQ,x); y = y*obj.Volume; else y = x; end end function reset(obj) obj.mPEQ.SampleRate = getSampleRate(obj); reset(obj.mPEQ); end function set.FreqLow(obj,val) obj.FreqLow = val; obj.mPEQ.Frequencies(1) = val; %#ok<*MCSUP> end function set.GainLow(obj,val) obj.GainLow = val; obj.mPEQ.PeakGains(1) = val; end function set.FreqMid(obj,val) obj.FreqMid = val; obj.mPEQ.Frequencies(2) = val; end function set.GainMid(obj,val) obj.GainMid = val; obj.mPEQ.PeakGains(2) = val; end function set.FreqHigh(obj,val) obj.FreqHigh = val; obj.mPEQ.Frequencies(3) = val; end function set.GainHigh(obj,val) obj.GainHigh = val; obj.mPEQ.PeakGains(3) = val; end end end
Функции parameterTuner для визуализации пользовательского интерфейса по умолчанию аудиоплагина.
parameterTuner(equalizerV1)
Управление стилем и размещением
Чтобы определить сетку пользовательского интерфейса, добавьте audioPluginGridLayout на audioPluginInterface. Можно задать количество, размер, интервалы и границу камер в сетке пользовательского интерфейса. В этом примере задайте 'RowHeight' следующим [20,20,160,20,100] и 'ColumnWidth' как [100,100,100,50,150]. Это создает следующую сетку пользовательского интерфейса:
Чтобы определить стиль управления пользовательским интерфейсом, обновите audioPluginParameter определение каждого параметра для включения пар имя-значение 'Style' и 'Layout'. Style определяет тип управления (ручка вращения, ползунок или переключатель, для примера). Layout определяет камеры, которые элементы управления занимают в сетке пользовательского интерфейса. Можно задать Layout как [строка, столбец] сетки, которая будет занимать, или как [верхняя, левая; нижний, правый] из группы камер, которые нужно занимать. По умолчанию имена отображения управления также отображаются и занимают свои собственные камеры в сетке пользовательского интерфейса. Степень камер, которую они занимают, зависит от пары "имя-значение" 'DisplayNameLocation'.
Комментируемые стрелы указывают на различие между equalizerV1 и equalzierV2.
classdef equalizerV2 < audioPlugin ... % omited for example purposes properties (Constant) PluginInterface = audioPluginInterface( ... audioPluginParameter('GainLow', ... 'Label','dB', ... 'Mapping',{'lin',-20,20}, ... 'Style','vslider', ... %<-- 'Layout',[2,1;4,1], ... %<-- 'DisplayName','Low','DisplayNameLocation','Above'), ... %<-- audioPluginParameter('FreqLow', ... 'Label','Hz', ... 'Mapping',{'log',20,500}, ... 'Style','rotaryknob', ... %<-- 'Layout',[5,1], ... %<-- 'DisplayNameLocation','None'), ... %<-- audioPluginParameter('GainMid', ... 'Label','dB', ... 'Mapping',{'lin',-20,20}, ... 'Style','vslider', ... %<-- 'Layout',[2,2;4,2], ... %<-- 'DisplayNameLocation','None'), ... %<-- audioPluginParameter('FreqMid', ... 'Label','Hz', ... 'Mapping',{'log',500,3e3}, ... 'Style','rotaryknob', ... %<-- 'Layout',[5,2], ... %<-- 'DisplayNameLocation','None'), ... %<-- audioPluginParameter('GainHigh', ... 'Label','dB', ... 'Mapping',{'lin',-20,20}, ... 'Style','vslider', ... %<-- 'Layout',[2,3;4,3], ... %<-- 'DisplayName','High','DisplayNameLocation','Above'), ... %<-- audioPluginParameter('FreqHigh', ... 'Label','Hz', ... 'Mapping',{'log',3e3,20e3}, ... 'Style','rotaryknob', ... %<-- 'Layout',[5,3], ... %<-- 'DisplayNameLocation','None'), ... %<-- audioPluginParameter('Volume', ... 'Mapping',{'lin',0,2}, ... 'Style','rotaryknob', ... %<-- 'Layout',[3,5], ... %<-- 'DisplayNameLocation','Above'), ... %<-- audioPluginParameter('Enable', ... 'Style','vtoggle', ... %<-- 'Layout',[5,5], ... %<-- 'DisplayNameLocation','None'), ... %<-- ... audioPluginGridLayout( ... %<-- 'RowHeight',[20,20,160,20,100], ... %<-- 'ColumnWidth',[100,100,100,50,150]) %<-- end ... % omitted for example purposes end
The Layout и DisplayNameLocation определено в audioPluginParameters отображает соответствующие параметры на управляющую сетку следующим образом:
Функции parameterTuner визуализация пользовательского интерфейса equalizerV2.
parameterTuner(equalizerV2)
Фоновое изображение и цвет
Чтобы настроить фон пользовательского интерфейса, задайте 'BackgroundImage' и 'BackgroundColor' в audioPluginInterface.
The BackgroundColor может быть задана как короткая или длинная строка названия цвета или как триплет RBG. См. ColorSpec (Color Specification) для получения дополнительной информации. Когда вы задаете BackgroundColor, цвет применяется ко всему пространству пользовательского интерфейса, кроме пространства, занятого элементами управления или BackgroundImage. Если изображение управления или фона включает прозрачность, цвет фона отображается через прозрачность.
The BackgroundImage может быть задан как файл PNG, GIF или JPG. Изображение применяется к сетке пользовательского интерфейса путем выравнивания верхних левых углов сетки и изображения пользовательского интерфейса. Если изображение больше, чем размер сетки пользовательского интерфейса, заданный в audioPluginGridLayout, затем изображение обрезается до размера сетки пользовательского интерфейса. Размер фонового изображения не изменяется. Если изображение меньше, чем сетка UI, то незанятые области сетки UI рассматриваются как прозрачные.
В этом примере вы увеличиваете заполнение по периметру сетки, чтобы создать пространство для логотипа MathWorks ®. Вы можете вычислить общую ширину сетки UI как сумма всей ширины столбцов плюс левая и правая набивка плюс интервал столбца (интервал столбца по умолчанию 10 пиксели используются в этом примере): . Общая высота сетки UI - сумма всех высот строки плюс верхняя часть, и нижняя набивка плюс интервал строки (интервал строки по умолчанию 10 пикселей используется в этом примере): Чтобы найти логотип в нижней части сетки UI, используйте изображение 580 на 500:
classdef equalizerV3 < audioPlugin ... % omitted for example purposes properties (Constant) PluginInterface = audioPluginInterface( ... audioPluginParameter('GainLow', ... 'Label','dB', ... 'Mapping',{'lin',-20,20}, ... 'Style','vslider', ... 'Layout',[2,1;4,1], ... 'DisplayName','Low','DisplayNameLocation','Above'), ... audioPluginParameter('FreqLow', ... 'Label','Hz', ... 'Mapping',{'log',20,500}, ... 'Style','rotaryknob', ... 'Layout',[5,1], ... 'DisplayNameLocation','None'), ... audioPluginParameter('GainMid', ... 'Label','dB', ... 'Mapping',{'lin',-20,20}, ... 'Style','vslider', ... 'Layout',[2,2;4,2], ... 'DisplayNameLocation','None'), ... audioPluginParameter('FreqMid', ... 'Label','Hz', ... 'Mapping',{'log',500,3e3}, ... 'Style','rotaryknob', ... 'Layout',[5,2], ... 'DisplayNameLocation','None'), ... audioPluginParameter('GainHigh', ... 'Label','dB', ... 'Mapping',{'lin',-20,20}, ... 'Style','vslider', ... 'Layout',[2,3;4,3], ... 'DisplayName','High','DisplayNameLocation','Above'), ... audioPluginParameter('FreqHigh', ... 'Label','Hz', ... 'Mapping',{'log',3e3,20e3}, ... 'Style','rotaryknob', ... 'Layout',[5,3], ... 'DisplayNameLocation','None'), ... audioPluginParameter('Volume', ... 'DisplayName','Volume', ... 'Mapping',{'lin',0,2}, ... 'Style','rotaryknob', ... 'Layout',[3,5], ... 'DisplayNameLocation','Above'), ... audioPluginParameter('Enable', ... 'Style','vtoggle', ... 'Layout',[5,5], ... 'DisplayNameLocation','None'), ... ... audioPluginGridLayout( ... 'RowHeight',[20,20,160,20,100], ... 'ColumnWidth',[100,100,100,50,150], ... 'Padding',[20,120,20,20]), ... %<-- ... 'BackgroundImage','background.png', ... %<-- 'BackgroundColor',[210/255,210/255,210/255]) %<-- end ... % omited for example purposes end
Функции parameterTuner визуализация пользовательского интерфейса equalizerV3.
parameterTuner(equalizerV3)
Пользовательские диафильмы управления
Чтобы использовать пользовательские диафильмы, задайте пары "имя-значение" 'Filmstrip' и 'FilmstripFrameSize' в audioPluginParameter. filmstrip может быть файлом PNG, GIF или JPG и должен состоять из систем координат, расположенных сквозь грань, вертикально или горизонтально. Диафильм сопоставлен с областью значений элементов управления, так что соответствующая система координат диафильма отображается на пользовательском интерфейсе плагина, когда вы настраиваете параметры. В этом примере задайте двухкадровую диафрагму для Enable параметр. В качестве наилучшей практики размер каждой системы координат пленочной полосы должен равняться размеру области, занимаемой параметром. The Enable параметр занимает одну камеру, которая составляет 150 на 100 пикселей. Чтобы создать вертикальную диафрагму, где каждая система координат 150 на 100, сделайте общий размер диафрагмы 150 на 200 и установите FilmstripFrameSize на [150,100]. Диафильм, используемый в этом примере, сначала содержит систему координат, соответствующее отключенному положению, затем положение включения:
classdef equalizerV4 < audioPlugin ... % omitted for example purposes properties (Constant) PluginInterface = audioPluginInterface( ... audioPluginParameter('GainLow', ... 'Label','dB', ... 'Mapping',{'lin',-20,20}, ... 'Style','vslider', ... 'Layout',[2,1;4,1], ... 'DisplayName','Low','DisplayNameLocation','Above'), ... audioPluginParameter('FreqLow', ... 'Label','Hz', ... 'Mapping',{'log',20,500}, ... 'Style','rotaryknob', ... 'Layout',[5,1], ... 'DisplayNameLocation','None'), ... audioPluginParameter('GainMid', ... 'Label','dB', ... 'Mapping',{'lin',-20,20}, ... 'Style','vslider', ... 'Layout',[2,2;4,2], ... 'DisplayNameLocation','None'), ... audioPluginParameter('FreqMid', ... 'Label','Hz', ... 'Mapping',{'log',500,3e3}, ... 'Style','rotaryknob', ... 'Layout',[5,2], ... 'DisplayNameLocation','None'), ... audioPluginParameter('GainHigh', ... 'Label','dB', ... 'Mapping',{'lin',-20,20}, ... 'Style','vslider', ... 'Layout',[2,3;4,3], ... 'DisplayName','High','DisplayNameLocation','Above'), ... audioPluginParameter('FreqHigh', ... 'Label','Hz', ... 'Mapping',{'log',3e3,20e3}, ... 'Style','rotaryknob', ... 'Layout',[5,3], ... 'DisplayNameLocation','None'), ... audioPluginParameter('Volume', ... 'Mapping',{'lin',0,2}, ... 'Style','rotaryknob', ... 'Layout',[3,5], ... 'DisplayNameLocation','Above'), ... audioPluginParameter('Enable', ... 'Style','vtoggle', ... 'Layout',[5,5], ... 'DisplayNameLocation','None', ... 'Filmstrip','vtoggle.png', ... %<-- 'FilmstripFrameSize',[150,100]), ... %<-- ... audioPluginGridLayout( ... 'RowHeight',[20,20,160,20,100], ... 'ColumnWidth',[100,100,100,50,150], ... 'Padding',[20,120,20,20]), ... ... 'BackgroundImage','background.png', ... 'BackgroundColor',[210/255,210/255,210/255]) end ... % omitted for example purposes end
Диафильмы не поддерживаются parameterTuner. Чтобы увидеть пользовательский интерфейс пользовательского плагина, необходимо развернуть плагин на DAW. Использование generateAudioPlugin для создания плагина VST.
generateAudioPlugin equalizerV4.......
В этом примере плагин был открыт в REAPER. Ниже показан скриншот пользовательского интерфейса в REAPER.
Похожие темы
См. также
audioPlugin | audioPluginGridLayout | audioPluginInterface | audioPluginParameter | generateAudioPlugin | parameterTuner