Widget Custom code

netnic0 · Décembre 23, 2021, 8:59

Bonjour,
J’avais un widget custom en code html que j’utilisais avec succès avant la 4.1.24 et la mise à jour vers buster.
Depuis ce widget n’affiche plus les virtuels comme je le souhaitais.
Dans mon widget je donne pas mal de paramètres pour afficher l’état (via une image on/off) et un banner sous forme de texte customisable, je peux donner aussi l’endroit et type pour l’image.
Donc depuis la mise à jour je n’ai plus d’affichage de l’image et quand j’inspecte je ne trouve pas les div/span qui pourraient accueillir celle-ci.
J’ai essayé pas mal de choses sans succès.
Je vous demanderais donc votre aide.
A noter que j’arrive à avoir un pseudo résultat en sortant le style et le script de la div principal.

Voici le code

<style>
		div.txtban#uid# {
			font-size:1.2em;
			font-weight:bold;
			position:absolute;
			vertical-align:middle;
			top:82%;
			left:0%;
			width:80px;
			z-index:4;
		}
		div.content-sm.actbin-widget {
			top:5px;
			margin-left:18%;
			max-height:50px;
			max-width:50px;
			position:absolute;
			line-height:50px;
			text-align:center;
			z-index:2;
		}
		.actbin-widget img.iconCmd {
			vertical-align:center;
		}
		img.banner#uid# {
			position:absolute;
			border-radius:0px 0px 6px 6px;
			bottom:0%;
			left:0%;
			width:80px;
			height:16px;
			z-index:2;
		}
		img.background#uid# {
			position:absolute;
			border-radius:0px 0px 6px 6px;
			top:0%;
			left:0%;
			width:80px;
			height:80px;
			z-index:1;
		}
		@keyframes blinking {
			20% {opacity:0;}
			100% {opacity:1;}
		}
		.blinking {animation:blinking infinite 1s;}
	</style>
<div style="padding:0px; margin:2px 2px; width:80px; height:80px;" class="cmd #history# container-fluid tooltips cmd-widget" data-type="info" data-subtype="numeric" data-version="#version#" data-eqLogic_id="#eqLogic_id#" data-cmd_id="#id#" data-cmd_uid="#uid#">
	<img class="background#uid#"/>
	<img class="banner#uid#"/>
	<div class="txtban#uid#"/>
	<!--<center>-->
		<div id="iconCmdAction" class="content-sm actbin-widget" style="max-width:50px;max-height:50px;">
			<!--<span id="iconCmd#uid#" class="icon#uid#" style="max-width:50px;max-height:50px;"></span>-->
		</div>
	<!--</center>-->



</div>

  	<script>
	  jeedom.cmd.update['#id#'] = function(_options) {

		
      // Récupération de srcState
	  var srcState = _options.display_value;	// Valeur de l'info binaire
	  // Récupération des valeurs des paramètres du widget
      var typeCmd = ('#typeCmd#'!='#'+'typeCmd#') ? '#typeCmd#' : "";
      // Type de commande à représenter (lampe, prise, store...)(optionnel) / obligatoire si folderIcon n'est pas renseigné
      var fldBkg = ('#folderBkg#'!='#'+'folderBkg#') ? '#folderBkg#' : 'data/customTemplates/dashboard/cmd.action.other.Multi-action-Defaut/fond/';
      // Dossier des images de fond
      var fldIcon = ('#folderIcon#'!='#'+'folderIcon#') ? '#folderIcon#' : 'data/customTemplates/dashboard/cmd.action.other.Multi-action-Defaut/'+typeCmd;
      // Dossier de l'image à superposer (obligatoire)
      var srcIcon = ('#icon#'!='#'+'icon#') ? '#icon#' : "";
      // Image à superposer (obligatoire)
      var isWithBkg = ('#isWithBkg#'!='#'+'isWithBkg#') ? '#isWithBkg#': "yes";
      // Affichage de background image? (optionnel)
      var isWithBan = ('#isWithBan#'!='#'+'isWithBan#') ? '#isWithBan#': "yes";
      // Affichage du bandeau? (optionnel)

      var srcTxtBanOn = ('#txtbanon#'!='#'+'txtbanon#') ? '#txtbanon#': "";
      // Texte du bandeau ON (optionnel)
      var srcTxtBanOff = ('#txtbanoff#'!='#'+'txtbanoff#') ? '#txtbanoff#': "";
      // Texte du bandeau OFF (optionnel)
      var srcColTxtBanOn = ('#coltxtbanon#'!='#'+'coltxtbanon#') ? '#coltxtbanon#': "";
      // Texte du bandeau ON (optionnel)
      var srcColTxtBanOff = ('#coltxtbanoff#'!='#'+'coltxtbanoff#') ? '#coltxtbanoff#': "";
      // Texte du bandeau OFF (optionnel)
      var srcColBanOn = ('#colbanon#'!='#'+'colbanon#') ? '#colbanon#': "";
      // Couleur du bandeau ON (optionnel)
      var srcColBanOff = ('#colbanoff#'!='#'+'colbanoff#') ? '#colbanoff#': "";
      // Couleur du bandeau OFF (obligatoire)
      var srcTheme = ('#theme#'!='#'+'theme#') ? '#theme#': "";
      // Thème du background (optionnel)
      var srcOnOff = ('#onoff#'!='#'+'onoff#') ? '#onoff#': "yes";
      // Affichage différenciée des images ON et OFF (optionnel)
      var srcBlinkOff = ('#blinkoff#'!='#'+'blinkoff#') ? '#blinkoff#': "";
      // Clignotement du bandeau si OFF (optionnel)
      var srcBlinkOn = ('#blinkon#'!='#'+'blinkon#') ? '#blinkon#': "";
      // Clignotement du bandeau si ON (optionnel)

      // Initialisation des variables
      var srcIconProp = 'margin=`\"auto\" text-align=\"center\" float=\"left\" line-height=\"50px\" height=\"50px\" width=\"50px\" vertical-align=\"middle\"';
      // Propriété d'affichage de l'icone
      var srcMode = "light";					// Mode du background (dark ou light)
      var srcColBanner = "";				// Couleur du bandeau
      var srcTxtBanner = "";				// Texte du bandeau
      var srcColTxtBanner = "";			// Couleur des caractères du bandeau
      var srcBlink = "";					// Booléen de clignotement
      var srcErrorCode = "";					// Nom du paramètre en erreur s'il y a lieu
      // Validation des paramètres
      if (fldIcon == null || fldIcon == "") {
        srcErrorCode = "folder";
      } else if (srcIcon == null || srcIcon == "") {
        srcErrorCode = "icon";
      }

      if (srcErrorCode != "") {
        // Changement de l'icone pour erreur
        srcIcon = "error";
        // Affichage des éléments d'erreur
        $('.background#uid#').empty().attr('src', fldBkg + 'fo_oups1.png');
        $('.banner#uid#').empty().attr('src', fldBkg + 'fo_banner_red.png');
        $('.cmd[data-cmd_id=#id#] #iconCmdAction').hide();
        $('.txtban#uid#').css('color','white');
        $('.txtban#uid#').empty().text(srcErrorCode);
      } else {
        // Sélection du mode clair ou sombre
        if ($('body')[0].hasAttribute('data-theme')) {
          if ($('body').attr('data-theme').endsWith('Light')) {
            srcMode = "light";
          } else {
            srcMode = "dark";
          }
        }

       if (srcOnOff != 'no' ) {
          srcIconOn = srcIcon + '_on.png';
          srcIconOff = srcIcon + '_off.png';
        } else {
          srcIconOn = srcIconOff = srcIcon + '.png';
        }
				
        // Initialisation de la couleur du bandeau et des caractères de la valeur
        if (srcState == 0) {
          srcTxtBanner = ((srcTxtBanOff != "") && (srcTxtBanOff != null)) ? srcTxtBanOff : "OFF";
          srcColBanner = ((srcColBanOff != "") && (srcColBanOff != null)) ? srcColBanOff : "red";
          srcColTxtBanner = ((srcColTxtBanOff != "") && (srcColTxtBanOff != null)) ? srcColTxtBanOff : "black";
          srcIcon = (srcOnOff != "no") ? srcIcon + '_off.png' : srcIcon + '.png';
          srcBlink = (srcBlinkOff == "yes") ? srcBlinkOff : "no";
          isWithBkg = (isWithBkg == "no") ? isWithBkg : "yes";
          isWithBan = (isWithBan == "no") ? isWithBan : "yes";
        } else {
          srcTxtBanner = ((srcTxtBanOn != "") && (srcTxtBanOn != null)) ? srcTxtBanOn : "ON";
          srcColBanner = ((srcColBanOn != "") && (srcColBanOn != null)) ? srcColBanOn : "lime";
          srcColTxtBanner = ((srcColTxtBanOn != "") && (srcColTxtBanOn != null)) ? srcColTxtBanOn : "black";
          srcIcon = (srcOnOff != "no") ? srcIcon + '_on.png' : srcIcon + '.png';
          srcBlink = (srcBlinkOn == "yes") ? srcBlinkOn : "no";
          isWithBkg = (isWithBkg == "no") ? isWithBkg : "yes";
          isWithBan = (isWithBan == "no") ? isWithBan : "yes";
        }
				
		// Affichage du background, du bandeau et du nom de la commande
		if (srcTheme != "") {
			srcTheme = srcTheme + '_';
		}

        if (isWithBkg != "no") {
          // Affichage du fond
          $('.background#uid#').empty().attr("src", fldBkg + 'fo_bkg_' + srcTheme + srcMode + '.png');
        }
        else {
          removeElementById("background#uid#");
        }

		// Affichage du bandeau et de ses options
		
		if (isWithBan != "no") {
          // Affichage du bandeau et de ses options
          $('.banner#uid#').css('background-color',srcColBanner);

          $('.banner#uid#').empty().attr("src", fldBkg + 'fo_banner.png');

          // Affichage du texte des bandeaux
          $('.txtban#uid#').css('color',srcColTxtBanner);
          $('.txtban#uid#').empty().text(srcTxtBanner);
        }
        else {
          removeElementById("banner#uid#");
        }
		
		if (srcBlink == 'yes') {
			// Clignotement
			$('.banner#uid#').addClass('blinking');
		}
		else {
			$('.banner#uid#').removeClass('blinking');
		}
		$('.banner#uid#').empty().attr("src", fldBkg + 'fo_banner.png');

		// Affichage du texte des bandeaux
		$('.txtban#uid#').css('color',srcColTxtBanner);
		$('.txtban#uid#').empty().text(srcTxtBanner);

        // Affichage de l'icône et de ses options
        var cmdWidget = $('.cmd[data-cmd_id=#id#]');
        if (srcState == '1' || srcState == 1 || srcState == '99' || srcState == 99 || srcState == 'on') {
          cmdWidget.attr('data-state','on')
          if (jeedom.cmd.normalizeName('#name#') == 'on') {
            cmdWidget.hide();
          } else {
            cmdWidget.show().find('#iconCmdAction').empty().append('<img src="'+ fldIcon + srcIcon + '" ' + srcIconProp + '>');
          }
        } else {
          cmdWidget.attr('data-state','off')
          if (jeedom.cmd.normalizeName('#name#') == 'off') {
            cmdWidget.hide();
          } else {
          cmdWidget.show().find('#iconCmdAction').empty().append('<img src="'+ fldIcon + srcIcon + '" ' + srcIconProp + '>');
          }
        }
	}
}

jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
 $('.cmd[data-cmd_uid=#uid#] #iconCmdAction').off().on('click', function () {
	jeedom.cmd.execute({id: '#id#'});
});
	</script>

La config de la commande virtuel (on ou off)

est le résultat actuel

Merci pour votre aide, je suis bloqué.
Dans le code inspecté depuis le browser je ne vois pas la div

<div id="iconCmdAction" class="content-sm actbin-widget" style="max-width:50px;max-height:50px;">
et je ne sais pas si cela peut venir de data-type=« info » data-subtype=« numeric » j’ai essayé action et other mais sans plus de succès

Phpvarious · Décembre 23, 2021, 10:59

Bonsoir,

la balise <div> n’est pas un élément « void », il faut donc une balise de fermeture :
<div class="txtban#uid#"></div>

du fait que tu utilise :

if (jeedom.cmd.normalizeName('#name#') == 'on') {
            cmdWidget.hide();
            ......

C’est a mon sens un widget pour une commande Action :
data-type="action" data-subtype="other"
et doit être appliqué sur les 2 commandes action (on/off).

netnic0 · Décembre 24, 2021, 10:31

Merci beaucoup. Je vais essayer de faire les modifications dans ce sens et vous tiens au courant

Phpvarious · Décembre 24, 2021, 11:11

Je te déconseille de sortir quoi que ce soit de la div principale, sous peine d’avoir des effets secondaire lors de l’affichage de la commande sur un design.

<div principale>
mon code
</ fin div principale>

a proscrire aussi les « resizes » de la div principale, car celle-ci sera remplacer lors de la’affichage en design, pour faire le même effet rajoute plutôt une nouvelle div dans le code :

 <div class="cmd #history# tooltips cmd-widget" data-type="action" data-subtype="other" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
    <div style="width:80px; height:80px;">
        <img class="background#uid#"/>
        <img class="banner#uid#"/>
        <div class="txtban#uid#"/>
        <div id="iconCmdAction" class="content-sm actbin-widget" style="max-width:50px;max-height:50px;"></div>
    </div>
    <!-- Code CSS -->
    <!-- Code JS -->
</div>

netnic0 · Décembre 24, 2021, 8:42

Oui merci, c’est ce que j’avais au départ, je vais revenir dessus. Merci pour votre temps. Bonne fête

netnic0 · Janvier 4, 2022, 8:25

Bonjour,
c’était bien le div mal fermé qui empêchait l’affichage, ce qui fonctionnait sur une version antérieure de Jeedom 4.
Un mauvais copié/collé de l’img en div.
Merci pour l’aide Phpvarious

system · Janvier 5, 2022, 8:26

Ce sujet a été automatiquement fermé après 24 heures suivant le dernier commentaire. Aucune réponse n’est permise dorénavant.