{"id":543,"date":"2022-01-10T15:48:56","date_gmt":"2022-01-10T18:48:56","guid":{"rendered":"https:\/\/gladiston.net.br\/?page_id=543"},"modified":"2022-07-13T16:05:35","modified_gmt":"2022-07-13T19:05:35","slug":"usando-o-imagelist-com-multiplos-dimensionamentos-2","status":"publish","type":"page","link":"https:\/\/gladiston.net.br\/en\/programacao\/lazarus-ide\/usando-o-imagelist-com-multiplos-dimensionamentos-2\/","title":{"rendered":"Using ImageList with multiple scales"},"content":{"rendered":"<p>ImageList(TImageList) is an image repository. We can store in it as many images as we want and in any format supported by the language, but generally we will use Bitmap(.bmp), Portable Network Graphics (.png) and JPEG (.jpg or .jpeg). <\/p>\n\n\n\n<p>There is a big difference between Delphi and Lazarus ImageList, while in Delphi all images in an ImageList need to have the same width and height definition, in Lazarus this is not. In fact, Delphi has the VirtualImageList that serves precisely to allow multiple resizing of the same group of images, however most programmers continue to use the old ImageList.<\/p>\n\n\n\n<p>If you wish, you can see in practice the explanation of this video article:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Using ImageList with Multiple Dimensions - Lazarus\" width=\"580\" height=\"326\" src=\"https:\/\/www.youtube.com\/embed\/lepvfSR9q-o?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>How does ImageList work in Lazarus? More important than knowing how it works is first knowing where to anchor an ImageList component, most programmers have created the habit of including an ImageList in each form with the images you will need in that form, this logic is very good, however, if there are images that will be shared between many forms, for example to use inside buttons to indicate exit, print, add, remove, edit, etc\u2026 then you <strong>he must<\/strong>  having an ImageList just for them, this will save work on program maintainability. <\/p>\n\n\n\n<p>Where to put the Imagelist? The main form is where an incredible amount of components and programming code is, so adding something there is a complexity to be avoided so the best idea is to create a <em>datamodule<\/em>, this one has <em>footprint <\/em>less resource and complexity, so it&#039;s safe to use it instead of the main form.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"criando-um-datamodule\">Creating a data module<\/h2>\n\n\n\n<p>If you have one <em>datamodule<\/em> main in your program then ignore this part, otherwise in a new project go to File|New\u2026 and choose to create a <em>datamodule<\/em>:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"752\" height=\"442\" src=\"https:\/\/gladiston.net.br\/wp-content\/uploads\/2022\/01\/lazarus_datamodule_new1.png\" alt=\"\" class=\"wp-image-544\" srcset=\"https:\/\/gladiston.net.br\/wp-content\/uploads\/2022\/01\/lazarus_datamodule_new1.png 752w, https:\/\/gladiston.net.br\/wp-content\/uploads\/2022\/01\/lazarus_datamodule_new1-300x176.png 300w\" sizes=\"auto, (max-width: 752px) 100vw, 752px\" \/><figcaption>Creating a datamodule to contain an ImageList<\/figcaption><\/figure>\n\n\n\n<p>The next step is to drag an ImageList into the datamodule and then configure the maximum size of the height (height) and width (width), if 64\u00d764 is informed, all the images that I deposit inside the ImageList can have a size of 48\u00d7 48, 32\u00d732, 24\u00d724, 16\u00d716,\u2026any definition you want, but it cannot be larger than 64\u00d764, so choose carefully the maximum size you want, after all if you need a different size you will have to erase all content and start from scratch again:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"568\" height=\"770\" src=\"https:\/\/gladiston.net.br\/wp-content\/uploads\/2022\/01\/lazarus_imagelist1.png\" alt=\"\" class=\"wp-image-546\" srcset=\"https:\/\/gladiston.net.br\/wp-content\/uploads\/2022\/01\/lazarus_imagelist1.png 568w, https:\/\/gladiston.net.br\/wp-content\/uploads\/2022\/01\/lazarus_imagelist1-221x300.png 221w\" sizes=\"auto, (max-width: 568px) 100vw, 568px\" \/><figcaption>Carefully choose the first width and height setting, you won&#039;t be able to change it later without erasing the existing content<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"incluindo-imagens\">Including Images<\/h2>\n\n\n\n<p>Including images is very simple, right click on the Imagelist component and choose the option <strong>ImageList Editor<\/strong>:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"298\" height=\"137\" src=\"https:\/\/gladiston.net.br\/wp-content\/uploads\/2022\/01\/lazarus_imagelist2.png\" alt=\"\" class=\"wp-image-547\"\/><\/figure>\n\n\n\n<p>And then include all your images, but attention, all images must be at least the size you defined before, in our example 64\u00d764:<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"918\" style=\"aspect-ratio: 1130 \/ 918;\" width=\"1130\" controls src=\"https:\/\/gladiston.net.br\/wp-content\/uploads\/2022\/01\/lazarus_imagelist_add1.mp4\"><\/video><figcaption>All added images must have the same definition as previously informed<\/figcaption><\/figure>\n\n\n\n<p>Up to this point, you probably haven&#039;t seen anything else, it&#039;s just like you&#039;re used to. Now let&#039;s go back to the option <strong>ImageList Editor<\/strong> and we will add new resolutions by clicking <strong>new resolutions<\/strong>:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"619\" height=\"516\" src=\"https:\/\/gladiston.net.br\/wp-content\/uploads\/2022\/01\/lazarus_imagelist3.png\" alt=\"\" class=\"wp-image-549\" srcset=\"https:\/\/gladiston.net.br\/wp-content\/uploads\/2022\/01\/lazarus_imagelist3.png 619w, https:\/\/gladiston.net.br\/wp-content\/uploads\/2022\/01\/lazarus_imagelist3-300x250.png 300w\" sizes=\"auto, (max-width: 619px) 100vw, 619px\" \/><figcaption>Now we can add new resolutions<\/figcaption><\/figure>\n\n\n\n<p>If you initially informed your resolution as 64\u00d764 then the new resolutions you will inform must be proportional and smaller than 64\u00d764, so when a dialog window asks you what the new resolution will be, just inform the width and it will calculate the height. For example, to add the resolutions: 48\u00d748, 32\u00d732, 24\u00d724 and 16\u00d716, just enter 48, 32, 24 and 16 in sequence and they will be created in the proportion:<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"836\" style=\"aspect-ratio: 1270 \/ 836;\" width=\"1270\" controls src=\"https:\/\/gladiston.net.br\/wp-content\/uploads\/2022\/01\/lazarus_imagelist_resolutions1.mp4\"><\/video><figcaption>Adding new resolutions to previously added images<\/figcaption><\/figure>\n\n\n\n<p>Now your ImageList, which previously only had images in 64\u00d764 resolution, will now also have 48\u00d748, 32\u00d732, 24\u00d724 and 16\u00d716 images, but how can you use them within the program?<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"usufruindo-das-imagens-dentro-do-imagelist\">Using the images inside the ImageList<\/h2>\n\n\n\n<p>All visual components that allow their association with an ImageList component have the property <strong>images<\/strong>, what we need to do is the association of this component with the ImageList that is in <em>datamodule<\/em>. You will need to include the unit of the <em>datamodule<\/em> in your project&#039;s uses (Use Alt+F11) before proceeding:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"580\" height=\"435\" src=\"https:\/\/gladiston.net.br\/wp-content\/uploads\/2022\/01\/lazarus_imagelist5.png\" alt=\"\" class=\"wp-image-552\" srcset=\"https:\/\/gladiston.net.br\/wp-content\/uploads\/2022\/01\/lazarus_imagelist5.png 580w, https:\/\/gladiston.net.br\/wp-content\/uploads\/2022\/01\/lazarus_imagelist5-300x225.png 300w\" sizes=\"auto, (max-width: 580px) 100vw, 580px\" \/><figcaption>Binding a component&#039;s Images property to the ImageList that is in the datamodule<\/figcaption><\/figure>\n\n\n\n<p>Probably all that I said you already knew, now you want to know how to change the size of that image on the button, don&#039;t you? Note that every component that has a property <strong>images<\/strong> also has the property <strong>ImageWidth<\/strong> and <strong>ImageIndex<\/strong>:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"538\" height=\"301\" src=\"https:\/\/gladiston.net.br\/wp-content\/uploads\/2022\/01\/lazarus_imagelist6.png\" alt=\"\" class=\"wp-image-553\" srcset=\"https:\/\/gladiston.net.br\/wp-content\/uploads\/2022\/01\/lazarus_imagelist6.png 538w, https:\/\/gladiston.net.br\/wp-content\/uploads\/2022\/01\/lazarus_imagelist6-300x168.png 300w\" sizes=\"auto, (max-width: 538px) 100vw, 538px\" \/><\/figure>\n\n\n\n<p>In <strong>ImageWidth<\/strong> you can type 64, 48, 32, 24 and 16, all those resolutions we added to the ImageList, after that just select on <strong>ImageIndex <\/strong>the image you need:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"237\" height=\"368\" src=\"https:\/\/gladiston.net.br\/wp-content\/uploads\/2022\/01\/lazarus_imagelist7.png\" alt=\"\" class=\"wp-image-554\" srcset=\"https:\/\/gladiston.net.br\/wp-content\/uploads\/2022\/01\/lazarus_imagelist7.png 237w, https:\/\/gladiston.net.br\/wp-content\/uploads\/2022\/01\/lazarus_imagelist7-193x300.png 193w\" sizes=\"auto, (max-width: 237px) 100vw, 237px\" \/><figcaption>Having defined the width we need, now we just have to choose the appropriate ImageIndex<\/figcaption><\/figure>\n\n\n\n<p>If we need different images in different proportions, we just need to always adjust the property <strong>ImageWidth<\/strong>:<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"822\" style=\"aspect-ratio: 1112 \/ 822;\" width=\"1112\" controls src=\"https:\/\/gladiston.net.br\/wp-content\/uploads\/2022\/01\/lazarus_imagelist_resolutions_components1.mp4\"><\/video><figcaption>Demonstration of using the ImageList, ImageIndex, and ImageWidth properties<\/figcaption><\/figure>\n\n\n\n<p>Any component that has the property <strong>images<\/strong> (which accepts a TImageList) can use the property <strong>ImageWidth<\/strong> to inform the resolution that you want to apply to the selected image since such resolution has been previously added to the <strong>ImageList <\/strong>selected.<\/p>\n\n\n\n<p> In this way, we learned that ImageList in Lazarus is a little different from Delphi, having extra features.<\/p>\n\n\n\n<p><strong>Important<\/strong>: ImageList can accept any type of image supported by the IDE and Pascal, however, many programmers don&#039;t just use it to put art on buttons, menus, DBGrids, etc... it can also be used to convert from one image to another , enable transparency, use of masks, read\/save images from disk and so many other things and avoid programming complexities by using these formats directly.<\/p>\n\n\n\n<p>You must be wondering what is the best graphic format to use within your programs? It depends, if it&#039;s just for graphic art on buttons, banners and styles used by your program there&#039;s no doubt that the best format is PNG because they keep the same quality in different resolutions. But if you intend to use the images inside reports, PDFs and\/or interact with other third-party components maybe the best format is Bitmap, all third-party components that handle images are Bitmap compatible, but not all of them handle PNG and it usually requires you to convert them to Bitmap in order to enjoy it so it&#039;s faster not to convert and use Bitmap directly.<\/p>\n\n\n\n<p>If you want to study the examples, they can be obtained here:<\/p>\n\n\n\n<p><a href=\"https:\/\/github.com\/gladiston\/lazdemos_gsl\">https:\/\/github.com\/gladiston\/lazdemos_gsl<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>O ImageList(TImageList) \u00e9 um reposit\u00f3rio de imagens. Podemos armazenar nele quantas imagens desejarmos e em qualquer formato suportado pela linguagem, mas geralmente vamos usar Bitmap(.bmp), Portable Network Graphics (.png) e JPEG (.jpg ou .jpeg). H\u00e1 uma grande diferen\u00e7a entre o ImageList do Delphi e do Lazarus, enquanto no Delphi todas as imagens num ImageList precisam [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":159,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"templates\/template-full-width.php","meta":{"footnotes":""},"class_list":["post-543","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/gladiston.net.br\/en\/wp-json\/wp\/v2\/pages\/543","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gladiston.net.br\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gladiston.net.br\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gladiston.net.br\/en\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/gladiston.net.br\/en\/wp-json\/wp\/v2\/comments?post=543"}],"version-history":[{"count":18,"href":"https:\/\/gladiston.net.br\/en\/wp-json\/wp\/v2\/pages\/543\/revisions"}],"predecessor-version":[{"id":930,"href":"https:\/\/gladiston.net.br\/en\/wp-json\/wp\/v2\/pages\/543\/revisions\/930"}],"up":[{"embeddable":true,"href":"https:\/\/gladiston.net.br\/en\/wp-json\/wp\/v2\/pages\/159"}],"wp:attachment":[{"href":"https:\/\/gladiston.net.br\/en\/wp-json\/wp\/v2\/media?parent=543"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}