Outils pour utilisateurs

Outils du site


fr:developpers:documentation_aide_colorpicker

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 :

<input name="color_ally1" id="color_ally1" type="color" value="#FF00FF">

Il n'y a plus à s’embêter avec les noms de couleurs ou à entrer des bonnes valeurs #xxyyzz pour l'utilisateur. Par contre, pour nous ce type “color” n'accepte que le format #xxyyzz.

⇒C'est donc cette méthode qu'il faut utiliser et remplacer avec l'ancienne manuelle.

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 :

  1. transformer le choix de config où la couleur apparrait avec cette nouvelle input mais en utilisant les valeurs déjà existante ;
  2. offrir l'ancienne choix (en écrivant le nom) et la nouvelle.

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 :

/** @brief Return valid HTML value for an input color.
 *  
 *  @param[in] string|int $color    The color (name 'red' or '#ffddee' or value 'ffddee' or 0xffddee)
 *  @return array('name','value') value=HTML valid color input value ('#xxx'), 0 as default (black)
 *                                name=code name if exist else hexadécimale string value ('ffddee')
 */
function color_convert_to_html_input($color);
// L'avantage de cette fonction est quelle prend la couleur sous n'importe quelle forme (nom, code HTML(#xxyyzz), string hexadécimale, ou valeur hexadécimale).
 
//Exemples d'utilisations :
$color = color_convert_to_html_input($value);
echo '<input name="test" id="test" type="color" value="' . $color['value'] . '" >'

Multiple choix de couleur

Si on voudrait à la fois un formulaire avec le nom et avec le choix HTML5 :

/** @brief Construct HTML double input for color, one for text and one for HTML5 color picker and link these with the JS.
 *  
 *  @param[in] string     $label        HTML id of the input 
 *  @param[in] string|int $value        Color value (string 'red'/'#ff0000', int 0xffddee)
 *  @param[in] array      $html_arg1     HTML attributes for text box (default = array('size'=>15, 'maxlength'=>20))
 *  @param[in] array      $html_arg2     HTML attributes for color box (default = $html_arg1)
 *  @return string HTML content with 2 inputs linked for color text+HTML5 color
 */
function color_html_create_double_input($label, $value, $html_arg1=array('size'=>15, 'maxlength'=>20), $html_arg2=null);
 
//Exemples d'utilisations :
$color_input = color_html_create_double_input('color_ally1', $color_ally_e[$i - 1], array('size'=>15, 'maxlength'=>20));
// ...
echo $color_input;
//Cela crée le code HTML suivant :
<input name="colorname_color_ally1" id="colorname_color_ally1" type="text" size="15" maxlength="20" value="Magenta" onchange="ogspy_colorDoubleChange('colorname_color_ally1');">
<input name="color_ally1" id="color_ally1" type="color" size="150" value="#FF00FF" onchange="ogspy_colorDoubleChange('color_ally1');">
 
//Ensuite les 2 champs sont liés entre eux par le Javascript, en modifier 1 modifie l'autre.
//Lors de la récolte du formulaire, il faut utiliser le nom donner à la fonction (ici color_ally1)
$Config_Model->update_one($pub_allied, "allied");   //Traitement fait pour la couleur des allaiances dans l'onglet administration du serveur.

Récapitulation des fonctions PHP et JS associé au couleur

Si besoin, ci-dessous l'ensemble complet des fonctions liées aux couleurs :

/** @brief Get the RGB color (red, green, blue) of the desired color.
 *  @param[in] $Colorname The wanted color ('all' to retrieve all RGB HTML color code name)
 *  @return array('red,'green','blue') 0 as default ('black'), all=array of name with RGB
 */
function color_getColor($Colorname = 'all');
/** @brief Get color name or 'hex'.
 *  @param[in] string|int $couleur_id An hexa value (0xffddee) or a string with the exa value ('ffddee')
 *  @return string code name if exist else #hex ('ffddee')
 */
function color_getName($couleur_id);
/** @brief Convert hexadecimal color to rgb color.
 *  @param[in] string|int $couleur_id An hexa value (0xffddee) or a string with the exa value ('ffddee')
 *  @return array('red,'green','blue')
 */
function color_hex_to_rgb($couleur_id);
/** @brief Convert rgb color to hexadecimal color.
 *  @param[in] int $r,$g, $b The RGB value
 *  @return string hexadecimal color value in string
 */
function color_rgb_to_hex($r, $g, $b);
/** @brief Return valid HTML value for an input color.
 *  
 *  @param[in] string|int $color    The color (name 'red' or '#ffddee' or value 'ffddee' or 0xffddee)
 *  @return array('name','value') value=HTML valid color input value ('#xxx'), 0 as default (black)
 */
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.
 *  
 *  @param[in] string     $label        HTML id of the input 
 *  @param[in] string|int $value        Color value (string 'red'/'#ff0000', int 0xffddee)
 *  @param[in] array      $html_arg1     HTML attributes for text box (default = array('size'=>15, 'maxlength'=>20))
 *  @param[in] array      $html_arg2     HTML attributes for color box (default = $html_arg1)
 *  @return string HTML content with 2 inputs linked for color text+HTML5 color
 */
function color_html_create_double_input($label, $value, $html_arg1=array('size'=>15, 'maxlength'=>20), $html_arg2=null)
// 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 'names' pour obtenir les noms, soit 'hexs' pour les codes, sinon renvoie array('names', 'hexs')
 * @return array liste des noms si 'names', listes des codes hexa si 'hexs' sinon array('names', 'hexs')
 */
function _getColorArr(x);
/** @brief trouve si c'est une couleur ayant un nom.
 * @param[in] int|string x   Color value (string 'red'/'#ff0000'/'ff0000', int 0xffddee)
 * @return bool|array('name','hex)  retourne faux si la couleur n'a pas de nom sinon renvoie un tableau contenant son nom et son code hexa.
 */
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.txt · Dernière modification: 2021/03/12 14:09 (modification externe)