fr:developpers:documentation_aide_colorpicker
Différences
Ci-dessous, les différences entre deux révisions de la page.
fr:developpers:documentation_aide_colorpicker [2021/02/09 14:34] – créée pitch314 | fr:developpers:documentation_aide_colorpicker [Date inconnue] (Version actuelle) – supprimée - modification externe (Date inconnue) 127.0.0.1 | ||
---|---|---|---|
Ligne 1: | Ligne 1: | ||
- | ====== HTML color picker ====== | ||
- | Grâce à HTML5, le choix des couleurs pour un utilisateur c'est amélioré et surtout simplifié. | ||
- | Maintenant, une entrée spéciale HTML existe qui ressemble à un bouton et ouvre la palette de couleurs de l'OS : | ||
- | <code html> | ||
- | <input name=" | ||
- | </ | ||
- | Il n'y a plus à s’embêter avec les noms de couleurs ou à entrer des bonnes valeurs #xxyyzz pour l' | ||
- | Par contre, pour nous ce type " | ||
- | |||
- | **=> | ||
- | |||
- | < | ||
- | |||
- | ==== Besoin de rétrocompatibilité ou plus ==== | ||
- | Néanmoins, dans notre BDD, bien la valeur hexadécimale est possible, ce sont généralement le nom des couleurs qui étaient utilisés. | ||
- | |||
- | Donc, si l'ont veut soit : | ||
- | - transformer le choix de config où la couleur apparrait avec cette nouvelle input mais en utilisant les valeurs déjà existante ; | ||
- | - offrir l' | ||
- | |||
- | Il faut effectuer des manipulations afin de convertir un nom en #xxyyzz, les fonctions suivantes sont pour vous : | ||
- | |||
- | ===== Transformation vers HTML5 ===== | ||
- | Afin de migrer vers le choix des couleurs HTML5 mais en gardant une rétrocompatibilité avec la BDD, il faut utiliser la fonction suivante : | ||
- | <code php> | ||
- | /** @brief Return valid HTML value for an input color. | ||
- | | ||
- | | ||
- | | ||
- | | ||
- | */ | ||
- | function color_convert_to_html_input($color); | ||
- | // L' | ||
- | |||
- | //Exemples d' | ||
- | $color = color_convert_to_html_input($value); | ||
- | echo '< | ||
- | |||
- | </ | ||
- | |||
- | |||
- | |||
- | ===== Multiple choix de couleur ===== | ||
- | Si on voudrait à la fois un formulaire avec le nom et avec le choix HTML5 : | ||
- | <code php> | ||
- | /** @brief Construct HTML double input for color, one for text and one for HTML5 color picker and link these with the JS. | ||
- | | ||
- | | ||
- | | ||
- | | ||
- | | ||
- | | ||
- | */ | ||
- | function color_html_create_double_input($label, | ||
- | |||
- | //Exemples d' | ||
- | $color_input = color_html_create_double_input(' | ||
- | // ... | ||
- | echo $color_input; | ||
- | //Cela crée le code HTML suivant : | ||
- | <input name=" | ||
- | <input name=" | ||
- | |||
- | //Ensuite les 2 champs sont liés entre eux par le Javascript, en modifier 1 modifie l' | ||
- | //Lors de la récolte du formulaire, il faut utiliser le nom donner à la fonction (ici color_ally1) | ||
- | $Config_Model-> | ||
- | </ | ||
- | |||
- | ===== Récapitulation des fonctions PHP et JS associé au couleur ===== | ||
- | Si besoin, ci-dessous l' | ||
- | <code php> | ||
- | /** @brief Get the RGB color (red, green, blue) of the desired color. | ||
- | | ||
- | | ||
- | */ | ||
- | function color_getColor($Colorname = ' | ||
- | /** @brief Get color name or ' | ||
- | | ||
- | | ||
- | */ | ||
- | function color_getName($couleur_id); | ||
- | /** @brief Convert hexadecimal color to rgb color. | ||
- | | ||
- | | ||
- | */ | ||
- | function color_hex_to_rgb($couleur_id); | ||
- | /** @brief Convert rgb color to hexadecimal color. | ||
- | | ||
- | | ||
- | */ | ||
- | function color_rgb_to_hex($r, | ||
- | /** @brief Return valid HTML value for an input color. | ||
- | | ||
- | | ||
- | | ||
- | */ | ||
- | function color_convert_to_html_input($color); | ||
- | /** @brief Construct HTML double input for color, one for text and one for HTML5 color picker and link these with the JS. | ||
- | | ||
- | | ||
- | | ||
- | | ||
- | | ||
- | | ||
- | */ | ||
- | function color_html_create_double_input($label, | ||
- | |||
- | </ | ||
- | |||
- | <code javascript> | ||
- | // js/ogspy.js | ||
- | /* @see w3color.js ver.1.18 by w3schools.com */ | ||
- | /** @brief renvoie un tableau avec les noms ou son code hexadécimale. | ||
- | * @param[in] string x Soit ' | ||
- | * @return array liste des noms si ' | ||
- | */ | ||
- | function _getColorArr(x); | ||
- | /** @brief trouve si c'est une couleur ayant un nom. | ||
- | * @param[in] int|string x Color value (string ' | ||
- | * @return bool|array(' | ||
- | */ | ||
- | function ogspy_isColor(x); | ||
- | /** Fonction utilisée dans le cadre des doubles input (via la fonction PHP color_html_create_double_input()) | ||
- | */ | ||
- | function ogspy_colorDoubleChange(id); | ||
- | |||
- | </ |
fr/developpers/documentation_aide_colorpicker.1612877648.txt.gz · Dernière modification : 2021/03/12 14:09 (modification externe)