Mais tu as créé un template pour une commande action là , elle ne te renverra pas de valeur ??
je veux comparer le #name# de ma commande action avec la valeur d’une commande info
$.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 result = data.result[0].split(':');
// result[1] La valeur de ta commande info
}
}
});
Mise à jour du plugin
Nouvel Exemple d’utilisation: Regrouper tous les équipements présents sur le réseau en 1 seul wigdet:
- Créer un virtuel que je nomme réseau par exemple et j’ajoute 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.
- Go dans le plugins tools et créer un nouveau « template » de type « info string » .
-
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 »
-
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
- Le rendu
- Sur le dashboard
- Sur le design avec différents paramètres (masquer le nom /transparent)
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
Pour le prochain exemple , on verra comment créer un widget par objet avec le résumé domotique (présent dans jeedom v4.1). Cela donnera quelque chose comme ça:
1 « J'aime »
Salut ,
nouveau widget dispo sur la dernière bétâ
Pré-requis
- Plugin weather d’installer et d’activer
- Plugins « tools » à jour
Ajouter un widget
-
Le paramétrer:
Hauteur: 410px
Largeur: 510pxAjouter 2 paramètres optionnels (voir screen ci dessous):
1er paramètre:
nom : weather_id
valeur: l’id de votre équipement météo du plugin weather
2eme paramètre:
nom:transform
valeur: valeur comprise entre 0 et 1 . (0.6 sur le screen du dessus pour réduite la taille)
- Ajouter le code suivant dans la fenêtre d’édition.
<div class="eqLogic eqLogic-widget allowResize allowReorderCmd #custom_layout# #eqLogic_class# tools_weather_clock" 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#">
<link rel="stylesheet" type="text/css" href="plugins/tools/3rparty/jdigiclock/jquery.jdigiclock.css" />
<script type="text/javascript" src="plugins/tools/3rparty/jdigiclock/jquery.jdigiclock.js"></script>
<center><div id="tools_weather_clock_#id#">
<div id="digiclock#id#" ></div>
<div id="weather">
<div id="city">#name#</div>
<div class="moy" >
<span style="font-weight:bold;">#low_temperature_0#°</span> |
<span style="font-weight:bold;">#hight_temperature_0#°</span>
</div>
<img class="img_condition_day" src="plugins/weather/core/template/images/#icone_0#.png">
<div id="temp"><i class="fas fa-thermometer-half fa-2x"></i><span>#temperature#°</span></div>
<div id="hum"><i class="fas fa-tint fa-2x"></i><span>#humidity#%</span></div>
<div id="sunset">#sunrise# | #sunset#</div>
<div id="resume">
<br />
<table style="background: transparent !important">
<tr style="background: transparent !important">
<th class="borderleft">#day_1#</th>
<th>#day_2#</th>
<th>#day_3#</th>
<th>#day_4#</th>
</tr>
<tr style="background: transparent !important">
<td class="borderleft"><img src="plugins/weather/core/template/images/#icone_1#.png" width="96" height="60" /> </td>
<td><img src="plugins/weather/core/template/images/#icone_2#.png" width="96" height="60" /> </td>
<td><img src="plugins/weather/core/template/images/#icone_3#.png" width="96" height="60" /> </td>
<td><img src="plugins/weather/core/template/images/#icone_4#.png" width="96" height="60" /> </td>
</tr>
<tr style="background: transparent !important">
<td class="borderleft">#low_temperature_1#° | #hight_temperature_1#°</td>
<td>#low_temperature_2#° | #hight_temperature_2#°</td>
<td>#low_temperature_3#° | #hight_temperature_3#°</td>
<td>#low_temperature_4#° | #hight_temperature_4#°</td>
</tr>
</table>
</div>
</div>
</div></center>
<script type="text/javascript">
$('#digiclock#id#').jdigiclock();
</script>
<style>
.tools_weather_clock {
-moz-transform-origin:center center; /* move the origin to top-left */
-webkit-transform-origin:center center; /* move the origin to top-left */
-ms-transform-origin:center center;
-o-transform-origin:center center;
transform-origin:center center;
-moz-transform: scale(#transform#);
-webkit-transform: scale(#transform#);
-ms-transform: scale(#transform#);
-o-transform: scale(#transform#);
transform: scale(#transform#);
}
</style>
</div>
Rendre visible l’équipement créé et lui attribuer un objet.
Sauvegarder
4 « J'aime »
Super, je vais l’installer tout de suite.
Tu vas dire que je chipote mais bon.
Penses tu qu’il soit possible de le réduire soit en le réorganisant ou en réduisant l’ensemble des infos?
Il y a beaucoup d’info mais il prend beaucoup de place sur l’écran.
Encore une fois, merci pour ta contribution
Juste pour être sûr, ça marche avec quelle version de Jeedom ?
Je suis en 4.0.49, mais s’il n’est fait que pour les bêtas comme tu le précises dans ton post, c’est probablement normal que je puisse pas l’installer.
De même, dans la création du widget, à part la taille, je ne retrouve pas les informations à saisir. Je ne peux rentrer que les informations de test, pas de commande ni d’option.
Encore deux choses, j’ai supposé qu’il s’aggissait d’un widget → info → autre, et j’ai créé un virtuel avec une info de même nature sur lequel appliquer ce virtuel.
Je suis loin du compte ?
Encore une fois, s’il est fait pour ne fonctionner qu’avec les prochaines version de Jeedom, tant pis, j’attendrais.
Bonne soirée
Là tu as créé un template (pour une commande). , il faut créer un widget (équipement).
Je suis passé d’abord pas l’ajout de widget (le +), puis la création de widget à partir de la.commande code.
Quand tu parles de widget équipement, je ne vois pas de.quoi il s’agit.
Pour moi, un widget s’applique sur un équipement à définir à part (réel ou virtuel).
Qu’est-ce que j’ai loupé ?
Mise à jour du widget (pas besoin de MAJ le plugin) avec possibilité de paramétrer la taille du widget
@ mich0111
il faut suivre le lien ci-dessus .
Quel tâche !!
Désolé, je n’avais pas vu que tu utilisais ton plugin tools.
Je croyais que tu parlais de l’outil widget du core.
Je comprends mieux ce que tu m’expliquais.
J’essaie de l’installer ce soir et je te tiens au courant.
Bonne soirée
Ça marche, ça donne ça :
Il y a des chances pour que ça devienne un must have.
Une autre question, je n’ai pas encore essayé avec un design mais est-il normal que l’on puisse pas le déplacer sur le dashboard ?
Edit: En fait le problème venait de ma tablette pas de ton widget. Sur PC, aucun souci.
Je confirme, une vraie tuerie.
Il me semble être tombé sur 2 anomalies visibles sur l’écran suivant :
- La première est le message affiché au-dessus du widget « weather2 Ajouter le code suivant dans la fenêtre d’édition. ». Je ne sais pas à quoi ça correspond.
- La deuxième est que bien le transform fonctionne parfaitement, il me semble que le dimensionnement de la tuile reste inchangé. Le widget est réduit mais la tuile occupe la même taille.
Je n’ai pas regardé le code mais j’imagine que ce ne doit pas être grand chose (enfin j’espère).
Bonne fin de soirée.
-
L’erreur vient d’ailleurs je pense , tu n’as pas une commande ou un équipement weather2?
-
Le transform fonctionne oui. Sur le design si tu te mets en mode édition tu verras que la tuile est bien redimensionné mais pas sur le dashboard et ce n’est pas possible.
Sur le design
- sans redimensionnement
- avec un transform à 0.6
Salut,
Après quelques jours d’essai, je reviens vers toi faire un premier bilan.
Pour le « weather2 », j’ai trouvé le problème, mon copier/coller du code avait chopé un bout de ton message qui s’est retrouvé en haut du code. 
Ensuite, il y a de erreurs nouvelles qui sont apparues dont je te communique la liste ci-dessous :
J’ai peut-être fait un truc de travers mais je ne vois pas quoi.
D’avance, merci de m’indiquer ce que je dois éventuellement corriger.
A bientôt
1 « J'aime »
Cela ne provient pas de ce widget car il n’utilise pas le code que donne le message d’erreur .
Je peux pas t’aider plus car je ne sais pas ce que tu as ajouté dans le design
1 « J'aime »
Ok, je vais chercher.
C’est quand même bizarre que l’affichage du widget figure dans les messages d’erreurs, je n’avais jamais vu ça avant.
Il y a encore des traces du weather2 selon le message d’erreur
Exact, je n’avais pas vu, je vais regarder à nouveau.
1 « J'aime »