Bootstrap Decorated Mortgage Calculator

Version 1.0.1 (7.75 MB) by Jinwook Ma
This app is a simple mortgage calculator with a decorated edit field. It shows how Bootstrap framework can be used used to decorate apps.
16 Downloads
Updated 10 Mar 2023

View License

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.
Before&After Image
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 js.lee@csi-vision.com or jw.ma@csi-vision.com

Cite As

Jinwook Ma (2024). Bootstrap Decorated Mortgage Calculator (https://www.mathworks.com/matlabcentral/fileexchange/124296-bootstrap-decorated-mortgage-calculator), MATLAB Central File Exchange. Retrieved .

Jungsoo Lee (2023). Bootstrap Decorated Mortgage Calculator (https://www.mathworks.com/matlabcentral/fileexchange/124296), MATLAB Central File Exchange. Retrieved March 10, 2023.

MATLAB Release Compatibility
Created with R2022b
Compatible with R2020b to R2022b
Platform Compatibility
Windows macOS Linux

Community Treasure Hunt

Find the treasures in MATLAB Central and discover how the community can help you!

Start Hunting!
Version Published Release Notes
1.0.1

Updated "Cite As" section.

1.0.0