Open Dev Kit Documentation :: Demo - Calculator

The Calculator demo is a GUI application for performing basic arithmetic operations. It utilizes resizing Containers to ensure a structured and dynamic layout. This template is ideal for learning how to create and organize GUI controls, as well as scripting logic.

How it Works

The Calculator demo organizes Buttons and Labels within Containers, which maintain scalability and alignment across various screen/window resolutions. Operations are managed mainly by the DoCalculation and UpdateCalculation functions, both of which use global variables among other APIs and scripting logic to process user inputs.

UI Theming with Stylesheets

The Calculator demo utilizes a "Theme" Stylesheet to define the appearance of its UI elements, such as Buttons, Labels, and Textboxes. Stylesheets are CSS Resources designed to control the visuals of UI elements. They define the colors, fonts, borders, margins, and more for a consistent design across the project.

In this case, the calculator's UI is styled using a custom Stylesheet. This means any changes to the Stylesheet (e.g. font color) affect all corresponding elements in the project dynamically. Attempting to modify the UI appearance directly in the editor (e.g. changing a Button's color) is not recommended, as the Stylesheet will simply override those changes. To make permanent modifications, the Stylesheet itself should be editted.

You may create a new Stylesheet or modify an existing one. For simplicity, it's recommended to click Import from Editor Theme which provides a default setup. Then, you can simply tweak specific parameters, like Button effects, font sizes, or borders. To create a new Stylesheet, click the Create Resource icon in Tools > Resources, specify a name and then select Stylesheet under the General category.

Adding a New Operation: Factorial ("n!")

Follow these steps to add a factorial operation to the Calculator:

1. Update Global Variables:
   1. Open Tools > Globals / API.
   2. Add "Factorial" as a constant to the MathOperationType enumeration.
2. Modify "DoCalculation" Function:
   1. Select DoCalculation, then click Edit Function Script.
   2. Add a new branch to the Switch Branch node at the top by clicking the + right below Values.
   3. Set the Value to App.MathOperationType.Factorial.
3. Implement Factorial Logic:
   1. Add two local variables for keeping track of the result and for loop iteration.
      • Click Add below Local Variables, set type to Integer and name it res. This will keep track of the result.
      • Click Add below Local Variables, set type to Integer and name it i. This will keep track of the loop's iterations.
   2. Initialize res to 1 using the Change function (found under the App category or by using the search filter).
      • Identifier = res
      • Value = 1
   3. Use a Numeric Loop function for factorial calculation (found under the General category or by using the search filter).
      • Variable = i
      • Starting Number = 2
      • Ending Number = App.Input1
      • Increment/Decrement Amount = 1
   4. Inside the loop, multiply res by i.
      • Identifier = res
      • Value = res*1
   5. Outside the loop, assign res to App.Input1 with a Change function.
      • Identifier = res
      • Value = App.Input1
4. Create the Factorial Button:
   1. Open the Calculator Window.
   2. Copy+paste the existing power squared Button (x²).
   3. Rename the cloned one appropriately, and change its displaying text to the factorial symbol: n!.
   4. Update the Button's Clicked Event:
      • Set Change App.CurrentOperator's Value to App.MathOperationType.Factorial.
5. Test the Application:
   Run the project to verify the new functionality works as expected.

If you think anything is missing, please feel free to: submit documentation feedback on this page