Config File
The config.json file is an essential component of developing a Quick Design framework. This file contains both meta information that describes the calculator as well as input variable information that describes the inputs available in your calculator.
The config.json file serves as the foundation for your calculator's user interface which is generated directly from the file. You can customize the layout, appearance, and input variables of your calculator by editing the information provided in the config.json file.
Layout#
The config.json file uses the JSON file format. At a high level the config starts with the following layout.
Meta Information#
The meta information is used to both describe the calculator as well as configure certain settings like access control.
| Key | Required | Type |
|---|---|---|
| name | TRUE | String |
| short_description | TRUE | String |
| long_description | TRUE | String |
| tags | TRUE | Comma Separated String |
| access | TRUE | public | private |
| s3d_integrated | FALSE | Boolean |
| contact | TRUE | Object |
Contact Objet#
When developing a calculator in the SkyCiv software framework, you may wish to provide information about the calculator's developer.
This is where the contact object comes into play. The contact object is an optional object that can be included in your calculator to display information about the developer. Specifically, this information is displayed in the 'View Module Info' option.
At a minimum this object must be include the email key. If no logo is included the SkyCiv Logo will be used.
Input Variable Information#
The input_variable object contains a set of nested objects that are used to build the input form of your calculator. Essentially, you can think of this part of the calculator as a form builder.
Each element in the form is represented by a separate object within the input_variable object. The key of each object represents the name of the related input variable. These elements appear in the user interface in the same order as they are listed in the JSON.
By specifying the necessary information in the input_variable object, you can create a user-friendly input form for your calculator. You can customize each input element, including its label, data type, default value, and other attributes.
Input Elements#
Input elements allow they user to interact and adjust sections the element in the calculator's user interface.
Number Element Example#
Text Element Example#
Checkbox Element Example#
Dropdown Element Example#
S3D Section Object#
[S3D Integration Only] This will pass through the Section Object from your S3D model
Visual Elements#
Visual elements are parts of the input form use to display information or improve the layout of the form.
Image Element Example#
Heading Element Example#
Canvas Element Example#
Div Element Example#
Visibility Options#
This option allows users to show/hide certain parameters based on another field's input. For instance, if you have a dropdown to choose a shape, and want to show different inputs for circular VS rectangular, you can use use the visible_variables key:
You can choose to show/hide based on the following options:
["show", "all"]- will show all input variables["show", "section_width"]- will show the specific input section_width["show", ".circular-input"]- will show all inputs that have the class "circular-input"
tip
Want to add dynamic user interface elements like charts and drawings that can be updated based on user input? The canvas and div elements are perfect for the job, controlled from your ui.js file.