UV reading from number to word

[MarystownWeather2012]

I'm trying to add a word value to my UV sensor data.

For example. It now would read 2/16 as the UV. I would like for it to read 2/16 = Low . And so on as the values increase.

Any help would be great on adding it to my website via the Cumulus web templates.

[mcrossley]

I think the only way you are going to do that is via a bit of javascript, so where you want the test to appear. You can of course select you own limits for each category, I just picked them arbitrarily.

Code: Select all

<script type="text/javascript">
if (<#UV> >= 12) {
  document.write('Extremely High');
} else if (<#UV> >= 6) {
  document.write('Very High');
} else if (<#UV> >= 3) {
  document.write('Medium');
} else if (<#UV> >= 0) {
  document.write('Low');
} else {
  document.write('Unknown');
}
</script>

[mcrossley]

I did think of another way of doing this that avoids all those if comparisons or a switch statement with lots of fall through cases...

Code: Select all

<script type="text/javascript">
var lookupVal = [0,0,0,1,1,1,2,2,2,3,3,3,4,4,4,4,4],
    lookupTxt = ['low','medium','high','very high','extremely high'];
document.write(lookupTxt[lookupVal[<#UV>]] || 'unknown');
</script>

I'm not sure if you have Cumulus set up for UV to show decimals? If so then the code should be (more general case)...

Code: Select all

<script type="text/javascript">
var lookupVal = [0,0,0,1,1,1,2,2,2,3,3,3,4,4,4,4,4],
    lookupTxt = ['low','medium','high','very high','extremely high'];
document.write(lookupTxt[lookupVal[Math.round(<#UV>)]] || 'unknown');
</script>

[MarystownWeather2012]

Hi Mark ,

Anyway to do this with just HTML?

I tired pasting the code you provided however nothing appeared on my page.

http://www3.nf.sympatico.ca/dwight.sheppard/index.htm

[mcrossley]

It doesn't appear to be there?

Code: Select all

<tr class="td_temperature_data">
  <td>UV Index</td>
  <td>2/16</td>
  <td>Cloud Base</td>
  <td>3794 ft</td>
  </tr>

Did you remember to put the code in the template file "indexT.htm" in the Cumulus web folder?

I take it your are adding the "/16" to the UV index in the template too?

[MarystownWeather2012]

Here's my code segment


<!-- Solar data. If you don't have a solar sensor, you may wish to delete everything from here to the next comment -->
<tr class="td_temperature_data">
<td>UV Index</td>
<td><#UV>/16</td>
<td>Cloud Base</td>
<td><#cloudbase></td>
</tr>
<!-- End of solar data -->

Where do I put it in?

Thanks for your help. You have a beautiful site.

[mcrossley]

You would want something like...

Code: Select all

<!-- Solar data. If you don't have a solar sensor, you may wish to delete everything from here to the next comment -->
<tr class="td_temperature_data">
<td>UV Index</td>
<td><#UV>/16 <script type="text/javascript">
var lookupVal = [0,0,0,1,1,1,2,2,2,3,3,3,4,4,4,4,4],
    lookupTxt = ['low','medium','high','very high','extremely high'];
document.write(lookupTxt[lookupVal[<#UV>]] || 'unknown');
</script></td>
<td>Cloud Base</td>
<td><#cloudbase></td>
</tr>
<!-- End of solar data -->

To answer your other question, the only way I can see that you could do it in pure HTML would be to put the text into 17 images, and use the <#UV> tag to populate the img src field
<img src="images/UV-<#UV>.png" alt="UV description" />

There would be other mad cap schemes like have all the text options present in spans and use the UV tag to change the CSS classnames to hide the ones you didn't want or show the one you did.

[MarystownWeather2012]

I placed <!-- Solar data. If you don't have a solar sensor, you may wish to delete everything from here to the next comment -->
<tr class="td_temperature_data">
<td>UV Index</td>
<td><#UV>/16</td><script type="text\javascript">
var lookupVal = [0,0,0,1,1,1,2,2,2,3,3,3,4,4,4,4,4],
lookupTxt = ['low','medium','high','very high','extremely high'];
document.write(lookupTxt[lookupVal[<#UV>]] || 'unknown');
</script></td>
<td>Cloud Base</td>

In but nothing showed on the webpage.

[mcrossley]

Oops, my bad. The opening script tag is wrong, the slash is the wrong way, it should be...
<script type="text/javascript">

Arghh! these server issues re driving me up the wall - 4th attempt at posting...

[MarystownWeather2012]

I have the script code in place. It now shows as

<!-- Solar data. If you don't have a solar sensor, you may wish to delete everything from here to the next comment -->
<tr class="td_temperature_data">
<td>UV Index</td>
<td><#UV>/16</td><script type="text/javascript">
var lookupVal = [0,0,0,1,1,1,2,2,2,3,3,3,4,4,4,4,4],
lookupTxt = ['low','medium','high','very high','extremely high'];
document.write(lookupTxt[lookupVal[<#UV>]] || 'unknown');
</script></td>
<td>Cloud Base</td>
<td><#cloudbase></td>
</tr>
<!-- End of solar data -->

However, if you look at my page

Code: Select all

http://www3.nf.sympatico.ca/dwight.sheppard/index.htm

low is in the incorrect place on the page. Its under my forecast. Any idea?

[mcrossley]

If you cut and paste my code above exactly it will work. You have the script outside the <td></td> tags so it displays the text outside the table. You need to put it after the UV index (leave a space) and before the closing </td>

[MarystownWeather2012]

I have the location of the "low" value corrected Mark.

I am now trying to get the theses values setup for the station.

I have attached a photo.

[William Grimsley]

Hi MarystownWeather2012,

Try doing what Mark posted at the start of this thread, but change.

Code: Select all

<script type="text/javascript">
if (<#UV> >= 12) {
  document.write('Extremely High');
} else if (<#UV> >= 6) {
  document.write('Very High');
} else if (<#UV> >= 3) {
  document.write('Medium');
} else if (<#UV> >= 0) {
  document.write('Low');
} else {
  document.write('Unknown');
}
</script>

To

Code: Select all

<script type="text/javascript">
if (<#UV> >= 11) {
  document.write('Extremely High');
} else if (<#UV> >= 10) {
  document.write('Very High');
} else if (<#UV> >= 7) {
  document.write('High');
} else if (<#UV> >= 5) {
  document.write('Medium');
} else if (<#UV> >= 2) {
  document.write('Low');
} else {
  document.write('Unknown');
}
</script>

This, will match the UV ranges on your site, with the UV ranges on that image.

Hope this helps...

William

[MarystownWeather2012]

Think I got it people. its updating on my site as well.

<td><#UV>/16 = <script type="text/javascript">
if (<#UV> >= 16) {
document.write('Extreme');
} else if (<#UV> >= 15) {
document.write('Extreme');
} else if (<#UV> >= 14) {
document.write('Extreme');
} else if (<#UV> >= 13) {
document.write('Extreme');
} else if (<#UV> >= 12) {
document.write('Extreme');
} else if (<#UV> >= 11) {
document.write('Extreme');
} else if (<#UV> >= 10) {
document.write('Very High');
} else if (<#UV> >= 9) {
document.write('Very High');
} else if (<#UV> >= 8) {
document.write('Very High');
} else if (<#UV> >= 7) {
document.write('High');
} else if (<#UV> >= 6) {
document.write('High');
} else if (<#UV> >= 5) {
document.write('Moderate');
} else if (<#UV> >= 4) {
document.write('Moderate');
} else if (<#UV> >= 3) {
document.write('Moderate');
} else if (<#UV> >= 2) {
document.write('Low');
} else if (<#UV> >=1) {
document.write('Low');
} else if (<#UV> >=0) {
document.write('No Reading');
}
</script></td>

[MarystownWeather2012]

Updated to below instead.

<td><#UV>/16 = <script type="text/javascript">
if (<#UV> >= 11) {
document.write('Extreme');
} else if (<#UV> >= 10) {
document.write('Very High');
} else if (<#UV> >= 7) {
document.write('High');
} else if (<#UV> >= 5) {
document.write('Moderate');
} else if (<#UV> >= 2) {
document.write('Low');
} else if (<#UV> >=1) {
document.write('Low');
} else if (<#UV> >=0) {
document.write('No Reading');
}
</script></td>


This is the same as my previous post but simpler?