Donnez vie à vos documents numériques !
 

Changement de couleur dans champ

abracadabraPDF Forums PDF – Général Changement de couleur dans champ

  • Créateur
    Sujet
  • #46615
    Alain
    Membre

    Bonjour
    Je suis débutant, et je bute sur un codage, je m’explique : dans un formulaire je souhaiterais un changement de couleur suivant un texte.
    Dans mon champ texte “A” sur lequel je peux saisir des valeurs, je saisie une valeur entre 0 et 4.4 la valeur se traduit “Normal” dans le champ “B” ou entre 4.5 et 7 la valeur se traduit “Alerte” dans le champ “B” ou entre 7 et 50 la valeur se traduit “Danger” dans le champ “B” => jusque là ça marche….
    Je souhaite que la couleur du champ B change on fonction des critères « Normal » ou « Alerte » ou « Danger »
    « Normal » couleur verte
    « Alerte » couleur orange
    « Danger » couleur rouge
    Code du champ “A”

    var champA = event.value;
    if (champA >= 0 && champA <= 4.4) {this.getField("B").value = "Normal";}
    else if(champA >= 4.5 && champA <= 7) {this.getField("B").value = "Alerte";}
    else if(champA >= 7.1 && champA <= 50) {this.getField("B").value = "Danger";}
    Merci

Affichage de 24 réponses de 1 à 24 (sur un total de 24)
  • Auteur
    Réponses
  • #69319
    Merlin
    Maître des clés

    Bonjour et bienvenue

    Voilà presque le même script, le orange n’existe pas en “couleur nommée” c’est pourquoi il faut le déclarer en utilisant des valeurs RVB :

    Code:
    var cSaisie = event.value;
    var oChampB = this.getField("B");

    if (cSaisie >= 0 && cSaisie <= 4.4) {
    oChampB.value = "Normal";
    oChampB.fillColor = color.green;
    }
    else if(cSaisie >= 4.5 && cSaisie <= 7) {
    oChampB.value = "Alerte";
    oChampB.fillColor = ["RGB", 255/255, 128/255, 0/255]; // orange
    }
    else if(cSaisie >= 7.1 && cSaisie <= 50) {
    oChampB.value = "Danger";
    oChampB.fillColor = color.red;
    }

    #69320
    Alain
    Membre

    Bonjour Merlin et MERCI pour votre réponse, cela m’a bien aidée et permis d’accroitre mes connaissances sur java script  :bravo: :bravo: :bravo: Toutefois un petit soucis, le codage fonctionne très bien sur mon PC Windows, mais quand je transfère le formulaire sur une tablette Android le changement de couleur ne fonctionne plus, c’est le plus grand intérêt du formulaire.
    Une solution?
    Encore Merci  :Smiley01:

    #69321
    Merlin
    Maître des clés

    Quelle app utilises tu sur Android ?
    Acrobat Mobile ou autre ?

    #69322
    Alain
    Membre

    J’utilise Xodo

    #69323
    Merlin
    Maître des clés

    Sur Android les meilleures apps pour exploiter des formulaires PDF sont Acrobat Mobile, qPDF Reader et ezPDF Reader.

    #69324
    jctremblay
    Participant

    Merlin, si je veux utiliser ce script mais dans un script de document pour pouvoir appeler la fonction et le nom du champs avec un “Mouse Up”, que dois-je faire.
    J’ai essayer de mettre le code comme ceci au début:

    Code:
    function color(champ)
    {
    var cSaisie = event.value;
    var oChampB = this.getField(champ);

    Et ceci dans le champ:

    Code:
    color(“nom du champ”);

    La console me donne toujours ceci quand je modifie le contenu du champ texte.

    Code:
    InvalidSetError: Propriété Set impossible, incorrecte ou inconnue.
    Field.fillColor:9:AcroForm:champ_text:Annot1:MouseExit:Action1

    Que faire pour inclure comme variable dans la fonction un champ de texte modifiable facilement selon les besoins dans les champs?

    #69325
    bebarth
    Maître des clés

    bonjour,
    Tu ne peux pas utiliser event.value en script de document. event.value ne s’applique qu’a un champ bien défini.
    Pour ton exemple, j’utiliserais plutôt en script de document :

    Code:
    function color(cSaisie,oChampB) {

    // Tu utilises cSaisie et oChampB comme variables dans ton script

    }

    …et pour appeler la fonction :

    Code:
    color(event.value,this.getField(champ));

    A part cela, je ne suis pas certain que tu puisses utiliser color comme nom de fonction (à vérifier). color est le nom d’un objet comme je te l’ai expliqué dans un autre post.
    Je me souviens d’un post ou j’avais “découvert” qu’on ne peut pas utiliser “position” comme nom de variable. Il y a des mots réservés au javaScript et pourtant “position” n’en fait pas partie :
    https://www.w3schools.com/js/js_reserved.asp
    @+
    :bonjour:

    #69326
    jctremblay
    Participant

    Merci Bebarth!
    J’ai du changer le nom de la fonction et aussi mettre le nom du champ avec des ” “.

    Code:
    warning_states(event.value,this.getField(“box_a”));

    J’ai fait des test avec mon code en:
    a) action avec le champ désactivé;
    b) validation script;
    c) executé avec un bouton.

    Je joint mon document test pour les curieux.
    PS: Pour ce genre d’appel de function, quel est la meilleur endroit ou mettre le code? Validate, Calcule, Action? J’ai vu que le code ne s’exécute pas toujours correctement en action sur les champs (souris relâcher entre autre).

    #69327
    bebarth
    Maître des clés

    J’ai du changer le nom de la fonction et aussi mettre le nom du champ avec des ” “.

    Si tu indiques le nom du champ c’est normal vu que c’est une chaine de caractères. Dans le script que je t’ai donné, je pensais que “champ” était une variable !

    PS: Pour ce genre d’appel de function, quel est la meilleur endroit ou mettre le code? Validate, Calcule, Action? J’ai vu que le code ne s’exécute pas toujours correctement en action sur les champs (souris relâcher entre autre).

    En fait, ça dépend de comment est récupérée la valeur.
    Si c’est un calcul qui dépend de un ou plusieurs autres champs, il vaut mieux écrire un script de calcul.
    Si c’est une valeur entrée manuellement tu écris un script de validation (ou script champ désactivé certaines fois).
    Si tu préfères que le script soit exécuté à un instant bien précis, tu utilises le bouton…

    @+
    :bonjour:

    #69328
    jctremblay
    Participant

    Merci!

    «Je vais me coucher moins niaiseux !» Espression très québécoise.  :geek:

    #69329
    bebarth
    Maître des clés
    #69330
    Merlin
    Maître des clés

    «Je vais me coucher moins niaiseux !» Espression très québécoise.

    C’est toujours plus fleuri que l’expression française : “Je me coucherai moins con ce soir”
    :Smiley03:

    #75534
    cmck86
    Participant

    bonjour, je suis debutant et je viens  de parcourir ce sujet. j’y connais pas grand chose dans javascript (pour ne pas dire rien 😉 )! même si je me rend compte des possibilité qu’il offre. J’ai un champ de texte “scoreDNA” qui m’affiche un score sur 10 en fonction des boutons radios cochés (MERCI merlin !). est il possible que : si ce score sur 10 soit > ou = à 4, la couleur de police deviennet rouge !

     

     

    Attachments:
    You must be logged in to view attached files.
    #75538
    bebarth
    Maître des clés

    bonjour,
    Il faut écrire :
    if (event.value>10) event.target.textColor=color.red;
    else event.target.textColor=color.black;

    @+
    😎

    Attachments:
    You must be logged in to view attached files.
    #75541
    Merlin
    Maître des clés

    Exemple ci-joint, le script est dans l’onglet Calcul, mais on peut aussi le mettre en Validation.

    (C’est l’un ou l’autre, pas dans les deux)

    if (event.value >= 4) {event.target.textColor = color.red;}
    else {event.target.textColor = color.black;}

    Attachments:
    You must be logged in to view attached files.
    #75546
    cmck86
    Participant

    ca fonctionne super 😉 Faut juste que j’enlève les { } et ca le fait !

    #75548
    Merlin
    Maître des clés

    Pourquoi ?

    #75549
    cmck86
    Participant

    re coucou… J’en suis a calculer un score IMC (indice de masse corporelle) et je souhaiterais que la couleur soit différente suivant la fourchette de résultat. En fouillant les messages du dessus et en bricolant un peu j’en suis arrivé à un truc qui fonctionne avec ce qui suit :

    var champimc = event.value;
    if (champimc >= 18.5 && champimc < 25)
    event.target.textColor = color.green;
    else if(champimc >= 25 && champimc < 30)
    event.target.textColor = color.yellow;
    else if(champimc >= 30)
    event.target.textColor = color.red;
    else if(champimc >= 16.5 && champimc < 25)
    event.target.textColor = color.yellow;
    else if(champimc < 16.5)
    event.target.textColor = color.red;
    else event.target.textColor = color.black;

    Mais ! le rendu des couleurs greeen et yellow est vraiment trop “flachant”. Je n’arrive pas à changer la couleur en “vert foncé” et “orange” bien que je me sois insipiré du message plus haut pour le code RGB de la couleur orange…  => encore un p’tit coup de main svp?

     

    #75552
    Merlin
    Maître des clés

    Tu devrais mettre les accolades, on est d’accord que quand il n’y a qu’une seule ligne d’instruction elles ne servent à rien mais c’est une bonne pratique et une habitude à prendre.

     

    Pour la couleur c’est simple, il faut choisir une couleur dans un logiciel quelconque et aller dans l’éditeur de couleur/couleur personnalisée pour noter ses trois valeurs RGB (red, green, blue = rouge, vert, bleu).

    Ensuite il faut remplacer les trois nombres dans cette partie du script , exemple pour le rouge abracadabraPDF :

    = [“RGB”, 163/255, 0/255, 0/255];

     

    Si cette couleur est utilisée plusieurs fois on a tout intérêt à la mettre en variable :

    var coulPerso = [“RGB”, 163/255, 0/255, 0/255];

     

    else if(champimc >= 30) {event.target.textColor = coulPerso;}

    Attachments:
    You must be logged in to view attached files.
    #75559
    michel c.
    Participant

    Bonjour, ça me fait penser à un truc, il serait possible d’avoir un script type feuille de style dans lequel on pourrait définir les couleurs, taille de police, type de police … en fonction du nom d’un champ…

    ça me faciliterai la tâche pour mes cours…

    #75560
    Merlin
    Maître des clés

    Oui, en utilisant une fonction.

    Par exemple :

    function styl1(A) {
    A.strokeColor = color.red;
    A.textColor = color.red;
    A.textSize = 12;
    }

    styl1(this.getField("Text1"));

     

    On peut bien entendu aussi mettre le nom du champ en variable.

    #75562
    cmck86
    Participant

    merci pour tes retours, car j’ai zappé celui d’hier 22h30…

    je ne sais pas comment gérer les accolades {} ! je remarque juste que quand j’essaie d’en mettre comme dans les exemples cités dans les différents post, j’ai un message d’erreur en bas de la fenetre javascripto de adobe pro avec “illegal character…” avec le petit d’erreur qui va bien

    Comme dans mon message precedent cela fonctionné, j’ai pas touché.

    Aussi, je renseigne les lignes de codes comme indiqués mais je retrouve aussi un message d’erreur “illegal character…” si je supprime la ligne avec

    = [“RGB”, 163/255, 0/255, 0/255];  cela fonctionne et enleve le son d’erreur mais sans la couleur correspondante evidement…

     

    Attachments:
    You must be logged in to view attached files.
    #75564
    Merlin
    Maître des clés

    Apparement ton problème vient des guillemets, JavaScript ne supporte que les guillemets droits, tous les autres sont à bannir.

    "blablabla"

    #75565
    cmck86
    Participant

    Ça marche du tonnerre ! Et j’ai compris le principe  !

    Voici mon JavaScript pour le code couleur du calcul de l’IMC.

    var coulorange = ["RGB", 255/255, 127/255, 0/255];
    var coulgreenforest = ["RGB", 56/255, 161/255, 56/255];
    var champimc = event.value;if(champimc < 16.5) event.target.textColor = color.red;
    else if(champimc >= 16.5 && champimc < 18.5)event.target.textColor = coulorange;
    else if(champimc >= 18.5 && champimc < 25)event.target.textColor = coulgreenforest;
    else if(champimc >= 25 && champimc < 30)event.target.textColor = coulorange;
    else if(champimc >= 30)event.target.textColor = color.red;
    else event.target.textColor = color.black;

    Je n’ai toujours pas les accolades et les guillements droits sont de rigueur mais c’est top !

    Je vais pouvoir l’appliquer sur mes autres items, merci ++

     

Affichage de 24 réponses de 1 à 24 (sur un total de 24)
  • Vous devez être connecté pour répondre à ce sujet.