Learn how to use Dash Bio for next-gen sequencing & quality control. 🧬 Register for the Oct 27 webinar. # Dash MATLAB Example: Sine wave with two sliders

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+"&#183;sin(2&#183;&#960;&#183;"+F+"&#183;t)",...
'FontSize', 20)

fig = fig2plotly(gcf, 'offline', true, 'open', false, 'Visible', false);

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: 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