Avant toute chose merci de (re)prendre connaissance de la charte et de la respecter.
Pour résumer :
- Avant de poser une question, je cherche si la réponse existe
- Je suis poli, courtois et je respecte tout un chacun sur le forum
- Si un post m'agace : je m'en éloigne plutôt que de répondre d'une façon qui pourrait être mal interprétée


Il n'est jamais du luxe que de rappeler des choses simples :
Courtoisie, amabilité, politesse et bonne humeur sont les maîtres mots pour un forum sympathique, bienveillant et accueillant :)

Toute la communauté vous remercie

[RESOLU] couleur d'une commande dans un design

Cette partie est réservée à l'utilisation de l'interface web de configuration de JEEDOM
sebforum29
Timide
Messages : 99
Inscription : 04 janv. 2018, 20:17

[RESOLU] couleur d'une commande dans un design

Message par sebforum29 » 07 févr. 2018, 14:38

bonjour à tous,

dans un design, j'ai ajouté une commande (état d'un volet roulant)

Image

comment puis je changer la couleur de la commande (actuellement en gris et blanc) couleurs souhaitées jaune et orange
je ne vois pas quelque-chose qui laisse comprendre gris ou blanc

ci-dessous code de la commande

merci

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: 0.8em;" 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) || '#EEE',
                    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: white;font-weight: bold;font-family : Helvetica Neue,Helvetica,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 : white;">{y}</span> <span style="font-size:10px;color:white">#unite#</span>'
                    },
                }]
            });
    } else {
        $('.cmd[data-cmd_uid=#uid#] .gauge').append('<center><span class="label label-danger" style="margin-top : 5px;">#state#</span></center>');
    }
</script>

</div>
Dernière édition par sebforum29 le 03 mars 2018, 08:26, édité 1 fois.

sebforum29
Timide
Messages : 99
Inscription : 04 janv. 2018, 20:17

Re: couleur d'une commande dans un design

Message par sebforum29 » 02 mars 2018, 18:38

bonjour,

je relance le post car je n'ai pas encore trouvé

merci

winhex
Actif
Messages : 2487
Inscription : 23 janv. 2015, 01:41

Re: couleur d'une commande dans un design

Message par winhex » 02 mars 2018, 19:07

dans ton code tu as
'#cmdColor#'

c'est la couleur que tu définis avec la catégorie (couleur définis dans configuration)
ou configuration équipement
viewtopic.php?f=29&t=34579&start=20#p592424
ou
modification widget
recherche (ctrl-f) #cmdColor# que tu changes en yellow
et recherche white par se que tu veux

sebforum29
Timide
Messages : 99
Inscription : 04 janv. 2018, 20:17

Re: couleur d'une commande dans un design

Message par sebforum29 » 02 mars 2018, 20:59

merci winhex !!! merci de répondre à ma question.

j'ai changé #cmdColor# par yellow, en effet, ça change la couleur de la partie du demi cercle qui représente la valeur
j'ai changé les white par black, ça change la couleur des textes
cependant, dans le demi cercle, la zone qui est non remplie reste blanche !

tu peux m'aiguiller ?!

winhex
Actif
Messages : 2487
Inscription : 23 janv. 2015, 01:41

Re: couleur d'une commande dans un design

Message par winhex » 02 mars 2018, 22:10

dans pane
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',

Code : Tout sélectionner

            pane: {
                center: ['50%', '85%'],
                size: '100%',
                startAngle: - 90,
                endAngle: 90,
                background: {
                    backgroundColor:'orange', 
                    innerRadius: '60%',
                    outerRadius: '100%',
                    shape: 'arc'
                }
            },

sebforum29
Timide
Messages : 99
Inscription : 04 janv. 2018, 20:17

Re: couleur d'une commande dans un design

Message par sebforum29 » 03 mars 2018, 08:26

merci beaucoup winhex,
c'est nickel
j'avais également oublié de cocher "activer la personnalisation du widget" !!
d'ailleurs, si je puis me permettre, il y a une faute d'orthographe (cela prend 2 n)

Image

Avatar de l’utilisateur
Bosquetia
Actif
Messages : 5738
Inscription : 10 mai 2016, 07:54

Re: [RESOLU] couleur d'une commande dans un design

Message par Bosquetia » 03 mars 2018, 14:10

Cette faute est corrigée en 3.2

Répondre

Revenir vers « Portail web classique (Desktop) »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 1 invité