Les custom pages interactives : Toujours plus haut, toujours plus loin, toujours plus fort !!

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.

CustomPage

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:

Image

Screenshot_2015-02-20-16-17-50.png

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 :

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….

cells

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

  • Des balises div sont utilisĂ©es.

 

2015-03-07 10_20_05

 

  •  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…

 

Pour toute question technique concernant cet article, veuillez utiliser les forum situés à https://easydomoticz.com/forum/
Posted in DĂ©butants, domoticz, domotique, interfaces.

Laisser un commentaire

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