Bouton style indus pour votre design Jeedom

17 avril 2020 florian Commentaires 11 commentaires

Aujourd’hui, je vous propose un bouton style indus pour votre design Jeedom 100% html et css, animé et facilement intégrable. Il pourra très bien se fondre dans un thème industriel avec le menu Indus ou le menu bubble et les cadres sombres.

Voici un aperçu de comment il fonctionne.

Je vous partage donc ci-dessous les sources de ce bouton Style Indus pour votre design Jeedom.

<!--
  Widget name : indus_style_switch_mmi
  Author : geqr
  Website : www.ma-maison-intelligente.fr
  Tutorial : http://ma-maison-intelligente.fr/2020/04/bouton-styel-indus-pour-votre-design-jeedom/
  Origin : https://codepen.io/khaoula12/pen/BEfyz
  Last Update : 20200510 - checked accentuation
 -->
<style>

    :root {
  		--color_backgound:none; /*recommended dark background*/
    	--size_btn:6px;
  	}

.switch-container {
	font-family: arial, verdana, sans-serif;
	background: var(--color_backgound);
	text-align: center;
}

.switch {
	display: inline-block;
  	font-size: var(--size_btn) !important;
	margin: 10em 2em;
	position: relative;
	border-radius: 3.5em;
	-webkit-box-shadow: 0 0 0.5em rgba(255,255,255,0.2);
	-moz-box-shadow: 0 0 0.5em rgba(255,255,255,0.2);
	box-shadow: 0 0 0.5em rgba(255,255,255,0.2);
}

.switch label {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
}

.switch input {
	display: none;
}

.switch span {
	display: block;
	-webkit-transition: top 0.2s;
	-moz-transition: top 0.2s;
	-ms-transition: top 0.2s;
	-o-transition: top 0.2s;
	transition: top 0.2s;
}

.switch-border1 {
	border: 0.1em solid #000;
	border-radius: 3.5em;
	-webkit-box-shadow: 0 0.2em rgba(255, 255, 255, 0.2);
	-moz-box-shadow: 0 0.2em rgba(255, 255, 255, 0.2);
	box-shadow: 0 0.2em rgba(255, 255, 255, 0.2);
}

.switch-border2 {
	width: 6.6em;
	height: 12.6em;
	position: relative;
	border: 0.1em solid #323232;
	background-image: -webkit-gradient(linear, left top, right top, from(#2D2D2D), color-stop(0.5, #4B4B4B), to(#2D2D2D));
	background-image: -webkit-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
	background-image: -moz-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
	background-image: -ms-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
	background-image: -o-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
	background-image: linear-gradient(to right, #2D2D2D, #4B4B4B, #2D2D2D);
	border-radius: 3.4em;
}

.switch-border2:before,
.switch-border2:after {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	opacity: .3;
	border-radius: 3.4em;
}

.switch-border2:before {
	background: -webkit-gradient(linear, left top, left bottom, from(#000), to(rgba(0,0,0,0)));
	background: -webkit-linear-gradient(#000, rgba(0,0,0,0));
	background: -moz-linear-gradient(#000, rgba(0,0,0,0));
	background: -ms-linear-gradient(#000, rgba(0,0,0,0));
	background: -o-linear-gradient(#000, rgba(0,0,0,0));
	background: linear-gradient(#000, rgba(0,0,0,0));
}

.switch-border2:after {
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(#000));
	background: -webkit-linear-gradient(rgba(0,0,0,0), #000);
	background: -moz-linear-gradient(rgba(0,0,0,0), #000);
	background: -ms-linear-gradient(rgba(0,0,0,0), #000);
	background: -o-linear-gradient(rgba(0,0,0,0), #000);
	background: linear-gradient(rgba(0,0,0,0), #000);
}

.switch-top {
	width: 100%;
	height: 84%;
	position: absolute;
	top: 8%;
	left: 0;
	z-index: 1;
	background-image: -webkit-gradient(linear, left top, right top, from(#2D2D2D), color-stop(0.5, #4B4B4B), to(#2D2D2D));
	background-image: -webkit-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
	background-image: -moz-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
	background-image: -ms-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
	background-image: -o-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);
	background-image: linear-gradient(to right, #2D2D2D, #4B4B4B, #2D2D2D);
	border-radius: 3.4em;
}

.switch-shadow {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	border-radius: 3.4em;
	-webkit-box-shadow: 0 0 2em black inset;
	-moz-box-shadow: 0 0 2em black inset;
	box-shadow: 0 0 2em black inset;
}

.switch-handle-left,
.switch-handle-right {
	content: '';
	display: block;
	width: 3.6em;
	height: 0;
	position: absolute;
	top: 6.6em;
	z-index: 2;
	border-bottom: 4.5em solid #111;
	border-left: 0.7em solid transparent;
	border-right: 0.7em solid transparent;
	border-radius: 0;
}

.switch-handle-left {
	left: 0.8em;
}

.switch-handle-right {
	right: 0.8em;
}

.switch-handle {
	width: 3.6em;
	height: 4.5em;
	position: absolute;
	top: 6.6em;
	left: 1.5em;
	z-index: 3;
	background: #333;
	background-image: -webkit-gradient(linear, left top, right top, from(#111), color-stop(0.4, #777), color-stop(0.5, #888), color-stop(0.6, #777), to(#111));
	background-image: -webkit-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
	background-image: -moz-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
	background-image: -ms-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
	background-image: -o-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
	background-image: linear-gradient(to right, #111, #777 40%, #888, #777 60%, #111);
	border-radius: 0;
}

.switch-handle-top {
	width: 5em;
	height: 5em;
	position: absolute;
	top: 8.5em;
	left: 0.8em;
	z-index: 4;
	background-color: #555;
	background-image: -webkit-gradient(linear, left top, right top, from(#5F5F5F), to(#878787));
	background-image: -webkit-linear-gradient(left, #5F5F5F, #878787);
	background-image: -moz-linear-gradient(left, #5F5F5F, #878787);
	background-image: -ms-linear-gradient(left, #5F5F5F, #878787);
	background-image: -o-linear-gradient(left, #5F5F5F, #878787);
	background-image: linear-gradient(to right, #5F5F5F, #878787);
	border-top: 0.2em solid #AEB2B3;
	border-radius: 2.5em;
}

.switch-handle-bottom {
	width: 3.6em;
	height: 3.6em;
	position: absolute;
	top: 4.7em;
	left: 1.5em;
	z-index: 3;
	background: #333;
	background-image: -webkit-gradient(linear, left top, right top, from(#111), color-stop(0.4, #777), color-stop(0.5, #888), color-stop(0.6, #777), to(#111));
	background-image: -webkit-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
	background-image: -moz-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
	background-image: -ms-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
	background-image: -o-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);
	background-image: linear-gradient(to right, #111, #777 40%, #888, #777 60%, #111);
	border-top: 0.2em solid #141414;
	border-radius: 1.8em;
}

.switch-handle-base {
	width: 4.2em;
	height: 4.2em;
	position: absolute;
	top: 3.8em;
	left: 1.2em;
	z-index: 2;
	border-top: 0.2em solid rgba(255,255,255,0.35);
	border-radius: 2.1em;
	-webkit-box-shadow: 0 0 0.5em rgba(0,0,0,0.8) inset;
	-moz-box-shadow: 0 0 0.5em rgba(0,0,0,0.8) inset;
	box-shadow: 0 0 0.5em rgba(0,0,0,0.8) inset;
}

.switch-led {
	position: absolute;
	left: 2em;
	border-radius: 1.4em;
}

.switch-led-border {
	border: 0.2em solid black;
	border-radius: 1.3em;
}

.switch-led-light {
	border-radius: 1.1em;
	-webkit-box-shadow: 0 0 0.5em rgba(255,255,255,0.5) inset;
	-moz-box-shadow: 0 0 0.5em rgba(255,255,255,0.5) inset;
	box-shadow: 0 0 0.5em rgba(255,255,255,0.5) inset;
}

.switch-led-glow {
	width: 2em;
	height: 2em;
	position: relative;
	border-radius: 1em;
  background: rgba(0, 0, 0, 0.3);
}

.switch-led-glow:before {
	content: '';
	display: block;
	width: 0.6em;
	height: 0.6em;
	position: absolute;
	top: 0.3em;
	left: 0.7em;
	background: rgba(255,255,255,0.2);
	border-radius: 0.3em;
	-webkit-box-shadow: 0 0 1em rgba(255,255,255,0.75);
	-moz-box-shadow: 0 0 1em rgba(255,255,255,0.75);
	box-shadow: 0 0 1em rgba(255,255,255,0.75);
}

.switch-led-glow:after {
	content: '';
	display: block;
	width: 0;
	height: 0;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0.2;
	filter: alpha(opacity=20);
	border: 1em solid #fff;
	border-color: transparent #fff transparent #fff;
	border-radius: 1em;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}

.switch-led:after {
	display: block;
	width: 100%;
	position: absolute;
	left: 0;
	color: #666;
	font-family: arial, verdana, sans-serif;
	font-weight: bold;
	text-align: center;
	text-shadow: 0 0.1em rgba(0,0,0,0.7);
}

.switch-led-green:after {
	content: 'ON';
	top: -1.8em;
}

.switch-led-red:after {
	content: 'OFF';
	bottom: -1.8em;
}

.switch-led-green {
	top: -5em;
	border-top: 0.1em solid rgba(0,161,75,0.5);
	border-bottom: 0.1em solid rgba(255,255,255,0.25);
}

.switch-led-green .switch-led-light {
	background: rgb(0,161,75);
	border: 0.1em solid rgb(0,104,56);
}

.switch-led-red {
	bottom: -5em;
	border-top: 0.1em solid rgba(237,28,36,0.2);
	border-bottom: 0.1em solid rgba(255,255,255,0.25);
	/*-webkit-box-shadow: 0 0 3em rgb(237,28,36);
	-moz-box-shadow: 0 0 3em rgb(237,28,36);
	box-shadow: 0 0 3em rgb(237,28,36);*/
  -webkit-box-shadow: 0px 0px 30px 2px rgba(237,28,36,1);
  -moz-box-shadow: 0px 0px 30px 2px rgba(237,28,36,1);
  box-shadow: 0px 0px 30px 2px rgba(237,28,36,1);
}

.switch-led-red .switch-led-light {
	background: rgb(237,28,36);
	border: 0.1em solid rgb(161,30,45);
}

.switch-led-red .switch-led-glow {
	background: #fff;
	background: rgba(255, 255, 255, 0.3);
	filter: alpha(opacity=30);
}

/* Switch on */

.switch input:checked~.switch-handle-left, .switch input:checked~.switch-handle-right {
	top: 1.5em;
	border-bottom: 0;
	border-top: 4.5em solid #111;
}

.switch input:checked~.switch-handle {
	top: 1.5em;
}

.switch input:checked~.switch-handle-top  {
	top: -1em;
	border-top: 0;
	border-bottom: 0.2em solid #AEB2B3;
}

.switch input:checked~.switch-handle-bottom {
	top: 4.2em;
	border-top: 0;
	border-bottom: 0.2em solid #141414;
}

.switch input:checked~.switch-handle-base {
	top: 4.5em;
	border-top: 0;
	border-bottom: 0.2em solid rgba(255,255,255,0.35);
}

.switch input:checked~.switch-led-green {
	/*-webkit-box-shadow: 0 0 3em rgb(0,161,75);
	-moz-box-shadow: 0 0 3em rgb(0,161,75);
	box-shadow: 0 0 3em rgb(0,161,75);*/
  -webkit-box-shadow: 0px 0px 30px 2px rgba(0,161,75,1);
  -moz-box-shadow: 0px 0px 30px 2px rgba(0,161,75,1);
  box-shadow: 0px 0px 30px 2px rgba(0,161,75,1);
}

.switch input:checked~.switch-led-green .switch-led-glow {
	background: #fff;
	background: rgba(255, 255, 255, 0.4);
	filter: alpha(opacity=40);
}

.switch input:checked~.switch-led-red {
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

.switch input:checked~.switch-led-red .switch-led-glow {
	/*background: rgba(255, 255, 255, 0);*/
  background: rgba(0, 0, 0, 0.3);
	filter: alpha(opacity=0.3);
}
</style>

<div class="switch-container">
  <span id="Switch#id#"
        class="switch cursor cmd tooltips cmd-widget"
        data-type="action" data-cmd_id="#id#" data-cmd_uid="#uid#">
      <span class="switch-border1">
          <span class="switch-border2">
              <input id="Switch-input#id#" type="checkbox"
                     onClick="jeedom.cmd.execute({id: '#id#'});" />
              <label for="Switch-input#id#"></label>
              <span class="switch-top"></span>
              <span class="switch-shadow"></span>
              <span class="switch-handle"></span>
              <span class="switch-handle-left"></span>
              <span class="switch-handle-right"></span>
              <span class="switch-handle-top"></span>
              <span class="switch-handle-bottom"></span>
              <span class="switch-handle-base"></span>
              <span class="switch-led switch-led-green">
                  <span class="switch-led-border">
                      <span class="switch-led-light">
                          <span class="switch-led-glow"></span>
                      </span>
                  </span>
              </span>
              <span class="switch-led switch-led-red">
                  <span class="switch-led-border">
                      <span class="switch-led-light">
                          <span class="switch-led-glow"></span>
                      </span>
                  </span>
              </span>
          </span>
      </span>
  </span>
</div>

<script type="text/javascript">
  jeedom.cmd.update['#id#'] = function(_options){
  if (_options.display_value == '1' || _options.display_value == 1 || _options.display_value == '99' || _options.display_value == 99 || _options.display_value == 'on') {
    document.getElementById('Switch-input#id#').checked = true;
      if (jeedom.cmd.normalizeName('#name#') == 'on') {
        $('.cmd[data-cmd_uid=#uid#]').hide();
      }else{
        $('.cmd[data-cmd_uid=#uid#]').show();
      }
    } else {
      document.getElementById('Switch-input#id#').checked = false;
      if (jeedom.cmd.normalizeName('#name#') == 'off') {
        $('.cmd[data-cmd_uid=#uid#]').hide();
      }else{
        $('.cmd[data-cmd_uid=#uid#]').show();
      }
    }
  }
  jeedom.cmd.update['#id#']({display_value:'#state#'});
</script>

Pour ce widget, vous pourrez paramétrer la taille du widget ainsi que la couleur du background. Je vous recommande d’avoir un style sombre en background, noir ou gris foncé pour qu’il est un rendu optimal.

Comment « installer » ce widget sans passer par le Market ?

En version V4, les widgets sont maintenant dans le core Jeedom. La création de widget devient donc facile en utilisant les templates mis à disposition. Dans le cas de ce widget un peu plus compliqué, il faudra passer par l’ajout de code. Je vous montre.

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

0 - outils widget — 1 – Menu outils puis widgets

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

Création bouton style indus — 4 – Paramètrage

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 basique de virtuel de ce genre :

Attention à votre virtuel, les valeurs passées, … c’est souvent la cause des difficultés. Et maintenant passons à la configuration :

1 – Sur l’écran commande, clic sur le bouton des paramètres de la commande « On »

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

Si vous souhaitez commander un équipement distinct …

Voici une petite astuce pour commander, grâce à ce widget appliqué à un virtuel, un équipement tiers. En reproduisant cette configuration de votre virtuel :

#[TestMaison][Test1][On] est un exemple d’équipement tiers avec une commande On et une commande Off, type lampe, que l’on essaye d’allumer. Puis en appliquant ce widget à la commande On puis la commande Off, vous devriez avoir un comportement qui fonctionne.

Conclusion

J’espère que ce bouton style Indus pour votre design Jeedom trouvera une place de choix avec menu et cadres associés. Il reste facilement personnalisable en terme de taille si vous souhaitez plusieurs occurrences de celui ci dans votre design.

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

A bientôt

11 réflexions sur « Bouton style indus pour votre design Jeedom »

Georges dit :

30 avril 2020 à 18 h 39 min

Hello Champion,
il est trop classe ce bouton ! Mais serait-il possible (comme nous en avions déjà parlé) de ne faire apparaître qu’une seule LED (en haut par exemple) tjrs en rouge ou vert en fct de l’état bien sûr… Et aussi sur un petit design (smartphone par exemple) je trouve que les mentions « on » et « off » se lisent mal…on pourrait ne pas les afficher ? Qu’en penses-tu ?
Gio

Répondre
1. florian dit :
  
  1 mai 2020 à 15 h 26 min
  
  Merci Georges 🙂
  Je pense à accentuer la couleur activée et noircir celle non activée. Histoire en effet de rendre plus clair et explicite.
  Bonne idée pour le nom, je l’avais enlevé, je vais le remettre et il sera quoi qu’il arrive optionnel.
  
  Répondre
Georges dit :

30 avril 2020 à 18 h 45 min

autre idée (tu peux regrouper les 2 !) :
vu qu’il faut en général tjrs nommer le bouton (ex : « lampe chevet ») le top du top serait de gérer un « paramètre optionnel » du widget (txt) ds lequel on mettrait le nom du bouton et qui prendrait la couleur vert ou rouge… héhé. tu peux pousser le vice à permettre de choisir les couleurs on et off la police, la taille…etc… 😉

Répondre
LOÏC TINANT dit :

2 mai 2020 à 0 h 05 min

Bonjour,

Je suis nouveau dans Jeedom et j’ai réussi a intégré ce bouton, c’est génial, quand je l’actionne, les led s’allume sans problème, mais quand je l’actionne à nouveau pour eteindre les leds, elle reste allumée, alors que le bouton est bien sur éteint.

Que faire ?

Répondre
1. florian dit :
  
  2 mai 2020 à 16 h 05 min
  
  Bonjour Loic,
  Je ne suis pas sur de comprendre, je viens d’ajouter une rubrique à cet article « Si vous souhaitez commander un équipement distinct … » est-ce que ca répond à ta question ?
  
  Répondre
Georges dit :

9 mai 2020 à 15 h 16 min

Salut Florian,
tu as pu voir pour faire ce que tu proposais ds ton message :
« Je pense à accentuer la couleur activée et noircir celle non activée. Histoire en effet de rendre plus clair et explicite.
Bonne idée pour le nom, je l’avais enlevé, je vais le remettre et il sera quoi qu’il arrive optionnel. »
MERCI !

Répondre
1. florian dit :
  
  10 mai 2020 à 11 h 43 min
  
  Salut Georges,
  Oui, si tu récupères les sources de l’article tu devrais voir une différence 😉
  Bonne journée 🙂
  
  Répondre
Georges dit :

10 mai 2020 à 14 h 49 min

Salut Florian,
Effectivement c’est plus contrasté donc plus clair, disons plutôt compréhensible ! enfin… j’me comprends 🙂
Merci et belle fin de week-end !

Répondre
nak dit :

5 juillet 2020 à 3 h 39 min

salut

Répondre
1. florian dit :
  
  6 juillet 2020 à 10 h 24 min
  
  Bonjour !
  
  Répondre
JCr dit :

5 mars 2021 à 12 h 20 min

Bonjour,

C’est vraiment top ce design.
Je voudrais en plus de l’inter un retour sur la cde et il me faudrait juste la led avec les 2 couleurs. Pouvez vous me dire quelle partie du code je dois récupérer pour avoir un widget de type info. merci

Répondre

Ma-maison-intelligente

Bouton style indus pour votre design Jeedom

17 avril 2020 florian Commentaires 11 commentaires

Comment « installer » ce widget sans passer par le Market ?

Si vous souhaitez commander un équipement distinct …

Conclusion

11 réflexions sur « Bouton style indus pour votre design Jeedom »

Laisser un commentaire Annuler la réponse

Comment « installer » ce widget sans passer par le Market ?

Si vous souhaitez commander un équipement distinct …

Conclusion

Partager :

11 réflexions sur « Bouton style indus pour votre design Jeedom »

Laisser un commentaire Annuler la réponse