{"id":3725,"date":"2012-03-13T00:00:06","date_gmt":"2012-03-12T23:00:06","guid":{"rendered":"http:\/\/blogs.wittwer.fr\/whiler\/?p=3725"},"modified":"2012-03-13T00:03:55","modified_gmt":"2012-03-12T23:03:55","slug":"wcolor","status":"publish","type":"post","link":"https:\/\/blogs.wittwer.fr\/whiler\/2012\/03\/13\/wcolor\/","title":{"rendered":"wColor"},"content":{"rendered":"<p>En \u00e9crivant <a href=\"\/whiler\/2012\/03\/10\/wmjpgviewer\/#comment-942\" title=\"Commentaire sur la version 1.1.0.2 de wMJPG Viewer\">un commentaire<\/a> concernant une mise \u00e0 jour de l&rsquo;application <a href=\"\/whiler\/2012\/03\/10\/wmjpgviewer\/\" title=\"Article sur wMJPG Viewer\">wMJPG Viewer<\/a>, j&rsquo;ai sommairement expliqu\u00e9 comment calculer la valeur en base d\u00e9cimale attendue par Delphi&nbsp;:<\/p>\n<div style=\"overflow:auto;white-space:nowrap;width:480px;\" class=\"codecolorer-container delphi dawn\">\n<div class=\"delphi codecolorer\" style=\"text-align: center;><span class=\"br0\">(<\/span>Transparence &times; <span class=\"nu0\">2<sup>24<\/sup><\/span><span class=\"br0\">)<\/span><span class=\"sy3\"> + <\/span><span class=\"br0\">(<\/span>Rouge &times; <span class=\"nu0\">2<sup>16<\/sup><\/span><span class=\"br0\">)<\/span><span class=\"sy3\"> + <\/span><span class=\"br0\">(<\/span>Vert &times; <span class=\"nu0\">2<sup>8<\/sup><\/span><span class=\"br0\">)<\/span><span class=\"sy3\"> + <\/span>Bleu<\/div>\n<\/div>\n<p>Chaque valeur est comprise entre 0 et 255 inclus. Les plus aguerris auront reconnu la taille d&rsquo;un <a href=\"http:\/\/fr.wikipedia.org\/wiki\/octet\" rel=\"glossary\" target=\"_blank\" title=\"Wikipedia, D&eacute;finition de&nbsp;: octet\" style=\"\" >octet<\/a><sup style=\"font-family: Georgia, Times New Roman, Serif; font-weight: bold; color: #AAAAAA\" ><em>W<\/em><\/sup>, ou des valeurs hexad\u00e9cimales allant de 0 \u00e0 FF <img src=\"https:\/\/blogs.wittwer.fr\/whiler\/wp-includes\/images\/smilies\/skype\/\/wink.gif\" alt=\";)\" class=\"wp-smiley\" style=\"height: 1em; max-height: 1em;\" \/> ,et l&rsquo;utilisation de 4 octets dans la formule ci-dessus.<\/p>\n<p>Historiquement, avec la <a href=\"http:\/\/fr.wikipedia.org\/wiki\/Visual_Component_Library\" rel=\"glossary\" target=\"_blank\" title=\"Wikipedia, D&eacute;finition de&nbsp;: VCL\" style=\"\" >VCL<\/a><sup style=\"font-family: Georgia, Times New Roman, Serif; font-weight: bold; color: #AAAAAA\" ><em>W<\/em><\/sup>, biblioth\u00e8que con\u00e7ue pour d\u00e9velopper plus rapidement des applications pour Windows, le codage des couleurs en Delphi est bas\u00e9 sur <a href=\"http:\/\/fr.wikipedia.org\/wiki\/RVB\" rel=\"glossary\" target=\"_blank\" title=\"Wikipedia, D&eacute;finition de&nbsp;: RVB\" style=\"\" >RVB<\/a><sup style=\"font-family: Georgia, Times New Roman, Serif; font-weight: bold; color: #AAAAAA\" ><em>W<\/em><\/sup>. Il ne fallait donc que 3 octets. Avec <a href=\"https:\/\/www.embarcadero.com\/fr\/products\/firemonkey\" title=\"Site Web de FireMonkey\" target=\"_blank\">FireMonkey<\/a>, le <a href=\"http:\/\/fr.wikipedia.org\/wiki\/Canal_alpha\" rel=\"glossary\" target=\"_blank\" title=\"Wikipedia, D&eacute;finition de&nbsp;: canal alpha\" style=\"\" >canal alpha<\/a><sup style=\"font-family: Georgia, Times New Roman, Serif; font-weight: bold; color: #AAAAAA\" ><em>W<\/em><\/sup> a \u00e9t\u00e9 ajout\u00e9, permettant ainsi de jouer plus facilement sur la transparence.<\/p>\n<p>Concernant les constantes des couleurs pr\u00e9d\u00e9finies dans Delphi, on distinguera facilement celles qui ont cet octet suppl\u00e9mentaire via leur pr\u00e9fixe&nbsp;:<br \/>\n<center><\/p>\n<table>\n<tr>\n<th>Octets<\/th>\n<th>Pr\u00e9fixe<\/th>\n<th>Codage<\/th>\n<th>Exemple<\/th>\n<\/tr>\n<tr>\n<td align=\"center\">3<\/td>\n<td align=\"center\">cl<\/td>\n<td align=\"center\"><span style=\"color: #ff0000;\">R<span style=\"color: #008000;\">V<\/span><\/span><span style=\"color: #0000FF;\">B<\/span><\/td>\n<td align=\"center\">clYellow <em>($00FFFF)<\/em><\/td>\n<\/tr>\n<tr>\n<td align=\"center\">4<\/td>\n<td align=\"center\">cl<strong>a<\/strong><\/td>\n<td align=\"center\">A<span style=\"color: #ff0000;\">R<span style=\"color: #008000;\">V<\/span><\/span><span style=\"color: #0000FF;\">B<\/span><\/td>\n<td align=\"center\">claYellow <em>($FF00FFFF)<\/em><\/td>\n<\/tr>\n<\/table>\n<p><\/center><br \/>\nwColor permet d&rsquo;obtenir facilement les diff\u00e9rentes valeurs li\u00e9es \u00e0 une couleur&nbsp;:<br \/>\n<div id=\"attachment_3731\" style=\"width: 310px\" class=\"wp-caption aligncenter\"><a href=\"\/whiler\/wp-content\/uploads\/2012\/03\/wColor.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-3731\" src=\"\/whiler\/wp-content\/uploads\/2012\/03\/wColor-300x133.jpg\" alt=\"wColor avec Windows\" title=\"wColor avec Windows\" width=\"300\" height=\"133\" class=\"size-medium wp-image-3731\" srcset=\"https:\/\/blogs.wittwer.fr\/whiler\/wp-content\/uploads\/2012\/03\/wColor-300x133.jpg 300w, https:\/\/blogs.wittwer.fr\/whiler\/wp-content\/uploads\/2012\/03\/wColor.jpg 738w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><p id=\"caption-attachment-3731\" class=\"wp-caption-text\">wColor avec Windows<\/p><\/div><br \/>\n<!--more-->L&rsquo;application est disponible pour&nbsp;:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.whiler.com\/freewares\/download?wcolor.exe\" title=\"T\u00e9l\u00e9charger la version Windows de wColor\">Windows<\/a><\/li>\n<li><a href=\"https:\/\/www.whiler.com\/freewares\/download?wcolor.zip\" title=\"T\u00e9l\u00e9charger la version Mac OS X de wColor\">Mac OS X<\/a><\/li>\n<\/ul>\n<p>Vous pouvez choisir une couleur depuis le nuancier de la partie gauche ou en saisissant n&rsquo;importe quelle(s) valeur(s) de la partie de droite. Une case \u00e0 cocher permet de sp\u00e9cifier si l&rsquo;on souhaite les couleurs avec leur couche alpha ou pas.<\/p>\n<p>Le code cette application est tr\u00e8s simple. Cependant, \u00e9tant donn\u00e9 qu&rsquo;il est multi-plateformes, je nai pas eu envie d&rsquo;utiliser l&rsquo;unit\u00e9 de <code class=\"codecolorer delphi dawn\"><span class=\"delphi\">Winapi<span class=\"sy1\">.<\/span><span class=\"me1\">Windows<\/span><\/span><\/code> pour obtenir les valeurs du rouge, du vert et du bleu&nbsp;:<br \/>\n<center><code class=\"codecolorer delphi dawn\"><span class=\"delphi\">GetRValue<span class=\"sy1\">,<\/span> GetGValue<span class=\"sy1\">,<\/span> GetBValue<\/span><\/code><\/center><\/p>\n<p>En regardant de plus pr\u00e8s les unit\u00e9s disponibles, j&rsquo;ai trouv\u00e9 ce <code class=\"codecolorer delphi dawn\"><span class=\"delphi\"><span class=\"kw1\">record<\/span><span class=\"sy1\">,<\/span> TAlphaColorRec<\/span><\/code> qui faisait ce dont j&rsquo;avais besoin&nbsp;:<\/p>\n<div class=\"codecolorer-container delphi dawn\" style=\"overflow:auto;white-space:nowrap;width:480px;\"><table cellspacing=\"0\" cellpadding=\"0\"><tbody><tr><td class=\"line-numbers\"><div>1<br \/>2<br \/>3<br \/>4<br \/>5<br \/>6<br \/>7<br \/>8<br \/>9<br \/>10<br \/>11<br \/>12<br \/><\/div><\/td><td><div class=\"delphi codecolorer\"><span class=\"kw1\">procedure<\/span> TfrmMain<span class=\"sy1\">.<\/span><span class=\"me1\">GetARGB<\/span><span class=\"br0\">&#40;<\/span>color<span class=\"sy1\">:<\/span> TColor<span class=\"sy1\">;<\/span> out a<span class=\"sy1\">,<\/span> r<span class=\"sy1\">,<\/span> g<span class=\"sy1\">,<\/span> b<span class=\"sy1\">:<\/span> <span class=\"kw4\">Byte<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy1\">;<\/span><br \/>\n<span class=\"kw1\">begin<\/span><br \/>\n<span class=\"co1\">\/\/ &nbsp;a := TAlphaColorRec(color).A;<\/span><br \/>\n<span class=\"co1\">\/\/ &nbsp;r := TAlphaColorRec(color).R;<\/span><br \/>\n<span class=\"co1\">\/\/ &nbsp;g := TAlphaColorRec(color).G;<\/span><br \/>\n<span class=\"co1\">\/\/ &nbsp;b := TAlphaColorRec(color).B;<\/span><br \/>\n<br \/>\n&nbsp; a <span class=\"sy1\">:<\/span><span class=\"sy3\">=<\/span> <span class=\"br0\">&#40;<\/span>color <span class=\"kw1\">shr<\/span> <span class=\"nu0\">24<\/span><span class=\"br0\">&#41;<\/span> <span class=\"kw1\">and<\/span> <span class=\"re0\">$FF<\/span><span class=\"sy1\">;<\/span><br \/>\n&nbsp; r <span class=\"sy1\">:<\/span><span class=\"sy3\">=<\/span> <span class=\"br0\">&#40;<\/span>color <span class=\"kw1\">shr<\/span> <span class=\"nu0\">16<\/span><span class=\"br0\">&#41;<\/span> <span class=\"kw1\">and<\/span> <span class=\"re0\">$FF<\/span><span class=\"sy1\">;<\/span><br \/>\n&nbsp; g <span class=\"sy1\">:<\/span><span class=\"sy3\">=<\/span> <span class=\"br0\">&#40;<\/span>color <span class=\"kw1\">shr<\/span> &nbsp;<span class=\"nu0\">8<\/span><span class=\"br0\">&#41;<\/span> <span class=\"kw1\">and<\/span> <span class=\"re0\">$FF<\/span><span class=\"sy1\">;<\/span><br \/>\n&nbsp; b <span class=\"sy1\">:<\/span><span class=\"sy3\">=<\/span> &nbsp; &nbsp; &nbsp; &nbsp; color &nbsp;<span class=\"kw1\">and<\/span> <span class=\"re0\">$FF<\/span><span class=\"sy1\">;<\/span><br \/>\n<span class=\"kw1\">end<\/span><span class=\"sy1\">;<\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n<p>Au final, afin d&rsquo;optimiser, j&rsquo;aime autant faire des d\u00e9calages d&rsquo;octet&#8230; <img src=\"https:\/\/blogs.wittwer.fr\/whiler\/wp-includes\/images\/smilies\/skype\/\/wink.gif\" alt=\";)\" class=\"wp-smiley\" style=\"height: 1em; max-height: 1em;\" \/><br \/>\n<div id=\"attachment_3748\" style=\"width: 310px\" class=\"wp-caption aligncenter\"><a href=\"\/whiler\/wp-content\/uploads\/2012\/03\/wColor-osx.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-3748\" src=\"\/whiler\/wp-content\/uploads\/2012\/03\/wColor-osx-300x130.jpg\" alt=\"wColor avec Mac OS X\" title=\"wColor avec Mac OS X\" width=\"300\" height=\"130\" class=\"size-medium wp-image-3748\" srcset=\"https:\/\/blogs.wittwer.fr\/whiler\/wp-content\/uploads\/2012\/03\/wColor-osx-300x130.jpg 300w, https:\/\/blogs.wittwer.fr\/whiler\/wp-content\/uploads\/2012\/03\/wColor-osx.jpg 723w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><p id=\"caption-attachment-3748\" class=\"wp-caption-text\">wColor avec Mac OS X<\/p><\/div><\/p>\n<p>Si vous \u00eates all\u00e9 v\u00e9rifier <a href=\"\/whiler\/2012\/03\/10\/wmjpgviewer\/#comment-942\" title=\"Commentaire sur la version 1.1.0.2 de wMJPG Viewer\">le commentaire<\/a>, vous aurez remarqu\u00e9 que je n&rsquo;avais pas exactement \u00e9crit la formule du d\u00e9but de cet article&#8230; <img src=\"https:\/\/blogs.wittwer.fr\/whiler\/wp-includes\/images\/smilies\/skype\/\/think.gif\" alt=\":?\" class=\"wp-smiley\" style=\"height: 1em; max-height: 1em;\" \/> Allez, juste pour me faire plaisir, je mets une jolie formule math\u00e9matique&nbsp;:<br \/>\n<div id=\"attachment_3763\" style=\"width: 310px\" class=\"wp-caption aligncenter\"><a href=\"\/whiler\/wp-content\/uploads\/2012\/03\/why-color.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-3763\" src=\"\/whiler\/wp-content\/uploads\/2012\/03\/why-color-300x64.jpg\" alt=\"Formule pour l&#039;encodage de la couleur\" title=\"Formule pour l&#039;encodage de la couleur\" width=\"300\" height=\"64\" class=\"size-medium wp-image-3763\" srcset=\"https:\/\/blogs.wittwer.fr\/whiler\/wp-content\/uploads\/2012\/03\/why-color-300x64.jpg 300w, https:\/\/blogs.wittwer.fr\/whiler\/wp-content\/uploads\/2012\/03\/why-color.jpg 664w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><p id=\"caption-attachment-3763\" class=\"wp-caption-text\">Formule pour l&#039;encodage de la couleur<\/p><\/div><\/p>\n<ul>\n<li>Un <strong>bit<\/strong> vaut soit 0, soit 1, donc il a <strong>2 valeurs<\/strong> possibles.<\/li>\n<li>Un <strong>octet<\/strong> est compos\u00e9 de <strong>8 bits<\/strong>, soit <strong>2<sup>3<\/sup><\/strong>.<\/li>\n<li>Une couleur avec transparence est compos\u00e9e de <strong>4 octets<\/strong>, \u00e9crits <strong>c\u00f4te \u00e0 c\u00f4te<\/strong>, et donc <strong>d\u00e9cal\u00e9s<\/strong> par le <strong>multiple<\/strong> que l&rsquo;on voit sur les deux derni\u00e8res lignes. Le bleu n&rsquo;ayant pas besoin d&rsquo;\u00eatre d\u00e9cal\u00e9, c&rsquo;est pourquoi il a un multiple de <strong>0<\/strong>.<\/li>\n<\/ul>\n<p><center>\n<div class=\"youtube-embed\" itemprop=\"video\" itemscope itemtype=\"https:\/\/schema.org\/VideoObject\">\n\t<meta itemprop=\"url\" content=\"https:\/\/www.youtube.com\/v\/hu8FxrGr1oI\" \/>\n\t<meta itemprop=\"name\" content=\"wColor\" \/>\n\t<meta itemprop=\"description\" content=\"wColor\" \/>\n\t<meta itemprop=\"uploadDate\" content=\"2012-03-13T00:00:06+01:00\" \/>\n\t<meta itemprop=\"thumbnailUrl\" content=\"https:\/\/i.ytimg.com\/vi\/hu8FxrGr1oI\/default.jpg\" \/>\n\t<meta itemprop=\"embedUrl\" content=\"https:\/\/www.youtube.com\/embed\/hu8FxrGr1oI\" \/>\n\t<meta itemprop=\"height\" content=\"340\" \/>\n\t<meta itemprop=\"width\" content=\"560\" \/>\n\t<iframe loading=\"lazy\" style=\"border: 0;\" class=\"youtube-player\" width=\"560\" height=\"340\" src=\"https:\/\/www.youtube.com\/embed\/hu8FxrGr1oI\" allowfullscreen><\/iframe>\n<\/div>\n<\/center><\/p>\n<p>&nbsp;<\/p>\n<blockquote><p>Application d\u00e9velopp\u00e9e avec <a target=\"_blank\" href=\"https:\/\/www.embarcadero.com\/fr\/products\/delphi\">Embarcadero Delphi XE2<\/a>.<\/p><\/blockquote>\n<p><center><a href=\"\/whiler\/category\/computer\/delphi\/\" title=\"Articles concernant Delphi\"><img loading=\"lazy\" decoding=\"async\" src=\"\/whiler\/wp-content\/uploads\/2009\/10\/built_with_delphi.png\" alt=\"D\u00e9velopp\u00e9 en Delphi\" title=\"D\u00e9velopp\u00e9 en Delphi\" width=\"125\" height=\"51\" class=\"size-full wp-image-2721\" \/><\/a><\/center><\/p>\n<div class=\"thanks_button_div\" \n                  style=\"float: right; margin-right: 10px; margin-top:10px;\"><div id=\"thanksButtonDiv_3725_1\" style=\"background-image:url(https:\/\/blogs.wittwer.fr\/whiler\/wp-content\/plugins\/thanks-you-counter-button\/images\/thanks_compact_brown1.png); background-repeat:no-repeat; float: left; display: inline;\"\n                onmouseover=\"javascript:thankYouChangeButtonImage('thanksButtonDiv_3725_1', true);\" \n                onmouseout=\"javascript:thankYouChangeButtonImage('thanksButtonDiv_3725_1', false);\"\n                onclick=\"javascript:thankYouChangeButtonImage('thanksButtonDiv_3725_1', false);\" >\n                <input type=\"button\" onclick=\"thankYouButtonClick(3725, 'You left &ldquo;Thanks&rdquo; already for this post')\" value=\"Merci\u00a0 0\"\n                  class=\"thanks_button thanks_compact thanks_brown1\"\n                  style=\"  font-family: Verdana, Arial, Sans-Serif; font-size: 14px; font-weight: normal;; color:#00f;\"\n                  id=\"thanksButton_3725_1\" title=\"Click to leave &ldquo;Thanks&rdquo; for this post\"\/>\n             <\/div><div id=\"ajax_loader_3725_1\" style=\"display:inline;visibility: hidden;\"><img decoding=\"async\" alt=\"ajax loader\" src=\"https:\/\/blogs.wittwer.fr\/whiler\/wp-content\/plugins\/thanks-you-counter-button\/images\/ajax-loader.gif\" \/><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>En \u00e9crivant un commentaire concernant une mise \u00e0 jour de l\u2019application wMJPG Viewer, j\u2019ai expliqu\u00e9 comment calculer la valeur en base d\u00e9cimale attendue par Delphi :<br \/>\n(Transparence x 16777216) + (Rouge x 65536) + (Vert x 256) + Bleu<\/p>\n<p>Chaque valeur est comprise entre 0 et 255 inclus. Les plus aguerris auront reconnu la taille d\u2019un octet, ou des valeurs hexad\u00e9cimales allant de 0 \u00e0 FF. <img decoding=\"async\" src=\"https:\/\/blogs.wittwer.fr\/whiler\/wp-includes\/images\/smilies\/skype\/\/wink.gif\" alt=\";)\" class=\"wp-smiley\" style=\"height: 1em; max-height: 1em;\" \/><\/p>\n<p>Historiquement, le codage des couleurs en Delphi est bas\u00e9 sur RVB. Il ne fallait donc que 3 octets. Avec FireMonkey, le canal alpha a \u00e9t\u00e9 ajout\u00e9, permettant ainsi de jouer plus facilement sur la transparence&#8230;<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[7],"tags":[15,27,154,146,93,96],"class_list":["post-3725","post","type-post","status-publish","format-standard","hentry","category-delphi","tag-api","tag-coloration-syntaxique","tag-delphi","tag-firemonkey","tag-freeware","tag-video"],"_links":{"self":[{"href":"https:\/\/blogs.wittwer.fr\/whiler\/wp-json\/wp\/v2\/posts\/3725","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.wittwer.fr\/whiler\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.wittwer.fr\/whiler\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.wittwer.fr\/whiler\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.wittwer.fr\/whiler\/wp-json\/wp\/v2\/comments?post=3725"}],"version-history":[{"count":0,"href":"https:\/\/blogs.wittwer.fr\/whiler\/wp-json\/wp\/v2\/posts\/3725\/revisions"}],"wp:attachment":[{"href":"https:\/\/blogs.wittwer.fr\/whiler\/wp-json\/wp\/v2\/media?parent=3725"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.wittwer.fr\/whiler\/wp-json\/wp\/v2\/categories?post=3725"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.wittwer.fr\/whiler\/wp-json\/wp\/v2\/tags?post=3725"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}