Encore une avancée incroyable, fantastique, prodigieuse 🙄

Bon j’en rajoute un peu, d’accord, mais jugez par vous même.

Rappel des faits : depuis quelques mois il existe dans Domoticz une possibilité de pouvoir redéfinir ses propres pages  d’affichage à son propre look (« Custom Pages ») cela avait fait l’objet d’un article ici et la.

Le type de résultat obtenu  par défaut est celui ci et est tout à fait adapté à un usage sur tablettes, scroll gauche-droite compris.

MAIS la communauté Domoticz ne s’est pas arrêtée là et à rendu ces affichages interactifs et nous propose depuis peu des « frontpages » interactives.

Oui ,oui on peut vraiment cliquer pour faire des ON/OFF pour piloter nos équipements, scènes, groupes, intégrer de la météo, des webcam, des liens vers des sites web…

Une démo  ici https://www.youtube.com/watch?v=J3Xp_Ee115c&feature=youtu.be

Quelques exemples destinés à illustrer la souplesse:

On voit ici que  ces pages  web sont structurées en cases dans lesquelles on configurera nos idx Domoticz, nos liens, nos affichages.

Merci à Vil1driver, un des contributeurs régulier du forum, d’avoir attiré notre attention et surtout contribué à l’outil.

Plusieurs sources d’info à consulter :

• Le post initial sur le forum de vil1driver : https://easydomoticz.com/forum/viewtopic.php?f=17&t=331
• Le post sur le forum Domoticz regroupant les contributions diverses et variées sur le sujet : http://www.domoticz.com/forum/viewtopic.php?f=8&t=4698

Voyons un peu la partie technique.

1 – La structure et les fichiers.

L’idée de cette technique est de séparer complétement le coté visuel du lien avec Domoticz.

Il y aura donc d’un coté les fichiers jscript de paramétrage et de pilotage de Domoticz et de l’autre les fichiers destinés au coté visuel, les css, les jeux d’icônes ….

Je ne parlerai pas ici du look donné par les fichiers css, car les gout et les couleurs…Mais, si vous vous intéressez à ces aspects,  sachez que les dossiers css, icons sont pour vous.

Les fichiers destinés à ces custom pages interactives sont délivrés sous forme de fichier zip qui seront à décompresser à la racine du dossier domoticz/www.  N’essayez pas ailleurs car même si l’affichage se fait correctement le pilotage de vos équipements ne fonctionnera pas.

Ces packs de fichier comportent :

• un fichier frontpage.html, le point de départ qui contient la mise en page avec le découpage en cellules.
• un dossier css avec la/les feuilles de style nécessaires à la mise en page.
• un dossier icons contenant les jeux d’icônes.
• un dossier js contenant les outils js, jquery
• Eventuellement d’autres fichiers suivant les besoins du developpeur (autres icônes, css spécifiques…).

Sur les exemples que j’ai pu consulter cette structure est respectée par tous.

2 – Mise en place

Décompressez le pack dans le dossier domoticz/www puis avec votre navigateur favori rendez-vous à

http://ip:port/frontpage.html pour examiner le résultat.

3 – Les fichiers utiles à connaitre.

Voici quelques fichiers utilisés mais que nous ne modifierons pas pour la mise en place de cet outil.

• Le fichier frontpage.html contient le découpage en cases (cell1, cell2, cell 3…) et les feuilles de styles appliquées.
  • C’est dans ces cases que nous afficherons nos températures, humidité, météo ….
  • Voici les noms de la page 1, les cellules de la page 2 se nomment 2_1,2_2….

Pour vérifier vos noms dans d’autres packs, ouvrez simplement le fichier frontpage.html dans un navigateur.

• Des balises div sont utilisées.

•  Le fichier frontage.js du dossier js contient « l’intelligence » , c’est lui qui fait les appels à l’API JSON de Domoticz, c’est donc ici que l’on peut implémenter de nouvelles fonctions.

Mais aussi il peut contenir des textes à traduire comme dans le pack frontage-climacons ou les jours sont  donnés comme ceci dans une langue inconnue.

day[0] = « Zo »;
day[1] = « Ma »;
day[2] = « Di »;
day[3] = « Wo »;
day[4] = « Do »;
day[5] = « Vr »;
day[6] = « Za »;

• Le fichier frontpage_settings.js du dossier js, c’est le noyau de ces frontpages interactives, c’est lui que nous devrons modifier pour effectuer nos liens vers Domoticz, y insérer les Idx de ns périphériques ….

Mais je réserve la découverte de ce fichier pour un prochain article.

MAJ du 18/03/2015 , le lien vers l’article de la configuration est ici https://easydomoticz.com/?p=1918

En attendant jouez un peu…