Simple Mortgage Calculator Decorated with Bootstrap Framework
The app "BootstrapDecoratedMortgageCalculator.mlapp" is a simple mortgage calculator with a decorated edit field.
This app shows how an HTML template based on Bootstrap framework can be used to decorate apps.
The calculator script is based on MATLAB app example "Mortgage.mlapp" which can be accessed by typing "openExample('matlab/MortgageCalculatorExample')" at MATLAB Command Window.
Left image is the original "Mortgage.mlapp." Right image is "BootstrapDecoratedMortgageCalculator.mlapp."
As the image shows, "BootstrapDecoratedMortgageCalculator.mlapp" has edit field design elements not possible with the MATLAB function "uieditfield" such as rounded box corners & different border colors.
This is done by following steps.
- Download an HTML template using Bootstrap framework
- Pick the contents you want to use inside the template
- Save the contents as a seperate HTML file.
- Use matlab function "uihtml" to load the HTML file you saved.
Amongst the files, the contents inside "forms-elements.html" were picked to decorate the app.
The picked contents were saved as "plotInputCard.html."
The "assets" folder contains css & js files that shape the template, so it is included as well.
Additional functions were written in "BootstrapDecoratedMortgageCalculator.mlapp" & "plotInputCard.html" in order to send data from the HTML file to MATLAB app & vice versa.
They are written inside "function LeftPanelHTMLDataChanged(app, event)" in the app & "function setup(htmlComponent)" in the script of HTML file.
The document on "uihtml" has details on how to modify them.
Report any problems or issues via firstname.lastname@example.org or email@example.com