Comme annoncé, ce forum est passé en lecture seule au 1er janvier 2020. Désormais nous vous invitons à vous rendre sur notre nouvelle page communauté :
Image

A très bientôt !

Probleme codage widget

Réservé à l'utilisation et la création de widgets dans JEEDOM
Tom33700
Timide
Messages : 129
Inscription : 12 sept. 2015, 16:35

Probleme codage widget

Message par Tom33700 » 30 avr. 2019, 14:26

Bonjour à tous!

Loin d'être un pro du HTML, je bricole un peu mes widgets... comme je peux...

Voici un code qui fonctionne très bien. Le nom "zone A" apparait bien sur mon widget, mais au-dessus de mon icône... Or , je voudrais l'avoir sous mon icône.

J'ai essayer de remplacer le margin-top par margin-bottom... mauvaise pioche... :?

Pourriez-vous m'aider SVP?

Voici le code :

Code : Tout sélectionner

<div style="width:90px;min-height:80px;" class="cmd tooltips cmd-widget cursor" data-type="action" data-subtype="other" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
    <center>
        <div style="font-weight: bold;font-size : 12px;#hideCmdName#">Zone A</div>
        <span style="font-size: 3em;font-weight: bold;margin-top: 5px;" class="iconCmd"></span>
    </center>
    <script>
        jeedom.cmd.update['#id#'] = function(_options){
            if (_options.display_value == '1' || _options.display_value == 1 || _options.display_value == '99' || _options.display_value == 99 || _options.display_value == 'on') {
                if (jeedom.cmd.normalizeName('#name#') == 'on') {
                    $('.cmd[data-cmd_id=#id#]').hide();
                }else{
                    $('.cmd[data-cmd_id=#id#]').show();
                  	 $('.cmd[data-cmd_id=#id#] .iconCmd').empty().append("<img width='80' src='plugins/widget/core/template/dashboard/cmd.action.other.Arrosage A/Arrosage ON-100px.png'>");
                }
            } else {
                if (jeedom.cmd.normalizeName('#name#') == 'off') {
                    $('.cmd[data-cmd_id=#id#]').hide();
                }else{
                    $('.cmd[data-cmd_id=#id#]').show();
                   	$('.cmd[data-cmd_id=#id#] .iconCmd').empty().append("<img width='80' src='plugins/widget/core/template/dashboard/cmd.action.other.Arrosage A/Arrosage OFF-100px.png'>");
			
                }
            }
        }
        jeedom.cmd.update['#id#']({display_value:'#state#'});
        $('.cmd[data-cmd_uid=#uid#] .iconCmd').off().on('click', function () {
            jeedom.cmd.execute({id: '#id#'});
        });
    </script>
</div>
Un grand merci à tous!
Mille mercis à toute l'équipe pour le travail quotidien!
Et merci aussi à tous les acteurs, actifs ou timides, qui prennent de leur temps pour aider les novices comme moi!!!

Avatar de l’utilisateur
Salvialf
Helper
Messages : 1334
Inscription : 24 févr. 2018, 09:37
Contact :

Re: Probleme codage widget

Message par Salvialf » 02 mai 2019, 02:48

Salut,

inverses les 2 lignes dans la balise <center> au début: la ligne avec "zone A" en dessous de la ligne qui affiche l'icône "iconCmd".

A première vue il sera peut-être nécessaire de modifier tes "div" en "span" et inversement. En effet un span est une ligne donc approprié pour afficher du texte alors qu'une div est un bloc donc à priori plus utile pour afficher une icône.

Si besoin est je pourrais revoir le code pour toi n'hésites pas.
VM Jeedom 3.2.16 sous Proxmox 5.4 sur NUC5i5RYH (Debian 9.9)
Helper Officiel Jeedom
Widgets développés
Téléchargement d'icônes domotique (Topic Forum)

Tom33700
Timide
Messages : 129
Inscription : 12 sept. 2015, 16:35

Re: Probleme codage widget

Message par Tom33700 » 02 mai 2019, 10:20

Ah oui tout bête en fait!

Merci beaucoup!!!
Mille mercis à toute l'équipe pour le travail quotidien!
Et merci aussi à tous les acteurs, actifs ou timides, qui prennent de leur temps pour aider les novices comme moi!!!

Répondre

Revenir vers « [Plugin officiel] Widgets »

Qui est en ligne ?

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