Bouton style indus pour votre design Jeedom

Bouton style indus pour votre design Jeedom

Bouton / Widget Style Indus

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 :

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 :

Virtuel Basique On Off

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

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 :

configuration 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

10 thoughts on “Bouton style indus pour votre design Jeedom

  1. 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

    1. 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.

  2. 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… 😉

  3. 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 ?

    1. 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 ?

  4. 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 !

  5. 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 !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *