Jauges modifiées

[Le Piu]

Je vous propose des jauges que j'ai un peu modifiées.

* Température ext et humidité sur une même jauges circulaire, avec repaires pour les max/min
* Echelle des pression modifiées avec 1013 mBar à "midi"
* Girouette rouge plus visible pour la direction du vent, chevron pour la rafale max. Pour la girouette rouge, je suppose qu'il suffit de copier cette image



Les jauges:


Voilà pour l'essentiel. Ce n'est bien sûr rien de révolutionnaire, mais je trouve la lecture plus intuitive.

Code:

<?xml version="1.0" encoding="iso-8859-1" ?>
<stylesheet>
<image width="600" height="600" />
<!-- ================= Outdoor Temperature/Hum ================= -->
<circulargauge width="300" height="300" shadow="0" orientation="1" position-x="0" position-y="0" margin-top="45" margin-right="45" margin-bottom="45" margin-left="45" >
<title text="Temp. ext. $Current[outdoor_temperature] $Unit[Temperature]" alignement="relative" angle="0" position-x="0.5" position-y="0.42">
<font color="FF000000" facename="Arial" size="18" weight="400" italic="1" />
</title>
<axis color="FF000000" min="-25" max="25" titlemargin="20" titleside="bottom" fromangle="22.5" toangle="157.5">
<labels labelinterval="1" side="top" hide="0">
<font color="FF000000" facename="Arial" size="12" weight="800" italic="0" />
</labels>
<ticks majorticks="11" minorticks="1" side="bottom" hidefirst="0" hidelast="0" hideminorticks="0" hide="0" minorticksize="5" majorticksize="9"/>
</axis>
<index>
<current_outdoor_temperature color1="FFFF0000" color2="FF00FF00" filled="1" texture="img_modern_index_120x40.png" side="left" thick="9" axisdelta="0"/>
<stats_day_min_outdoor_temperature color1="FFFF0000" color2="FF00FF00" texture="img_modern_index5_120x40.png" side="left" thick="9" axisdelta="0"/>
<stats_day_max_outdoor_temperature color1="FFFF0000" color2="FF00FF00" texture="img_modern_index5_120x40.png" side="left" thick="9" axisdelta="0"/>
</index>
<background texture="img_modern1_300x300.png" stretch="1" />
</circulargauge>

<circulargauge width="300" height="300" shadow="0" orientation="1" position-x="0" position-y="0" margin-top="70" margin-right="70" margin-bottom="70" margin-left="70" >
<title text="Hum. ext.\n$Current[outdoor_humidity] %" alignement="relative" angle="0" position-x="0.5" position-y="0.63">
<font color="FF000000" facename="Arial" size="18" weight="400" italic="1" />
</title>
<axis color="FF000000" min="0" max="100" titlemargin="70" titleside="bottom" fromangle="191.25" toangle="348.75">
<labels labelinterval="1" side="top" hide="0">
<font color="FF000000" facename="Arial" size="13" weight="400" italic="1" />
</labels>
<ticks majorticks="5" minorticks="4" side="bottom" hidefirst="0" hidelast="0" hideminorticks="0" hide="0" minorticksize="5" majorticksize="9"/>
</axis>
<index>
<current_outdoor_humidity color1="FFFF0000" color2="FF00FF00" filled="1" texture="fleche_hum.png" side="left" thick="9" axisdelta="0"/>
<stats_day_max_outdoor_humidity texture="img_modern_index6_120x40.png" side="left" thick="9" axisdelta="0"/>
<stats_day_min_outdoor_humidity texture="img_modern_index6_120x40.png" side="left" thick="9" axisdelta="0"/>
</index>
</circulargauge>
<frame width="300" height="300" position-x="300" position-y="300">
<background color="ff0000ff" texture="img_modern2_300x300.png" stretch="1" />
</frame>


<!-- ================= Rainfall ================= -->
<frame width="300" height="300" position-x="300" position-y="0">
<title text="\nPrécipitations" alignement="top|hcenter" angle="0" position-x="0.1" position-y="0.5">
<font color="FF000000" facename="Arial" size="20" weight="400" italic="1" />
</title>
<background color="ff0000ff" texture="img_modern_square1_300x300.png" stretch="1" />
</frame>
<!-- ================= Monthly rainfall ================= -->
<lineargauge width="25" height="250" shadow="0" orientation="1" position-x="349" position-y="20" margin-top="34" margin-right="0" margin-bottom="42" margin-left="0" >
<title text="Mois :\n$Stats[Month,TotalRainfall] $Unit[Rainfall]" alignement="relative" angle="0" position-x="0.47" position-y="0.92">
<font color="FF000000" facename="Arial" size="14" weight="400" italic="1" />
</title>
<axis color="66000000" min="0" max="400" side="left" titlemargin="30" titleside="left">
<labels labelinterval="1" side="right" hide="0">
<font color="FF000000" facename="Arial" size="14" weight="400" italic="0" />
</labels>
<ticks majorticks="5" minorticks="3" side="right" hidefirst="0" hidelast="0" hideminorticks="0" hide="0" minorticksize="18" majorticksize="25"/>
</axis>
<index>
<stats_month_totalrainfall color1="500000FF" color2="500000FF" filled="1" reverse="0" side="right" thick="25" axisdelta="0"/>
</index>
<border cornerradius="0" color="FF000000" thick="0" />
<background color="00000000" stretch="1" />
<gaugebackground color="FF000000" texture="" />
</lineargauge>
<!-- ================= rainfall 24h ================= -->
<lineargauge width="25" height="250" shadow="0" orientation="1" position-x="423" position-y="20" margin-top="34" margin-right="0" margin-bottom="42" margin-left="0" >
<title text="Sur 24h :\n$Current[rainfall_24h] $Unit[Rainfall]" alignement="relative" angle="0" position-x="0.47" position-y="0.92">
<font color="FF000000" facename="Arial" size="14" weight="400" italic="1" />
</title>
<axis color="66000000" min="0" max="75" side="left" titlemargin="30" titleside="left">
<labels labelinterval="1" side="right" hide="0">
<font color="FF000000" facename="Arial" size="14" weight="400" italic="0" />
</labels>
<ticks majorticks="4" minorticks="4" side="right" hidefirst="0" hidelast="0" hideminorticks="0" hide="0" minorticksize="18" majorticksize="25"/>
</axis>
<index>
<current_rainfall_24h color1="550000FF" color2="550000FF" filled="1" reverse="0" side="right" thick="25" axisdelta="0"/>
</index>
<border cornerradius="0" color="FF000000" thick="0" />
<background color="00000000" stretch="1" />
<gaugebackground color="FF000000" texture="" />
</lineargauge>
<!-- ================= rainfall 1h ================= -->
<lineargauge width="25" height="250" shadow="0" orientation="1" position-x="493" position-y="20" margin-top="34" margin-right="0" margin-bottom="42" margin-left="0" >
<title text="Sur 1h :\n$Current[rainfall_1h] $Unit[Rainfall]" alignement="relative" angle="0" position-x="0.47" position-y="0.92">
<font color="FF000000" facename="Arial" size="14" weight="400" italic="1" />
</title>
<axis color="66000000" min="0" max="20" side="left" titlemargin="30" titleside="left">
<labels labelinterval="1" side="right" hide="0">
<font color="FF000000" facename="Arial" size="14" weight="400" italic="0" />
</labels>
<ticks majorticks="5" minorticks="4" side="right" hidefirst="0" hidelast="0" hideminorticks="0" hide="0" minorticksize="18" majorticksize="25"/>
</axis>
<index>
<current_rainfall_1h color1="550000FF" color2="550000FF" filled="1" reverse="0" side="right" thick="25" axisdelta="0"/>
</index>
<border cornerradius="0" color="FF000000" thick="0" />
<background color="00000000" stretch="1" />
<gaugebackground color="FF000000" texture="" />
</lineargauge>
<frame width="300" height="300" position-x="300" position-y="0">
<background color="ff0000ff" texture="img_modern_square2_300x300.png" stretch="1" />
</frame>
<frame width="300" height="300" position-x="300" position-y="0">
<background color="ff0000ff" texture="img_modern_square3_300x300.png" stretch="1" />
</frame>
<!-- ================= Relative Pressure ================= -->
<circulargauge width="300" height="300" shadow="0" orientation="1" position-x="0" position-y="300" margin-top="50" margin-right="50" margin-bottom="50" margin-left="50" >
<title text="$Current[relative_pressure,6.1] $Unit[Pressure]\nMin: $Stats[Day,Min,relative_pressure,.1] $Unit[Pressure]\nMax: $Stats[Day,Max,relative_pressure,.1] $Unit[Pressure]\n" alignement="relative" angle="0" position-x="0.5" position-y="0.7">
<font color="FF000000" facename="Arial" size="13" weight="400" italic="1" />
</title>
<axis color="FF000000" min="975" max="1050" titlemargin="50" titleside="top" fromangle="-45" toangle="225">
<title text="Pression\nrelative" alignement="vcenter|hcenter" angle="0">
<font color="FF000000" facename="Arial" size="18" weight="400" italic="1" />
</title>
<labels labelinterval="1" side="0" hide="0">
<font color="FF000000" facename="Arial" size="14" weight="400" italic="0" />
</labels>
<ticks majorticks="7" minorticks="3" side="left" hidefirst="0" hidelast="0" hideminorticks="0" hide="0" minorticksize="5" majorticksize="9"/>
</axis>
<index>
<current_relative_pressure color1="FFFF0000" color2="FF00FF00" filled="1" texture="img_modern_index_120x40.png" side="left" thick="9" axisdelta="0"/>
<stats_day_min_relative_pressure color1="FFFF0000" color2="FF00FF00" texture="img_modern_index5_120x40.png" side="left" thick="9" axisdelta="0"/>
<stats_day_max_relative_pressure color1="FFFF0000" color2="FF00FF00" texture="img_modern_index5_120x40.png" side="left" thick="9" axisdelta="0"/>
</index>
<border cornerradius="0" color="FF000000" thick="0" />
<background color="ff0000ff" texture="img_modern1_300x300.png" stretch="1" />
</circulargauge>
<frame width="300" height="300" position-x="0" position-y="300">
<background color="ff0000ff" texture="img_modern2_300x300.png" stretch="1" />
</frame>
<!-- ================= Wind speed/direction ================= -->
<circulargauge width="300" height="300" shadow="0" orientation="1" position-x="300" position-y="300" margin-top="45" margin-right="45" margin-bottom="45" margin-left="45" >
<title text="Direction $Current[wind_direction,f1]\nVitesse $Current[wind_speed] $Unit[Speed]" alignement="relative" angle="0" position-x="0.56" position-y="0.63">
<font color="FF000000" facename="Arial" size="13" weight="400" italic="1" />
</title>
<axis color="FF000000" min="0" max="360" titlemargin="20" titleside="bottom" fromangle="90" toangle="450">
<labels labels="N;NO;O;SO;S;SE;E;NE" labelinterval="1" side="top" hide="0">
<font color="FF000000" facename="Arial" size="12" weight="800" italic="0" />
</labels>
<ticks majorticks="9" minorticks="3" side="bottom" hidefirst="0" hidelast="0" hideminorticks="0" hide="0" minorticksize="5" majorticksize="9"/>
</axis>
<index>
<current_wind_direction color1="FFFF0000" color2="FF00FF00" filled="1" texture="girouette4.png" side="left" thick="9" axisdelta="0"/>
</index>
<background texture="img_modern1_300x300.png" stretch="1" />
</circulargauge>
<circulargauge width="300" height="300" shadow="0" orientation="1" position-x="300" position-y="300" margin-top="70" margin-right="70" margin-bottom="70" margin-left="70" >
<title text="Vent" alignement="relative" angle="0" position-x="0.5" position-y="0.40">
<font color="FF000000" facename="Arial" size="18" weight="400" italic="1" />
</title>
<axis color="FF000000" min="0" max="90" titlemargin="50" titleside="bottom" fromangle="0" toangle="225">
<labels labelinterval="1" side="160" hide="0">
<font color="FF000000" facename="Arial" size="13" weight="400" italic="1" />
</labels>
<ticks majorticks="7" minorticks="2" side="bottom" hidefirst="0" hidelast="0" hideminorticks="0" hide="0" minorticksize="5" majorticksize="9"/>
</axis>
<index>
<current_wind_speed color1="FFFF0000" color2="FF00FF00" filled="1" texture="img_modern_index4_120x40.png" side="left" thick="9" axisdelta="0"/>
<stats_day_max_wind_gust texture="img_modern_index6_120x40.png" side="left" thick="9" axisdelta="0"/>
</index>
</circulargauge>
<frame width="300" height="300" position-x="300" position-y="300">
<background color="ff0000ff" texture="img_modern2_300x300.png" stretch="1" />
</frame>
</stylesheet>

Visible aussi bien sûr sur mon site.

Bon week-end à tous.

Alain

[MAGNUS]

Bonjour,
Très jolie le modèle mais inexploitable car affiche erreur.
Manque le images : fleche-hum.png,girouette7.png, ...etc
Ce serais sympa de nous les joindre avec.
Cordialement.

[Invité]

Bonjour Magnus,
Pour info, sur l'image de le girouette, clic droit , copier l'image.
Bonne soirée
Jean

[chris_01]

merci alain!

j'avais justement projet de "copier" tes gauges (c'est surtout les temp/hum)
ben voilà je ne devrait pas me casser la tete comme sa

pour felche hum, il suffit de changer fleche hum par "img_modern_index3_120x40.png" c'est le meme je crois.

[Le Piu]

Je crois qu'il n'y a que 2 nouvelles images: girouette4, qui est la flèche rouge dans le 1er post, et l'autre, fleche_hum, qui est là:

[rene]

La réalisation d'Alain est très belle et très propre.
Mais étant donné l'état de mes connaissances, quelqu'un pourrait-t-il m'envoyer par courriel sous zip le texte xml + les photos nécessaires.
Après, je sais me débrouiller.
Merci
René

[COULET]

Salut René

J'ai repris ton fichier
Je l'ai un peu modifié ...
Tu peux le voir sur mon site ... sur la page d'accueil

MERCI

[rene]

Salut René

J'ai repris ton fichier
Je l'ai un peu modifié ...
Tu peux le voir sur mon site ... sur la page d'accueil

MERCI

"De la belle ouvrage" comme disait mon grand-père charpentier.
Quelles lignes ajoutes-tu dans l'xml du thermomètre pour obtenir le mini et le maxi ?

[COULET]

Salut René !

Merci pour les compliments
Ci dessous le .xml complet de mon thermomètre :

<?xml version="1.0" encoding="iso-8859-1" ?>
<stylesheet>
<image width="130" height="300" />
<!-- ================= Outdoor Temperature ================= -->
<lineargauge width="130" height="300" shadow="0" orientation="1" position-x="0" position-y="0" margin-top="26" margin-right="9" margin-bottom="77" margin-left="11" >
<title text="$Current[outdoor_temperature] $Unit[Temperature]\n$Current[rate_outdoor_temperature] $Unit[Temperature]/h" alignement="relative" angle="0" position-x="0.47" position-y="0.86">
<font color="FFFF0000" facename="Arial" size="15" weight="600" italic="0" />
</title>
<axis color="FF000000" min="-10" max="40" side="hcenter" titlemargin="20">
<title text="Température exterieure" alignement="vcenter|hcenter" angle="180">
<font color="FFFF0000" facename="Arial" size="18" weight="400" italic="1" />
</title>
<labels labelinterval="1" side="left" hide="0">
<font color="FFFF0000" facename="Arial" size="14" weight="400" italic="1" />
</labels>
<ticks majorticks="6" minorticks="4" side="left" hidefirst="0" hidelast="0" hideminorticks="0" hide="0" minorticksize="5" majorticksize="9"/>
</axis>
<index>
<current_outdoor_temperature color1="FFFF0000" color2="FF00FF00" filled="1" side="left" thick="9" axisdelta="0"/>
<stats_day_max_outdoor_temperature texture="img_modern_index_20x24.png" side="left" thick="9" axisdelta="0"/>
<stats_day_min_outdoor_temperature texture="img_modern_index_20x24.png" side="left" thick="9" axisdelta="0"/>
</index>
<border cornerradius="0" color="FF000000" thick="0" />
<background color="ff0000ff" texture="img_modern_thermo1_130x300.png" stretch="1" />
<gaugebackground color="FF000000" texture="" />
</lineargauge>
<frame width="130" height="300" position-x="0" position-y="0">
<background color="ff0000ff" texture="img_modern_thermo2_130x300.png" stretch="1" />
</frame>
</stylesheet>

Cordialement