Bouton rocker pour votre design Jeedom

Bouton rocker pour votre design Jeedom

Bouton rocker

Aujourd’hui, je vous propose un bouton style rocker pour votre design Jeedom 100% html et css, animé et facilement intégrable.

Il semblerait que le Market Widget est fermé un plus tôt que prévu alors je vous partage ce widget directement ici. Jeedom V4 permettant d’ajouter assez facilement le code, il vous sera toujours possible de compléter vos designs avec de jolis widgets.

Je vous partage donc ci-dessous les sources de ce bouton rocker.

A noter :

  • J’utilise la police Montserrat pour mon design, si vous souhaitez utiliser la police Arial, il vous faudra supprimer la ligne 1 et ‘Montserrat’ ligne 25.
  • Pour changer la couleur du bouton Ok quand activé, remplacer #0084d0 à la ligne 117 par la couleur de votre choix. Idem pour le rouge : #bd5757 à la ligne 91.
<!--
  Widget name : rocker_toggle_switch_mmi
  Author : geqr
  Website : www.ma-maison-intelligente.fr
  Tutorial : http://ma-maison-intelligente.fr/2020/04/bouton-rocker-pour-votre-design-jeedom/
  Origin: https://codepen.io/marcusconnor/pen/QJNvMa
  Last Update : 20200414 - creation
 -->

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

<div class="mid-#id# cursor cmd tooltips cmd-widget" data-type="action" data-cmd_id="#id#" data-cmd_uid="#uid#">
  <label class="rocker rocker-small">
    <input type="checkbox" id="check#id#" onchange="jeedom.cmd.execute({id: '#id#'});">
    <span class="switch-left">On</span>
    <span class="switch-right">Off</span>
  </label>
</div>

<style>

.mid-#id# *, .mid-#id# *:before, .mid-#id# *:after {
  box-sizing: inherit;
  margin:0;
  padding:0;
}

.mid-#id# {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top:1em;
  box-sizing: border-box;
  font-family: 'Montserrat', 'Arial', sans-serif;
  font-size: 100%;
}

/* Switch starts here */
.rocker {
  display: inline-block;
  position: relative;
  font-size: 2em;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  color: #888;
  width: 7em;
  height: 4em;
  overflow: hidden;
  border-bottom: 0.5em solid #eee;
}

.rocker-small {
  font-size: 0.75em; /* Sizes the switch */
  margin: 1em;
}

.rocker::before {
  content: "";
  position: absolute;
  top: 0.5em;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #999;
  border: 0.5em solid #eee;
  border-bottom: 0;
}

.rocker input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-left,
.switch-right {
  cursor: pointer;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.5em;
  width: 3em;
  transition: 0.2s;
}

.switch-left {
  height: 2.4em;
  width: 2.75em;
  left: 0.85em;
  bottom: 0.4em;
  background-color: #ddd;
  transform: rotate(15deg) skewX(15deg);
}

.switch-right {
  right: 0.5em;
  bottom: 0;
  background-color: #bd5757;
  color: #fff;
}

.switch-left::before,
.switch-right::before {
  content: "";
  position: absolute;
  width: 0.4em;
  height: 2.45em;
  bottom: -0.45em;
  background-color: #ccc;
  transform: skewY(-65deg);
}

.switch-left::before {
  left: -0.4em;
}

.switch-right::before {
  right: -0.375em;
  background-color: transparent;
  transform: skewY(65deg);
}

input:checked + .switch-left {
  background-color: #0084d0;
  color: #fff;
  bottom: 0px;
  left: 0.5em;
  height: 2.5em;
  width: 3em;
  transform: rotate(0deg) skewX(0deg);
}

input:checked + .switch-left::before {
  background-color: transparent;
  width: 3.0833em;
}

input:checked + .switch-left + .switch-right {
  background-color: #ddd;
  color: #888;
  bottom: 0.4em;
  right: 0.8em;
  height: 2.4em;
  width: 2.75em;
  transform: rotate(-15deg) skewX(-15deg);
}

input:checked + .switch-left + .switch-right::before {
  background-color: #ccc;
}

/* Keyboard Users */
input:focus + .switch-left {
  color: #333;
}

input:checked:focus + .switch-left {
  color: #fff;
}

input:focus + .switch-left + .switch-right {
  color: #fff;
}

input:checked:focus + .switch-left + .switch-right {
  color: #333;
}
</style>

<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('check#id#').checked = true;
      if (jeedom.cmd.normalizeName('#name#') == 'on') {
        $('.cmd[data-cmd_uid=#uid#]').hide();
      }else{
          $('.cmd[data-cmd_id=#id#]').show();
      }
    } else {
      document.getElementById('check#id#').checked = false;
      if (jeedom.cmd.normalizeName('#name#') == 'off') {
        $('.cmd[data-cmd_uid=#uid#]').hide();
      }else{
          $('.cmd[data-cmd_id=#id#]').show();
      }
    }
  }
  jeedom.cmd.update['#id#']({display_value:'#state#'});
</script>

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

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. Dans le cas de ce widget est un peu plus compliqué, 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
3 - paramètrage
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 :

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

Conclusion

J’espère que ce bouton rocker pour votre design Jeedom trouvera une place de choix. Il reste facilement personnalisable en terme de couleur ou de taille.

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

A bientôt

3 thoughts on “Bouton rocker pour votre design Jeedom

  1. Bonjour,

    Merci,

    Seul problème chez moi en V4, en cliquant sur ON, il change bien la valeur à 1 mais en recliquant dessus, il se met sur OFF mais laisse la valeur à 1

    1. Bonjour fab,
      Avez-vous bien appliquer aux commandes (avec les bonnes valeurs) on ET off le widget ?
      N’hésitez pas à me connecter sur ma page facebook que nous regardions plus en détails.

Laisser un commentaire

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