{"id":3934,"date":"2011-10-24T20:49:33","date_gmt":"2011-10-25T00:49:33","guid":{"rendered":"http:\/\/embedded-lab.com\/blog\/?p=3934"},"modified":"2012-07-30T09:29:14","modified_gmt":"2012-07-30T13:29:14","slug":"how-to-use-mikroelektronikas-glcd-bitmap-editor-tool-to-convert-a-bmp-image-in-to-a-data-array","status":"publish","type":"post","link":"https:\/\/embedded-lab.com\/blog\/how-to-use-mikroelektronikas-glcd-bitmap-editor-tool-to-convert-a-bmp-image-in-to-a-data-array\/","title":{"rendered":"How to use mikroElektronika&#8217;s GLCD bitmap editor tool to convert a BMP image in to a data array"},"content":{"rendered":"<p>This tutorial describes how to use the mikroElektronika&#8217;s GLCD bitmap editor tool to convert a\u00a0monochromatic bit map (BMP) image file into a data array so that it could be displayed on a graphics LCD using a microcontroller. The GLCD bitmap editor\u00a0tool is embedded into mikroElektronika&#8217;s compilers. It can generate a code equivalent of a BMP image, which can be easily inserted into the microcontroller&#8217;s source program.<\/p>\n<div id=\"attachment_3937\" style=\"width: 570px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/embedded-lab.com\/blog\/wp-content\/uploads\/2011\/10\/GLCD_Editor.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-3937\" class=\"size-full wp-image-3937\" title=\"GLCD_Editor\" src=\"http:\/\/embedded-lab.com\/blog\/wp-content\/uploads\/2011\/10\/GLCD_Editor.jpg\" alt=\"\" width=\"560\" height=\"413\" srcset=\"https:\/\/embedded-lab.com\/blog\/wp-content\/uploads\/2011\/10\/GLCD_Editor.jpg 560w, https:\/\/embedded-lab.com\/blog\/wp-content\/uploads\/2011\/10\/GLCD_Editor-550x405.jpg 550w\" sizes=\"auto, (max-width: 560px) 100vw, 560px\" \/><\/a><p id=\"caption-attachment-3937\" class=\"wp-caption-text\">MikroElektronika&#39;s GLCD BMP editor<\/p><\/div>\n<p><!--more-->Here I am using a NT7107\/8 based (compatible with Samsung KS0107\/8) 128&#215;64 graphics LCD display. I will show how to convert the Microchip Technology logo into a constant data array and display it on the LCD that is driven by a PIC microcontroller. I will be demonstrating this with mikroC Pro for PIC compiler. The circuit diagram below shows the GLCD connections to the PIC16F887 microcontroller. The circuit is self-explanatory and not described in further detail.<\/p>\n<div id=\"attachment_4321\" style=\"width: 568px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/embedded-lab.com\/blog\/wp-content\/uploads\/2011\/10\/GLCD_Ckt.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-4321\" class=\"size-full wp-image-4321\" title=\"GLCD_Ckt\" src=\"http:\/\/embedded-lab.com\/blog\/wp-content\/uploads\/2011\/10\/GLCD_Ckt.jpg\" alt=\"\" width=\"558\" height=\"504\" srcset=\"https:\/\/embedded-lab.com\/blog\/wp-content\/uploads\/2011\/10\/GLCD_Ckt.jpg 558w, https:\/\/embedded-lab.com\/blog\/wp-content\/uploads\/2011\/10\/GLCD_Ckt-550x496.jpg 550w\" sizes=\"auto, (max-width: 558px) 100vw, 558px\" \/><\/a><p id=\"caption-attachment-4321\" class=\"wp-caption-text\">GLCD connections to PIC16F887<\/p><\/div>\n<p>The picture below shows a 128&#215;64 pixels Microchip Technology logo. It should be first converted into a monochromatic BMP image. In Windows, the MS Paint application can do that for you. First open the image with MS Paint and then save it choosing Monochrome Bitmap format.<\/p>\n<div id=\"attachment_3938\" style=\"width: 410px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/embedded-lab.com\/blog\/wp-content\/uploads\/2011\/10\/MicrochipLogo.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-3938\" class=\"size-full wp-image-3938\" title=\"MicrochipLogo\" src=\"http:\/\/embedded-lab.com\/blog\/wp-content\/uploads\/2011\/10\/MicrochipLogo.jpg\" alt=\"\" width=\"400\" height=\"100\" \/><\/a><p id=\"caption-attachment-3938\" class=\"wp-caption-text\">Microchip logo<\/p><\/div>\n<p>Now open the\u00a0<em>GLCD bitmap editor<\/em>\u00a0application from the<em>\u00a0Tools<\/em>\u00a0menu of mikroC Pro for PIC compiler. Select the size and the controller of the GLCD display\u00a0that you are using. I selected 128&#215;64 (KS0108) from the available options. Next, click on\u00a0<em>Load BMP<\/em>\u00a0button and select the BMP file that you want to convert. It will then display the code for the display image inside the\u00a0<em>Generated Code<\/em>\u00a0section. Copy the code and either paste it into your main program or to another file that is to be included into the main program. You can also select the type of compiler you are using so that it could generate the code accordingly.<\/p>\n<div id=\"attachment_3937-2\" style=\"width: 570px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/embedded-lab.com\/blog\/wp-content\/uploads\/2011\/10\/GLCD_Editor.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-3937-2\" class=\"size-full wp-image-3937\" title=\"GLCD_Editor\" src=\"http:\/\/embedded-lab.com\/blog\/wp-content\/uploads\/2011\/10\/GLCD_Editor.jpg\" alt=\"\" width=\"560\" height=\"413\" srcset=\"https:\/\/embedded-lab.com\/blog\/wp-content\/uploads\/2011\/10\/GLCD_Editor.jpg 560w, https:\/\/embedded-lab.com\/blog\/wp-content\/uploads\/2011\/10\/GLCD_Editor-550x405.jpg 550w\" sizes=\"auto, (max-width: 560px) 100vw, 560px\" \/><\/a><p id=\"caption-attachment-3937-2\" class=\"wp-caption-text\">MikroElektronika&#39;s GLCD BMP editor<\/p><\/div>\n<p>The generated code is nothing else than a constant character array that contains the information about what pixels of the 128&#215;64 GLCD are to be illuminated to display the image. The code generated will look like this:<\/p>\n<pre>\/\/ -- ----------------------------------------------------\r\n\/\/ GLCD Picture name: Microchip.bmp\r\n\/\/ GLCD Model: KS0108 128x64\r\n\/\/ ------------------------------------------------------  \r\n\r\nconst code char Microchip[1024] = {\r\n  0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,  7,  15,  15,  31,  31,\r\n  31,  63,  63,  63,  63,  63,  63,  63,  63,  ...\r\n  ... 12,  12,  12,  12, 127, 127, 127,   0,   0, 127, 127, 127,   0,   0, 127,  0\r\n};<\/pre>\n<p>For an LCD of 128&#215;64 size, the size of the array would be 1024 bytes (1024&#215;8 = 8192 bits), which hold information bits of all 128&#215;64 = 8192 display pixels. With mikroC, it is very easy to load the image data into a GLCD using the built-in GLCD library routines. The Glcd_Image(Microchip) command will display the Microchip Technology logo into the GLCD screen.<\/p>\n<p><a href=\"http:\/\/embedded-lab.com\/uploads\/HexFiles\/PIC16F887\/GLCD_bitmap.zip\" target=\"_blank\"><strong>Download the complete mikroC program<\/strong><\/a><\/p>\n<div id=\"attachment_3943\" style=\"width: 570px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/embedded-lab.com\/blog\/wp-content\/uploads\/2011\/10\/GLCD_Output.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-3943\" class=\"size-full wp-image-3943\" title=\"GLCD_Output\" src=\"http:\/\/embedded-lab.com\/blog\/wp-content\/uploads\/2011\/10\/GLCD_Output.jpg\" alt=\"\" width=\"560\" height=\"400\" srcset=\"https:\/\/embedded-lab.com\/blog\/wp-content\/uploads\/2011\/10\/GLCD_Output.jpg 560w, https:\/\/embedded-lab.com\/blog\/wp-content\/uploads\/2011\/10\/GLCD_Output-550x392.jpg 550w\" sizes=\"auto, (max-width: 560px) 100vw, 560px\" \/><\/a><p id=\"caption-attachment-3943\" class=\"wp-caption-text\">Microchip Technology logo displayed on a GLCD<\/p><\/div>\n<p><strong><br \/>\n<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This tutorial describes how to use the mikroElektronika&#8217;s GLCD bitmap editor tool to convert a\u00a0monochromatic bit map (BMP) image file into a data array so that it could be displayed on a graphics LCD using a microcontroller. The GLCD bitmap editor\u00a0tool is embedded into mikroElektronika&#8217;s compilers. It can generate a code equivalent of a BMP image, which can be easily inserted into the microcontroller&#8217;s source program.<\/p>\n","protected":false},"author":1,"featured_media":3937,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29,38,183],"tags":[158,366,365,9,364],"class_list":["post-3934","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-embedded-lessons","category-pic-tutorials","category-tips-and-tricks","tag-glcd","tag-glcd-bitmap-editor","tag-ks0108","tag-mikroc","tag-pic18f887"],"_links":{"self":[{"href":"https:\/\/embedded-lab.com\/blog\/wp-json\/wp\/v2\/posts\/3934","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/embedded-lab.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/embedded-lab.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/embedded-lab.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/embedded-lab.com\/blog\/wp-json\/wp\/v2\/comments?post=3934"}],"version-history":[{"count":14,"href":"https:\/\/embedded-lab.com\/blog\/wp-json\/wp\/v2\/posts\/3934\/revisions"}],"predecessor-version":[{"id":4234,"href":"https:\/\/embedded-lab.com\/blog\/wp-json\/wp\/v2\/posts\/3934\/revisions\/4234"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/embedded-lab.com\/blog\/wp-json\/wp\/v2\/media\/3937"}],"wp:attachment":[{"href":"https:\/\/embedded-lab.com\/blog\/wp-json\/wp\/v2\/media?parent=3934"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/embedded-lab.com\/blog\/wp-json\/wp\/v2\/categories?post=3934"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/embedded-lab.com\/blog\/wp-json\/wp\/v2\/tags?post=3934"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}