[Présentation] Kaktusatomik

Merci :smiley:
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 :slight_smile:

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 :wink: mais je m’en inspirerai :grin:

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 :wink: )

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 :wink:

Oui enfin le prix c’est pas le même :smiley:
Si encore y avait un light…

Oh que oui ! J’ai aujourd’hui 5 onduleurs … mais cette petite passerelle n’y est pas.
D’ailleurs c’est plus que vivement conseillé pour de nombreuses choses comme la box d’accès à Internet qui est relativement sensible aux micro-coupures

Pour l’anneau, perso je m’en sers juste pour savoir dans quel mode se trouve la maison en soirée.
Du coup au lieu d’allumer bleu pour le mode soirée, il me suffirait d’allumer une ampoule d’ambiance en orangé par exemple.
Au lieu du blanc pour le mode normal, allumer cette même rgb en blanc :slight_smile: et hormis l’anneau rouge pour le mode « danger » je m’en sers pas plus…

Alors que je m’en sers dans la maison pour plein de choses et à différents endroits (3 au total)

  • vert : alarme désactivée
  • orange : problème critique - problème d’activation ; notification critique santé d’un élément système ; fuite d’eau ; délestage en cours ; détection de mouvement
  • rouge : alarme activée et intrusion
    Les sirènes aussi et les sons pré-enregistrés que j’ai fait pour les autres alarmes (incendie, eau, détection de mouvement)
  • blanc : mon fils s’est levé - sieste ou dodo…

Pour répondre à @Zak1974
Voici le code pour les widgets radiateur :

<div class="cmd cmd-widget #history#" data-type="info" data-subtype="string" data-template="tmpldesignradiateur" data-version="#version#" data-eqLogic_id="#eqLogic_id#" data-cmd_id="#id#" data-cmd_uid="#uid#">
  <span class="iconCmdLine design_radiateur"></span>
	<script>
		jeedom.cmd.update['#id#'] = function(_options){
			var cmd = $('.cmd[data-cmd_id=#id#]');
			var state = _options.display_value;
          	var icon = '';
          	switch(_options.display_value){
              case 'A':
                icon = 'design_radiateur_a';
                break;
              case 'E':
                icon = 'design_radiateur_e';
                break;
              case 'C':
                icon = 'design_radiateur_c';
                break;
              case 'H':
                icon = 'design_radiateur_h';
                break;
               
            }
			cmd.attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate+'<br/>Valeur : '+_options.display_value+'#unite#');
			cmd.find('.iconCmdLine').removeClass().addClass('iconCmdLine design_radiateur ' + icon);

		}
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
		$('body').on('changeThemeEvent', function (event, theme) {
			$('.cmd[data-cmd_id=#id#]').trigger('changeThemeEventCmd',theme);
		});
	</script>
</div>

Et le CSS associé

[data-page="plan"] .design_radiateur {
	width:45px;
	height:6px; 
    border-radius: 2px;
    display: block;
}
[data-page="plan"] .design_radiateur_a {
	background: repeating-linear-gradient(60deg, var(--al-info-color) , var(--al-info-color) 2px, #808080 2px, #808080 4px)
}
[data-page="plan"] .design_radiateur_e {
	background: repeating-linear-gradient(60deg, var(--al-success-color) , var(--al-success-color) 2px, #8b0 2px, #8b0 4px)
}
[data-page="plan"] .design_radiateur_c {
	background: repeating-linear-gradient(60deg, var(--al-danger-color) , var(--al-danger-color) 2px, #D30000 2px, #D30000 4px)
}
[data-page="plan"] .design_radiateur_h {
	background: repeating-linear-gradient(60deg, var(--al-warning-color) , var(--al-warning-color) 2px, #FF6A00 2px, #FF6A00 4px)
}			
1 « J'aime »

Et celui des thermostats :

<div class="cmd cmd-widget #history#" data-type="info" data-subtype="string" data-template="tmpldesignconsigne" data-version="#version#" data-eqLogic_id="#eqLogic_id#" data-cmd_id="#id#" data-cmd_uid="#uid#">
  <span class="iconCmdLine"></span>
	<script>
		jeedom.cmd.update['#id#'] = function(_options){
			var cmd = $('.cmd[data-cmd_id=#id#]');
			var state = _options.display_value;
          	var icon = '';
          	switch(_options.display_value){
              case 'Absent':
                icon = 'icon_orange';
                break;
              case 'Eco':
                icon = 'icon_green';
                break;
              case 'Confort':
                icon = 'icon_red';
                break;
              case 'Eco+':
                icon = 'icon_blue';
                break;
               
            }
			cmd.attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate+'<br/>Valeur : '+_options.display_value+'#unite#');
			cmd.find('.iconCmdLine').empty().append('<span class='+icon+' style="font-weight:bold;">'+state+'</span>');

		}
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
		$('body').on('changeThemeEvent', function (event, theme) {
			$('.cmd[data-cmd_id=#id#]').trigger('changeThemeEventCmd',theme);
		});
	</script>
</div>

1 « J'aime »

salut,

Merci pour tes codes.:grinning::grinning:

Un petit complément de mon installation :slight_smile: