Using conditionals in the interface to switch between wind chill and heat index

[BigOkie]

I'm not as versed in what is being used for the MX interface, so I thought I'd ask for assistance here.

The stock interface in CMX comes with just Wind Chill on the index page. I'd like to try and figure out how to modify it so that the Wind Chill block will display when it's less than 80 degrees outside, and when it's more than 80 degrees, I'd like for it to switch to heat index.

I modified the index.html page already to display the heat index as this:

Code: Select all

                <!-- Heat Index Block -->
                <div class="col-sm-6 col-lg-3">
                    <div class="dash-unit">
                        <span class="dtitle">Heat Index</span>
                        <hr>
                        <div class="cont">
                            <div class="cont" >
                                <span id="HeatIndex" style="font-size:400%">--.-</span>&nbsp;<span class="TempUnit" style="vertical-align:150%">&deg;C</span>
                            </div>
                            <div class="cont" >

                                <p><span>High&nbsp;&nbsp;</span><span id="HighHeatIndexToday" class="high">--.-</span><br><span id="HighHeatIndexTodayTime">--:--</span></p></div>
                        </div>
                    </div>
                </div>

..but I'd like to be able to write it with an if/else statement to show one block if the condition is met, else show the other block.

Has anyone tried this yet?

Thanks.

[steve]

This might be one way of doing it (untested):

Give the Wind Chill and Heat Index blocks names, thus:

<div id="WindChillBlock" class="col-sm-6 col-lg-3">

[...]

<div id="HeatIndexBlock" class="col-sm-6 col-lg-3">

Then, in interface/js/dashboard.js, towards the end of function updateDisplay(), add

Code: Select all

if (data.OutdoorTemp < 80) {
    $('#WindChillBlock').show();
    $('#HeatIndexBlock').hide();
} else {
    $('#WindChillBlock').hide();
    $('#HeatIndexBlock').show();
}

if the display looks a bit odd initially with both blocks shown briefly until the first update, you could make one of the blocks hidden by default, e.g.

<div hidden id="WindChillBlock" class="col-sm-6 col-lg-3">

[BigOkie]

This might be one way of doing it (untested):

Give the Wind Chill and Heat Index blocks names, thus:

<div id="WindChillBlock" class="col-sm-6 col-lg-3">

[...]

<div id="HeatIndexBlock" class="col-sm-6 col-lg-3">

Then, in interface/js/dashboard.js, towards the end of function updateDisplay(), add

Code: Select all

if (data.OutdoorTemp < 80) {
    $('#WindChillBlock').show();
    $('#HeatIndexBlock').hide();
} else {
    $('#WindChillBlock').hide();
    $('#HeatIndexBlock').show();
}

if the display looks a bit odd initially with both blocks shown briefly until the first update, you could make one of the blocks hidden by default, e.g.

<div hidden id="WindChillBlock" class="col-sm-6 col-lg-3">

I gave this a try (thanks) and got no errors. However, both blocks still show up on the page, even after the first update. I'll see if I can figure this out. Thanks for pointing me.

EDIT: NM...it actually DID work! I forgot to clear the browser cache however. Once I did that it appeared to function. I need to change some of the values in the JS file to test it the other way however. Thank you so much.

EDIT 2: Changing the value in dashboard.js to test if Wind Chill switches properly and it does. Guess I need to learn java and Jquery. We actually use it at work but since I'm a Software QA guy I don't do a lot of coding. Thanks again.