[tools] Générateur de templates et widgets (V4)

Tags: #<Tag:0x00007f282e03dd30> #<Tag:0x00007f282e03dc68>

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»

dash1
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 +

tools2

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

tools3

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

tools11

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

tools5

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-

tools4

Vous pouvez ajouter autant de commandes que vous souhaitez.

2.3	Exemple d’utilisation

    2.3.1 Un menu

tools6
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

tools7

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 »

tools8

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 »

tools9
Permet de définir le niveau de logs exceptés ceux qui sont cochés

Onglet Principal « Droits »

tools10
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.

6 J'aimes

Salut,
Bonne année et beau boulot.
J’espère mieux m’en sortir cette fois.

Salut et meilleurs vœux.

merci pour la mise à disposition de ce nouvel outils. J’avoue qu’il va falloir que je potasse un peu ça car je ne suis pas certain d’avoir bien tout saisi.

Salut,
Penses-tu qu’il soit possible de faire en sorte qu’il y ait un moyen de savoir si un widgets-tiers intégré ait été mis à jour?
Ceci afin d’éviter de devoir envoyer des alertes pour signaler les éventuelles mise à jour où corrections de bugs.
D’avance, merci de ta réponse.

Salut,

Pour le moment non. Pas non plus regardé. Il faudrait déjà respecté un certain standard sur github pour contrôler

Voici le code pour créer un widget pour visualiser l’état des batteries sur le dashboard/design (dernière version bétâ du plugin)

battery

<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: "{{Configuration de l'équipement}}"}).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>

Le but prochain est de changer la mise en forme avec des icônes que j’utilise.

Dans cet esprit, il serait peut-être pas idiot de proposer de définir une norme GitHub pour les dev pour Jeedom.
Cela permettrait de voir plus loin, non?

Où peux-t-on télécharger ce plugin?

Sur le market, peut-être en mode beta, je n’ai plus suivi.

Bonjour je n’arrive pas à faire fonctionner la partie widget du plugin. (dans le Dashboard 500 : Internal Server Error
ca affiche et dans la prévisualisation ca affiche Call to a member function toHtml() on boolean)

Cela permet de regrouper plusieurs équipement en un seul c’est bien cela ?

Plusieurs commandes pas équipement. L’équipement est activé ?

Une capture d’écran de la configuration?

Pb plugin tools

Par contre il m’est impossible de sélectionner une commande je ne peu que sélectionner les équipements en entier

Pour info je suis en V 4.0.45 php 7.0.33-0+deb9u5

Bonjour,

Ou peut t on trouver le PLugins Svp

Merci
Bonne journée

Salut,
Tu configures ton market pour accepter les bêta et tu cherches « tools » dans le market.
Bonne journée

Oui y avait une coquille.

Ce n’est pas pour sélectionner un équipement mais une commande.
C’est corrigé

j ai trouvé mais il semble que j’ai besoin d’une autorisation

Ce plugin est pour le moment privé. Vous devez attendre qu'il devienne public ou avoir un code pour y accéder

Non c’est bon tu peux réessayer.
Bien lire la doc avant

Bonjour,

j’essaye d’utiliser une commande dans un widget mais pour le moment impossible d’avoir la valeur, cela fonctionne bien pour les paramètres, peut-être que je me trompe quelquepart

Voilà un essai
2020.04.04-10_45_31

Merci

Tu veux faire quoi?

Ajouter la valeur d’une commande ou le template?

mon but final, ce serait de récupérer la valeur de la commande que je passe en paramtre pour pouvoir la comparer à la valeur de la commande sur laquelle je vais appliquer le template, je sais pas si c’est très clair :slight_smile:

Nouvelle version avec ajout d’un template bulb

bulb_color

Exemple ci-dessus , le template est associé à la commande couleur d’un équipement hue . Un click sur l’ampoule ouvre la fenêtre de sélection des couleurs.