Dash MATLAB Quickstart. Part II: Making your first App

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.

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!

HelloDash1
HelloDash1890×610 7.45 KB

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';

HelloDash2
HelloDash2917×606 8.91 KB

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:

HelloDash3
HelloDash3891×608 7.68 KB

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

2

I must have missed something. I already had python and plotly installed, I installed dash and dash-bootstrap-components. I installed dash and plotly for Matlab. In trying to debug this myself I also installed dash-html-components and dash-table. I’m still getting these warnings and errors:

sys:1: UserWarning: 
The dash_html_components package is deprecated. Please replace
`import dash_html_components as html` with `from dash import html`
sys:1: UserWarning: 
The dash_table package is deprecated. Please replace
`import dash_table` with `from dash import dash_table`

Also, if you're using any of the table format helpers (e.g. Group), replace 
`from dash_table.Format import Group` with 
`from dash.dash_table.Format import Group`
Unable to resolve the name py.dash_bootstrap_components.Container.

Error in startDash (line 33)
    app.layout = addLayout(py.dash_html_components.Div(py.dash_bootstrap_components.Container(ui_dash)));

Error in test_app (line 8)
startDash(uiGrid, 8057);

What am I doing wrong?

3

Hello! About the warnings, we just made a new release which takes care of that. You can download the latest version here: Release Fix warnings - 0.0.3 · plotly/dash_matlab · GitHub

Please try this new release. If you are still getting the same error about dash_bootstrap_components, maybe you have that package installed in a different Python version (other than 3.7 for example).

If you run pyenv on your Matlab command window, what is the output? And which version of Matlab are you using?

4

Thanks, I’ll try that!

I’m using Matlab 2021b and when I run pyenv I get this:

pyenv

ans =

PythonEnvironment with properties:

      Version: "3.8"
   Executable: "C:\Users\dcharles\AppData\Local\Continuum\anaconda3\python.EXE"
      Library: "C:\Users\dcharles\AppData\Local\Continuum\anaconda3\python38.dll"
         Home: "C:\Users\dcharles\AppData\Local\Continuum\anaconda3"
       Status: Loaded
ExecutionMode: OutOfProcess
    ProcessID: "1764"
  ProcessName: "MATLABPyHost"
5

Warnings are gone with the new version, but I’m still getting the error.
Here are the dash versions I have installed:

packages in environment at C:\Users\dcharles\AppData\Local\Continuum\anaconda3:

Name Version Build Channel
dash 2.0.0 pyhd8ed1ab_0 conda-forge
dash-bootstrap-components 1.0.0 pyhd8ed1ab_0 conda-forge
dash-html-components 2.0.0 pyhd8ed1ab_0 conda-forge
dash-table 5.0.0 pyhd8ed1ab_0 conda-forge

6

Ok I see what the problem was. I was using an older version of bootstrap. When I updated to the latest version, 1.0.0, the same problem as you arised.

Please check with this latest release, which fixes that error: Release Updated bootstrap version - 0.0.5 · plotly/dash_matlab · GitHub

Let me know if you can run the apps now. If you have any other questions, don’t hesitate to ask!

7

Thanks, I no longer get the error and the demo app runs.

Now, how do I stop it? Matlab is “Busy” and I can’t do anything else. Do I have to restart Matlab every time I make a change?

8

Excellent!

For Windows:

Open a Windows PowerShell and enter the following:

netstat -ano | findstr :8057

where 8057 is the port number currently running. Then find the PID (Process Identifier). For example, your PID could be 10476. Keep in mind that this number can be different every time you start a new server (even if it is the same port number). To stop the server, run:

taskkill /PID 10476 /F

For Linux:

pkill -9 MATLABPyHost