Je continue encore aujourd’hui à travailler les boutons/widgets. Du coup, je vous propose un simple bouton Pulse pour votre design Jeedom 100% html et css, animé et facilement personnalisable.

L’idée de ce widget est de pouvoir mettre en valeur un bouton type Alarme, Ouverture d’une porte connectée, …

Voici les sources de ce widget :

<!--
  Widget name : pulse_button_mmi
  Author : geqr
  Website : www.ma-maison-intelligente.fr
  Tutorial : http://ma-maison-intelligente.fr/2020/04/bouton-pulse-pour-votre-design-jeedom/
  Origin : https://codepen.io/seansean11/pen/dhwzj
  Last Update : 20200414 - creation
 -->

<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'> 

<div id="Pulse#id#" 
     class='pulse-container cmd tooltips cmd-widget cursor' 
     data-type="action" data-subtype="other" data-cmd_id="#id#"
     onClick="jeedom.cmd.execute({id: '#id#'});">
  <span class='pulse-button'>#name#</span>
</div>

<style>
    
    /* to update with your values */
    :root {
  		--color_btn_hex: #5a99d4;
      	--color_btn_rgb: 35,60,83;
  		--color_text: white;
    	--size_btn:100px;
  	}
  
.pulse-container {
  width: 200px;
  height: 100%;
  margin: 0 auto 0;
  -webkit-perspective: 1000;
  -webkit-backface-visibility: hidden;
}

.pulse-button {
  display: block;
  width: var(--size_btn);
  height: var(--size_btn);
  font-size: 1.3em;
  font-weight: light;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  text-align: center;
  line-height: var(--size_btn);
  letter-spacing: -1px;
  color: var(--color_text);
  border: none;
  border-radius: 50%;
  background: var(--color_btn_hex);
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(var(--color_btn_rgb), 0.5);
  -webkit-animation: pulse 1.5s infinite;
}

.pulse-button:hover {
  -webkit-animation: none;
}

@-webkit-keyframes pulse {
  0% {
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  70% {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    box-shadow: 0 0 0 50px rgba(var(--color_btn_rgb), 0);
  }
  100% {
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(var(--color_btn_rgb), 0);
  }
}
</style>

A noter :

• Ce widget s’applique au commande unique,.
• J’utilise toujours la police Montserrat pour mon design, si vous souhaitez utiliser la police Arial ou une quelconque autre, il vous faudra supprimer ou changer la ligne 1 et ‘Montserrat’ ligne 41.
• Vous pourrez changer la couleur du bouton, du texte, et sa taille en jouant avec les paramètres en haut des sources.

    :root {
  		--color_btn_hex: #5a99d4;
      	--color_btn_rgb: 35,60,83;
  		--color_text: white;
    	--size_btn:100px;
  	}

Comment « installer » ce widget ?

En version V4, les widgets sont maintenant dans le core Jeedom. Il vous permet la création facile de widget en utilisant les templates mis à disposition.

Et le market semble maintenant cantonné à n’accueillir que les plugins, il vous faudra donc les ajouter manuellement.

Tout d’abord, rendez-vous dans les widgets de Jeedom V4 pour ajouter notre code html :

Il vous faudra ajouter ensuite les paramètre de création de ce nouveau widget :

• Version : Dashboard (PC) ou mobile
• Type : Info ou Action
• Sous-type : plusieurs options en fonction de votre cas d’usage
• Nom

Il vous faudra ensuite copier / coller le code html puis sauvegarder votre nouveau widget. Il sera maintenant possible de le sélectionner pour les commandes de vos équipements. Voici comment faire dans un exemple de virtuel avec une seule commande On/Off comme pour le bouton Halo.

Si vous voulez plus d’information sur le pourquoi d’une commande unique toggle On/Off, l’article sur le bouton Halo vous donnera toutes les informations.

Attention à votre virtuel, et les valeurs … c’est souvent la cause des difficultés d’intégration des widgets.

Et avec cette configuration, vous devriez avoir le rendu attendu.

Astuce si après modifications, rien ne se passe

Vous essayer peut-être de faire des modifications / personnalisations, mais une fois réalisées, rien ne se passe. Pas de panique, je vous conseille d’appliquer un autre widget à votre commande, puis remettre celui où vous avez fait vos modifications. Et maintenant Jeedom affichera les nouveautés!

Conclusion

J’espère que ce bouton Pulse pour votre design Jeedom vous sera utile. Il est totalement configurable et pourra s’adapter à vos thèmes.

N’hésitez pas à faire vos feedbacks ici ou sur ma page facebook.

A bientôt