Feuille de style Iphone

[jmj41]

Je me suis fais une feuille de style pour pouvoir consulter les données de ma station sur un Iphone 4. J'ai choisi les couleurs pour que ce soit très lisible. Je suis assez content du rendu. J'ai inséré l'image sur une page html pour plus de commodité, mais on peut consulter l'image seulement. La feuille de style est dimensionnée pour l'iphone4, mais elle doit être utilisable sur n'importe quel smartphone en agrandissant à l’écran.

Si vous voulez voir le rendu avec votre Iphone, c'est ici : http://jmj41.com/meteo/iphone.html

Ce que ça donne :



Le code ici :


<?xml version="1.0" encoding="iso-8859-1"?>
<stylesheet>
<image width="640" height="880" />

<!-- ================= Fond ================= -->
<frame width="640" height="880" position-x="0" position-y="0">
<background color="FF000000" />
<border cornerradius="5" color="" thick="1" />
</frame>

<!-- ================= Titre ================= -->
<textbox width="640" height="40" shadow="0" position-x="0" position-y="0" margin="0">
<text alignement="center">
<line text="Station Chailles (41) - $CurrentDate[%d %B %Y à %Hh%M]" />
<font color="FFFFFFFF" size="30" weight="800" italic="1" />
</text>
</textbox>
<textbox width="640" height="30" shadow="0" position-x="0" position-y="20" margin="0">
<text alignement="center">
<line text="-----------------------------------------------------------------------------------------------------------------------------------------" />
<font color="FFFFFFFF" size="15" weight="800" italic="1" />
</text>
</textbox>

<!-- ================= Données ================= -->
<textbox width="640" height="50" shadow="0" position-x="0" position-y="35" margin="0">
<text alignement="center">
<line text="Température" />
<font color="FFFFFFFF" size="30" weight="200" italic="1" />
</text>
</textbox>
<textbox width="640" height="100" shadow="0" position-x="0" position-y="65" margin="0">
<text alignement="center">
<line text="$Current[outdoor_temperature]°" />
<font color="FF44C13E" facename="Comic sans ms" size="100" weight="600" italic="0" />
</text>
</textbox>
<textbox width="640" height="50" shadow="0" position-x="-240" position-y="35" margin="0">
<text alignement="center">
<line text="Mini" />
<font color="FFFFFFFF" size="30" weight="200" italic="1" />
</text>
</textbox>
<textbox width="640" height="100" shadow="0" position-x="-240" position-y="65" margin="0">
<text alignement="center">
<line text="$Min[outdoor_temperature]°" />
<font color="FF0000FF" facename="Comic sans ms" size="40" weight="600" italic="0" />
</text>
</textbox>
<textbox width="640" height="50" shadow="0" position-x="240" position-y="35" margin="0">
<text alignement="center">
<line text="Maxi" />
<font color="FFFFFFFF" size="30" weight="200" italic="1" />
</text>
</textbox>
<textbox width="640" height="100" shadow="0" position-x="240" position-y="65" margin="0">
<text alignement="center">
<line text="$Max[outdoor_temperature]°" />
<font color="FFFF0000" facename="Comic sans ms" size="40" weight="600" italic="0" />
</text>
</textbox>
<textbox width="640" height="50" shadow="0" position-x="0" position-y="155" margin="0">
<text alignement="center">
<line text="Humidité" />
<font color="FFFFFFFF" size="30" weight="200" italic="1" />
</text>
</textbox>
<textbox width="640" height="50" shadow="0" position-x="-240" position-y="155" margin="0">
<text alignement="center">
<line text="Pt de rosée" />
<font color="FFFFFFFF" size="30" weight="200" italic="1" />
</text>
</textbox>
<textbox width="640" height="100" shadow="0" position-x="-240" position-y="185" margin="0">
<text alignement="center">
<line text="$Current[dew_point]°" />
<font color="FF0000FF" facename="Comic sans ms" size="40" weight="600" italic="0" />
</text>
</textbox>
<textbox width="640" height="50" shadow="0" position-x="240" position-y="155" margin="0">
<text alignement="center">
<line text="WindChill" />
<font color="FFFFFFFF" size="30" weight="200" italic="1" />
</text>
</textbox>
<textbox width="640" height="100" shadow="0" position-x="240" position-y="185" margin="0">
<text alignement="center">
<line text="$Current[wind_chill]°" />
<font color="FF0000FF" facename="Comic sans ms" size="40" weight="600" italic="0" />
</text>
</textbox>
<textbox width="640" height="100" shadow="0" position-x="0" position-y="185" margin="0">
<text alignement="center">
<line text="$Current[outdoor_humidity]%" />
<font color="FF44C13E" facename="Comic sans ms" size="100" weight="600" italic="0" />
</text>
</textbox>
<textbox width="640" height="50" shadow="0" position-x="0" position-y="275" margin="0">
<text alignement="center">
<line text="Pression" />
<font color="FFFFFFFF" size="30" weight="200" italic="1" />
</text>
</textbox>
<textbox width="640" height="100" shadow="0" position-x="0" position-y="305" margin="0">
<text alignement="center">
<line text="$Current[relative_pressure,6.1]hPa" />
<font color="FF44C13E" facename="Comic sans ms" size="100" weight="600" italic="0" />
</text>
</textbox>
<textbox width="640" height="50" shadow="0" position-x="240" position-y="275" margin="0">
<text alignement="center">
<line text="Tendance" />
<font color="FFFFFFFF" size="30" weight="200" italic="1" />
</text>
</textbox>
<textbox width="640" height="100" shadow="0" position-x="240" position-y="305" margin="0">
<text alignement="center">
<line text="$Current[rate_relative_pressure]/h" />
<font color="FF0000FF" facename="Comic sans ms" size="40" weight="600" italic="0" />
</text>
</textbox>
<textbox width="640" height="50" shadow="0" position-x="-240" position-y="275" margin="0">
<text alignement="center">
<line text="Prévision" />
<font color="FFFFFFFF" size="30" weight="200" italic="1" />
</text>
</textbox>
!-- ================= Icon ================= -->
<frame width="70" height="70" position-x="45" position-y="325">
<background color="ff0000ff" texture="$WeatherForecast[Icon]" stretch="1" />
</frame>

<textbox width="640" height="50" shadow="0" position-x="0" position-y="405" margin="0">
<text alignement="center">
<line text="Pluie du jour " />
<font color="FFFFFFFF" size="30" weight="200" italic="1" />
</text>
</textbox>
<textbox width="640" height="100" shadow="0" position-x="0" position-y="435" margin="0">
<text alignement="center">
<line text="$Stats[Day,TotalRainfall] mm" />
<font color="FF44C13E" facename="Comic sans ms" size="100" weight="600" italic="0" />
</text>
</textbox>
<textbox width="640" height="50" shadow="0" position-x="-240" position-y="405" margin="0">
<text alignement="center">
<line text="Mois" />
<font color="FFFFFFFF" size="30" weight="200" italic="1" />
</text>
</textbox>
<textbox width="640" height="100" shadow="0" position-x="-240" position-y="435" margin="0">
<text alignement="center">
<line text="$Stats[Month,TotalRainfall]" />
<font color="FF0000FF" facename="Comic sans ms" size="40" weight="600" italic="0" />
</text>
</textbox>
<textbox width="640" height="50" shadow="0" position-x="240" position-y="405" margin="0">
<text alignement="center">
<line text="Année" />
<font color="FFFFFFFF" size="30" weight="200" italic="1" />
</text>
</textbox>
<textbox width="640" height="100" shadow="0" position-x="240" position-y="435" margin="0">
<text alignement="center">
<line text="$Stats[Year,TotalRainfall]" />
<font color="FF0000FF" facename="Comic sans ms" size="40" weight="600" italic="0" />
</text>
</textbox>
<textbox width="640" height="50" shadow="0" position-x="0" position-y="525" margin="0">
<text alignement="center">
<line text="Vent" />
<font color="FFFFFFFF" size="30" weight="200" italic="1" />
</text>
</textbox>
<textbox width="640" height="100" shadow="0" position-x="0" position-y="555" margin="0">
<text alignement="center">
<line text="$Current[wind_gust] $Unit[Speed]" />
<font color="FF44C13E" facename="Comic sans ms" size="100" weight="600" italic="0" />
</text>
</textbox>
<textbox width="640" height="50" shadow="0" position-x="-240" position-y="525" margin="0">
<text alignement="center">
<line text="Moyen/J" />
<font color="FFFFFFFF" size="30" weight="200" italic="1" />
</text>
</textbox>
<textbox width="640" height="100" shadow="0" position-x="-240" position-y="555" margin="0">
<text alignement="center">
<line text="$Mean[wind_speed]" />
<font color="FF0000FF" facename="Comic sans ms" size="40" weight="600" italic="0" />
</text>
</textbox>
<textbox width="640" height="50" shadow="0" position-x="240" position-y="525" margin="0">
<text alignement="center">
<line text="Max/J" />
<font color="FFFFFFFF" size="30" weight="200" italic="1" />
</text>
</textbox>
<textbox width="640" height="100" shadow="0" position-x="240" position-y="555" margin="0">
<text alignement="center">
<line text="$Max[wind_gust]" />
<font color="FF0000FF" facename="Comic sans ms" size="40" weight="600" italic="0" />
</text>
</textbox>
<textbox width="640" height="50" shadow="0" position-x="-270" position-y="745" margin="0">
<text alignement="center" angle="90">
<line text="Actuel" />
<font color="FFFFFFFF" size="30" weight="-200" italic="1" />
</text>
</textbox>
<textbox width="640" height="50" shadow="0" position-x="270" position-y="745" margin="0">
<text alignement="center" angle="270">
<line text="Dominant" />
<font color="FFFFFFFF" size="30" weight="200" italic="1" />
</text>
</textbox>
<circulargauge width="150" height="150" shadow="0" orientation="1" position-x="100" position-y="690" margin-top="0" margin-right="0" margin-bottom="0" margin-left="0">
<axis color="FF44C13E" min="0" max="360" titlemargin="20" titleside="32" fromangle="90" toangle="450">
<labels labels="N;NO;O;SO;S;SE;E;NE" labelinterval="1" side="1" hide="0">
<font color="FF44C13E" facename="Comic sans ms" size="25" weight="600" italic="0" />
</labels>
<ticks majorticks="9" minorticks="3" side="32" hidefirst="0" hidelast="0" hideminorticks="0" hide="0" minorticksize="5" majorticksize="20"/>
</axis>
<index>
<current_wind_direction color1="FFFF0000" />
</index>
<border cornerradius="0" color="FF000000" thick="0" />
<gaugebackground color="00000000" texture="" />
</circulargauge>
<!-- ================= Radarplot ================= -->
<radarplot width="200" height="200" shadow="0" position-x="350" position-y="670" margin-top="20" margin-right="20" margin-bottom="20" margin-left="20">
<title text="" alignement="top|hcenter" angle="0">
<font color="FF44C13E" facename="Arial" size="30" weight="400" italic="1" />
</title>
<border cornerradius="0" color="FF44C13E" thick="0" />
<axis color="FF44C13E" grid="1" autoscale="1" min="0" max="0">
<titles text="E;ENE;NE;NNE;N;NN0;N0;0N0;0;0S0;S0;SS0;S;SSE;SE;ESE">
<font color="FF44C13E" facename="Comic sans ms" size="20" weight="400" italic="0" />
</titles>
<labels labelinterval="1" angle="0" format=".0" side="left" hide="0">
<font color="FF44C13E" facename="Comic sans ms" size="12" weight="400" italic="1" />
</labels>
<ticks autoticks="0" majorticks="4" minorticks="2" side="bottom" hidefirst="0" hidelast="0" hideminorticks="0" hide="0" />
</axis>
<legend position-x="0" position-y="0" hide="1" shadow="5">
<font color="FF44C13E" facename="Arial" size="14" weight="400" italic="0" />
<border cornerradius="0" color="FF44C13E" thick="1" />
<background color="FFFFFFFF" texture="" />
</legend>
<background color="00000000" texture="" stretch="1" />
<graphbackground color="00000000" />
<data>
<wind_direction legend="" color1="FFFF0000" color2="FFFF0000" antialiasing="1" filled="1" />
<wind_direction legend="" color1="FFFF0000" antialiasing="1" hidelegend="1" thick="1.2" />
</data>
</radarplot>
</stylesheet>

[paaubert]

Jolie présentation, merci pour le partage.

Bonne soirée

[dominique]

merci

[juliendebeauregard]

Super merci !
La mienne était un peu illisible !

http://juliendebeauregard.free.fr/graphweather/pda.jpg

[sylvain]

Bonsoir

Très belle réalisation je vais vous le prendre mais avant tout de mon coté le vent ne fonctionne pas j'ai que le vent moyen si quelque à la solution merci de me le mettre dans la feuille de style ....
Bonne soirée.
Sylvain

[sylvain]

RE

J'ai oublié une autre chose pour le temps réel il m'indique ce qu'il est tombé ce matin alors qu'il ne pleut pas en ce moment.......Les autre paramètre fonctionne correctement.Merci à vous pour votre aide.
Sylvain

[paaubert]

RE

J'ai oublié une autre chose pour le temps réel il m'indique ce qu'il est tombé ce matin alors qu'il ne pleut pas en ce moment.......
Sylvain

C'est normal, c'est indiqué "pluie du jour"
il ne pleut pas en ce moment ??? c'est quel moment, cela n'a pas vraiment de sens de mettre uniquement la balise current sur le pluviomètre, à la limite tu peux remplacer par $Current[rainfall_1h]

A+

[jmj41]

Bonsoir

Très belle réalisation je vais vous le prendre mais avant tout de mon coté le vent ne fonctionne pas j'ai que le vent moyen si quelque à la solution merci de me le mettre dans la feuille de style ....
Bonne soirée.
Sylvain

Tu veux quoi comme paramètre concernant le vent? En l'état c'est la balise $Current[wind_gust] qui s'affiche, mais tu peux la remplacer par celle de ton choix.

[jmj41]

RE

J'ai oublié une autre chose pour le temps réel il m'indique ce qu'il est tombé ce matin alors qu'il ne pleut pas en ce moment.......Les autre paramètre fonctionne correctement.Merci à vous pour votre aide.
Sylvain

L'affichage actuel propose le cumul du jour, mais comme te l'indique paaubert, tu peux mettre ce que tu veux : la pluie sur la dernière heure, l'intensité, etc...

[sylvain]

BONSOIR

J'ai encore une question je voudrai rajouter dans la feuille de style la base des nuages $Current[cloud_base] mètres" /> si quelqu'un à une idée pour la feuille de style complète je lui serai bien reconnaissant. Je vous souhaite une bonne soirée.
Sylvain.

[beubeu]

Bonjour JMJ,

Très belle réalisation !

Comment faites vous pour l'intégrer (en plein écran comme le montre votre capture) sur l'Iphone ?

Merci

[jmj41]

Bonjour JMJ,

Très belle réalisation !

Comment faites vous pour l'intégrer (en plein écran comme le montre votre capture) sur l'Iphone ?

Merci

Je l'agrandi avec les doigts puis à chaque rafraîchissement de la page, la taille est conservée.

[beubeu]

merci

[fxlacombe]

Bonjour,

Super cet outil iphone.
Je suis novice...j'étais mis dans graphweather la feuille de style...ça marche...
Mais en revanche, peux-tu me donner la page html et l'image iphone.png pour l'affichage web?
Est-ce qu'il suffit de mettre dans le répertoire web la feuille de style xml, la page html et l'image png pour que ça marche?
Ou bien faut-il encore autre chose?
Merci.

@+

[fxlacombe]

en fait, si j'ai bien compris, c'est simplement l'image iphone.png que tu envois sur ton site web à intervalle régulier...mais comment fais-tu pour générer une image iphone.png à intervalle régulier et la faire uploader en ftp sur ton site à intervalle régulier?
Merci.