How to make indicator with several colors

Question

I want to make a square indicator that will change it color according to some sate of the application. I want to have 4 colors, red, green, blue, grey. How can I achieve this using Javascript/ExtJS/JQuery/HTML or maybe using gif image.

Is this possible with these technologies?

Or maybe some other way?

Answer 1

This is a very very basic and easy task. For a start you would need a square DIV with a certain background-color that can be changed programmatically

HTML

<div id="indicator"></div>

CSS

#indicator {
    position: relative; 
    width: 200px;
    height: 200px;
    background-color: white;
    border: 1px solid #dddddd;
}

Javascript/jQuery

if(...some bad condition...)
    $('#indicator').css('background-color', 'red');

Answer 2

An small example using JQuery. Suppose 'state' is holding a numeric value indicating the current state:

<script type="text/javascript">
    $(document).ready(function() {
        // Select the div which will have the background color of the current state.
        var indicator = $('#state-div');
        switch(state) {
            case 0:
                indicator.css({'background-color': 'red'});
                break;
            case 1:
                indicator.css({'background-color': 'green'});
                break;
            // More cases for all the other states.
        }
    });
</script>

Instead of changing the background color of a div you could also change the src attribute of an image or the background image of the div.

You could also use SVG for changing the color of an rect element. Consider d3.js for effectively working with SVG.