Dash MATLAB Example: Sine wave with two sliders

Dash R, MATLAB, Julia Dash for MATLAB®
1

New to Dash MATLAB®? See:

Follow this link to see more examples and learn how to use Dash for MATLAB®!

We encorage you to ask any questions you may have about Dash for MATLAB®. We are here to help! You can also share your ideas with the community.

In this example we are going to make an app with a plot and two sliders. The idea is to generate a Sine wave from two sliders: one to set the amplitude and another for the frequency.

So, the first thing we need to define in our app is an initial figure. Let’s do this by plotting a Sine wave with amplitude and frequecy equal to 1:

% Initial Plot
ax = axes(uiGrid);
ax.Tag = 'my-plot';

In this case we define our elements in a uigridlayout.

The ax.Tag is needed here because we are going to use callbacks to update the plot. This is just an id, where the name can be anything you want; just make sure the id is unique.

The next thing we need are the sliders: one for the frequency and another for the amplitude. The code for the frequency slider is:

% Frequency
frequencySlider = uislider(uiGrid, 'Tag', 'freq-slider');
frequencySlider.Value = 1.5;
frequencySlider.MajorTicks = (0:0.3:3);
frequencySlider.Layout.Row = 2;
frequencySlider.Layout.Column = [1, 6];

We use uislider to define our slider, and give properties like Tag (the id of the slider which will be used in our callbacks), an initial value, ticks and positioning using Layout.Row and Layout.Column.

Now for the callbacks, we have the sliders as inputs, and the plot as output:

% Define the callbacks
args = {...
    argsOut('my-plot', 'figure'),...
    argsIn('freq-slider','value'),...
    argsIn('ampl-slider','value')};  
handle = 'updateGraph'; % Callback function

The handle is the name of the callback function:

function plotlyFig = updateGraph(frequency, amplitude)
    A = double(amplitude);
    F = double(frequency);

    figure('visible', 'off');

    t = (0:0.02:2*pi);
    plot(t, A*sin(2*pi*F*t), 'LineWidth', 1.5);
    xlabel(gca, 'Time', 'FontSize', 16);
    ylabel(gca, 'Amplitude', 'FontSize', 16);

    title(A+"·sin(2·π·"+F+"·t)",...
        'FontSize', 20)

    fig = fig2plotly(gcf, 'offline', true, 'open', false, 'Visible', false);
    addtheme(fig, 'plotly_dark');
    
    plotlyFig1 = {struct('data', {fig.('data')}, 'layout', fig.('layout'))};
    plotlyFig = char(jsonencode(plotlyFig1));
end

This callback function has two arguments: frequency and amplitude. This arguments comes from the sliders. Inside this function we plot a sine wave with an amplitude and frequency taken from the inputs. Then we transform this figure to plotly using fig2plotly. The last two lines are needed in every function where a graph is handled (we need to jsonencode the output).

The complete code for the main script is:

terminate(pyenv);
clearvars;

uiFigure = uifigure('visible', 'off');
size = [12, 12];
uiGrid = uigridlayout(uiFigure, size);

% Initial Plot
ax = axes(uiGrid);
ax.Tag = 'my-plot';

% Frequency
frequencySlider = uislider(uiGrid, 'Tag', 'freq-slider');
frequencySlider.Value = 1.5;
frequencySlider.MajorTicks = (0:0.3:3);
frequencySlider.Layout.Row = 2;
frequencySlider.Layout.Column = [1, 6];

frequencyLabel = uilabel(uiGrid, 'Text', 'Frequency',...
    'FontSize', 16, 'FontWeight', 'bold', 'FontColor', 'white');
frequencyLabel.Layout.Row = 3;
frequencyLabel.Layout.Column = 4;

% Amplitude
amplitudeSlider = uislider(uiGrid, 'Tag', 'ampl-slider');
amplitudeSlider.Value = 3;
amplitudeSlider.MajorTicks = (1:1:10);
amplitudeSlider.Layout.Row = 2;
amplitudeSlider.Layout.Column = [7, 12];

amplitudeLabel = uilabel(uiGrid, 'Text', 'Amplitude',...
    'FontSize', 16, 'FontWeight', 'bold', 'FontColor', 'white');
amplitudeLabel.Layout.Row = 3;
amplitudeLabel.Layout.Column = 9;

% Define the callbacks
args = {...
    argsOut('my-plot', 'figure'),...
    argsIn('freq-slider','value'),...
    argsIn('ampl-slider','value')};  
handle = 'updateGraph'; % Callback function

callbackDat = {args, handle};

% Run the app
startDash(uiGrid, 8057, callbackDat, 'SOLAR');

If everything went well, you should see an app like this:

sinFreqExample

Change the frequency and amplitude and see the changes in the plot!

In this example we are setting the phase of the sine wave to be zero. You can add a third slider to change the phase too. You will need to include this new parameter in the plot function, as well as in the callbacks definitions. Give it a try!

1 Like