Ce Forum passera en lecture seule en janvier 2020
Image
Merci de vous rendre sur https://community.jeedom.com maintenant pour vos prochains postes ;)

Widget sur le #name#

Réservé à l'utilisation et la création de widgets dans JEEDOM
Répondre
OUARZA
Timide
Messages : 298
Inscription : 13 févr. 2019, 08:10

Widget sur le #name#

Message par OUARZA » 28 août 2019, 16:15

Bonjour à tous,
C'est encore moi.
Je me suis inspiré d'un widget pour ajouter des boutons image à mes commandes.
Cela fonctionne très bien pour le Plus" et le "moins" mais pas pour les autres aucune image présentée).
Pourquoi ?

Merci pour votre aide.

Code : Tout sélectionner

<div style="width:60px; height:50px; " class="cmd reportModeHidden cmd-widget" data-type="action" data-subtype="other" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
<a class="btn btn-sm action cmdName tooltips" title="#name#" style="border-color:rgba(0,0,0,0)!important"></a>
<!-- Ne Pas Supprimer -->
<script class="createWidgetInfo" type="text/javascript">//<![CDATA[{"type":"1","version":"1","image1":"moins.png","image2":"plus.png","image3":"ouvrir.png","image4":"fermer.png","image5":"stop.png"}]]></script>
<!-- Ne Pas Supprimer -->
<script>
var srcImgPlus = 'plugins/widget/core/template/dashboard/cmd.action.other.Plus_Moins/plus.png';
var srcImgMoins = 'plugins/widget/core/template/dashboard/cmd.action.other.Plus_Moins/moins.png';
var srcImgOuvrir = 'plugins/widget/core/template/dashboard/cmd.action.other.Plus_Moins/ouvrir.png';
var srcImgFermer = 'plugins/widget/core/template/dashboard/cmd.action.other.Plus_Moins/fermer.png';
var srcImgStop = 'plugins/widget/core/template/dashboard/cmd.action.other.Plus_Moins/stop.png';
var taille = 'width=40px';
var taille2 = 'width=70px';

if(jeedom.cmd.normalizeName('#name#') == 'Plus'){
$('.cmd[data-cmd_uid=#uid#] .btn').append('<img src="'+srcImgPlus+'" '+taille+'>');
}
if(jeedom.cmd.normalizeName('#name#') == 'Moins'){
$('.cmd[data-cmd_uid=#uid#] .btn').append('<img src="'+srcImgMoins+'" '+taille+'>');
}
if(jeedom.cmd.normalizeName('#name#') == 'Ouvrir'){
$('.cmd[data-cmd_uid=#uid#] .btn').append('<img src="'+srcImgOuvrir+'" '+taille2+'>');
}
if(jeedom.cmd.normalizeName('#name#') == 'Fermer'){
$('.cmd[data-cmd_uid=#uid#] .btn').append('<img src="'+srcImgFermer+'" '+taille2+'>');
}
if(jeedom.cmd.normalizeName('#name#') == 'Stop'){
$('.cmd[data-cmd_uid=#uid#] .btn').append('<img src="'+srcImgStop+'" '+taille2+'>');
}
  
$('.cmd[data-cmd_uid=#uid#]:last .action').on('click', function () {
jeedom.cmd.execute({id: '#id#'});
});
</script>
</div>
widget.PNG
widget.PNG (24.89 Kio) Consulté 451 fois

Avatar de l’utilisateur
mich0111
Timide
Messages : 460
Inscription : 25 juin 2019, 13:59

Re: Widget sur le #name#

Message par mich0111 » 28 août 2019, 16:19

Bonjour,
Qu'as-tu mis dans l'onglet affichage des différentes commandes?

Envoyé de mon SM-G950F en utilisant Tapatalk

Jeedom V4 DIY
RPI3B+
SSD
RFXCOM version XL
Contrôleur Z-Wave Z-stick Gen5
CronBee2
Et plus de 70 devices de toutes marques et toutes natures

OUARZA
Timide
Messages : 298
Inscription : 13 févr. 2019, 08:10

Re: Widget sur le #name#

Message par OUARZA » 28 août 2019, 16:32

Bonjour mich0111,
Normalement c'est bien configuré.
widget 2.PNG
widget 2.PNG (33.5 Kio) Consulté 437 fois
Mathieu

Avatar de l’utilisateur
mich0111
Timide
Messages : 460
Inscription : 25 juin 2019, 13:59

Re: Widget sur le #name#

Message par mich0111 » 28 août 2019, 16:35

Peux-tu envoyer également ton widget?
Vérifie notamment si les images sont bien stockées dans le widget.

Envoyé de mon SM-G950F en utilisant Tapatalk
Jeedom V4 DIY
RPI3B+
SSD
RFXCOM version XL
Contrôleur Z-Wave Z-stick Gen5
CronBee2
Et plus de 70 devices de toutes marques et toutes natures

OUARZA
Timide
Messages : 298
Inscription : 13 févr. 2019, 08:10

Re: Widget sur le #name#

Message par OUARZA » 28 août 2019, 17:54

Les Voici avec et sans l'application du widget.
widget2.JPG
widget2.JPG (21.89 Kio) Consulté 408 fois
widget1.JPG
widget1.JPG (22.5 Kio) Consulté 408 fois
Oui, oui elles y sont bien :)
widget3.JPG
widget3.JPG (56.51 Kio) Consulté 407 fois
Mathieu
Dernière édition par OUARZA le 28 août 2019, 17:58, édité 1 fois.

Avatar de l’utilisateur
mich0111
Timide
Messages : 460
Inscription : 25 juin 2019, 13:59

Re: Widget sur le #name#

Message par mich0111 » 28 août 2019, 17:57

Quid des fichiers ?

Envoyé de mon SM-G950F en utilisant Tapatalk

Jeedom V4 DIY
RPI3B+
SSD
RFXCOM version XL
Contrôleur Z-Wave Z-stick Gen5
CronBee2
Et plus de 70 devices de toutes marques et toutes natures

Avatar de l’utilisateur
mich0111
Timide
Messages : 460
Inscription : 25 juin 2019, 13:59

Re: Widget sur le #name#

Message par mich0111 » 28 août 2019, 18:08

C'est trop petit sur mon smartphone.
Je regarderais ça ce soir sur écran à moins qu'une solution te soit donnée d'ici là.
A+
Jeedom V4 DIY
RPI3B+
SSD
RFXCOM version XL
Contrôleur Z-Wave Z-stick Gen5
CronBee2
Et plus de 70 devices de toutes marques et toutes natures

Avatar de l’utilisateur
Poumi
Actif
Messages : 660
Inscription : 21 mars 2019, 22:41

Re: Widget sur le #name#

Message par Poumi » 28 août 2019, 18:20

C’est normal puisque tu ne compare pas le nom mais le nom normalisé.

Le principe du nom normalisé est de te retourner pareil pour toutes tes commandes appelées on, ouvrir, allumer... pour simplifier le code derrière.

Donc le nom normalisé n’est le nom de la commande que pour celles ne faisant pas partie des cas prévus, c’est pour ça que ça marche avec plus et moins.

OUARZA
Timide
Messages : 298
Inscription : 13 févr. 2019, 08:10

Re: Widget sur le #name#

Message par OUARZA » 28 août 2019, 18:25

Hello Poumi,
C'est ça que je dois modifier ?

Code : Tout sélectionner

if(jeedom.cmd.normalizeName('#name#')
Ou dois-je utiliser des mots comme monter, descendre ?

Mathieu

Avatar de l’utilisateur
Poumi
Actif
Messages : 660
Inscription : 21 mars 2019, 22:41

Re: Widget sur le #name#

Message par Poumi » 28 août 2019, 18:32

OUARZA a écrit :
28 août 2019, 18:25
Hello Poumi,
C'est ça que je dois modifier ?

Code : Tout sélectionner

if(jeedom.cmd.normalizeName('#name#')
Mathieu
Oui.
C’est bien cette fonction qui te pose problème.

Après pour comment l’ecrire, je n’ai jamais fait de widget donc je ne suis pas sûr à 100% mais je pense qu’il faut mettre directement if #name#

OUARZA
Timide
Messages : 298
Inscription : 13 févr. 2019, 08:10

Re: Widget sur le #name#

Message par OUARZA » 28 août 2019, 18:33

@Poumi,
Je vais essayer

OUARZA
Timide
Messages : 298
Inscription : 13 févr. 2019, 08:10

Re: Widget sur le #name#

Message par OUARZA » 28 août 2019, 18:40

Je suis sur le téléphone alors pas évident mais ça sent bon :D
Dernière édition par OUARZA le 28 août 2019, 21:08, édité 2 fois.

OUARZA
Timide
Messages : 298
Inscription : 13 févr. 2019, 08:10

Re: Widget sur le #name#

Message par OUARZA » 28 août 2019, 20:43

Impeccable, merci à tous !
Voici le code et une petite image :)

Code : Tout sélectionner

<div style="width:60px; height:50px; " class="cmd reportModeHidden cmd-widget" data-type="action" data-subtype="other" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
<a class="btn btn-sm action cmdName tooltips" title="#name#" style="border-color:rgba(0,0,0,0)!important"></a>
<!-- Ne Pas Supprimer -->
<script class="createWidgetInfo" type="text/javascript">//<![CDATA[{"type":"1","version":"1","image1":"moins.png","image2":"plus.png","image3":"ouvrir.png","image4":"fermer.png","image5":"stop.png"}]]></script>
<!-- Ne Pas Supprimer -->
<script>
var srcImgPlus = 'plugins/widget/core/template/dashboard/cmd.action.other.Plus_Moins/plus.png';
var srcImgMoins = 'plugins/widget/core/template/dashboard/cmd.action.other.Plus_Moins/moins.png';
var srcImgOuvrir = 'plugins/widget/core/template/dashboard/cmd.action.other.Plus_Moins/ouvrir.png';
var srcImgFermer = 'plugins/widget/core/template/dashboard/cmd.action.other.Plus_Moins/fermer.png';
var srcImgStop = 'plugins/widget/core/template/dashboard/cmd.action.other.Plus_Moins/stop.png';
var taille = 'width=40px';
var taille2 = 'width=70px';

if('#name#' == 'Plus'){
$('.cmd[data-cmd_uid=#uid#] .btn').append('<img src="'+srcImgPlus+'" '+taille+'>');
}
if('#name#' == 'Moins'){
$('.cmd[data-cmd_uid=#uid#] .btn').append('<img src="'+srcImgMoins+'" '+taille+'>');
}
if('#name#' == 'Ouvrir'){
$('.cmd[data-cmd_uid=#uid#] .btn').append('<img src="'+srcImgOuvrir+'" '+taille+'>');
}
if('#name#' == 'Fermer'){
$('.cmd[data-cmd_uid=#uid#] .btn').append('<img src="'+srcImgFermer+'" '+taille+'>');
}
if('#name#' == 'Stop'){
$('.cmd[data-cmd_uid=#uid#] .btn').append('<img src="'+srcImgStop+'" '+taille+'>');
}
  
$('.cmd[data-cmd_uid=#uid#]:last .action').on('click', function () {
jeedom.cmd.execute({id: '#id#'});
});
</script>
</div>
widget4.JPG
widget4.JPG (22.33 Kio) Consulté 357 fois

OUARZA
Timide
Messages : 298
Inscription : 13 févr. 2019, 08:10

Re: Widget sur le #name#

Message par OUARZA » 19 oct. 2019, 21:57

Hello !
J'ai voulu transposer ce widget pour une commande info.other.
Malgré avoir vérifié le chemin des images, et une modification "data-type="info"" cela n'affiche rien.
Pouvez-vous m'aider ou souhaitez-vous que je créé un nouveau fil sur le nouveau forum ?

Merci

OUARZA
Timide
Messages : 298
Inscription : 13 févr. 2019, 08:10

Re: Widget sur le #name#

Message par OUARZA » 22 oct. 2019, 21:39

Hello,
Je suis pas fort en programmation.
Quelqu'un peut-il m'aider ?
Voici ce que j'ai fait:

Code : Tout sélectionner

<div style="width:60px; height:50px; " class="cmd reportModeHidden cmd-widget" data-type="info" data-subtype="other" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
<a class="btn btn-sm action cmdName tooltips" title="#name#" style="border-color:rgba(0,0,0,0)!important"></a>
<!-- Ne Pas Supprimer -->
<script class="createWidgetInfo" type="text/javascript">//<![CDATA[{"type":"1","version":"1","image1":"moins.png","image2":"plus.png","image3":"ouvrir.png","image4":"fermer.png","image5":"stop.png"}]]></script>
<!-- Ne Pas Supprimer -->
<script>
var srcImgON = 'plugins/widget/core/template/dashboard/cmd.info.other.Mal/ON.png';
var srcImgOFF = 'plugins/widget/core/template/dashboard/cmd.info.other.Mal/OFF.png';
var srcImgDIFF = 'plugins/widget/core/template/dashboard/cmd.info.other.Mal/DIFF.png';
var taille = 'width=70px';
var taille2 = 'width=70px';

if('#name#' == 'ON'){
$('.cmd[data-cmd_uid=#uid#] .btn').append('<img src="'+srcImgON+'" '+taille+'>');
}
if('#name#' == 'OFF'){
$('.cmd[data-cmd_uid=#uid#] .btn').append('<img src="'+srcImgOFF+'" '+taille+'>');
}
if('#name#' == 'DIFF'){
$('.cmd[data-cmd_uid=#uid#] .btn').append('<img src="'+srcImgDIFF+'" '+taille+'>');
}
  
$('.cmd[data-cmd_uid=#uid#]:last .action').on('click', function () {
jeedom.cmd.execute({id: '#id#'});
});
</script>
</div>
Pouvez-vous m'aider ?
Merci beaucoup.

OUARZA
Timide
Messages : 298
Inscription : 13 févr. 2019, 08:10

Re: Widget sur le #name#

Message par OUARZA » 23 oct. 2019, 21:01

Hello,
J'ai avancé et c'est presque ça :)
Le titre semble masqué mais on peut quand même cliquer dessus, comment le retirer ?

Merci

Code : Tout sélectionner

<div style="width:90px; min-height:80px;" class="cmd reportModeHidden cmd-widget" data-type="info" data-subtype="other" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
	<center>
		<div class="btn btn-sm action cmdName tooltips" title="#name#" style="font-weight: bold;font-size : 12px; #hideCmdName#"#name_display#></div>
		<span style="font-size: 2.5em;" class="iconCmd#uid#"></span>
	</center>
<!-- Ne Pas Supprimer -->
	<script class="createWidgetInfo" type="text/javascript">//<![CDATA[{"type":"1","version":"1","image1":"OFF_MaL.png","image2":"ON_MaL.png"}]]></script>
<!-- Ne Pas Supprimer -->
<script>
var srcImgON = 'plugins/widget/core/template/dashboard/cmd.info.string.MaL2/ON_MaL.png';
var srcImgOFF = 'plugins/widget/core/template/dashboard/cmd.info.string.MaL2/OFF_MaL.png';
var srcImgDIFF = 'plugins/widget/core/template/dashboard/cmd.info.string.MaL2/DIFF_MaL.png';
var taille = 'width=80px';
var taille2 = 'width=80px';

if('#state#' == 'ON'){
$(".iconCmd#uid#").append('<img src="'+srcImgON+'" '+taille+'>');
}
if('#state#' == 'OFF'){
$(".iconCmd#uid#").append('<img src="'+srcImgOFF+'" '+taille+'>');
}
if('#state#' == 'DIFF'){
$(".iconCmd#uid#").append('<img src="'+srcImgDIFF+'" '+taille+'>');
}

$('.cmd[data-cmd_uid=#uid#]:last .action').on('click', function () {
jeedom.cmd.execute({id: '#id#'});
});
</script>
</div>

Répondre

Revenir vers « [Plugin officiel] Widgets »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 3 invités