Outils pour utilisateurs

Outils du site


fr:developpers:documentation_aide_colorpicker

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

fr:developpers:documentation_aide_colorpicker [2021/02/09 14:34] – créée pitch314fr:developpers:documentation_aide_colorpicker [Unknown date] (Version actuelle) – supprimée - modification externe (Unknown date) 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="color_ally1" id="color_ally1" type="color" value="#FF00FF"> 
-</code> 
-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.** 
- 
-<note>Pour plus d'info : https://www.w3schools.com/colors/colors_picker.asp </note> 
- 
-==== 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'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 : 
-<code php> 
-/** @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'] . '" >' 
- 
-</code> 
- 
- 
- 
-===== 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. 
- *   
-  @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. 
-</code> 
- 
-===== Récapitulation des fonctions PHP et JS associé au couleur ===== 
-Si besoin, ci-dessous l'ensemble complet des fonctions liées aux couleurs : 
-<code php> 
-/** @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) 
- 
-</code> 
- 
-<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 '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); 
- 
-</code>