Moi aussi je suis vraiment preneur d’un tuto pour essayer de comprendre réellement comment tu arrives à faire ça.
@kaktusatomik @noodom sans rentrer en profondeur dans l’explication de ton code, peux-tu nous expliquer quelles sont les variables qui pourraient nous aider à l’adapter à notre installation.
Par exemple, est ce qu’il faut que notre widget soit exactement nommé comme le tien? est ce que dans le CSS il faut adapter quelque chose etc…
Merci d’avance pour ta réponse.
@kaktusatomik désolé de persister mais je n’arrive pas à rendre visible ton widget sur mes ouvrants.
Tu pourrais nous expliquer un peu mieux ?
Je fais un tuto dès que j’ai un peu de temps. Tu es bien en v4 ?
oui oui je suis en V4
Très classe, merci pour ce tuto !
P’tite question : avec quoi as-tu fait ton « plan », photoshop ?
Merci 
Pour mon plan je l’ai fait en SVG en utilisant le plugin HTML Display
<style>
.parpaing {
stroke-width: 10;
fill: none;
}
.placo {
stroke-width: 5;
fill: none;
}
.porte {
stroke-width: 2;
fill: none;
stroke: #249DFF;
stroke-opacity: 0.6;
}
.ouvrant {
stroke-width: 1;
stroke: #249DFF;
stroke-opacity: 0.4;
fill: none;
}
.mobilier {
stroke-width: 5;
stroke: #249DFF;
stroke-opacity: 0.2;
fill: none;
}
</style>
<svg height="900" width="1400">
<!--canape-->
<rect class="mobilier" x="850" y="160" width="60" height="150" />
<polyline points="870,160 870,310" class="mobilier" />
<polyline points="870,235 910,235" class="mobilier" />
<!--tb-->
<rect class="mobilier" x="940" y="210" width="40" height="90" />
<!--tele-->
<rect class="mobilier" x="1020" y="250" width="30" height="90" />
<!--ficus-->
<circle cx="670" cy="130" r="20" class="mobilier" />
<!--poele-->
<circle cx="850" cy="430" r="20" class="mobilier" />
<!--vaiseller-->
<rect class="mobilier" x="835" y="480" width="35" height="60" />
<!--buffet-->
<rect class="mobilier" x="645" y="280" width="35" height="140" />
<!--table-->
<rect class="mobilier" x="730" y="220" width="50" height="150" />
<!--cuisine-->
<rect class="mobilier" x="705" y="597" width="40" height="160" />
<rect class="mobilier" x="750" y="718" width="120" height="40" />
<rect class="mobilier" x="705" y="550" width="40" height="40" />
<rect class="mobilier" x="835" y="640" width="35" height="35" />
<!--entree-->
<use xlink:href="#porte" x="644" y="717" />
<!--couloir-->
<use xlink:href="#porte" x="538" y="606" transform="rotate(270 538 606)" />
<!--cuisine-->
<use xlink:href="#porte" x="927" y="574" transform="rotate(90 927 574)" />
<!--cellier-->
<use xlink:href="#porte" x="882" y="390" />
<!--jardin-->
<use xlink:href="#porte" x="1110" y="497" transform="rotate(180 1110 497)" />
<!--bureau-->
<use xlink:href="#porte" x="499" y="500" />
<!--wc-->
<use xlink:href="#porte" x="640" y="548" transform="rotate(90 640 548)" />
<!--robin-->
<use xlink:href="#porte" x="402" y="553" transform="rotate(270 402 553)" />
<!--sdb-->
<use xlink:href="#porte" x="348" y="606" transform="rotate(270 348 606)" />
<!--chambre-->
<use xlink:href="#porte" x="528" y="607" transform="rotate(90 528 607)" />
<!--ami-->
<use xlink:href="#porte" x="457" y="662" transform="rotate(180 457 662)" />
<use xlink:href="#maison" x="0" y="0" stroke="#249DFF" />
<use xlink:href="#maison" x="0" y="0" stroke="url(#pattern)" />
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Pattern courtesy of https://iros.github.io/patternfills/ -->
<pattern id="pattern" patternUnits="userSpaceOnUse" width='6' height='6'>
<path d="M5 0h1L0 6V5zM6 5v1H5z" fill="#111" fill-opacity="0.5" />
</pattern>
<symbol id="porte">
<polyline points="2,2 2,52 52,52 " class="porte" />
<path d="M 2,2 C 26,2 52,26 52,52" class="ouvrant" />
</symbol>
<symbol id="maison">
<!--robin-->
<polyline points="495,300 495,445 460,445 460,550 " class="placo" />
<polyline points="265,480 400,480 400,555" class="placo" />
<polyline points="400,550 405,550 " class="placo" />
<!--sdb-->
<polyline points="265,610 405,610 " class="placo" />
<polyline points="400,610 400,605 " class="placo" />
<!--ami-->
<polyline points="455,610 475,610 " class="placo" />
<polyline points="470,610 470,725 435,725 435,820" class="placo" />
<!--chambre-->
<polyline points="525,610 633,610 633,765 " class="placo" />
<polyline points="590,610 590,605" class="placo" />
<!--bureau-->
<polyline points="455,550 500,550 " class="placo" />
<polyline points="550,550 595,550 " class="placo" />
<polyline points="590,555 590,460 637,460" class="placo" />
<!--wc-->
<polyline points="637,550 637,305" class="placo" />
<!--cuisine-->
<polyline points="700,765 700,545 780,545" class="placo" />
<polyline points="830,545 877,545" class="placo" />
<polyline points="877,625 877,765 " class="placo" />
<polyline points="877,575 877,395 920,360 1100,360" class="placo" />
<!--cellier-->
<polyline points="1100,440 935,440" class="placo" />
<polyline points="885,440 877,440" class="placo" />
<polyline points="1105,445 1105,355 1060,355 1060,245 1035,215" class="parpaing" />
<polyline points="1060,820 1105,820 1105,490" class="parpaing" />
<polyline points="820,765 875,765 875,820 930,820" class="parpaing" />
<polyline points="695,765 765,765" class="parpaing" />
<polyline points="575,820 635,820 635,765 645,765" class="parpaing" />
<polyline points="520,820 385,820" class="parpaing" />
<polyline points="330,820 260,820 260,300 355,300" class="parpaing" />
<polyline points="410,300 535,300" class="parpaing" />
<polyline points="590,300 635,300 635,235" class="parpaing" />
<polyline points="635,180 635,90 720,90" class="parpaing" />
<polyline points="850,90 930,90 960,125" class="parpaing" />
</symbol>
</defs>
</svg>
ça me permet de pouvoir modifier très facilement les épaisseurs, couleurs, etc
Franchement top ! Beau boulot ! Merci pour ces infos 
Ah, j’aime !
Pas mal l’intégration de toutes les infos sur le même design.
Après je suis moins fan des boxes objet et plus partisan de bouton que les objets d’origine.
Tout le reste est vraiment pas mal du tout !
J’avoue qu’il n’est pas aussi travaillé que le tiens 
mais je m’en inspirerai 
1 « J'aime »
Salut @kaktusatomik
J’ai une question probablement un peu hors sujet. Les capteurs que tu utilises pour détecter l’ouverture/fermeture sont des Xiaomi ?
Du coup la box est obligatoire pour les faire fonctionner ?
En cas de coupure Internet ça fonctionne tjrs (LAN OK, WAN KO) ?
Merci !
Ce ne sont pas des boxes mais des passerelles.
Tu peux aussi t’en affranchir, il existe des clés dédiées pour contourner cela.
Néanmoins, tu peux fermer les ports de communication des gateways sur le net pour te garantir une pure communication LAN.
Les passerelles ne fonctionnent que sur un WAN au moment de leur configuration, déclaration. Après, ce n’est que de la remontée de données sur le serveur Xiaomi (d’où la fermeture des ports) ou lors d’update voulue par l’utilisateur si tu veux pouvoir utiliser les derniers capteurs/actionneurs sortis par la marque.
L’autre intérêt des passerelles est l’utilisation de l’anneau de couleur ou du son (et encore je regrette toujours l’excellent XiaomiTalk de @nebz …
1 « J'aime »
Salut,
Oui ce sont des capteurs xiaomi. Mais je n’utilise pas la gateway xiaomi mais comme le dit @benj29 j’utilise une clé deconz conbee2. Mon raspberry est ondulé et mon routeur aussi donc même en cas de coupure de courant le système reste fonctionnel.
@benj29 et @kaktusatomik
Merci à tous les deux pour votre réponse, je vais regarder cette histoire de clé « deconz conbee2 » connait pas.
@benj29 :
(oui pour « gateway » et non pas « boxes » : il était trop tôt ce matin pour que je trouve le bon terme )
J’ai migré tout mon Xiaomi sur une clé Conbee 2 hier et franchement ça marche vraiment pas mal. Je regrette pas de me séparer de la gateway Xiaomi (surtout que maintenant en cas de coupure d’élec, je récupère toujours les infos des capteurs !).
2 choses à savoir :
- Pour être sûr d’avoir une bonne portée, mettre la clé sur le canal Zigbee 25 et le wifi 2,4Ghz de la maison sur les canaux 1 et/ou 6 (s’assurer que les voisins soient pas en canal 11)
- L’inclusion peut être difficile voir impossible avec des capteurs dont les batteries sont faibles (pas mal galéré la dessus). L’astuce : avoir une pile neuve, tu changes la batterie le temps de l’inclusion du capteur puis tu remets celle d’origine
Salut !
Je connaissais pas et vu ce que je lis ça donne envie, parce que tu as raison que c’est galère après une coupure elect, ou un changement d’IP … faut tout rechercher, reprendre le bon serveur dans le bon pays etc etc … Je ne me sers pas du son, et quand à l’anneau lumineux une ampoule rgb et hop c’est remplacé !
Je vais voir ça, j’ai une grosse partie de ma config à refaire. J’ai de nouveaux voisins qui semblent amateur de domotique et pour l’heure je n’ai rien encrypté habitant à la campagne. donc j’envisage cette clé que je ne connaissais pas encore ce matin …
Il suffit aussi de mettre la passerelle sur onduleur comme le reste, ce que je fais. Mais la clé est une très bonne solution selon les préférences de chacun.
C’est vrai que mettre la passerelle sur onduleur est une bonne idée !
@shewy pour ma part, l’argument de la RGB est quand même non waf. L’avantage de la passerelle, ça reste propre dans une prise murale dans un meuble l’éclairage d’ambiance permet de savoir ce qu’il y a.
Sauf erreur, je n’ai jamais vu de RGB aussi « propre » ou alors en DIY.
Moi je regrette vraiment le plugin de @nebz car sincèrement le TTS en notification est l’arme ultime je trouve.
je l’ai adapté pour les homepods