Il est indispensable de lire cette documentation pour comprendre comment le plugin fonctionne.
Ce plugin s’adresse aux utilisateurs confirmés.
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.
Une fois le plugin installé et activé , aller dans la catégorie « programmation/tools»
Pour le moment il y a 4 onglets.
Onglet Principal « Equipements »
C’est le but premier de ce plugin (avec la possibilité de créer des équipement/widgets personnalisés)1.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
1.1 Templates « simples »
Cliquer sur le +
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
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.
1.2 Templates présents dans le plugin
Aller dans la configuration générale du plugin
Cliquer sur « Ajouter un template »
Cela ouvre une fenêtre et vous pourrez choisir le template à ajouter
1.3 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
1.4 Templates Tiers
Il existe de nombreux templates à disposition , par exemple ceux de Jag , salviaf ou ceux du plugin « widget »
1.5 Via le plugin
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/
1.1.3.2 Envoyer un template tiers .
Voici 2 exemples pour voir comment créer l’archive .Bien respecter le format du nom de l’archive ainsi que des fichiers html des dossiers mobile et dashboard.
Le dossier dashboard est obligatoire , pas nécessaire qu’il y ait un dossier image (dans le dossier dashboard)
1.1.4 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.
1.1.5 Onglets commandes
Permet de visualiser les commandes affectées au template et de supprimer l’affectation si besoin.
2 Les widgets
Le plugin permet de créer des équipements personnalisables.
2.1 Onglet équipement
Comme tous les équipements , il permet de changer le nom , de catégorie , d’objets …
2.2 Onglet Personnalisation
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
2.2.1 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-
Vous pouvez ajouter autant de commandes que vous souhaitez.
2.3 Exemple d’utilisation
2.3.1 Un menu
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 …
2.3.2 Utilisation des fonctions du core
Exemple pour créer un widget pour prévisualiser des logs
Code :
<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="{{Rechercher}}" />
<a class="btn btn-warning" data-state="1" id="bt_globalLogStopStart"><i class="fas fa-pause"></i> {{Pause}}
</a><a class="btn btn-success" id="bt_downloadLog"><i class="fas fa-cloud-download-alt"></i> {{Télécharger}}
</a><a class="btn btn-warning" id="bt_clearLog"><i class="fas fa-times"></i> {{Vider}}
</a><a class="btn btn-danger" id="bt_removeLog"><i class="far fa-trash-alt"></i> {{Supprimer}}
</a><a class="btn btn-danger roundedRight" id="bt_removeAllLog"><i class="far fa-trash-alt"></i> {{Supprimer tous}}</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>
Onglet Principal « 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 Principal « Logs »
Permet de définir le niveau de logs exceptés ceux qui sont cochés
Onglet Principal « 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.
