<h1> Il est indispensable de lire cette documentation pour comprendre comment le plugin fonctionne.</h1>

Ce plugin s’adresse aux utilisateurs confirmés pour l’édition du code mais ‘installation des widgets présents dans le plugin ne nécessite aucune connaissance particulière

Le plugin fait la différence entre un template que l’on applique à une commande et un widget qui ici sera considérer comme un équipement à part entière.

Exemple de widgets disponibles (Horloge,résumé,sonde,batterie,anémomètre)

preview

Une fois le plugin installé et activé , aller dans la catégorie « programmation/tools»

dash1

Onglet Equipements

C’est le but premier de ce plugin (avec la possibilité de créer des équipement/widgets personnalisés et des templates)

Il est aussi possible d’en importer

Voir les chapitres dédiés dans le menu

Onglet Personnalisation

Personnalisation

En premier , vous pouvez sélectionner un équipement et définir la hauteur et la largeur en cliquant sur le bouton « MAJ »

En second , vous pouvez sélectionner un widget source et appliquer la hauteur et/ou la largeur à un ensemble de widgets cibles .

Onglet Logs

logs

Permet de définir le niveau de logs exceptés ceux qui sont cochés.
Permet de vider les logs exceptés ceux qui sont cochés.
Surveiller les logs n’est pas implémentés dans le plugin pour le moment

Onglet Droits

Droits

Permet de changer les droits .

!!! Attention cette fonction est plutôt réservée aux utilisateurs confirmés sachant ce qu’ils font !!!! De base il n’y a pas à utiliser ces fonctions pour la création de templates et de widgets.

Onglet Listener

De nombreux plugins utilise la méthode “listener” . parfois nous supprimons un élément mais celui-ci reste présent.

Donc ajout d’un onglet listeners.

Droits

si l’ icône état est rouge c’est qu’il y a un soucis et la commande apparaît en rouge (voir photo)

En survolant la commande , un message vous signalera le type d’erreur (erreur commande ou équipement). Vous pourrez alors corriger de vous même voir le supprimer en cliquant sur la commande.

Les templates

Important :

Le template est utilisé pour les commandes

Si vous utilisez les templates natifs au core de jeedom , les templates créés via ce plugin ne doivent pas avoir le même nom. C’est impératif. En cas d’oubli vous pouvez effacer le template du plugin pour que celui du core soit pris en compte

Templates « simples »

Cliquer sur le +

Template1

Vous pouvez créer un premier template en évitant les espaces dans le champs « nom ». Le plugin récupère dans ce cas les templates natifs au core que vous pourrez modifier par la suite.

Cela créer un équipement spécifique

Template2

Dans ce cas cela crée un template « cmd.action.other.test_template » et c’est ce template qui ne doit pas être présent dans le core à défaut

Vous pouvez alors

Éditer le template (dashboard/mobile)
Ajouter une image pour la passer en paramètre optionnel par exemple.
Ajouter d’autres paramètres optionnels.
Et l’appliquer à une/des commande(s) que vous choisirez dans la fenêtre déroulante
Et le prévisualiser ( La vue Dashboard correspond au visuel du Dashboard/design ) .Pour la vue mobile il est recommandé d’aller voir le visuel sur la vue mobile de Jeedom
Sauvegarder , supprimer
Dupliquer ( Attention cela ne duplique que le template et pas les images)

En cas de soucis avec un template , il faut le supprimer du plugin.

Templates présents dans le plugin

Aller dans la configuration générale du plugin

Template2

Cliquer sur « Ajouter un template »

Cela ouvre une fenêtre et vous pourrez choisir le template à ajouter

Importer un template

Dans la configuration générale du plugin vous pouvez télécharger un template pour l’ajouter au plugin. Celui-ci doit-être au format zip avec à la racine les dossiers dashboard et mobile

Templates Tiers

Il existe de nombreux templates à disposition , par exemple ceux de Jag , salviaf ou ceux du plugin « widget »

Le plus simple est de récupérer le code de ce template. Pour cela il faut donc créer un template du type de la commande et ensuite de copier le code du template dans l’éditeur.

Si le template utilise des images il faut bien vérifier le chemin dans l’éditeur et uploader l’image via le plugin.

Généralement remplacer

data/customTemplates/

par

plugins/tools/core/template/

La prévisualisation

Effective lors que vous êtes en version dashboard. Pour la vue mobile , c’est plus complexe et il faut aller directement sur la vue mobile de jeedom.

Onglets commandes

Permet de visualiser les commandes affectées au template et de supprimer l’affectation si besoin.

Les widgets

Le plugin permet de créer des équipements personnalisables.

Onglet équipement

Comme tous les équipements , il permet de changer le nom , de catégorie , d’objets …

Onglet Personnalisation

widget1

Vous pouvez :

Éditer le widget (dashboard/mobile)
Ajouter des paramètres optionnels.
Et le prévisualiser ( La vue Dashboard correspond au visuel du Dashboard/design ) .Pour la vue mobile il est recommandé d’aller voir le visuel sur la vue mobile de Jeedom
Sauvegarder , supprimer
Dupliquer
Ajouter des commandes
Modifier la taille du widget

Ajouter des commandes

En cliquant sur « +commandes » , vous pouvez sélectionner une commande existante . Vous devez obligatoirement la nommer (« battery » sur le screen au dessus).Puis dans l’éditeur vous pouvez ajouter #battery# , enregistrer et prévisualisez (L’équipement doit être activé et visible). Le plugin retourne le template de la commande ajoutée-

widget1

Vous pouvez ajouter autant de commandes que vous souhaitez.

Documentation intégrée au plugin

Equipements

Pour chaque équipement , vous avez accès à une aide spécifique en cliquant sur l’icône de la documentation

widget1

Cela ouvre une fenêtre avec des explications concernant le type d’équipement sur lequel vous travaillez.

widget1

Widgets intégrés au plugin

widget1

Exemple d’utilisation

Code du widget :

<div class="eqLogic eqLogic-widget allowResize allowReorderCmd #custom_layout# #eqLogic_class#" data-eqType="#eqType#" data-eqLogic_id="#id#" data-eqLogic_uid="#uid#" data-version="#version#" style="width: #width#;height: #height#;#style#" data-translate-category="#translate_category#" data-category="#category#" data-tags="#tags#">
	<center class="widget-name"><a href="#eqLink#" style="font-size : 1.1em;#hideEqLogicName#">#name_display# <span class="object_name">#object_name#</span></a></center>
	<div class="#isVerticalAlign#">
      <nav class="navbar navbar-default" style=" flex-shrink: 0;flex-direction: row;margin-bottom:0 !important">
          <ul class="nav navbar-nav" style=" display: flex;max-height:50px;">
              <li class="active"><a data-toggle="tab" href="#home">#menu1#</a></li>
              <li><a data-toggle="tab" href="#menu2">Température</a></li>
              <li><a href="index.php?v=d&p=tools&m=tools&id=#id#" ><i class="fas fa-cogs"></i></a></li>
          </ul>     
      </nav>
      <div class="tab-content">
          <div id="home" class="tab-pane fade in active">#batt#</div>
          <div id="menu2" class="tab-pane fade">#temp# #batt#</div>	
      </div>
	</div>
</div>

C’est personnalisable à souhait. Vous pouvez faire de même avec un tableau en html , css …

Utilisation des fonctions du core

Exemple pour créer un widget pour prévisualiser des logs

widget1

Code du widget :

<div class="eqLogic eqLogic-widget allowResize allowReorderCmd #custom_layout# #eqLogic_class#" data-eqType="#eqType#" data-eqLogic_id="#id#" data-eqLogic_uid="#uid#" data-version="#version#" style="width: #width#;height: #height#;#style#" data-translate-category="#translate_category#" data-category="#category#" data-tags="#tags#">
	<center class="widget-name"><a href="#eqLink#" style="font-size : 1.1em;#hideEqLogicName#">#name_display# <span class="object_name">#object_name#</span></a></center>
	<div class="#isVerticalAlign#">
       <div class="input-group pull-right" style="display:inline-flex">
			<span class="input-group-btn">
				<input style="width: 150px;" class="form-control roundedLeft" id="in_searchGlobalLog" placeholder="" />
				<a class="btn btn-warning" data-state="1" id="bt_globalLogStopStart"><i class="fas fa-pause"></i> 
				</a><a class="btn btn-success" id="bt_downloadLog"><i class="fas fa-cloud-download-alt"></i> 
				</a><a class="btn btn-warning" id="bt_clearLog"><i class="fas fa-times"></i> 
				</a><a class="btn btn-danger" id="bt_removeLog"><i class="far fa-trash-alt"></i> 
				</a><a class="btn btn-danger roundedRight" id="bt_removeAllLog"><i class="far fa-trash-alt"></i> </a>
			</span>
		</div>    
      <nav class="navbar navbar-default" style=" flex-shrink: 0;flex-direction: row;margin-bottom:0 !important">
          <ul class="nav navbar-nav" style=" display: flex;max-height:50px;">
              <li class="active"><a data-toggle="tab" data-type="tools">Tools</a></li>
              <li><a data-toggle="tab" data-type="http.error" >Error</a></li>
              <li><a href="index.php?v=d&p=tools&m=tools&id=#id#" ><i class="fas fa-cogs"></i></a></li>
          </ul>     
      </nav>
      <div class="tab-content" style='overflow: auto; height: 400px;width:100%;margin-top: 5px;'>	
      </div>
	</div>
  	<script>
      $('.eqLogic[data-eqLogic_id =#id#] .navbar a').off().on('click', function () {
         el = $(this).attr('data-type');
         $('.eqLogic[data-eqLogic_id =#id#] .tab-content').empty();
          jeedom.log.autoupdate({
            log :$(this).attr('data-type'),
            display : $('.eqLogic[data-eqLogic_id =#id#] .tab-content'),
            search : $('#in_searchGlobalLog'),
            control : $('#bt_globalLogStopStart'),
          });
      });
      $('.eqLogic[data-eqLogic_id =#id#] .navbar a').first().trigger('click')
    </script>
</div>

Batterie

Code pour créer un widget pour visualiser l’état des batteries sur le dashboard/design

widget1

<div class="eqLogic eqLogic-widget allowResize allowReorderCmd #custom_layout# #eqLogic_class#" data-eqType="#eqType#" data-eqLogic_id="#id#" data-eqLogic_uid="#uid#" data-version="#version#" style="width: #width#;height: #height#;#style#" data-translate-category="#translate_category#" data-category="#category#" data-tags="#tags#">
	<center class="widget-name"><a href="#eqLink#" style="font-size : 1.1em;#hideEqLogicName#">#name_display# <span class="object_name">#object_name#</span></a></center>
	<div class="#isVerticalAlign#">
          <div id="battery_#id#" style="overflow:auto;height:calc(#height# - 50px)"></div>
	</div>
    <script>
		$.ajax({
			type: 'POST',
			url: 'plugins/tools/core/ajax/tools.ajax.php',
			global:false,
			data: {
				action: 'getBattery'
			},
			dataType: 'json',
			error: function (request, status, error) {
				handleAjaxError(request, status, error);
			},
          
			success: function (data) {
				if (data.state != 'ok') {
					$('#div_alert').showAlert({message: data.result, level: 'danger'});
					return;
				}              
                
			  	for (var i = 0; i < data.result.length; i++) {
  					$('#battery_#id#').append(data.result[i]);
				}
                $('#battery_#id# .batteryTime').off('click').on('click',function(){
                  $('#md_modal').dialog({title: ""}).load('index.php?v=d&modal=eqLogic.configure&eqLogic_id=' + $(this).closest('.eqLogic').attr('data-eqlogic_id')).dialog('open')
                })              
			}
	   });      
    </script>
  	<style>
        #battery_#id# {
          margin: auto !important;
        }
        #battery_#id# .eqLogic-widget {
          float:left;
          margin:10px !important;
          font-family: "Roboto";
          color: var(--txt-color);
          width: 210px !important;
          height: 155px !important;
        }
        #battery_#id# .eqLogic-widget .widget-name {
          text-align: center;
        }
        #battery_#id# .eqLogic-widget .widget-name > a {
          display:block;
          max-height: 24px !important;
          overflow: hidden !important;
        }
        #battery_#id# .eqLogic-widget .widget-name span {
          color: var(--txt-color);
          background-color: rgb(var(--bg-color)) !important;
          position: relative;
          opacity: .8;
          padding: 0 4px;
          top: -2px !important;
        }
        #battery_#id# .eqLogic-widget.critical .widget-name {
          background-color: var(--al-danger-color) !important;
        }
        #battery_#id# .eqLogic-widget.warning .widget-name {
          background-color: var(--al-warning-color) !important;
        }
        #battery_#id# .eqLogic-widget.good .widget-name {
          background-color: var(--al-success-color) !important;
        }
        #battery_#id# .eqLogic-widget .jeedom-batterie {
          color: var(--link-color);
          margin-top: -12px;
          margin-bottom: -20px;
        }
        #battery_#id# .eqLogic-widget .jeedom-batterie i {
          vertical-align: middle;
          font-size: 75px !important;
        }
        #battery_#id# .eqLogic-widget .jeedom-batterie span {
          position: relative;
          display: inline-block;
          font-family: "Roboto";
          color: var(--link-color);
          font-size: 18px;
          font-weight: bold;
          top: 3px;
        }
        #battery_#id# .eqLogic-widget.critical .jeedom-batterie i {
          color: var(--al-danger-color);
        }
        #battery_#id# .eqLogic-widget.warning .jeedom-batterie i {
          color: var(--al-warning-color);
        }
        #battery_#id# .eqLogic-widget.good .jeedom-batterie i {
          color: var(--al-success-color);
        }
        #battery_#id# .pluginName {
          padding-left: 5px;
          font-size: 14px;
          font-weight: bold;
        }
        #battery_#id# .eqLogic-widget .batteryTime {
          clear: left;
          padding-left: 5px;
          font-size: 12px;
        }
        #battery_#id# .eqLogic-widget .batteryTime i {
          font-size: 16px !important;
        }
    </style>
</div>

Equipement réseau

Nouvel Exemple d’utilisation: Regrouper tous les équipements présents sur le réseau en 1 seul wigdet:

Créer un virtuel et le nommer réseau par exemple et ajouter une commande “info virtuelle” de type string/other. L’activer et le rendre visible sur l’objet de votre choix. Juste à se souvenir du nom de cette commande.

widget1

Go dans le plugins tools et créer un nouveau “template” de type “info string” .

widget1

Cela créer un équipement “cmd.info.string.Networks”
Dans la fenêtre d’édition du code copier-coller ce code en changeant le nom du chemin de l’mage (attribut “src”) selon le nom de votre template

<div class="cmd cmd-widget #history#" data-type="info" data-subtype="string" data-template="default" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
	<div class="content-xs network">
	</div>
	<script>
    $.ajax({
			type: 'POST',
			url: 'plugins/tools/core/ajax/customwidget.ajax.php',
			global:false,
            async:false,
			data: {
				action: 'getCmdWidget',
                id: '#id#'
			},
			dataType: 'json',
			error: function (request, status, error) {
				handleAjaxError(request, status, error);
			},
          
			success: function (data) { 
              var html = '';
                           
              for (x in data.result) {
                var opacity = ''; 
                if(data.result[x]['value'] != 1) {
                  opacity = 0.3;
                }
                html += '<div style="opacity: ' + opacity  + '; margin:5px;float:left;">';
                html += '<img src="/plugins/tools/core/template/dashboard/cmd.info.string.Networks/' + data.result[x]['name'] +  '.png" name="'+ data.result[x]['name'] + '" >';
                html += '</div>';

              } 
              $('.cmd[data-cmd_id=#id#] .network').empty().append(html);
			}
	   	});	
	</script>
</div>

Ajouter les commandes états des équipements et cocher la case “listener”

widget1

Maintenant il faut créer/télécharger des images pour les équipements que vous avez sélectionné(Taille des images en couleur de préférence 50px*50px au format png). Attention de bien les renommer comme les commandes que vous avez créé
Cliquer sur le bouton icônes/open pour les uploader dans jeedom
Il ne reste plus qu’à appliquer le template à la commande du virtuel créé précédemment et valider

widget1

Le rendu

Sur le dashboard

widget1

Sur le design avec différents paramètres (masquer le nom /transparent)

widget1

Les icônes se mettent à jour en temps réel selon l’état . Ici en couleur les éléments actifs et en atténué les équipements inactifs

Intégration Squeezebox

Suivre les explication de Dapolux sur le forum communautaire.

ICI

Onglet Equipements

Onglet Personnalisation

Onglet Logs

Onglet Droits

Onglet Listener

Les templates

Templates « simples »

Templates présents dans le plugin

Importer un template

Templates Tiers

La prévisualisation

Onglets commandes

Les widgets

Onglet équipement

Onglet Personnalisation

Ajouter des commandes

Documentation intégrée au plugin

Equipements

Widgets intégrés au plugin

Exemple d’utilisation

Un menu

Utilisation des fonctions du core

Batterie

Equipement réseau

Intégration Squeezebox