Guide Weewx: Colorare l'Indice UV

Colorare l'Indice UV

Se vuoi la cella Indice UV colorata in prima pagina, sostituisci il seguente codice nel tuo index.html.tmpl (si applica alla skin Standard):

Sostituire

#if $day.UV.has_data
<tr>
<td class="stats_label">UV</td>
<td class="stats_data">$current.UV</td>
</tr>
#end if

con

#if $day.UV.has_data
  <tr>
  <td class="stats_label">UV</td>
  #if $current.UV.raw <= 2.4
    <td class="stats_data" style="background-color: limegreen">$current.UV</td>
  #else if $current.UV.raw >= 2.5 and $current.UV.raw <= 5.4
    <td class="stats_data" style="background-color: yellow">$current.UV</td>
  #else if $current.UV.raw >= 5.5 and $current.UV.raw <= 7.4
    <td class="stats_data" style="background-color: orange">$current.UV</td>
  #else if $current.UV.raw >= 7.5 and $current.UV.raw <= 10.4
    <td class="stats_data" style="background-color: red">$current.UV</td>
  #else if $current.UV.raw > 10.5
    <td class="stats_data" style="background-color: violet">$current.UV</td>
  #end if
  </tr>
#end if

Suggerimento: cambia il colore del carattere in nero in modo che sia leggibile rispetto ai colori.

Per aggiungere un numero di Indice UV colorato alla skin smartphone, modificare index.html.tmpl all'interno della cartella Skins/Smartphone.

Dopo la riga

<li><a href="wind.html">Wind: $current.windSpeed from $current.windDir</a></li>

aggiungere

#if $day.UV.has_data
  #if $current.UV.raw <= 2.4
    <li><a href="uv.html">Indice UV: <span style="color: limegreen">$current.UV</span></a></li>
  #else if $current.UV.raw >= 2.5 and $current.UV.raw <= 5.4
    <li><a href="uv.html">Indice UV: <span style="color: yellow">$current.UV</span></a></li>
  #else if $current.UV.raw >= 5.5 and $current.UV.raw <= 7.4
    <li><a href="uv.html">Indice UV: <span style="color: orange">$current.UV</span></a></li>
  #else if $current.UV.raw >= 7.5 and $current.UV.raw <= 10.4
    <li><a href="uv.html">Indice UV: <span style="color: red">$current.UV</span></a></li>
  #else if $current.UV.raw > 10.5
    <li><a href="uv.html">Indice UV: <span style="color: darkviolet">$current.UV</span></a></li>
  #end if
#end if

Avrai bisogno di un file Smartphone/uv.html.tmpl

<!DOCTYPE html>
<head>
  <meta charset="utf-8" />
  <title>Indice UV a $station.location</title>
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <div data-role="page" data-add-back-btn="true" data-theme="a">
    <div data-role="header">
      <h1>Indice UV</h1>
   </div>
   <div data-role="content">
     <h4>Indice UV per oggi</h4>
     <img src="../dayuv.png"/>
     <ul data-role="listview" data-inset="true" data-divider-theme="b">
       <li data-role="list-divider">Dati di oggi</li>
       <li>Indice UV Max: $day.UV.max alle $day.UV.maxtime</li>
     </ul>

     <h4>Indice UV degli ultimi 30 giorni</h4>
     <img src="../monthuv.png" />
    </div>
    <div data-role="footer">
      <h4>weewx v $station.version</h4>
    </div>
  </div>
</body>

e aggiungerlo alla sezione [CheetahGenerator] del tuo skin.conf

[[[MobileUV]]]
   template = smartphone/uv.html.tmpl

Autore: Alco