New to Dash MATLAB®? See:
- About the Dash for MATLAB® category
- Dash MATLAB® Quickstart. Part I: Download and install
- Dash MATLAB® Quickstart. Part II: Making your first app
- Dash MATLAB® Quickstart. Part III: App layout with bar graph
- Official Dash docs for MATLAB®
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
At the end, the function
startDash() is called. The arguments of
startDash() are the
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
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!