Modification widget

[Furious13]

Bonjour à tous,

J’ai repris Jeedom âpres deux ans d’arrêt suite a ma construction de maison. Donc je reprend le bébé et la je galère que l’adaptation de mon widget en V3. J’ai beaucoup lu sur la bascule de la V3 a la V4. Donc j’ai récupéré le code CSS de mon plugin V3 pour le recrée sur la V4 mais je n’arrive pas a récupérer les infos du module principal. j’ai compris que sur la V3 on applique le widget sur l’ensemble du module et la c’est commande par commande. donc il faut que j’adapte les info de celui ci pour que tout dialogue correctement.
j’ai importé les images dans jeedom + modifier le chemin de celle ci dans le CSS, il affiche le widget mais aucune info ne remonte dans celui-ci.
je tiens a m’excuser d’avance pour mes propos je suis totalement a la ramasse en programmation CSS HTML… donc MERCI a vous pour votre temps de réponse.
j’ai également essayer avec le plugin « HTML Display » mais pareil, j’ai l’icone mais aucune info de remonté.

<div style="width:100px;height:100px;" 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#</div>
    <div class="conso_position#id#">
        <img class="IMGihtid#id#" width="220px" height="220px" id="imgID#id#" src="data/customTemplates/dashboard/cmd.info.numeric.HygroThermographe_TaG/No.ext_100.png">
      	<span class="stateint_temp#id#" id="intNumTemp#id#"></span> 
        <span class="statedec_temp#id#" id="decNumTemp#id#"></span> 
        <span class="unite_temp#id#" id="unite#id#">#unite#</span>
        <span class="humidityint_unite#id#" id="intNumHumidity#id#"></span>
        <span class="humiditydec_unite#id#" id="decNumHumidity#id#"></span>
    	<span class="humidityunite#id#" id="humidityunite#id#">%</span>
	</div>
<style>
@font-face {
    font-family: "Digital-7";
    src:  url("data/customTemplates/dashboard/cmd.info.numeric.HygroThermographe_TaG/font/digital-7.eot?") format("eot"),
          url("data/customTemplates/dashboard/cmd.info.numeric.HygroThermographe_TaG/font/digital-7.woff") format("woff"),
          url("data/customTemplates/dashboard/cmd.info.numeric.HygroThermographe_TaG/font/digital-7.ttf") format("truetype"),
          url("data/customTemplates/dashboard/cmd.info.numeric.HygroThermographe_TaG/font/digital-7.svg#Digital-7") format("svg");
    font-weight:normal;
    font-style:normal;
}
 
span.stateint_temp#id# {
    font-family: "Digital-7"; 
    font-size:80px;
    letter-spacing: 6px;
    color: 	#181818;
    position: absolute;
    top: 31px;
    right: 67px;
    transform : scale(0.7,1);
  -webkit-transform:scale(0.7,1); /* Safari and Chrome */
  -moz-transform:scale(0.7,1); /* Firefox */
    -ms-transform:scale(0.7,1); /* IE 9+ */
  -o-transform:scale(0.7,1); /* Opera */
  }

span.statedec_temp#id# {
    font-family: "Digital-7"; 
    font-size:50px;
    color: 	#181818;
    position: absolute;
    top: 62px;
    right: 60px;
    transform : scale(0.7,1);
  -webkit-transform:scale(0.7,1); /* Safari and Chrome */
  -moz-transform:scale(0.7,1); /* Firefox */
    -ms-transform:scale(0.7,1); /* IE 9+ */
  -o-transform:scale(0.7,1); /* Opera */
  }
  
span.unite_temp#id# {
    font-family: "Digital-7";  
    font-size:20px;
    font-weight: bold;
    color: 	#181818;
    position: absolute;
    top: 55px;
    right: 65px;
  }

div.conso#id# {
    width:140px;
    min-height : 140px;
}
  
div.conso_position#id# {
    /*float: center; */
  	/*align:center;*/
    position: absolute;
    /*left: 10px;
    top: 20px;*/
  	margin-left: auto;
  	margin-right: auto;
  	/*width: ...;*/
}
  
span.humidityint_unite#id# {
    font-family: "Digital-7"; 
    font-size: 65px;
    letter-spacing: 6px;
    color: 	#181818;
    position: absolute;
    top: 103px;
    right: 74px;
    transform : scale(0.7,1);
  -webkit-transform:scale(0.7,1); /* Safari and Chrome */
  -moz-transform:scale(0.7,1); /* Firefox */
    -ms-transform:scale(0.7,1); /* IE 9+ */
  -o-transform:scale(0.7,1); /* Opera */
  }
  
span.humiditydec_unite#id# {
    font-family: "Digital-7"; 
    font-size:35px;
    color: 	#181818;
    position: absolute;
    top: 134px;
    right: 72px;
    transform : scale(0.7,1);
  -webkit-transform:scale(0.7,1); /* Safari and Chrome */
  -moz-transform:scale(0.7,1); /* Firefox */
    -ms-transform:scale(0.7,1); /* IE 9+ */
  -o-transform:scale(0.7,1); /* Opera */
  }

span.humidityunite#id# {
    font-family: "Digital-7";  
    font-size:20px;
    font-weight: bold;
    color: 	#181818;
    position: absolute;
    top: 120px;
    right: 74px;
  }
  
</style>
      
<script>
  var textResize#id# = true;  //globale
  //console.log("température avant la fonction jeedom update");
  //console.log(#state#);
  jeedom.cmd.update['#id#'] = function(_options){ 
    console.log("début fonction jeedom update");
   // console.log("température via _options dans jeedom update");
  	//console.log(_options.display_value);
    // Déclaration des variables 
    var humidity#id# = #humidity#;
    var present#id# = #present#;
    var battery#id# = #battery#;
    //var temp = #state#;
    var coeffMultiplicateur#id# = #coefficient# ;
    var online; 
    var batterie;
    var intNum = Math.floor(_options.display_value);
    var decNum = Math.round((_options.display_value - intNum) * 10);

	console.log("modification valeur Température");
    // on déclare directement la valeur de température, #state# contient la témpérature. Pour rappel on a associé le widget à la commande Température
    $('#intNumTemp#id#').text(intNum+".");
    $('#decNumTemp#id#').text(decNum);
    console.log("température");
    console.log(intNum+"."+decNum);
    
    jeedom.cmd.execute({ // Récupération de la valeur de la commande humidité 
      id: humidity#id#,
      success:  function(valeur) {          
        var humidityintNum = Math.floor(valeur);
  		var humiditydecNum = Math.round((valeur - humidityintNum) * 10);
      	$('#intNumHumidity#id#').text(humidityintNum+".");
      	$('#decNumHumidity#id#').text(humiditydecNum);
      console.log("humidité");
      console.log(humidityintNum+"."+humiditydecNum);
      
  	 }
  	}); 
          
  	jeedom.cmd.execute({ // Récupération de la valeur de la commande present (binaire)
        id: present#id#,
        success: function(valeur){
          online = valeur;
       
    jeedom.cmd.execute({ // Récupération de la valeur de la commande batterie
         id: battery#id#, 
         success: function(valeur){
         batterie = valeur;
        //console.log(batterie);
      	console.log("récup batterie");
         if (online == 1) {  // Si le capteur est Online on va tester la valeur de la batterie afin d'afficher la bonne image de fond
            if (batterie >= 80 && batterie <= 100) {
      			$('.cmd[data-cmd_id=#id#] .IMGihtid#id#').empty().append('<img src="data/customTemplates/dashboard/cmd.info.numeric.HygroThermographe_TaG/No.ext_100.png" class="IMGiht#id#" id="imgID#id#"/>');
          	}else if (batterie >= 60 && batterie < 80){
           	 	$('.cmd[data-cmd_id=#id#] .IMGihtid#id#').empty().append('<img src="data/customTemplates/dashboard/cmd.info.numeric.HygroThermographe_TaG/No.ext_80.png"/>');
          	}else if (batterie >= 40 && batterie < 60){
                $('.cmd[data-cmd_id=#id#] .IMGihtid#id#').empty().append('<img src="data/customTemplates/dashboard/cmd.info.numeric.HygroThermographe_TaG/No.ext_60.png" class="IMGiht#id#" id="imgID#id#/>');
            }else if (batterie >= 20 && batterie < 40){
                $('.cmd[data-cmd_id=#id#] .IMGihtid#id#').empty().append('<img src="data/customTemplates/dashboard/cmd.info.numeric.HygroThermographe_TaG/No.ext_40.png" class="IMGiht#id#" id="imgID#id#/>');
          	}else if (batterie >= 5 && batterie < 20){           	 	
              	 $('.cmd[data-cmd_id=#id#] .IMGihtid#id#').empty().append('<img src="data/customTemplates/dashboard/cmd.info.numeric.HygroThermographe_TaG/No.ext_20.png" class="IMGiht#id#" id="imgID#id#/>');
          	}else if (batterie < 5){           	 	   
                $('.cmd[data-cmd_id=#id#] .IMGihtid#id#').empty().append('<img src="data/customTemplates/dashboard/cmd.info.numeric.HygroThermographe_TaG/No.ext_0.png" class="IMGiht#id#" id="imgID#id#/>');
           	 }
          }else{  // Si le capteur est Offline on va tester la valeur de la batterie afin d'afficher la bonne image de fond
          	if (batterie >= 80 && batterie <= 100) {   
                $('.cmd[data-cmd_id=#id#] .IMGihtid#id#').empty().append('<img src="data/customTemplates/dashboard/cmd.info.numeric.HygroThermographe_TaG/No.ext_100_nobt.png" class="IMGiht#id#" id="imgID#id#/>');
             }else if (batterie >= 60 && batterie < 80){           	 	
                $('.cmd[data-cmd_id=#id#] .IMGihtid#id#').empty().append('<img src="data/customTemplates/dashboard/cmd.info.numeric.HygroThermographe_TaG/No.ext_80_nobt.png" class="IMGiht#id#" id="imgID#id#/>');
           	 }else if (batterie >= 40 && batterie < 60){           	 	
                $('.cmd[data-cmd_id=#id#] .IMGihtid#id#').empty().append('<img src="data/customTemplates/dashboard/cmd.info.numeric.HygroThermographe_TaG/No.ext_60_nobt.png" class="IMGiht#id#" id="imgID#id#/>');
           	 }else if (batterie >= 20 && batterie < 40){           	 	
                $('.cmd[data-cmd_id=#id#] .IMGihtid#id#').empty().append('<img src="data/customTemplates/dashboard/cmd.info.numeric.HygroThermographe_TaG/No.ext_40_nobt.png" class="IMGiht#id#" id="imgID#id#/>');
           	 }else if (batterie >= 5 && batterie < 20){           	 	
                $('.cmd[data-cmd_id=#id#] .IMGihtid#id#').empty().append('<img src="data/customTemplates/dashboard/cmd.info.numeric.HygroThermographe_TaG/No.ext_20_nobt.png" class="IMGiht#id#" id="imgID#id#/>');
           	 }else if (batterie < 5){    
                $('.cmd[data-cmd_id=#id#] .IMGihtid#id#').empty().append('<img src="data/customTemplates/dashboard/cmd.info.numeric.HygroThermographe_TaG/No.ext_0_nobt.png" class="IMGiht#id#" id="imgID#id#/>');
           	 }
          }
      }
    });
  }
  });
  
  		// Image Resize - Une seule fois après que l'image ait été chargée grace à .onload
  		imgID#id#.onload = function(){
        	console.log ("début fonction onload");
          var widthValue =  $("#imgID#id#").width();
          var heightValue =  $("#imgID#id#").height();
          console.log("width");
          console.log(widthValue);
          console.log("height");
          console.log(heightValue);
          widthVal  = parseInt(widthValue) * coeffMultiplicateur#id#;
          console.log(widthVal);
  		  heightVal  = parseInt(heightValue) * coeffMultiplicateur#id#;
          $("#imgID#id#").css('width',widthVal);
          $("#imgID#id#").css('height',heightVal);
  		}
		  
	if(textResize#id# == true){
      
  		console.log("début mise à jour taille texte");
        // unité Température Text Size
        var fontSize =  $("#intNumTemp#id#").css("fontSize");
        fontSize  = parseInt(fontSize) * coeffMultiplicateur#id# + "px";
        $("#intNumTemp#id#").css("fontSize", fontSize );
  		// unité Température Text Position from Top
  		var position =  $("#intNumTemp#id#").css("top");
  		position  = parseInt(position) * coeffMultiplicateur#id# + "px";
  		$('#intNumTemp#id#').css('top',position);
  		// unité Température Text Position from Right
  		var position =  $("#intNumTemp#id#").css("right");
  		position  = parseInt(position) * coeffMultiplicateur#id# + "px";
      	$('#intNumTemp#id#').css('right',position);

        // décimale Température Text Size
        var fontSize =  $("#decNumTemp#id#").css("fontSize");
        fontSize  = parseInt(fontSize) * coeffMultiplicateur#id# + "px";
        $("#decNumTemp#id#").css("fontSize", fontSize );
  		// décimale Température Text Position from Top
  		var position =  $("#decNumTemp#id#").css("top");
  		position  = parseInt(position) * coeffMultiplicateur#id# + "px";
  		$('#decNumTemp#id#').css('top',position);
  		// décimale Température Text Position from Right
  		var position =  $("#decNumTemp#id#").css("right");
  		position  = parseInt(position) * coeffMultiplicateur#id# + "px";
      	$('#decNumTemp#id#').css('right',position);
    
  		// Sigle Température Text Size
        var fontSize =  $("#unite#id#").css("fontSize");
        fontSize  = parseInt(fontSize) * coeffMultiplicateur#id# + "px";
        $("#unite#id#").css("fontSize", fontSize );
  		// Sigle Température Text Position from Top
  		var position =  $("#unite#id#").css("top");
  		position  = parseInt(position) * coeffMultiplicateur#id# + "px";
  		$('#unite#id#').css('top',position);
  		// Sigle Température Text Position from Right
  		var position =  $("#unite#id#").css("right");
  		position  = parseInt(position) * coeffMultiplicateur#id# + "px";
      	$('#unite#id#').css('right',position);
  
 		 // unité Température Text Size
        var fontSize =  $("#intNumHumidity#id#").css("fontSize");
        fontSize  = parseInt(fontSize) * coeffMultiplicateur#id# + "px";
        $("#intNumHumidity#id#").css("fontSize", fontSize );
  		// unité Température Text Position from Top
  		var position =  $("#intNumHumidity#id#").css("top");
  		position  = parseInt(position) * coeffMultiplicateur#id# + "px";
  		$('#intNumHumidity#id#').css('top',position);
  		// unité Température Text Position from Right
  		var position =  $("#intNumHumidity#id#").css("right");
  		position  = parseInt(position) * coeffMultiplicateur#id# + "px";
      	$('#intNumHumidity#id#').css('right',position);

        // décimale Température Text Size
        var fontSize =  $("#decNumHumidity#id#").css("fontSize");
        fontSize  = parseInt(fontSize) * coeffMultiplicateur#id# + "px";
        $("#decNumHumidity#id#").css("fontSize", fontSize );
  		// décimale Température Text Position from Top
  		var position =  $("#decNumHumidity#id#").css("top");
  		position  = parseInt(position) * coeffMultiplicateur#id# + "px";
  		$('#decNumHumidity#id#').css('top',position);
  		// décimale Température Text Position from Right
  		var position =  $("#decNumHumidity#id#").css("right");
  		position  = parseInt(position) * coeffMultiplicateur#id# + "px";
      	$('#decNumHumidity#id#').css('right',position);
    
  		// Sigle Humidité Text Size
        var fontSize =  $("#humidityunite#id#").css("fontSize");
        fontSize  = parseInt(fontSize) * coeffMultiplicateur#id# + "px";
        $("#humidityunite#id#").css("fontSize", fontSize );
 		 // Sigle Température Text Position from Top
  		var position =  $("#humidityunite#id#").css("top");
  		position  = parseInt(position) * coeffMultiplicateur#id# + "px";
  		$('#humidityunite#id#').css('top',position);
  		// Sigle Température Text Position from Right
  		var position =  $("#humidityunite#id#").css("right");
  		position  = parseInt(position) * coeffMultiplicateur#id# + "px";
      	$('#humidityunite#id#').css('right',position);
      	
      	textResize#id# = false;
    } else {
    /*  console.log ("--------------------------------------");
      console.log ("-- BOUCLE ELSE - PAS DE TEXT RESIZE --");
      console.log ("--------------------------------------"); 
    */
    }

	$('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate);
        $('.cmd[data-cmd_id=#id#] .state').empty().append(_options.display_value);
console.log("fin fonction jeedom update");
  }
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#'});
         
</script>
</div>

[ajja17orange]

bonjour, déjà dans la premiére ligne je vois qu’il te manque plein de truc

data-cmd_uid="#uid#" 

il te faut partir d’un truc fonctionnel, le plus simple et (re)construire petit à petit, ça te permettra de comprendre mais déjà sans le uid c’est compliqué
exemple /

cmd.info.numeric.rain.html

jeedom/core/blob/V4-stable/core/template/dashboard/cmd.info.numeric.rain.html

sinon tu pars d’un html, css et script
et via l’api, « script » tu recherches les info « id » et les mets au bon endroit « ou calcul »

Logo - icone dans un tableau

pour moi resté le plus simple dans le dashboard si c’est des html dans le design je pense que la copie bdd est possible car pour moi que le code, et position voir si un logiciel le permet (auparavant ça existait pour petit site) un html complet du design (m’évitant le positionnement x,y) pour gardé l’actualisation du mode design (1) qui nous rend pas completement independant mais qui minimise si c’est des equipement, graph, … là ça se complique Id, integration de api js par des class/…