Спроектируйте пользовательский интерфейс для аудио плагина

Аудио плагины включают вам к настройкам параметров алгоритма обработки в то время как передача потокового аудио в режиме реального времени. Чтобы улучшить удобство пользования, можно задать настроенный пользовательский интерфейс (пользовательский интерфейс), который сопоставляет параметры с интуитивно спроектированными и расположенными средствами управления. Можно использовать audioPluginInterface, audioPluginParameter, и audioPluginGridLayout задавать пользовательский пользовательский интерфейс. Можно взаимодействовать с пользовательским пользовательским интерфейсом в MATLAB® с помощью parameterTuner, или разверните плагин с пользовательским пользовательским интерфейсом к цифровой звуковой рабочей станции (DAW). Этот пример идет через ключевые возможности проектирования аудио плагинов путем последовательного улучшения основного аудио сменного пользовательского интерфейса.

Чтобы узнать больше об аудио плагинах в целом, смотрите Аудио Плагины в MATLAB.

Пользовательский интерфейс по умолчанию

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 задает, какие ячейки средства управления занимают на сетке пользовательского интерфейса. Можно задать 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

Layout и DisplayNameLocation заданный в audioPluginParameters сопоставляет соответствующие параметры с управляющей сеткой можно следующим образом:

Вызовите parameterTuner визуализировать пользовательский интерфейс equalizerV2.

parameterTuner(equalizerV2)

Фоновое изображение и цвет

Чтобы настроить фон вашего пользовательского интерфейса, задайте 'BackgroundImage' и 'BackgroundColor' в audioPluginInterface.

BackgroundColor может быть задан как короткая или длинная строка названия цвета или как триплет RBG. Смотрите ColorSpec (Color Specification) для деталей. Когда вы задаете BackgroundColor, цвет применяется ко всему пробелу на пользовательском интерфейсе кроме места, занятого средствами управления или BackgroundImage. Если управление или фоновое изображение включают прозрачность, то цвет фона показывает через прозрачность.

BackgroundImage может быть задан как PNG, GIF или файл JPG. Изображение применяется к сетке пользовательского интерфейса путем выравнивания левых верхних углов сетки пользовательского интерфейса и изображения. Если изображение больше, чем размер сетки пользовательского интерфейса, заданный в audioPluginGridLayout, затем изображение отсекается к размеру сетки пользовательского интерфейса. Фоновое изображение не изменено. Если изображение меньше, чем сетка пользовательского интерфейса, то незанятые области сетки пользовательского интерфейса обработаны как прозрачные.

В этом примере вы увеличиваете дополнение вокруг периметра сетки, чтобы создать пространство для логотипа MathWorks®. Можно вычислить общую ширину сетки пользовательского интерфейса как сумма всей ширины столбцов плюс левое и правое дополнение плюс интервал столбца (интервал столбца по умолчанию 10 пиксели используются в этом примере): (100+100+100+50+150)+(20+20)+(4×10)=580. Общая высота сетки пользовательского интерфейса является суммой всех высот строки плюс дополнение верха и низа плюс интервал строки (интервал строки по умолчанию 10 пикселей используется в этом примере):(20+20+160+20+100)+(20+120)+(4×10)=500. Чтобы определить местоположение логотипа в нижней части сетки пользовательского интерфейса, используйте 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)

Диафильмы пользовательского элемента управления

Чтобы использовать пользовательские диафильмы, задайте пары "имя-значение" 'Диафильма' и 'FilmstripFrameSize' в audioPluginParameter. Диафильм может быть PNG, GIF или файлом JPG, и должен состоять из систем координат, помещенных от начала до конца или вертикально или горизонтально. Диафильм сопоставлен с областью значений управления так, чтобы соответствующая система координат диафильма была отображена на сменном пользовательском интерфейсе как вы настройки параметров. В этом примере задайте диафильм 2D системы координат для Enable параметр. Как лучшая практика, размер каждой системы координат диафильма должен равняться размеру области, занятой параметром. 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 отображен ниже.

Похожие темы

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

| | | | |