Virtuel - backgroundcolor dynamique

[dsigmoun]

Bonjour à tous,

J’alimente ce virtuel de notes, dont la première colonne est un code couleur hexa. Ce code est différent en fonction de la matière.
J’aimerai que le fond de la cellule soit de la couleur de la valeur de la cellule. J’ai fait différents essaie dans la mise en forme du tableau, mais je n’ai pas réussi

Par exemple, sur le dernier essai, j’ai mis :

<span style="background-color: #value#;"></span>

Est-ce possible de faire ce que je cherche, et si oui, comment ?

Merci,
frédéric

[dsigmoun]

finalement, j’ai réussi en passant par un widget custom. et j’ai caché la l’affichage de la valeur par un font-size:0px;

<div class="cmd cmd-widget pronote_barre_couleur #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">
        <strong class="state" style="color: transparent;">#state#</strong>
    </div>

    <script>
        jeedom.cmd.update['#id#'] = function(_options) {
            var cmd = $('.cmd[data-cmd_id=#id#]');
            var hexColor = _options.display_value;
            var cell = cmd.closest('td'); // Ciblage direct de la cellule

            // 1. Application des styles à la cellule <td>
            cell.css({
                'background-color': hexColor,
                // --- Réglage de la largeur ---
                'width': '10px',        
                'min-width': '10px',
                'max-width': '10px',
                'padding': '0px',       // CRUCIAL: Supprime le padding interne
                'box-sizing': 'content-box',
                
                // --- Réglage de l'arrondi sur les QUATRE coins ---
                'border-radius': '8px',
                
                // --- Suppression des bordures du tableau pour que l'arrondi soit net ---
                'border': 'none', 
                
                // --- Assurer l'alignement ---
                'vertical-align': 'top'
            });

            // 2. Masquage du nom de la commande (si affiché)
            cmd.find('.cmdName').css('display', 'none');
            
            // 3. Mise à jour de la tooltip
            cmd.attr('title','{{Date de valeur}} : '+_options.valueDate+'<br/>{{Date de collecte}} : '+_options.collectDate);
        }
        
        // Exécution initiale
        jeedom.cmd.update['#id#']({
            display_value:'#state#',
            valueDate:'#valueDate#',
            collectDate:'#collectDate#'
        });
    </script>
</div>

[Aurelien]

Salut,

C’était pas plus simple de mettre le widget « color » sur cette commande ?

[dsigmoun]

Bonjour @Aurelien

Je n’ai effectivement jamais utilisé ce widget color…

Je viens de l’appliquer à ma commande couleur (info/string) dont la valeur est actuellement #FFE300. Il ne passe rien.

Il faut passer des paramètres ?