Ls icônes sont un élement important de l’interface web de FHEM. Les formats bitmaps (ex: PNG) sont supportés de même que le format vectoriel SVG. La plupart de celles qui sont fournies sont en SVG, ce qui est une bonne idée : un seul fichier SVG est utilisable dans les différents thèmes, la couleur du trait de l’icône s’adaptant à celle du thème.
Le format SVG est aussi utilisé pour les graphes.
Malheureusement l’implémentation des pages HTML choisie, si elle fonctionne avec beaucoup de browsers (Chrome, Firefox, les versions récentes de Safari…), pose des problèmes avec d’autres. Il va donc falloir ruser pour pouvoir utiliser FHEM depuis son téléphone, son PC ou sa tablette préférée.
Ce post est un petit aide-mémoire sur l’utilisation des icônes dans FHEM et les contournements pour afficher correctement celles-ci.
Manipulation des icônes SVG
Créer une icône SVG
C’est très facile : le tutoriel Vectorisation de dessin avec gimp – potrace – inkscape … m’a permis de créér mon icone openkarotz en deux coups de cuillère à pot :
1/ Si on a un fichier bitmap qui est déjà propre (par exemple le logo d’OpenKarotz qui a d’ailleurs probablement été créé avec un logiciel tel qu’Illustrator ou Inkscape), il est possible de tout faire en ligne de commande, avec potrace (vectorisation) et netpbm (package de manipulation de fichiers graphiques qui permettra de convertir le fichier au format pnm d’entrée de potrace) :
$ cat openkarotz.jpg |jpegtopnm | potrace -s >openkarotz.svg
J’ai dû utiliser gimp pour convertir en noir les traits pour que ça fonctionne, mais si j’ai bien compris le wiki (comme je ne comprends pas l’allemand, ce n’est pas facile), il faut que les traits du graphique soient noirs pour que les couleurs s’adaptent au thème. De fait, ça marche :
Visualisation icone karotz avvec les styles « default », « black », IOS7
2/ S’il faut préalablement rendre le dessin plus clean on pourra utiliser le logiciel de dessin vectoriel libre Inskape, en suivant ce tutoriel.
Convertir une icône SVG en PNG
Si convert (du package imagemagick) ne fonctionne pas, utiliser rsvg-convert (du package librsvg2-bin) :
$ rsvg-convert -w 32 -h 32 weather_winter.svg >weather_winter.png
Les icônes dans FHEM
Choix de la bibliothèque d’icônes
Il est possible de choisir quelles icônes utiliser dans l’interface graphique standard de FHEM, à l’aide d’un path. Par exemple, pour l’interface tablette avec un look iOS7, on choisira d’afficher de préférence les icônes du répertoire openautomation.
attr WEBtablet iconPath openautomation:fhemSVG attr WEBtablet stylesheetPrefix ios7
Ca permet de se créer un répertoire avec ses propres icônes, qui ne sera pas écrasé par les mises à jour, comme on va le voir au paragraphe suivant.
Alias
On peut créer dans un répertoire d’icônes un fichier iconalias.txt qui indiquera à FHEM quel sous quel nom peut aussi être appelée une icône, en dehors de son nom de fichier.
Les problèmes d’affichage des SVG
Le problème
J’ai constaté le même problème d’abord sur mon vieil iPhone 3GS sous iOS 4.3.3, puis sur Internet Explorer 11 sur Windows Phone 8.1 et sur tablette ASUS T100 sous Windows 8.1 : les icônes SVG s’affichent dans le navigateur comme une chaîne de caractères « Created by potrace 1.8, written by Peter Selinger 2001-2007 », qui prend toute la place et empêche de lire le reste de la ligne.
Explication : le programme de vectorisation potrace génère du XML contenant un tag XML <metadata> de ce type :
<metadata id="metadata4"> Created by potrace 1.8, written by Peter Selinger 2001-2007 <rdf:RDF> <cc:Work rdf:about=""> <dc:format>image/svg+xml</dc:format> <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> <dc:title></dc:title> </cc:Work> </rdf:RDF> </metadata>
Ces browsers arrivent à interpréter ces fichiers SVG si on les adresse directement mais pas s’ils sont inline dans le code HTML (code HTML : <svg></svg>). Malheureusement je n’ai pas eu de succès sur le forum FHEM (svg icons and FHEMWEB) où on me suggère de changer de téléphone ou d’utiliser du PNG
Curieusement, Safari rend correctement les SVG des graphes (code HTML : <embed src= type="image/svg+xml"/>), alors qu’Internet Explorer ne le fait pas..
Nettoyage des fichiers SVG
Pour contourner partiellement le problème, on peut nettoyer les fichiers SVG du tag metadata qui contient le texte fatal. Du coup, on ne voit toujours pas les icônes dans FHEM, mais au moins on peut lire le texte et c’est utilisable … et les pages HTML sont un peu plus légères 😉
Le script suivant permet de créer les répertoires fhemSVG.custom et openautomation.custom avec des SVG « propres »
MYDIR=/opt/fhem/www/images
cd $MYDIR
for d in fhemSVG openautomation
do
mkdir $d.custom
cd $MYDIR/$d
for f in *.svg
do
cat $f|perl -0777 -pe 's|(<metadata.*?</metadata>)|$1 =~ /<metadata/?"":$1|gse' > ../$d.custom/$f
done
cp iconalias.txt ../$d.custom
cd $MYDIR
#mv $d ../$d.old
#mv $d.custom $d
done
Il suffit maintenant de changer l’iconPath de l’interface graphique (ici l’interface classique) pour utiliser ces fichiers :
attr WEB iconPath openautomation.custom:fhemSVG.custom
Solution au problèmes d’affichage
iPhone 3GS sous iOS 4.3.3
On peut faire des répertoires de PNG au format 32×32 et mettre ces répertoires dans l’iconPath. Comme les graphes sont correctement rendus, le problème est complètement contourné.
MYDIR=/opt/fhem/www/images
cd $MYDIR
for d in fhemSVG openautomation
do
mkdir $d.32x32
cd $MYDIR/$d
for f in *.svg
do
rsvg-convert -w 32 -h 32 $f >$MYDIR/$d.32x32/"${f%.*}".png
done
cp iconalias.txt ../$d.32x32
cd $MYDIR
done
modifier l’interface téléphone :
attr WEBphone iconPath openautomation.32x32:fhemSVG.32x32
Internet Explorer 11 sous Windows 8.1 (desktop)
Aller dans l’option « Paramètres d’affichage de compatibilité » et désactiver « Afficher les sites intranet dans Affichage de compatibilité » : tout fonctionne à merveille
On peut aussi utiliser un browser plus sympa comme Firefox…
Windows Phone
La solution mise en œuvre pour l’iphone fonctionne avec Internet Explorer pour les icônes, mais elle ne règle pas le problème des graphes.
On peut utiliser le très bon browser suisse Surfy. La version gratuite fonctionne très bien, et il existe une version payante qui supprime les quelques limitations de la version gratuite. Tous les SVG sont rendus correctement…
Références
- Vectorisation de dessin avec gimp – potrace – inkscape … m’a permis de vectoriser mon lapin en deux coups de cuillère à pot.
- FHEM wiki : Embellissez FHEM avec des icônes (traduction google : il faut deviner 😉
- delete XML node containing certain element
