Build, Test, and Deploy a Custom Calculator with RMC Pro

The core of Responsive Mortgage Calculator Pro is it’s ability to easily accept data, run complex calculations, and display the results to the user. The preset calculators provide that ability and using them as the basis for customization will keep your troubles to a minimum.

But what about creating something unique not already included in the presets? If you are modifying text, this will probably be straightforward and won’t cause any issues, but if you are building a custom calculator with a unique combination of processors, calculators, and sub-calculations, you may need to build and test in a development or staging environment before deploying to a live site.

Create a Calculator

Adding a calculator to RMC Pro is perhaps the simplest aspect of customization. From the RMC Pro page, locate the link titled Create a Calculator and click it. The form that is displayed allows you to choose an existing calculator as the basis for a new one, or to start with a blank with no interface elements or processor. Pick your poison, name your calculator, and click Create Calculator. You’re on your way.

Enable Debugging

RMC Pro includes a setting to display processing information when it is run. To enable debugging messages, go to RMC Pro > Settings > CSS & Development, check the box for Debugging, and click the Save button at the bottom of the page.

When you are testing your calculator, you can view log information from each processor as it is run. If JavaScript is enabled, then messages will be displayed in the console whenever you run a calculation. If JavaScript is disabled, or the page is reloading for some reason, log messages will be displayed directly on the page. Messages tell you which processor is being run, where a processor is interrupted due to a lack of data, and where failures occur.

Of note, Processors, added in the Processors section of the Edit Calculator screen, will run until there is one that is missing data. This is intended to happen if a Processor requires a value from a Calculator that hasn’t yet run. If that happens, the Calculators begin running until there is one that is missing data, causing a switch back to Processors. This continues until all Processors and Calculators have run, or a Processor and Calculator are both unable to finish processing. The latter constitutes a failure: a piece of data wasn’t properly supplied. Hence, the need to debug!

Deploy a Custom Calculator

Once you have a working calculator, you can pass the settings between websites by exporting the calculator, creating an add-on plugin to register the settings file as a new preset, and activating the new add-on plugin on any website alongside the main RMC Pro plugin.

Exporting Calculator Settings

You can enable exporting by going to RMC Pro > Settings > CSS & Development, check the box for Exporting, and click the Save button at the bottom of the page. This will trigger a new box to be displayed on the Edit Calculator screen.

Navigate to a calculator that you want to export by clicking RMC Pro, finding a custom calculator and clicking the edit link. On the Edit Calculator screen, at the bottom right of the screen, you will see a box titled Export. Click the Export Settings link to trigger the exporting process. Exporting creates a new file containing the settings for the calculator in JSON format, and the file will be automatically saved to the Downloads folder on your computer.

Creating a Preset Add-On Plugin

To get your custom calculator onto another website, you’ll need to use the downloaded file as a preset calculator. In order to do that, you will need to create a plugin to register the preset and load the settings file. You can do this yourself by adding an action on the rmcp_add_presets action hook, or you can download my example RMC Pro Preset plugin and make some minor tweaks. I recommend the latter. Even if you know what you’re doing, you can easily reuse the callback code from the example.

Get the RMC Pro Preset plugin on Github

The example plugin is fully functional. What you will need to do is open the file inc > json-preset.json, erase the contents of the file, and paste in the contents of the settings file you previously exported from your RMC Pro Calculator. That’s it.

What you should do is open the rmc-pro-preset.php file and edit some text. Changing the WordPress plugin information at the top of the file will help you recognize the plugin on the WordPress Plugins screen. Beyond that, you should also change the class name RMCP_Example_Preset and function name rmcp_example_preset to something more unique. This will help prevent code clash if you are using multiple presets deployed in this way.

Finally, locate the add_preset method that defines the calculator $id and $title variables. The id is the string that will be used to identify this calculator in code, such as inside the RMC Pro shortcode. This can contain only letters, numbers and the underscore(_) – no spaces. The title is the human readable name of the calculator that will be displayed in the WordPress Admin wherever this calculator is referenced.

Deploy Your New Preset

You should now have a working preset calculator packaged as an add-on plugin to RMC Pro. Upload it to your site and activate it just like you would any other WordPress plugin. When you navigate to the RMC Pro Calculators list, you should see your new calculator in the Preset Calculators section of the page. It will have it’s own shortcode and it will also appear in the list of base calculators in the Create a Calculator form.

Add Ons and Building the RMC Pro API

One of the major reasons for creating Responsive Mortgage Calculator Pro has been to fulfill the many requests I’ve had for specialized or unique features. Customizability is central to RMC Pro, but there are still limitations imposed by the basic purpose of the plugin. The plugin essentially takes input using an HTML form, runs the data through processors and calculators, then creates structured output in the form of text and HTML. While the interface, processing, and output are all very customizable, there are limits.

Of the feature requests I’ve received, there are a few that I just can’t include in the core plugin. Sliders, for example, is an add on for RMC Pro that turns the inputs into sliders to more easily adjust the input values. Because this is a specialized feature that isn’t actually about mortgage and loan calculations, it doesn’t make sense to include it in the core plugin. And because it’s an add on, I’ve been able to spend more time honing it’s functionality, creating an interface for designing sliders, and integrating it as an extension to the core plugin.

WordPress provides very useful APIs that have allowed me to add extensions, and I’ve coded in a significant number of custom API components that add on plugins can easily hook into. This allows access to modifying the plugin’s behavior with add ons.

On the administrative side, I’ve added the ability to register new preset calculators. Now, any add on can include a preset calculator to demonstrate it’s settings and behaviour. This also opens the door for easily creating custom preset calculators so that I can more easily support you in creating what you need.

I’ve also created APIs for the calculator editing process. Each editing section, each element, and each element setting is registered through a custom API. Sliders is integrated into RMC Pro by adding new settings to input elements so that you can set slider specific information. Another extension I’m working on, a contact form, adds a completely new section to the editing screen and general settings to govern the behaviour of the contact form as a whole. This is all done through the RMC Pro API, which, once again, makes use of the WordPress action and filter API.

On the front end, I’ve completely recreated the way that the interface is built and processors run. Every interface element is now registered through a custom API, allowing for infinite extendability. If you have an idea for a new input type or means of displaying the results, you can focus on creating the functionality for it to display, then register it using the API, and let RMC Pro handle the rest. Custom processors and calculators are also more feasibly to implement and simple to register through the API.

All this and more is included in the latest version of Responsive Mortgage Calculator Pro.

Responsive Mortgage Calculator Pro Has Been Released

Happy New Year and happy RMC Pro! I managed to squeak out the release just before Christmas, leaving me with some free time to work on the next project.

It’s been a journey getting to the release. Part way through my initial development process, I realized the design was unfeasible. The original plan was provide a way to create inputs and set constants for calculation values, then to interpret those values based on a huge list of settings. It was all very confusing and wasn’t going to allow for the customizations and flexibility that was being requested. Back at the drawing board…

I cannot predict all the use cases for RMC Pro, but I decided to redesign the setup process, and the entire functioning of the calculator, to allow for you to decide how you want the calculator to function. Needs change depending on your country, state, province, and city. Setting something like a minimum down payment, or even the necessity for a down payment field, is your choice. Adding calculations for mortgage insurance, land transfer tax, or property tax is baked in and entirely customizable to your needs. If you need calculations for different regions, you can set it up in one calculator or create separate calculators. Whatever you need.

There are two preset calculators that demonstrate some of the possibilities and provide a starting point for your own customizations. When you create a calculator, you can choose to start from one of the presets, from nothing, or from one of your own creations.

Get Responsive Mortgage Calculator Pro

RMC Pro Roadmap

During the development process, I began creating an API in order to hook into calculator settings and data. This means that the calculator settings are extensible, which is great if you to create custom elements, processor and calculations. While this is still a work in progress, it will mean that the plugin can form the basis for just about any calculation process you want, and that you can add new form fields, HTML elements, and calculation results as you see fit. Customization just got a lot easier.

I’ve already begun work on an extension. Sliders will be released in a couple days. It’s an add-on that transforms form inputs into sliders. On the back end, you design your sliders choosing sizes, colours, borders, etc. The Sliders plugin adds new fields to the calculator, allowing you to enable sliders for each input you want, and to choose the design you want to use. When you load the calculator, the form fields are automatically replaced with your slider design.

Try out Sliders.

Dotting the i’s on RMC Pro

I have official completed a working version of Responsive Mortgage Calculator Pro. For everyone who has been waiting for all those additional features, thank you for your patience.

What’s in the Box

As promised, there are plenty of new features over and above the free version. Essentially, it is a shortcode and widget that allows you to display and run your own custom loan and payment calculators.

On the back end, there is a tabbed admin page with sections for building and managing calculators, currency formatting, and CSS and development settings. The meat of the back end is the calculator creation interface. I’ve made a concerted effort to make it look and feel like WordPress, taking cues from the Menus page and relying heavily on jQuery UI to keep things compact and to manage element ordering.

If You Build It…

You design calculators using input fields, text, submit buttons and results text. You can add processors to validate your data. You can set up loan and payment calculations to perform the mortgage calculations you want. You can add custom cost calculations to payment or loan calculations.

Crossing the t’s

I want to give you a really great and reliable piece of software, so I’m about to start a testing cycle. The calculations need to work properly and as designed. The plugin needs to function in different environments, on different devices, and with different versions of WordPress.

I also need to get the business end sorted. That means including a reasonable licensing agreement, sufficient support, and some decisions about payment models – one time fees and subscription fees – and what that means for maintaining a high quality product that keeps up with changes to WordPress core.

Dead Simple Shortcode Detection

Shortcode detection in WordPress plugins is essential for loading scripts and styles. When I launched Responsive Mortgage Calculator last October, I searched the internet looking for a nice way to get my JavaScript and CSS files to load. Because that’s what you do.

Background

The WordPress API offers really nice methods for loading your scripts and styles. Definitely use wp_register_script() and wp_register_style. This should go without saying. You are making life easier for developers who want to use your plugin in ways you can’t anticipate, and by registering your scripts and styles they can be loaded later with calls to wp_enqueue_script( ‘your-script-handle’ ) and wp_enqueue_style( ‘your-style-handle’ ). Please do this.

Let’s assume you have a shortcode and you have a script that you want to load. You could just enqueue the script which means it will always load, but that’s just bad form. You’d be forcing the end user to always download the script, even if it’s not needed on a page. The solution is to figure out if the shortcode is included on a page, and to only loaded if the shortcode is there. There are different methods for this including the has_shortcode() function defined by WordPress. This one makes things nice and simple.

Detecting Nested Shortcodes

Of course, nice and simple doesn’t always do the trick. The has_shortcode function does a nice job in most cases, but, as I’ve found out, the method it relies on to find the shortcode won’t work if the shortcode is nested within another shortcode. Why is this important? The single biggest issue I’ve had with Responsive Mortgage Calculator is the failure to load the JavaScript file when the shortcode is used with Visual Composer.

From what I’ve seen, Visual Composer and similar themes frameworks create layouts by generating shortcodes for each section of the layout. Your plugin shortcode is then placed inside one of these section, making it a nested shortcode. The problem with the scheme that has_shortcode uses to detect your shortcode is that it relies on an internal shortcode regular expression generator, and the generated expression is structured to only detect top level shortcodes, not nested shortcodes.

Since has_shortcode is insufficient for detecting nested shortcodes, I’ve started using a very simple solution: create a regular expression for the shortcode and run it through preg_match(). Let’s pretend the shortcode is ”my-shortcode”. I’m embedding this in a function so you can copy and paste it as is.


function my_plugin_detect_shortcode() {
	global $post;
	$pattern = ‘/\[my-shortcode.*?\]/i’;
	return preg_match( $pattern, $post->post_content );
}

I’ve used a variable to define and store the pattern, but this is more for clarities sake. The regex pattern could just as easily be defined in the preg_match function to save a line.

How it Works

First, the $post object is declared as global to access the post content within the function. This is a convenience, and, given the option, it would be better form to pass the post content to the function as a variable. I’m assuming you don’t have that luxury.

Second, the regular expression is defined. For simplicity, I’ve assumed only one shortcode. The square brackets need to be escaped at the start and end of the regex. The shortcode follows directly after the first square bracket. The expression “.*?” is a non-greedy match, meaning that it will detect zero or more characters up until the closing bracket. This ensures that you are detecting a well-formed shortcode. Finally, the lowercase “i” makes sure that the match is case insensitive, just in case someone has typed in some capital letters for the shortcode.

Lastly, return the result of the preg_match function. It’s worth looking at the php manual to make sure you’re getting what you want. It will return 1 if there is a match, 0 if there is no match, and FALSE if an error occurred. That’s usually good enough for a truthy or falsey test and to decide to load your scripts and styles.

Abstracting Loan Fees for Modular Cost Calculations

In the process of developing Responsive Mortgage Calculator Pro, a significant hurdle has been defining a flexible system that allows for a variety of cost calculations beyond the basic mortgage or loan calculation. The system that I’ve decided on in the current iteration of RMC Pro is to provide a means to define additional cost calculations that can then be associated with a mortgage calculation. The specifics of that process are a matter of UX and may change once I’ve had a reasonable amount of feedback. The specifics of the actual cost calculations are more important.

Defining Cost Calculation Types

My intent is to create a single method for defining costs, and within that method to allow for enough flexibility to create the different cost types. My research has lead me to define four main methods by which costs are calculated.

Flat Fees
This includes things like lawyer’s fees and inspections.
Fee Rates
This is a fee that is a percentage of property value, like property tax, or loan amount, like an origination fee.

Ranged Fees or Rates
Some fees vary depending on the property value, mortgage amount, or loan to value (LTV). A simple version of mortgage insurance is an example of this, wherein the calculated fee is a percentage of mortgage amount and the percentage is determined by the LTV.
Marginal Fees and Rates
Like income tax, fees can be calculated at different rates for different portions of the loan amount or property value. Land Transfer Taxes are often like this, and might include flat fees for some ranges, percentage rates over other ranges, and are generally cumulative.

RMC Pro allows you to define as many of these costs as you want in whatever combination you need. Do you need something that isn’t defined here? Let me know and I’ll add it to the feature request list.

Now Testing Server-Side Calculations for RMC Pro

Over the past week, I’ve been working on the foundation for the actual calculation of mortgage payments with Responsive Mortgage Calculator Pro. It sounds like it should be fundamental to the development, but a lot of infrustructure needed to be in place to get to this point.

I made two significant promises with the Pro version that I’ve been ignoring in the Free version.

  1. The calculator needs to function in the absence of JavaScript.
  2. Multiple calculators need to work even if they are on the same page.

The set up is all very abstract, but the core idea is that each calculator is set up with a unique identifier that is submitted back to the server. During the set up process, the plugin looks for a submission, and, if it finds one, looks for the identifier, then matching the identifier to the correct calculator. It’s probably overkill, but I’m future-proofing against internal conflicts and major refactoring. I’m also making it easy to have multiple calculators side by side that may run the same or different calculations. It would be very confusing to submit a calculation on one calculator and have the result show up on another one – this being an issue I’d hope to fix in the free version at some point.

The calculation itself is fairly simple right now, basically being on par with the free version. Don’t expect to see anything too fantastic for a little while. I’ll be working through use cases with different types of calculations, posting them to the demo site as they become functional. I’m intent on demonstrating simple affordability calculations as a core feature, with a good possibility of expanding the functionality to incorporate complex affordability calculations. Keeping in mind that the fields are very abstracted, the set up process might involve a fair bit of box ticking and an understanding of how to calculate, well, whatever it is you want to calculate. I’m making an effort to not prescribe your calculations, but only providing a tool to efficiently construct a good looking and easy to use calculator purpose built for mortgage and loan math.

While the present calculation is still fairly simple, the flexibility of the UI is already vastly improved. A core feature absent in “RMC Free” is flexibility with the types of inputs you can display and the values you might want to set. For expenses, payments, interest rate, and loan term (or amortization period), you can now display the input as a text box to freely edit the value, a select input if you need to create a defined set of values, or a hidden input for a constant, non-editable value. There are use cases and examples for each of these settings, but I’ll let you use you imagination. Or you can keep an eye on the Responsive Mortgage Calculator Pro demo site to get some idea of its flexibility.

Nailing down a beta version of RMC Pro

During August and the first half of September, I laid out the internal, back end components of Responsive Mortgage Calculator Pro. A decent amount of brainstorming went into creating the list of features and into structuring calculator creation. Calculator creation is the core of the customization process, and the majority of the feature set is accessed within this process.

Calculator creation is accomplished using an interface that is inspired by the native Menu settings page. Rather than adding menu items, you would instead select the fields you want in your calculator. Fields that are added can be customized based on the core functionality of that field.

The approach I’ve used for this project is to maintain as much abstraction as possible when it comes to fields, and specifically, in generating the settings panels for those fields. In the interest of code reuse and maintainability, all the settings for a field type are held in separate files that return arrays. This keeps things really straightforward because each array defines settings groups with sub-arrays that define specific settings. For example, the file <code>array-expense-inputs.php</code> returns an array that defines the field type <code>expense</code> and an array of sections for the form. These sections includes settings that I think are most navigable and cohesive, like “Text Settings” or “Calculation Settings”. Within these groupings are the field definitions, such as “Label” which defines all the information necessary to create and validate the field for creating a label for an expense field in the calculator.

This set up is very useful for development – all I need to do to add or remove a feature is to add or remove a field definition array from one of these files. In the current phase of development, I am commenting out extraneous features in order to develop to the core functionality to actually use the calculator on the front end of a website. This is important in developing a usable beta version – these arrays provide a list of features that can be added as needed to satisfy user needs, sort of a living product backlog, while still being able to focus on the core feature set and use cases.

I am currently demoing the calculator during the development process. <a href=”/contact”>Contact email</a> if you want to have a look at the current stage of development and provide your feedback. I’m looking forward to a beta release in early November.

Swapping a Select Box for a Slider

Alas, my Mac is still in for repair, leaving me with my iPad to continue development work. Earlier this week, I posted a prototype of a loan calculator where the inputs had been switched out with sliders. This works great for the inputs that take numerical values, ie. loan amount, interest rate, and loan term. These components can be applied to my Responsive Mortgage Calculator plugin almost as is. The down payment field will take a little more thought – this is currently a numerical value but could also be a percentage, and what happens if the numerical value is higher that the total amount… But I digress.

The remaining piece of the puzzle for the loan calculator is in the selection of the payment period. I could just leave this as a select input, and that is certainly an option, but I would lack cohesion with the rest of the interface. What I’ve done is to create a slider input that translates the select options into discreet slider settings. The slider functions pretty much the same as the regular input sliders – you can touch it and move it, and it will slide smoothly. The selected option changes as the slider moves from one option range to another option range.

At present, I’ve only tested it on an iPad, so it only works for touch screens. You can try the slider on CodePen to see how it works.

Prototyping a Slider Interface for a Loan Calculator

My computer went down last week with the Apple MPB GPU failure. This has made things a little challenging for development. My iPad has suddenly become my development machine. This is forcing me to work on smaller projects, getting ideas fleshed out for the upcoming Responsive Mortgage Calculator Pro release, and starting the prototyping process for a slider interface add on.

Check out the Protoype