Tips and tricks #1: How to set output value
This article describes process of calculator creation and how to set output value.
This page exists due to the efforts of the following people:
 | Timur
|
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.
This is the first article in series of articles where I describe how to use the planetcalc platform to create your own calculators. Because this site, in essence, not just a collection of somewhat useful calculators, but also the platform - a web online tool that allows you to build calculators for your needs.
Hello, world!
Let's create simple "Hello, world" calculator.
To create a calculator, login to the site and click the profile picture link at the top right corner, 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.
In this platform, the calculator is the piece of code, written in Javascript, with the only purpose to get input values and produce output values. It could be anything, but in this example, you will get a user name and output the string "Hello, username!". The platform handles most of the inputs and outputs logic (format, validation, localization, etc.), while your task will be to write code for converting inputs to outputs by supplying the body for the Calculate function.
Now, you need to define your inputs. In this example, you need only one input - text field for username. So, hover the Input button and click on the Add input parameter menu item.
This will bring up the input editor dialog. Fill it like this:
| Field name | Value | Meaning |
|---|---|---|
| Name | Enter your name | Input label, as it appears on calculator's form, in our case, label for text field |
| Variable | username | Name of Javascript variable, which is used to hold input value |
| Description | Optional. If set, it is used to provide a help message when the mouse is over the field label. Leave it blank | |
| Type | String | The type of the input. The type also determines the lower part of the input editor form. Here set it to String |
| Default value | John | Default value for the field. It could be useful when you want to illustrate how the calculator works on inputs without the need for the user to enter anything |
Leave all other fields with their default values and press OK.
Note how the Calculate function signature was updated. Now it has the username variable, and by clicking on it, you can open the input editor dialog again, if you need to.
Now you need to define your outputs. Again, you need only one output in this example - for the "Hello, username!" message. Hover the Output button and click on the Add output parameter menu item.
This will bring up the output editor dialog. Fill it like this:
| Field name | Value | Meaning |
|---|---|---|
| Name | Message | Output label, as it appears on calculator's form, in my case, label for text field |
| Variable | message | Name of Javascript variable, which is used to set output value |
| Description | Optional. If set, it is used to provide a help message when the mouse is over the field label. Leave it blank | |
| Type | String | The type of the output. The type also determines the lower part of the output editor form. Here set it to String |
Press OK.
Note again how the Calculate function signature was updated. Now it also has message variable, and by clicking on it, you can open the output editor dialog again, if you need to.
Now you have described both inputs and outputs for your calculator and you need to provide code for the Calculate function.
Note that input variables can be used as-is, so, the username variable will be a simple string and by default will have a "John" value. However, the output variable is an object, and you can't simply assign something to it. To set the output value you need to use a special SetValue function.
Enter code like this:
message.SetValue("Hello, " + username + "!");Now the final part.
- Fill the Name form field below the Calculate function with the name of your calculator, in our case Hello, world.
- Fill the Tags form field with the tags related to the calculator for better search
- Click on Preview button
- Inspect calculator in the Preview mode. Note that in this mode appearance could be slightly different from the final result, so, check only calculator logic, not appearance.
- If everything is ok, click on the Publish button.
After publishing, the calculator will receive a persistent address and will be available for other users of the site. You can also embed it in articles. In our case, you can see it right below:
Comments