Tips and tricks #5: How to show/hide input and output controls in a calculator

Tips and tricks series

• Tips and tricks #1: How to set output value
• Tips and tricks #2: How to make calculator translatable into different languages
• Tips and tricks #3: How to make calculator with custom errors
• Tips and tricks #4: How to make calculator with table output
• Tips and tricks #5: How to show/hide input and output controls in a calculator
• Tips and tricks #6: How to make calculator with virtual keyboard
• Tips and tricks #7: How to make calculator with SVG image map
• Tips and tricks #8: How to reuse existing calculator
• Tips and tricks #9: Big numbers
• Tips and tricks #10: Files, long calculation mode
• Tips and tricks #11: Dynamic table columns
• Tips and tricks #12: Long (infinite) calculations
• Tips and tricks #13: Bitmaps and Pixel manipulation
• Tips and tricks #14: How to use a masked input

This article may rely on knowledge you should get from previous articles, so you may want to check them first.

Newton's Second Law

In this article, we will create our next calculator, which will output the calculation results using Newton's Second Law formula. We will create a single calculator for computing force by acceleration and mass and computing acceleration by force and mass, and for computing mass by acceleration and force. To achieve this, we will show/hide input and output controls depending on what exactly we are computing.

To create a calculator, log in to the site, click the profile picture link at the top right corner, and then choose  Personal. This will bring you to the Personal section of the site with a new top-left  menu. In the top left menu, click the  My calculators item.

This will open the My calculators page. Here, press the  button in the table header. This will open the calculator editor page.

Add the following input parameters:

Now add the additional parameter to choose what to calculate. Fill it like this:

After you change the type to Dropdown list, the bottom part will show the List items editor. Using the top part of it, add three values into the list by filling Value and Display name fields and pressing the Add button.

Press Ok to close input editor

Now, add the following output parameters:

We have described our calculator's inputs and outputs, so we only need to write code to do the calculations and control the visibility of inputs and outputs.

Let's start with calculations. Here we will use our option variable to choose the formula. option variable holds the string literal equals to the Value of the selected list item.

Add this code into Calculate function:

switch(option){
    case "force":
        out_force.SetValue(accel*mass);
        break;
    case "accel":
        out_accel.SetValue(force/mass);
        break;
    case "mass":
        out_mass.SetValue(force/accel);
        break;
}

Now we need to control visibility. This is done using the Display function, located just below the Calculate function. Inside this function, all inputs and outputs are available as objects. To get input value from the input object, you should use the GetValue member function with no parameters. To control either input or output visibility, you should use the Display member function, which accepts a single true/false value. Ok, the code will be self-explaining.

Add this code into Display function:

force.Display(option.GetValue() != "force");
accel.Display(option.GetValue() != "accel");
mass.Display(option.GetValue() != "mass");
out_force.Display(option.GetValue() == "force");
out_accel.Display(option.GetValue() == "accel");
out_mass.Display(option.GetValue() == "mass");

Here we check the value of option input to decide whether the control should be visible. Display function is called before Calculate, so it is executed first after a user changes the input.

Click on the Preview button. By default, you should see it with Acceleration and Mass inputs, and Force output. Changing the value of calculate drop-down changes the available inputs and output. If everything is working as expected, Publish the calculator. I embed it in this article below.

Newton's Second Law

calculateForce Acceleration Mass

Force, N

Acceleration, m/s2

Mass, kg

Calculation precision

Digits after the decimal point: 1

Calculate

Force, N

 

Acceleration, m/s2

 

Mass, kg

 

 Link  Save  Widget