How to Change Indicator Background Color Based on Condition in G Web

This article will demonstrate on how to change indicator background color using G Web. In this article, when input argument have value change, the numeric indicator background color will change based on the condition set in the JavaScript. You can modify the CSS and JavaScript code to customize the color or condition.

1. Create a CSS file with following code:

.Control1.normal{
    --ni-indicator-background-color: green;
}
.Control1.warning{
    --ni-indicator-background-color: yellow;
}
.Control1.danger{
    --ni-indicator-background-color: red;
}

2. Create a JavaScript file with following code:

(function () {
    // Use strict prevents silent and common JavaScript errors.
    'use strict';

function updateIndicator(value) {
    const indicator = document.querySelector('.Control1');
    if (value < 50) {
        indicator.className = 'Control1 normal';
    } else if (value < 80) {
        indicator.className = 'Control1 warning';
    } else {
        indicator.className = 'Control1 danger';
    }
}
    window.updateIndicator = updateIndicator;

}());

3. Create a G Web project.
4. Create a support folder to include the CSS file and JavaScript file.
5. Create JavaScript Library Interface and add the function to create entry point for G Web. In the HTML script, add the CSS and JavaScript file path. 

6. At this moment, your project should looks similar as below:

7. Add numeric control as the input for JavaScript function and create numeric indicator as the background color change indicator.

8. Now you are done. Execute the webVI and when you change the value or the input argument the indicator should change value. The condition of the color change is based condition set in the JavaScript.