Cosmétique Bouton

[rjcb]

Bonjour,

Je cherche à embellir le design et changer la couleur de certain bouton mais voila je bloque:

2019-01-24_16h15_57.png (131.75 Kio) Consulté 537 fois

Je ne vois pas ou changer la couleur dans le code. Merci à vous

[alexpumasage]

Bonjour,

vous pouvez modifier le style du bouton en modifiant "background-color:#cmdColor#" par "background-color:red;" par exemple. Ou mettre une couleur rgb : rgb(X,X,X)

[rjcb]

Merci Alexpumasage, cela fonctionne.
Du coup je m'atèle à faire plus de customisation mais je rencontre encore des difficultés.

Ex: Je tente de retirer l'icone jauge que je n'aime pas trop et changer la police de la valeur mais je n'arrive qu'a faire le nom de la valeur

pb1.png (137.58 Kio) Consulté 493 fois

Code : Tout sélectionner

<div style="min-width:115px;min-height:100px;position: relative; top : -7px;padding:0px !important;" class="container-fluid tooltips cmd cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" title="Valeur du #valueDate#, collectée le #collectDate#" >
    <div style="width:95px;height : 95px;" class="gauge cursor" ></div>

    <div style="#displayHistory# font-size: 1em;" class="col-xs-12 center-block" class="cmdStats">
        <span title='Min' class='tooltips'>#minHistoryValue#</span>|<span title='Moyenne' class='tooltips'>#averageHistoryValue#</span>|<span title='Max' class='tooltips'>#maxHistoryValue#</span> <i class="#tendance#"></i>
    </div>
    <script>
       jeedom.cmd.update['#id#'] = function(_options){
           $('.cmd[data-cmd_uid=#uid#] .gauge').highcharts().series[0].points[0].update(_options.display_value);
       }
       
       if (is_numeric('#state#')) {
        // The speed gauge
        $('.cmd[data-cmd_uid=#uid#] .gauge').empty().highcharts({
            chart: {
                events: {
                    click: function (event) {
                        if (!$.mobile && '#history#' == 'history cursor') {
                            $('#md_modal2').dialog({title: "Historique"});
                            $("#md_modal2").load('index.php?v=d&modal=cmd.history&id=#id#').dialog('open');
                        }
                    }
                },
                type: 'solidgauge',
                height : 95,
                plotBackgroundColor: null,
                plotBackgroundImage: null,
                backgroundColor: null,
                plotBorderWidth: 0,
                plotShadow: false,
                spacingTop: 0,
                spacingLeft: 0,
                spacingRight: 0,
                spacingBottom: 0,
                borderWidth : 0
            },
            title: null,
            pane: {
                center: ['50%', '85%'],
                size: '100%',
                startAngle: - 90,
                endAngle: 90,
                background: {
                    backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#AAE',
                    innerRadius: '60%',
                    outerRadius: '100%',
                    shape: 'arc'
                }
            },
            tooltip: {
                enabled: false
            },
                // the value axis
                yAxis: {
                    stops: [
                    [0, '#cmdColor#']
                    ],
                    lineWidth: 0,
                    minorTickInterval: null,
                    tickPixelInterval: 400,
                    labels : {enabled: false},
                    tickWidth: 0,
                    title: {
                        y: - 70
                    },
                    min: #minValue#,
                    max: #maxValue#,
                    title: {
                        text: '<span style="color: orange;font-size:30px;font-family : Helvetica Neue,Arial,sans-serif;#hideCmdName#">#name_display#</span>',
                        y: - 35
                    }
                },
                labels : {enabled: false},
                plotOptions: {
                    solidgauge: {
                        dataLabels: {
                            y: 5,
                            borderWidth: 0,
                            useHTML: true
                        }
                    }
                },
                credits: {
                    enabled: false
                },
                exporting : {
                    enabled: false
                },
                series: [{
                    name: '',
                    data: [Math.round(parseFloat('#state#') * 10) / 10],
                    dataLabels: {
                        format: '<span style="color : orange;">{y}</span> <span style="font-size:30px;color:white">#unite#</span>'
                    },
                }]
            });
    } else {
        $('.cmd[data-cmd_uid=#uid#] .gauge').append('<center><span class="label label-danger" style="margin-top : 15px;">#state#</span></center>');
    }
</script>

</div>

Autre méconnaissance: J'aime bien le widget PIXEL Detection mais il ne doit pas etre 100% comaptible.
Du coup il ne s'affiche pas et c'est bien normal car pas ce fichier dans:

Code : Tout sélectionner

img src="plugins/widget/core/images/BVDBMovementYes.png

pb2.png (242.13 Kio) Consulté 493 fois

:

Comment faire pour récupérer les 2 images ? Merci

[alexpumasage]

Bonjour rjcb,

pour répondre à votre question du widget Pixel, j'ai installé le widget pour essayé, et effectivement les images n'existes simplement pas.
Vous pouvez les ajouter vous-même en utilisant le plugin "Outil de développement". Il suffit d'ajouter des images portant les noms "BVDBMovementYes.png" et "BVDBMovementNo.png" dans le dossier "plugins/widget/core/images".
Par contre à vous de trouver des images qui vous conviennent.

Concernant la jauge, je ne comprends pas bien la question. Si vous souhaitez ne pas afficher le demi-cercle, il suffit de modifier de type d'affichage en 'tile" par exemple (voir photo).

Est-ce que cela répond à vos questions ?

Alex

[rjcb]

Merci Alexpumasage

Il suffit d'ajouter des images portant les noms "BVDBMovementYes.png" et "BVDBMovementNo.png" dans le dossier "plugins/widget/core/images".

C'est ce que j'ai pensé faire mais le pb c'est qu'il n'y a rien dans ce rep; Pouvez vous les ajouter a cette conversation ?

Pour la jauge, je vais tester de mettre en mode 'tile"
Merci

[rjcb]

Bonjour,

Alors impeccable pour les jauges. Du coup je suis parti sur un tableau et je débute avec le CSS:

pb1.jpg (90.26 Kio) Consulté 425 fois

Par contre j'ai mis alignement coté droite pour les valeurs mais cela ne semble pas être pris en compte

pb2.png (34.13 Kio) Consulté 425 fois