Widget dynamique en V4

kaktusatomik · Décembre 27, 2019, 11:01

Bonjour,
Pour faire suite aux questions posées sur mon post de présentation

Voici ce que j’ai appliqué pour obtenir un widget animé en CSS.

1. Création du widget
Dans le menu Outils/widget
Dans le panneau Gestion/Code
Créer un nouveau widget de type info et sous-type binary pour une version Dashboard
Nommer ce widget et dans le bloc de code y insérer ceci :

<div class="cmd cmd-widget cursor #history#" data-type="info" data-subtype="binary" data-template="tmplicon" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
  <div class="content-sm">
    <span class="iconCmd"><div class="widget_design_porte design_porte" style="transform-origin: top left;"></div></span>
  </div>
  <script>
    jeedom.cmd.update['#id#'] =function(_options){
      var cmd = $('.cmd[data-cmd_id=#id#]');
      cmd.attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)
      if (_options.display_value == '1') {
        cmd.find('.iconCmd .widget_design_porte').removeClass('design_porte_fermee').addClass('design_porte_ouverte').css('transform','rotate(-45deg)');
      }else {
        cmd.find('.iconCmd .widget_design_porte').removeClass('design_porte_ouverte').addClass('design_porte_fermee').css('transform','rotate(0deg)');
      }
    }
    jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
  </script>
</div>

2. Mise en place du CSS personnalisé
Dans le menu Réglages/Système/Personnalisation avancée
Cocher la case Activer en haut à droite.
Puis ajouter ce CSS

[data-page="plan"] .design_porte{
	width:100%;
	height:10px; 
  transition: all 1s ease-out;
}
[data-page="plan"] .design_porte_fermee{
background-color:var(--al-success-color);
}

[data-page="plan"] .design_porte_ouverte{
background-color:var(--al-danger-color);
    border-radius: 2px;
}

3. Application sur une commande
Dans votre design insérer la commande seule
Puis en faisant un clic droit / Configuration avancée dans l’onglet affichage, sélectionner le widget précédemment créé Customtemp/xxxx
Enregistrer puis refaire un clic droit / Paramètres d’affichage
Dans CSS personnalisé insérer ici la taille souhaitée de la porte

width:50px !important;

Dans Appliqué le css personnalisé sur la classe correspondant

.design_porte

Enregistrer

4. Résultat
Vous devriez obtenir une porte qui s’ouvre à 45° et qui change de couleur à l’ouverture/fermeture

design

romain13120 · Décembre 27, 2019, 6:19

Merci @kaktusatomik ca marche parfaitement

Beber53 · Décembre 27, 2019, 8:58

Super idée et bonne explication

Merci je vais testé

kaktusatomik · Décembre 30, 2019, 9:06

Voici le code pour un widget fenêtre

<div class="cmd cmd-widget cursor #history#" data-type="info" data-subtype="binary" data-template="tmplicon" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
 
  <div class="content-sm">
    <span class="iconCmd"><div class="widget_design_fenetre" >
      <div class="design_fenetre design_fenetre_l" style="transform-origin: top left;display:inline-block;width:50%;"></div><div class="design_fenetre design_fenetre_r" style="transform-origin: top right;display:inline-block;width:50%;"></div>
      </div></span>
  </div>
  <script>
    jeedom.cmd.update['#id#'] =function(_options){
      var cmd = $('.cmd[data-cmd_id=#id#]');
     
      cmd.attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)
      if (_options.display_value == '1') {
        cmd.find('.iconCmd .design_fenetre_l').removeClass('design_fenetre_fermee').addClass('design_fenetre_ouverte').css('transform','rotate(-45deg)');
        cmd.find('.iconCmd .design_fenetre_r').removeClass('design_fenetre_fermee').addClass('design_fenetre_ouverte').css('transform','rotate(45deg)');
      }else {
        cmd.find('.iconCmd .design_fenetre').removeClass('design_fenetre_ouverte').addClass('design_fenetre_fermee').css('transform','rotate(0deg)');
      }
    }
    jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
  </script>
</div>

Avec son CSS

[data-page="plan"] .design_fenetre{
	width:100%;
	height:10px; 
  transition: all 1s ease-out;
}
[data-page="plan"] .design_fenetre_fermee{
background-color:var(--al-success-color);
}

[data-page="plan"] .design_fenetre_ouverte{
background-color:var(--al-danger-color);
    border-radius: 2px;
}

CSS personnalisé

width:55px !important

Appliqué le css personnalisé sur

.widget_design_fenetre

kaktusatomik · Décembre 30, 2019, 9:08

Et pour une baie vitrée

<div class="cmd cmd-widget cursor #history#" data-type="info" data-subtype="binary" data-template="tmplicon" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
 
  <div class="content-sm">
    <span class="iconCmd"><div class="widget_design_porte" style="width:100px;"><div class="design_porte"  style="position: absolute"></div></div></span>
  </div>
  <script>
    jeedom.cmd.update['#id#'] =function(_options){
      var cmd = $('.cmd[data-cmd_id=#id#]');
     
      cmd.attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)
      if (_options.display_value == '1') {
        cmd.find('.iconCmd .design_porte').removeClass('design_porte_fermee').addClass('design_porte_ouverte').css('width','50%');
      }else {
        cmd.find('.iconCmd .design_porte').removeClass('design_porte_ouverte').addClass('design_porte_fermee').css('width','100%');
      }
    }
    jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
  </script>
</div>

Avec son CSS (idem que la porte)

[data-page="plan"] .design_porte{
	width:100%;
	height:10px; 
  transition: all 1s ease-out;
}
[data-page="plan"] .design_porte_fermee{
background-color:var(--al-success-color);
}
[data-page="plan"] .design_porte_ouverte{
background-color:var(--al-danger-color);
    border-radius: 2px;
}

CSS personnalisé

width:130px !important;

Appliqué le css personnalisé sur

.widget_design_porte

maxredphenix · Janvier 2, 2020, 6:31

C’est vraiment bien et très épuré donc parfaitement lisible.
Merci pour le partage !!!

romain13120 · Janvier 13, 2020, 12:59

Une petite question,
Comment peux-t’on faire pour tourner le widget baie par exemple de 90°

kaktusatomik · Janvier 13, 2020, 1:05

Clic droit sur le composant,
Paramètres d’affichage/CSS personnalisé

 transform: rotate(90deg);

romain13120 · Janvier 13, 2020, 1:22

Merci @kaktusatomik

lcn · Avril 10, 2020, 8:19

Bonjour,

J’ai suivi ce tuto, mais l’insertion de la commande sur un design ne génère le message « undefined » à la place de l’ouvrant dans le bon status.

Le code html des murs doivent ils etre dans une classe css particulière pour que cela fonctionne ?

Ai je oublié quelquechose ?

Lonewolf · Avril 20, 2020, 3:09

Bonjour @kaktusatomik,

Merci pour le partage et ce super tuto, dans l’ensemble ça marche nickel!

Toutefois, j’ai un problème avec le widget porte, le CSS « transform: rotate(90deg); » n’a aucun effet sur le widget, il reste toujours dans le même sens. En revanche, ça marche très bien sur les widgets fenêtre et baie vitrée, j’arrive à les tourner dans le sens voulu.

J’ai raté quelque chose ou il y aurait un problème dans le code du widget porte qui empêcherait la rotation?

Merci

kaktusatomik · Avril 20, 2020, 3:27

Salut,
Il doit y avoir un soucis sur le sélecteur, voici un exemple :

Lulu0 · Avril 20, 2020, 5:50

Bonjour @kaktusatomik,

Merci pour ce tuto, tout marche parfaitement bien, c’est top !
Peux-tu partager le code de ta porte de garage ?

kaktusatomik · Avril 20, 2020, 6:20

Salut @Lulu0

Voici pour la porte de garage:

CSS

[data-page="plan"] .design_porte_garage_ouverte{
  background: repeating-linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,0) 20px, #f00 20px, #f00 40px);
}

Et le widget :

<div class="cmd cmd-widget cursor #history#" data-type="info" data-subtype="binary" data-template="tmplicon" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
 
  <div class="content-sm">
    <span class="iconCmd"><div class="widget_design_porte design_porte"></div></span>
  </div>
  <script>
    jeedom.cmd.update['#id#'] =function(_options){
      var cmd = $('.cmd[data-cmd_id=#id#]');
     
      cmd.attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)
      if (_options.display_value == '1') {
        cmd.find('.iconCmd .widget_design_porte').removeClass('design_porte_fermee').addClass('design_porte_ouverte design_porte_garage_ouverte');
      }else {
        cmd.find('.iconCmd .widget_design_porte').removeClass('design_porte_ouverte design_porte_garage_ouverte').addClass('design_porte_fermee');
      }
    }
    jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
  </script>
</div>

Les paramètres d’affichage :

Lonewolf · Avril 20, 2020, 7:07

Salut,
Merci pour ta réponse. Pourtant tout semble correct au niveau du CSS :

Du coup je vois pas…

kaktusatomik · Avril 21, 2020, 6:22

Ah oui effectivement, excuse moi.
J’avaisi créé des widgets différents en fonction de l’orientation de la porte et de sont sens d’ouverture.
Pour une porte à 90°

<div class="cmd cmd-widget cursor #history#" data-type="info" data-subtype="binary" data-template="tmplicon" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
 
  <div class="content-sm">
    <span class="iconCmd"><div class="widget_design_porte design_porte" style="transform-origin: bottom left;"></div></span>
  </div>
  <script>
    jeedom.cmd.update['#id#'] =function(_options){
      var cmd = $('.cmd[data-cmd_id=#id#]');
     
      cmd.attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)
      if (_options.display_value == '1') {
        cmd.find('.iconCmd .widget_design_porte').removeClass('design_porte_fermee').addClass('design_porte_ouverte').css('transform','rotate(145deg)');
      }else {
        cmd.find('.iconCmd .widget_design_porte').removeClass('design_porte_ouverte').addClass('design_porte_fermee').css('transform','rotate(90deg)');
      }
    }
    jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
  </script>
</div>

L’important c’est le rotate et le transform-origin qui défini sur quel point la rotation va se faire.

Lonewolf · Avril 21, 2020, 6:42

Bonjour,
J’avais aussi de mon côté réussi à jouer sur les angles des rotate du widget pour avoir la porte dans le bon sens. Seulement, lorsque on charge ou recharge le widget, on observe une transition depuis l’angle d’origine (0°). Sur les autres widgets, où on utilise le CSS personnalisé pour faire la rotation, il n’y a pas cette transition au chargement du design.
Mais bon voilà, c’est un détail, dans l’ensemble ça marche au top, encore merci pour tes réponses et le partage des codes.
Très bonne journée!

Lulu0 · Avril 21, 2020, 9:04

Merci beaucoup pour le partage !

sanji · Juin 7, 2020, 6:38

Tout d’abord, merci beaucoup pour ce partage, je trouve vraiment le design très attrayant.
J’ai passé la journée dessus - il a fallu du temps pour faire la carte de la maison - et j’ai quelques questions:

Je n’arrive pas à faire tourner les fenêtres de 90 degrés. Faut-il jouer avec les paramètres? En effet, transform: rotate(90deg) semble inopérant…
Serait-il possible de partager le widget permettant d’afficher l’ouverture des baies (slider) le long du mur (les deux du haut sur le design original)?
Finalement, lorsque ma fenêtre est grande (80 px), alors à l’ouverture, les battants dépassent du cadre et sont tronqués. Est-il possible de corriger cela ? Voici l’exemple:

Merci beaucoup encore,

sanji

sanji · Juin 9, 2020, 9:21

Je réponds à mon propre point numéro 1, la rotation des fenêtres fonctionne normalement maintenant, reste les deux points suivants