Les « Custom Pages » 2 : Mes pages web

Premier article sur les « Custom Pages » de Domoticz.

En attendant d’aborder ceci (work in pogress)

CustomPage

Voyons ici comment afficher n’importe quel contenu dans un onglet Domoticz dédié.

Les « Custom pages », le fichier html

Le dossier /domoticz/www/templates contient un fichier custom.example qui  lorsque on le  renomme en xxx.html fait apparaître un sous menu. nommé  « xxx » dans le dans le menu « Custom » Domoticz.

Un lecteur me signale que :

Pour ceux qui comme moi, se trouvent avec un répertoire /domoticz/www/templates vide, la page d’exemple custom.example est disponible ici:
https://github.com/contactless/domoticz/blob/master/www/templates/custom.example

 

Merci à José de la précision.

 

Le contenu de ce fichier html étant libre on peut y affecter ce que l’on désire.

customactu Par exemple on crée un fichier video.html dans /template , on y place le code html correspondant

<!DOCTYPE html>
<html>
  <body>
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div id="player"></div>

    <script>
      // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    ..................

et la page « Custon » / « Video » affiche notre contenu

mycustompage

ou bien un actu.html qui contient l’iframe google destinée aux actualités nous affiche les news dans l’iframe dédiée, etc, etc..

Étonnant non !!

etonnantnon

Pour toute question technique concernant cet article, veuillez utiliser les forum situés à https://easydomoticz.com/forum/

Webmasters à vos marques !

Nouveauté dans les versions > 2183, la gestion de thèmes pour l’interface web de Domoticz.

Le menu « Configuration de l’application »  puis « Paramètres » fait apparaître maintenant un sélecteur de thèmes en dessous du choix du langage.

Themes-selector

(si ce n’est pas le cas videz le cache de votre navigateur)

La version 2196 apporte 4 thèmes différents déclinés en gray et blue.

Un prochain article nous parlera des « Custom Pages » … teasing …

Custom pages

« Custom pages » qui consistent à afficher la page ci-dessus ou bien d’autres pages web à l’intérieur de Domoticz. Ce sera l’objet de plusieurs prochains articles.

Encore une fois on voit ici l’ouverture et la puissance de Domoticz en œuvre.

Détaillons ces nouveaux aspects concernant les thèmes..

I – Les thèmes.

Les thèmes sont dans le dossier domoticz/www/styles

On retrouve 4 dossiers dont les noms sont ceux que l’on retrouve dans l’interface web.

  • element-dark
  • element-light
  • simple-blue
  • simple-gray

Ces dossiers sont les squelettes des thèmes, ils contiennent au minimum un fichier css et tous les fichiers nécessaires à l’affichage du site (images, fontes, css …).

N.B le dossier image situé ici ne contient que les images du thème. les images des switches ne sont pas ici mais dans /domoticz/www/images/.

La lecture du fichier css montre que l’on peut redéfinir énormément de choses dans l’interface.

la preuve avec .navbar .nav repeinte en rouge !domoticz_web

Pour créer un nouveau thème, il suffira donc de créer un dossier et d’y déposer tous les fichiers nécessaires et de le sélectionner dans l’interface.

to be continued …

Pour toute question technique concernant cet article, veuillez utiliser les forum situés à https://easydomoticz.com/forum/

Le forum de Easydomoticz est accessible via Tapatalk

La pause déjeuner d’hier ayant connu l’état de grâce, le vent des dieux de l’informatique et de phpbb réunis ont soufflé et donc :

trompette tapatalktapatalk forum

Amis lecteurs, possesseurs d’un smartphone, soyez avertis que le forum Easydomoticz est désormais accessible via l’appli Tapatalk

Téléchargements du logiciel dans les « store » respectifs de vos smartphones ou ici https://tapatalk.com/download_free_tapatalk.php?id=0 ou avec cela

qr_13 tapatalkUne fois le logiciel installé, recherchez ensuite Easydomoticz et abonnez vous.

Bonne lecture.

Pour toute question technique concernant cet article, veuillez utiliser les forum situés à https://easydomoticz.com/forum/

Le Waf, le phpMyDomo et Nginx

bbtUn titre à la Sergio Leone, pour parler ici de l’installation de phpMydomo avec le serveur web Nginx, inclus dans l’image Domoticz par exemple.

Toutefois l’auteur de phpMyDomo nous précise sur son site :

For experts only: Using the Apache webserver is the recommended way to install phpMyDomo, but if you prefer to use Nginx instead of Apache, you might try the following unsupported method.

Pour ceux qui n’ont pas fait anglais, on traduirait ça par :

Pour experts seulement:Apache est la meilleure méthode pour phpMydomo, mais si vous préférez utiliser Nginx que Apache, vous pouvez essayer la méthode non supportée ci-dessous.

Allez y mais c’est casse gueule (non ça c’est moi qui rajoute)

Pour les tétus qui envisagent de poursuive, une grande partie de l’article initial basé sur Apache est valable et sera donc repris tel quel ici.

Allons y : <citation>

Dans notre quête désespérée d’augmenter notre WAF face à nos outils de geek, je vous propose aujourd’hui un logiciel d’interface de pilotage relié à Domoticz.

Pour rappel : Le Wife Acceptance Factor ou Woman Acceptance Factor (WAF) désigne le niveau de conflit potentiel engendré par un objet, auprès des non-utilisateurs cohabitant avec les utilisateurs dudit objet: source wikipedia.

Il s’agit d’une surcouche visuelle permettant de piloter Domoticz.

PhpMydomo  : les fonctionnalités

  • Les interrupteurs, les scènes et Dim (experimental) sont supportés.
  • Visualisation des sensors sur la même page ou sur une page personnalisée.
  • Visu des caméras  IP sur un page unique.
  • Affichage d’une galerie photo.
  • Lancement d’action depuis une URL.
  • Support de Responsive design :Affichage optimisé sur Android/IOS tablet, smartphone et web browser
  • Peu de puissance demandée : un serveur php suffit.
  • Free and Open Source.

Le résultat à obtenir est quelque chose comme cela :

01 03

</citation>

Cet outil peut être installé soit :

Comment savoir si on a Nginx ou apache installé ?

Dans un navigateur, tapez votre ip du raspberryNginx

Si vous avez  un message « It works » c’est Apache, direction ici

Bien ces préalables évacués , au boulot !

Lire la suite

Pour toute question technique concernant cet article, veuillez utiliser les forum situés à https://easydomoticz.com/forum/

Complément pour phpMyDomo

Suite à l’article sur la mise en place de l’interface phpMyDomo plusieurs lecteurs m’ont signalé des difficultés liées au démarrage du serveur Apache lié à phpMyDomo sur des configurations ou Ngnix était déjà activé par défaut.

L’article ici détaille la configuration nécessaire pour éviter ces conflits entre les 2 serveurs web et le port 80.

Pour les courageux qui désirent installer phpMyDomo sous Nginx un article est disponible à cette adresse : https://easydomoticz.com/le-waf-le-phpmydomo-et-nginx

L’article initial à été lui aussi mis à jour avec ces compléments.

Les faits :

Dans le tuto initial l’incident se produit lorsque on tente de redémarrer Apache par un sudo apache2ctl restart

Aie : une erreur !!

Suite au restart vous avez « Adress already in use….. to adresss 0.0.0.0:80 »

erreur_apache2

Il s’agit d’un conflit entre le Nginx installé par défaut et le Apache que l’on tente de lancer sur le même port 80.

Changeons le port Apache2

  • Éditer le fichier /etc/apache2/ports.conf, on y trouve :
NameVirtualHost *:80
Listen 80

que l’on remplace par :

NameVirtualHost *:81
Listen 81

si je veux utiliser le port 81 pour PhpMyDomo, sinon mettez le port que vous souhaitez.

  • Toutefois cela ne suffit pas, il faut aussi changer le port du Vhost

Éditer /etc/apache2/sites-available/default et changer la ligne du haut par un :

<VirtualHost *:81>

Relançons avec un sudo apache2ctl restart, les messages d’erreur précédents doivent avoir disparu.

Donc maintenant sur le port 80 j’ai Nginx

Nginxet sur le port 81 :

Apache2N.B : Souvenez vous que phpMyDomo utilise le port 81, votre navigateur doit pointer sur votre_adresse_ip_raspberry:81 et que si vous avez installé phpMyDomo dans un sous répertoire comme moi, l’adresse complète sera : votre_adresse_ip_raspberry:81/pmd

Voila ,et maintenant ça marche. 😆

Merci aux commentateurs du blog qui ont permis de compléter ce document.

testeapprouve

Pour toute question technique concernant cet article, veuillez utiliser les forum situés à https://easydomoticz.com/forum/