But: avoir un thermomètre qui indique la température extérieure avec deux index pour indiquer la température minimum et maximum de la journée, ainsi que la variation de température sur la dernière heure

Comme pour nos premiers graphiques, on commence par créer une image et un cadre qui contiendra notre image de base.
toujours entre les balises <stylesheet>, nous ajoutons la balise "stretch" pour adapter la grandeur de l'image à la grandeur du cadre.

<?xml version="1.0" encoding="iso-8859-1" ?>
<stylesheet>
  <image width="140" height="310" />
  <frame width="130" height="300" position-x="5" position-y="5">
    <background color="ff0000ff" texture="thermo_b.png" stretch="1" />
  </frame>
</stylesheet>

On rajoute la balise "lineargauge"

 <lineargauge width="130" height="300" orientation="1" position-x="5" position-y="5" margin-top="26" margin-right="9" margin-bottom="77" margin-left="11" >

Notre gauge est créée, on va maintenant la mettre en place avec la balise "xaxis", on la centre et on rajoute les labels "labels" et les graduations "ticks" on peux changer l'échelle avec min et max

  <axis color="FF000000" min="-20" max="40" side="hcenter" titlemargin="20">
        <labels labelinterval="1" side="left" hide="0">
          <font color="FF000000" facename="Arial" size="14" weight="400" italic="1" />
        </labels>
        <ticks majorticks="7" minorticks="4" side="left" minorticksize="5" majorticksize="9"/>
   </axis>

On rajoute un texte sur l'axe x, a placer entre les balises "axis"

<title text="Température extérieure" alignement="vcenter|hcenter" angle="180">
          <font color="FF000000" facename="Arial" size="18" weight="400" italic="1" />
 </title>

On va rajouter les données, attention sur les graphiques précédents les données étaient placées dans la balise "data", maintenant elles sont placées dans la balise "index"

<index>
        <current_outdoor_temperature color1="FF000099" color2="FFFF0000" filled="1" side="left" thick="9" />
 </index>

Nous allons maintenant rajouter dans la balise "index" les deux index à gauche de l'axe pour afficher la valeur maximale et minimale de la journée.

<stats_day_max_outdoor_temperature texture="index_vert.png" side="left" />
<stats_day_min_outdoor_temperature texture="index_rouge.png" side="left" />

On rajoute valeur actuelle

 <title text="$Current[outdoor_temperature] $Unit[Temperature]" alignement="relative" angle="0" position-x="0.47" position-y="0.86">
      <font color="FF000000" facename="Arial" size="20" weight="400" italic="1" />
  </title>

Et pour terminer on rajoute un cadre avec la variation de la température.

<frame width="100" height="128" position-x="18" position-y="215">
    <title text=" ($Current[rate_outdoor_temperature] °C/h)" alignement="relative" position-x="0.3" position-y="2.0">
          <font color="FF003399" facename="Arial" size="15" weight="450" italic="0" />
     </title>
</frame>

Il reste à placer la dernière image pour améliorer l'aspect visuel de l'ensemble. Mettre une image avec la balise "background" à placer dans <linerargauge>

 <background texture="thermo_fond.png" stretch="1" />

C'est terminé, voici encore le code complet de la feuille de style.

<?xml version="1.0" encoding="iso-8859-1" ?>
<stylesheet>
  <image width="140" height="310" />
  <frame width="130" height="300" position-x="5" position-y="5">
    <background color="ff0000ff" texture="thermo_b.png" stretch="1" />
  </frame>
  <lineargauge width="130" height="300" orientation="1" position-x="5" position-y="5" margin-top="26" margin-right="9" margin-bottom="77" margin-left="11" >
    <axis color="FF000000" min="-20" max="40" side="hcenter" titlemargin="20">
      <title text="Température extérieure" alignement="vcenter|hcenter" angle="180">
        <font color="FF000000" facename="Arial" size="18" weight="400" italic="1" />
      </title>
      <labels labelinterval="1" side="left" hide="0">
        <font color="FF000000" facename="Arial" size="14" weight="400" italic="1" />
      </labels>
      <ticks majorticks="7" minorticks="4" side="left" minorticksize="5" majorticksize="9"/>
    </axis>
    <index>
      <current_outdoor_temperature color1="FF000099" color2="FFFF0000" filled="1" side="left" thick="9" />
      <stats_day_max_outdoor_temperature texture="index_vert.png" side="left" />
      <stats_day_min_outdoor_temperature texture="index_rouge.png" side="left" />
    </index>
    <title text="$Current[outdoor_temperature] $Unit[Temperature]" alignement="relative" angle="0" position-x="0.47" position-y="0.86">
      <font color="FF000000" facename="Arial" size="20" weight="400" italic="1" />
    </title>
     <background texture="thermo_fond.png" stretch="1" />
  </lineargauge>
  <!-- ================= texte température +- ================= -->
    <frame width="100" height="128" position-x="18" position-y="215">
      <title text=" ($Current[rate_outdoor_temperature] °C/h)" alignement="relative" position-x="0.3" position-y="2.0">
        <font color="FF003399" facename="Arial" size="15" weight="450" italic="0" />
      </title>
    </frame>
  </stylesheet>

Une autre petite pose et on passe à la page suivante (autres graphiques)