Bouton rocker pour votre design Jeedom

Bouton rocker pour votre design Jeedom

Commentaires 6 commentaires
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 :

  • 0 - outils widget
    1 – Menu outils puis widgets
  • 1 - code
    2 – Code permet d’ajouter son propre code
  • 2 - nouveau widget
    3 – Nouveau widget

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 :

  • 1 – Sur l’écran commande, clic sur le bouton des paramètres de la commande « On »
  • 2 – Clic sur affichage
  • 3 – Choix du widget qui apparaît dans la rubrique Custom ou Widget si installé depuis le Market
  • 4 – Cliquer sur « Appliquer à » pour l’appliquer à minima à l’autre commande.
  • 5 – Choisir la commande « Off » dans notre exemple. Et même d’autres objets, équipements, …

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

6 réflexions sur « 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

    Répondre

    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.

      Répondre

  3. Bonjour,

    Merci pour le widget,

    Seul problème chez moi sur le design en V4, en cliquant sur ON, il change bien la valeur à 1 mais en recliquant dessus, il ne se met pas sur OFF.
    En fait pas de réactualisation du widget.
    Merci

    Répondre

  4. Bonjour
    Je suis en V4 et pourtant je n’ai pas la même présentation que ce que vous montrez.
    Quand je vais dans widgets, j’ai la liste des widgets existants chez moi, et pour mettre de nouveaux éléments ,j’ai
    -récupérer du serveur d’archives
    -ajouter un widget
    -création facile
    -123 fonts.
    Je suis allé dans ajouter un widget, mais je n’ai aucun endroit où je pourrais faire un copier-coller du code html.
    Un tuyau ?
    Merci et bonne soirée.

    Répondre

  5. Bonjour,
    Merci pour tout vos postes, ils sont très apprécié et j’ai hâte de résoudre le problème que j’ai.
    Comme je ne peux pas faire de ScreenShot, j’essai décrire:
    – Même souci pour vos boutons Rocker et Halo.
    – Je suis sous Jeedom V4 à jour
    – Même cas pour les Bouton On et Off que pour le bouton OnOff.
    Dès que j’applique l’affichage du Widget, j’ai un « Undefined » à la place du bouton.

    Une idée…?

    Répondre

Laisser un commentaire

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