0

FHEM, icônes et SVG

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 gimppotrace – inkscape m’a permis de créér mon icone openkarotz en deux coups de cuillère à pot :

openkarotz
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

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…

surfyWindows 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

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *