Widget Danfoss

vvince · Octobre 29, 2019, 4:12

Hello,
Je suis passé en V4 et j’en profite pour uniformiser mes widgets en utilisant au maximum les excellents iconaction et iconinfo. Grâce aux partages d’icônes plus de 90% des cas d’utilisations fonctionnent.
Je me suis créé un petit widget led pour les batteries et je suis à la recherche d’un widget Danfoss compatible V4.

L’un d’entre vous aurait-il ce widget compatible v4 ?

Merci

Salvialf · Octobre 29, 2019, 4:19

Salut @vvince,

Tout d’abord Merci beaucoup pour ton retour

Concernant ta demande de widget, as-tu vu et testé ce code partagé sur l’ancien forum ? Si il n’est pas tout à fait compatible V4 n’hésites pas à me remonter ce qui ne va pas avec des copies d’écran éventuellement.

@+

vvince · Octobre 29, 2019, 4:35

Hello,
J’ai effectivement ajouté pas mal d’images sur tes widgets (présence, chauffe eau, vmc,…)

Sinon pour le Danfoss je n’avais pas vu le sujet et merci.

Avec quelques adaptations cela fonctionne voici le code à jour pour la V4 :

<style>
@font-face {
font-family: danfoss;
src: url('data/customTemplates/dashboard/cmd.info.numeric.DanfossIMG/digital-7-italic.ttf');
}

span.state_danfoss {
font-family: danfoss;
font-size:23px;
color: #323232 ;
position: absolute;
top: 35px;
right: 33px;
}

span.statedec_danfoss {
font-family: danfoss;
font-size:12px;
color: #323232 ;
position: absolute;
top: 40px;
right: 27px;
}
span.unite_danfoss {
font-family: danfoss;
font-size:8px;
color: #323232 ;
position: absolute;
top: 30px;
right: 25px;
}
</style>
<div style="width:100px;min-height : 110px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" title="#collectDate#">
<div style="font-weight: bold;font-size : 12px;#hideCmdName#">#name_display#</div>
<div style="float: center; position: absolute ;left: 10px; top: 20px">
<img src="data/customTemplates/dashboard/cmd.info.numeric.DanfossIMG/Danfoss.png" alt="Danfoss" >
<span class="state_danfoss" id="intNumDanf#id#"></span>
<span class="statedec_danfoss" id="decNumDanf#id#"></span>
<span class="unite_danfoss" id="uniteDanf#id#">#unite#</span>
</div>
<script>
jeedom.cmd.update['#id#'] = function(_options){
var valeur = _options.display_value;
var intNum = Math.floor(valeur);
var decNum = Math.round((valeur - intNum) * 10);

$('#intNumDanf#id#').text(intNum);
$('#decNumDanf#id#').empty();
if (decNum != 0) {
$('#decNumDanf#id#').text('.'+decNum);
$('#intNumDanf#id#.state_danfoss').css('right' , '35px');
}
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>

Salvialf · Octobre 29, 2019, 4:40

Parfait !

Juste une petite chose, pour être en accord total avec la V4 il faut remplacer la ligne qui affiche le nom de la commande:

<div style="font-weight: bold;font-size : 12px;#hideCmdName#">#name_display#</div>

par:

<div class="title #hide_name#">
  <span class="cmdName">#name_display#</span>
</div>

Et si tu veux l’affichage de l’info-bulle avec la date de collecte de la valeur il faut ajouter cette ligne à ton code au sein de la fonction d’update:

$('.cmd[data-cmd_id=#id#]').attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)

vvince · Octobre 29, 2019, 6:40

Merci, c’est corrigé chez moi

vvince · Octobre 29, 2019, 6:47

Par contre en mode Design si j’ajoute la commande j’ai le code html du widgetqui apparait…
Je suis obligé d’ajouter tout l’équipement.

Une idée ?

Thks

Salvialf · Octobre 29, 2019, 7:54

Peux-tu transférer l’image data/customTemplates/dashboard/cmd.info.numeric.DanfossIMG/Danfoss.png stp que je regarde ?

vvince · Octobre 29, 2019, 8:02

Danfoss

Et voila

naboleo · Octobre 31, 2019, 10:23

Voilà celui que j’ai en V4

<style>
@font-face {
    font-family: danfoss;
    src: url('/plugins/widget/core/template/dashboard/cmd.info.numeric.DanfossIMG/digital-7-italic.ttf');
}
 
span.state_danfoss {
    font-family: danfoss;
    font-size:23px;
  	color: #323232 ;
  	position: absolute;
  	top: 35px;
  	right: 33px;
  }

span.statedec_danfoss {
    font-family: danfoss;
    font-size:12px;
  	color: #323232 ;
  	position: absolute;
  	top: 35px;
  	right: 27px;
  }
span.unite_danfoss {
    font-family: danfoss;
    font-size:8px;
  	color: #323232 ;
  	position: absolute;
  	top: 30px;
  	right: 25px;
  }
</style>
<div style="width:100px;min-height : 90px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" title="#collectDate#">
																															 
	<div style="float: center; position: absolute ;left: 10px; top: 10px">
		<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.DanfossIMG/Danfoss.png" alt="Danfoss" >
    	<span class="state_danfoss" id="intNumDanf#id#"></span> 
    	<span class="statedec_danfoss" id="decNumDanf#id#"></span>
      	<span class="unite_danfoss" id="uniteDanf#id#">#unite#</span>
	</div>    
<script>
      jeedom.cmd.update['#id#'] = function(_options){
	var valeur = _options.display_value;
	var intNum = Math.floor(valeur);
	var decNum = Math.round((valeur - intNum) * 10);
  	
        $('#intNumDanf#id#').text(intNum);
        $('#decNumDanf#id#').empty();
        if (decNum != 0) {
          $('#decNumDanf#id#').text('.'+decNum);
        }
      }
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>

leon-99 · Avril 18, 2020, 7:01

Bonjour

J’essaye de faire fonctionner le widget Danfoss en V4 mais j’ai un probleme d’affichage des données de temp dans le widget : environ 3mm trop haut et je n’arrive pas a recentrer (je ne suis pas programmeur)
Si quelqu’un avait le widget operationnel, je suis preneur
Merci d’avance

naif · Septembre 18, 2020, 2:13

@naboleo
Bonjour,
Je viens d’acquérir une tête Danfoss POPP, pour voir.
Pourrais tu m’aider pour la réalisation du widget. Je ne suis pas très fort en programmation et même plutôt nul.
Je suis en V4.
J’ai recopié le code ci dessus mais riens ne fonctionne!!!
Merci pour ton aide
Cordialement

naboleo · Septembre 18, 2020, 3:51

Salut…

Rien ne fonctionne, c’est vague… Même pas un bout de copie d’écran ou la configuration de ton widget ?

naif · Septembre 18, 2020, 4:06

Bonjour,
Effectivement c’est vague.
J’ai copié ton code dans « widget » « code ».
Je n’ai pas un cout d’image en sélectionnant « Danfoss » c’est le nom que j’ai donné à ton code.
Dans « widget », il figure bien en : cmd.info.numeric.Danfoss.html.
J’ai modifié 2 lignes de ton code celles à propos de src
voici la mienne:
src: url(‹ html/data/customTemplates/dashboard/cmd.info.numeric.DanfossIMG/Danfoss.png ›);
et celle « img src », voici la mienne:
Danfoss
Pour le rest je n’ai touché à rien!!!
Merci pour ton aide

naboleo · Septembre 18, 2020, 4:15

Déjà, ça c’est pas bon, impossible que le répertoire html soit dans ton url au mieux ça commence par

data/xxxxxx

Pour le reste, si tu appliques bien le widget sur ton virtuel, ça doit afficher un truc, même pourri… copie d’écran ?

Il faut des précisions, des infos car à distance pas possible deviner le reste

naif · Septembre 19, 2020, 9:39

Bonjour,
voici le code que j’ai (c’est le tien sauf 2 lignes)

@font-face { font-family: danfoss; src: url('data/customTemplates/dashboard/cmd.info.numeric.DanfossIMG/Danfoss.png'); } span.state_danfoss {' font-family: danfoss; font-size:23px; color: #323232 ; position: absolute; top: 35px; right: 33px; } span.statedec_danfoss { font-family: danfoss; font-size:12px; color: #323232 ; position: absolute; top: 35px; right: 27px; } span.unite_danfoss { font-family: danfoss; font-size:8px; color: #323232 ; position: absolute; top: 30px; right: 25px; }

<div style="float: center; position: absolute ;left: 10px; top: 10px">
	<img src="data/customTemplates/dashboard/cmd.info.numeric.DanfossIMG/Danfoss.png)" alt="Danfoss" >
	<span class="state_danfoss" id="intNumDanf#id#"></span> 
	<span class="statedec_danfoss" id="decNumDanf#id#"></span>
  	<span class="unite_danfoss" id="uniteDanf#id#">#unite#</span>
</div>

voici la capture du widget ![Capturewidget|590x174](upload://3te9pbzRdQtlonRXggyXKvToJcQ.png) Je sais qu'il y a beaucoup d'erreur mais je ne demande qu'à comprendre un peu plus Merci pour le temps que tu me consacre et bonne journée Cordialement

naif · Septembre 19, 2020, 9:41

naboleo · Septembre 19, 2020, 9:55

Salut,

Bon à priori, tu mélanges tout :

C’est pas un widget multistate ou un truc du core…
Le chemin des images est toujours pas bon

image1709×521 34.1 KB

Pour t’en sortir

Donc tu prends le code, plus haut, tu le mets dans ce fichier
Tu mets les bons droits (www-data) et zou…

Le mieux c’est d’utiliser Jeexplorer

naif · Septembre 19, 2020, 1:25

Un grand merci pour ton aide, cela fonctionne. Mais j’ai également appris qu’il fallait un dossier du même non "cmd…"pour mettre les images!!!
Toutefois, comment fais tu pour que la température soit dans le rond de la tête et comment faire le « + » et le « - » pour modifier la température de consigne.
Encore merci, j’ai appris quelque chose aujourd’hui
Bonne journée

naif · Septembre 19, 2020, 2:43

Re…
Peux tu m’indiquer comment je peux changer l’image: j’ai toujours celle ci:
Captureimgtete
Je l’ai supprimée dans tous les répertoires mais elle continue de s’afficher ???
Cordialement

naboleo · Septembre 19, 2020, 2:50

C’est pas obligatoire, juste plus simple pour s’en souvenir

C’est la position qui joue par exemple

  	top: 35px;
  	right: 27px;

ça c’est une commande de type curseur… classique dans jeedom et tu change l’affichage sous forme de « button »

Comme tu l’as fait avant, en changeant la valeur de

<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.DanfossIMG/Danfoss.png" alt="Danfoss" >

Si elle s’affiche encore, c’est aussi possible que ce soit le cache du navigateur. Et tu peux vérifier le chemin pour être sur d’avoir éffacé la bonne image même si c’est absolument pas utile de tout effacer