Bootstrap Decorated Mortgage Calculator

This app is a simple mortgage calculator with a decorated edit field. It shows how Bootstrap framework can be used used to decorate apps.

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.

1. Download an HTML template using Bootstrap framework
2. Pick the contents you want to use inside the template
3. Save the contents as a seperate HTML file.
4. Use matlab function "uihtml" to load the HTML file you saved.

The downloaded HTML template for this app comes from "Nice Admin - Free bootstrap admin HTML template."

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 [e-mail] or [e-mail]