Smart Camera Documentation

Adding New Application Variable & WebGUI Control

30 views October 15, 2018 soliton-support 1

You may want to control some application variables from the GUI. For example, we may have
control over the threshold intensity value given to the threshold function from the GUI. Below
are the steps to be followed to introduce such a variable and add the control to the Web GUI.
All of the steps can be done within Eclipse nuera_project_template.

Step 1: Define new application variable
Navigate to file src >> application_configurations >> app_variables.hpp. Open the structure app_var and declare the variable that you wish to control from the GUI as shown below:

NUERA Eclipse IDE Image Processing Add WebGUI Controls Code Example

Step 2: Use the new variable in the image processing file
Navigate to file src >> image_processing >> process_image.cpp. This is where the image processing code is written. You can use the newly declared variable in the process_image() as shown below:

NUERA Eclipse IDE Image Processing Add WebGUI Controls Code Example 2

Please note, in the above code, threshold value in the threshold function is the variable ( thresh_val ) we have declared in the previous section.  Similarly, any code can be added in the process_image() function with application variables which can be controlled from the WebGUI. And, any number of application variables can similarly be introduced and used.

Variables that do not need WebGUI controls can be declared in process_image.cpp file with local or global scope, whichever is needed.

Step 3: Add new element for the variable to Application Configurations XML file
Open nuera_project_template on Eclipse and go to file src >> application_configuration.xml. Now, add an element for the new variable, following the format of the existing elements, as shown in the example below:

<rescale_image status=”enable” id=”2″ type=”boolean” paramTitle=”Enable Image Rescale by 0.75″>0</rescale_image>

NUERA Eclipse IDE Image Processing Add WebGUI Controls Code Example 3

Please note, in the above screenshot, each element has an ID number (‘ id’ ). This number is used as the index of the variable in the application variable structure ( app_var ). Also, the elements in the xml file can take different values for ‘ type’. Below are the different
values of ‘ type’ which can be used and their corresponding data types:

● “string” –> str
● “integer” –> int
● “dropdown” –> int
● “radio” –> int
● “button” –> bool
● “boolean” –> bool
● “float” –> float
● “double” –> float

Notice the different types used in the XML file in the screenshot above.

Step 4: Edit the app_constants.hpp file to include newly added XML element in app variables list
Open file src >> application_configurations >> app_constants.hpp . The ID number of the newly added xml element must be linked to a new #define constant as shown in figure below:

NUERA Eclipse IDE Image Processing Add WebGUI Controls Code Example 4

From here on, these #define constant names can be used to access the variable value, which are initialized and updated in app_var structure . For eg., var_list[RESCALE_IMAGE] gives the value of the rescale_image element in the xml.

Step 5: Add Web-GUI controls for the new variable
The next step is to edit the code to get the user-given input from the GUI and update the value of the variable.
Navigate to file src >> application_configurations >> app_config.cpp. Here, use the code format used for the existing variables and add code for the new variables in the ApplicationConfiguration::process_app_commands() as shown below:

NUERA Eclipse IDE Image Processing Add WebGUI Controls Code Example 5

Similarly, to update the application variables, add code using the general format in the ApplicationConfiguration::update_app_variables() as shown in the code below. Give the correct type cast for your new variable.

NUERA Eclipse IDE Image Processing Add WebGUI Controls Code Example 6

Step 6: Upload to NUERA and see the result
Now, once you save the files and build the project, the build will complete successfully. Then you can Upload this project to NUERA (Refer Section 3.4 of Getting Started with NUERA to know how to upload your application into NUERA). Open the WebGUI, and go to Application>> SET 1 >> Operator . Here, a control for the newly added application variables should appear. You can now change the value of the variable and click Update, and observe the corresponding output image. The configuration settings will be displayed in the web application as seen in the screenshots below:

NUERA Eclipse IDE Image Processing Add WebGUI Controls 1

NUERA Eclipse IDE Image Processing Add WebGUI Controls 2

For any further assistance, please contact our application engineer at camera.support@solitontech.com

Was this helpful?