Widget Volet Roulant pour votre design Jeedom

Widget Volet Roulant pour votre design Jeedom

Commentaires 7 commentaires
  • Volet fermé
  • Volet ouvert

Après le widget batterie, on continue à se diversifier avec un widget volet roulant pour votre design Jeedom tout en Html et CSS, pas d’image, juste du code.

L’idée de ce widget est qu’en fonction de l’état binaire du volet, le widget s’ouvre ou se ferme dynamiquement. Il est assez paramètrable, tant niveau couleur que taille et pourra donc se fondre dans vos designs. Je vous le propose en 2 versions : fenêtre et baie vitrée (Merci Anthony pour l’idée :))

Widget version fenêtre

Vous pouvez voir la démonstration ci-dessous avec un bouton OnOff pour jouer sur le widget en version fenêtre.

Voici les sources de ce widget : 

<!--
  Widget name : rollershutter_window_mmi
  Author : geqr
  Website : www.ma-maison-intelligente.fr
  Tutorial : http://ma-maison-intelligente.fr/2020/04/widget-volet-roulant-pour-votre-design-jeedom/
  Inspiration : https://codepen.io/Barrydreamt/pen/MZEMRO
  Last Update : 20200418 - creation
 -->

<style>

  :root{
    --width-window: 100px;
    --height-window: 100px;
    --thickness-window:5px;
    --window-color: #1b1a1a;
    --window-bg-color: #99B2B7;
  }

  body {}

  .window {
      height: var(--height-window);
      width: var(--width-window);
      box-sizing: border-box;
  }

  .window .blinds_container, .window .panes_container{
      height: var(--height-window);
      width: var(--width-window);
      position:absolute;
      top:0;
      left:0;
  }

  .window .blinds_container {
    z-index:5;
  }

  .window .panes_container {
    z-index:1;
    background: var(--window-color);
  }

  .window .blinds {
      height: calc(var(--height-window) - var(--thickness-window));
      width: calc(var(--width-window) - var(--thickness-window) - var(--thickness-window));
      background: repeating-linear-gradient(#00416A 20%, #E4E5E6 20%, #111 25%, #00416A 20%) no-repeat 50% 50% / 100% 100%;
      float: left;
      transition: all 1000ms ease;
    }

  .window .left-edge {
    height: calc(var(--height-window) - var(--thickness-window));
    background: #1b1a1a;
    width: var(--thickness-window);
    float: left;
    position: relative;
  }

  .window .right-edge {
    height: calc(var(--height-window) - var(--thickness-window));
    background: var(--window-color);
    width: var(--thickness-window);
    float: right;
    position: relative;
  }
  .window .top-edge {
    height: var(--thickness-window);
    background: var(--window-color);
    width: var(--width-window);
    float: left;
    position: relative;
  }
  .window .bottom-edge {
    height: var(--thickness-window);
    background: var(--window-color);
    width: var(--width-window);
    float: left;
    position: relative;
  }

  @media (max-width: calc(var(--width-window) - var(--thickness-window) - var(--thickness-window))) {
    .window .blinds {
      max-width: 360px;
      margin-right: 10px;
      margin-left: 10px;
    }
  }

  .window input[type=checkbox] {
    position: absolute;
    cursor: pointer;
    width: 100%;
    height: 100%;
    z-index: 100;
    opacity: 0;
  }

  .window input[type=checkbox]:checked ~ div.blinds {
    top: 0px;
    height: 0px;
    transition: all 1000ms ease-out;
  }

  .window .pane {
			float: left;
			width: 46%;
			height: 46%;
			margin: 2%;
			background: var(--window-bg-color);
		}

</style>

<div class="window cmd cmd-widget #history#" data-type="info" data-subtype="binary" data-template="badge" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
  <div class="blinds_container">
    <input id="check#id#" type="checkbox" />
    <div class="top-edge"></div>
    <div class="left-edge"></div>
    <div class="blinds"></div>
    <div class="right-edge"></div>
    <div class="bottom-edge"></div>
  </div>
  <div class="panes_container">
    <div class="pane"></div>
  	<div class="pane"></div>
  	<div class="pane"></div>
    <div class="pane"></div>
  </div>
</div>

<script>
  jeedom.cmd.update['#id#'] = function(_options) {
    var cmd = $('.cmd[data-cmd_id=#id#]');
    var open = _options.display_value;

    if (open == '1') {
      document.getElementById('check#id#').checked = true;
    } else {
      document.getElementById('check#id#').checked = false;
    }
  }

  jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});

</script>

A noter :

  • Ce widget s’applique à une info binaire et se mettra à jour tout seul en fonction de la valeur.
  • Vous pourrez changer plusieurs paramètres pour personnaliser le rendu, dans l’ordre ci-dessous : la largeur et la hauteur de la fenêtre, l’épaisseur des montants intérieurs, la couleur de la fenêtre et la couleur de l’extérieur de la fenêtre.
  :root{
    --width-window: 100px;
    --height-window: 100px;
    --thickness-window:5px;
    --window-color: #1b1a1a;
    --window-bg-color: #99B2B7;
  }

Widget version baie vitrée

Voici les sources de cette alternative :

<!--
  Widget name : rollershutter_bay-window_mmi
  Author : geqr
  Website : www.ma-maison-intelligente.fr
  Tutorial : http://ma-maison-intelligente.fr/2020/04/widget-volet-roulant-pour-votre-design-jeedom/
  Inspiration : https://codepen.io/Barrydreamt/pen/MZEMRO
  Last Update : 20200418 - creation
 -->

<style>

  :root{
    --width-bay-window: 100px;
    --height-bay-window: 100px;
    --thickness-bay-window:5px;
    --bay-window-color: #1b1a1a;
    --bay-window-bg-color: #99B2B7;
  }

  body {

    }

  .bay-window {
      height: var(--height-bay-window);
      width: var(--width-bay-window);
      box-sizing: border-box;
  }

  .bay-window .blinds_container, .bay-window .panes_container{
      height: var(--height-bay-window);
      width: var(--width-bay-window);
      position:absolute;
      top:0;
      left:0;
  }

  .bay-window .blinds_container {
    z-index:5;
  }

  .bay-window .panes_container {
    z-index:1;
    background: var(--bay-window-color);
  }

  .bay-window .blinds {
      height: calc(var(--height-bay-window) - var(--thickness-bay-window));
      width: calc(var(--width-bay-window) - var(--thickness-bay-window) - var(--thickness-bay-window));
      background: repeating-linear-gradient(#00416A 20%, #E4E5E6 20%, #111 25%, #00416A 20%) no-repeat 50% 50% / 100% 100%;
      float: left;
      transition: all 1000ms ease;
    }

  .bay-window .left-edge {
    height: calc(var(--height-bay-window) - var(--thickness-bay-window));
    background: #1b1a1a;
    width: var(--thickness-bay-window);
    float: left;
    position: relative;
  }

  .bay-window .right-edge {
    height: calc(var(--height-bay-window) - var(--thickness-bay-window));
    background: var(--bay-window-color);
    width: var(--thickness-bay-window);
    float: right;
    position: relative;
  }
  .bay-window .top-edge {
    height: var(--thickness-bay-window);
    background: var(--bay-window-color);
    width: var(--width-bay-window);
    float: left;
    position: relative;
  }
  .bay-window .bottom-edge {
    height: var(--thickness-bay-window);
    background: var(--bay-window-color);
    width: var(--width-bay-window);
    float: left;
    position: relative;
  }

  @media (max-width: calc(var(--width-bay-window) - var(--thickness-bay-window) - var(--thickness-bay-window))) {
    .bay-window .blinds {
      max-width: 360px;
      margin-right: 10px;
      margin-left: 10px;
    }
  }

  .bay-window input[type=checkbox] {
    position: absolute;
    cursor: pointer;
    width: 100%;
    height: 100%;
    z-index: 100;
    opacity: 0;
  }

  .bay-window input[type=checkbox]:checked ~ div.blinds {
    top: 0px;
    height: 0px;
    transition: all 1000ms ease-out;
  }

  .bay-window .pane {
			float: left;
			width: 46%;
			height: 98%;
			margin: 2%;
			background: var(--bay-window-bg-color);
		}

</style>

<div class="bay-window cmd cmd-widget #history#" data-type="info" data-subtype="binary" data-template="badge" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
  <div class="blinds_container">
    <input id="check#id#" type="checkbox" />
    <div class="top-edge"></div>
    <div class="left-edge"></div>
    <div class="blinds"></div>
    <div class="right-edge"></div>
    <div class="bottom-edge"></div>
  </div>
  <div class="panes_container">
    <div class="pane"></div>
  	<div class="pane"></div>
  </div>
</div>

<script>
  jeedom.cmd.update['#id#'] = function(_options) {
    var cmd = $('.cmd[data-cmd_id=#id#]');
    var open = _options.display_value;

    if (open == '1') {
      document.getElementById('check#id#').checked = true;
    } else {
      document.getElementById('check#id#').checked = false;
    }
  }

  jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});

</script>

Comment « installer » ce widget ?

En version V4, les widgets sont maintenant dans le core Jeedom et le plugin / market pour widget à disparu. Pour ce widget, ça se passe donc directement par du code à déposer dans votre Jeedom.

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

Dans notre cas :

Création widget volet roulant
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 info binaire.

Pour l’exemple, j’ai créé un virtuel avec une info binaire et une commande unique OnOff pour me permettre de faire varier la valeur du champs Etat.

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

  • 1 – Sur l’écran commande, clic sur le bouton des paramètres de l’info binaire
  • 2 - Clic sur affichage
    2 – Clic sur affichage
  • 3 - Sélection du widget
    3 – Sélection du widget

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

Conclusion

J’espère que ce widget Volet Roulant pour votre design Jeedom vous sera utile. Il est assez configurable et pourra s’adapter à vos thèmes qu’ils soient clairs, sombres ou colorés.

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

A bientôt

7 réflexions sur « Widget Volet Roulant pour votre design Jeedom »

  1. Bonjour,

    Comme d’habitude, beau travail.
    Depuis la V4, y a t il un moyen de supprimer les bandeaux de couleur sur les widgets ? (test1 en vert dans ton exemple!). Le fait de décocher « noms » dans paramètre avancé ne fonctionne pas !
    Merci.

    Benoit

    Répondre

  3. Bonjour,
    J’ai appliqué ce Widget sur mon installation JEEDOM avec RFLINK, ça rend bien sur le Dashboard. j’arrive bien à ouvrir ou fermer le volet sur l’écran en cliquant dessus mais pas en réalité, idem si je clique sur les bouton d’ouverture fermeture sur l’écran mes volets réagissent bien mais pas le dessin du volet roulant. Si vous avez un tuto pour gérer ce problème, ça m’intéresse. J’ai déjà essayé de créer des boutons virtuelles mais sans résultat.
    merci d’avance

    Répondre

Laisser un commentaire

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