Learn how to use Dash Bio for next-gen sequencing & quality control. 🧬Register for the Oct 27 webinar.

Dash MATLAB Quickstart. Part II: Making your first App

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.

Once you have all the requirements installed on your machine, you can start making your first Dash Apps! In case you missed it, you can click here and follow the installation instructions.

In MATLAB®, create a new script and type the following code:

uiFigure = uifigure('visible', 'off');
uiGrid = uigridlayout(uiFigure);

% Title
title = uilabel(uiGrid, 'Text', 'Hello Dash!');

% Run the app.
startDash(uiGrid, 8057);

After running the code, you will see this message in the Command Window:

Dash is running on http://127.0.0.1:8057/

  • Serving Flask app ‘ main ’ (lazy loading)
  • Environment: production
    WARNING: This is a development server. Do not use it in a production deployment.
    Use a production WSGI server instead.
  • Debug mode: on

Open a new web browser and visit http://127.0.0.1:8057/. You should be able to see your first app running!

At the beginning of the script, define the elements of your App in a uigridlayout. For this simple App, we only have one element, which is a uilabel.

At the end, the function startDash() is called. The arguments of startDash() are the uigridlayout (uiGrid), and a number corresponding to the port where the App will be running.

This is the most basic app we can do, but there is a lot more! We can start by simply editing the text to make it bigger, bold, red and with horizontal alignment:

% Title
title = uilabel(uiGrid, 'Text', 'Hello Dash!');
title.FontSize = 24;
title.FontWeight = 'bold';
title.FontColor = 'red';
title.HorizontalAlignment = 'center';

Finally, we can customize our app by giving an extra argument to startDash. The third argument is a set of callbacks (we will talk about callbacks in other posts), and the fourth argument is theme, which is a string.

You can see the available themes by calling help startDash in the command window. For example, let’s set the theme to 'DARKLY':

startDash(uiGrid, 8057, [], 'DARKLY');

The app now looks like this:

That’s it! You can try to add another text to your first App (like a subtitle placed below Hello Dash!). Have fun!