Difference between revisions of "Displaying Icons on GLCD using 8051"

(Created page with "category:8051 tutorials We have designed this 8051 kit, so that a beginner can gradually build up from basics like LED blinking up to standard peripherals and communicatio...")
 
Line 1: Line 1:
 
[[category:8051 tutorials]]
 
[[category:8051 tutorials]]
−
We have designed this 8051 kit, so that a beginner can gradually build up from basics like LED blinking up to standard peripherals and communication protocols without having to change boards. We are shipping a USB AT89S series programmer with this board, for easy programming. The entire kit is very affordable and we are making tutorials to help you along. <br>
+
In this tutorial, we will see how to display the images/icons on 128x64 Monochrome GLCD. To do this we need images of 128x64 pixels, if not we have to crop/resize the higher resolution images. This can be done using photoshop or some other photo editors. We will be using the windows built in tool <b>PAINT</b>.<br>
  
−
==Setting up the XploreFlash Programmer==
 
−
{{Box|type=l_green_light|text=
 
−
Step 1: Xplore flash is based on various opensource software, it requires avrdude. Avrdude is part of WinAVR GCC complier. [http://sourceforge.net/projects/winavr/files/latest/download?source=files Download and install it.]<br />
 
  
−
Step 2: Download and install [http://www.fischl.de/usbasp/usbasp-windriver.2011-05-28.zip USB driver for the programmer.]<br/>
+
=Image Resize=
−
===tutorials to install drivers on windows 7 and windows 8 ===
+
Lets take a high resolution image and crop it to 128x64 and then generate the bitmap.
−
*[http://www.protostack.com/blog/2011/05/usbasp-driver-for-windows-7-and-windows-vista-x64/ Installing on windows 7 and windows vista]
+
[[FILE:IPL.png]]<br>
−
*[http://letsmakerobots.com/node/36841 Installing on windows 8]
+
Download and open the above image using <b>ms paint</b> as shown below.
 +
[[FILE:Glcd Logo 0.PNG]]<br>
  
−
Step 3: Download and install [http://exploreembedded.com/wiki/images/e/ef/XploreFlash.zip  XploreFlash GUI]. (XploreFlash GUI is based on AVRDUDESS)
+
Resize the image to 128x64 pixels.
−
'''Note:If you're not able to download and install Xplore Flash, please download the PROGISP software.'''<br/>
+
[[FILE:Glcd Logo 1.PNG]]<br>
  
 +
Save the image in monochrome bitmap format <b>.bmp</b> as shown below.
 +
[[FILE:Glcd Logo 2.PNG]]<br>
 +
[[FILE:Glcd Logo 3.png]]<br>
  
−
Step 4: Follow [[Using_XploreFlash|Step by step guide on using the programmer software XploreFlash]] program the micrcontroller. The GUI software will require [http://www.microsoft.com/en-gb/download/details.aspx?id=16614 .NET framework] 2.0 or later please download and install it.
+
=Bitmap Using Lcd Assistant=
−
}}
+
  
−
=Alternate Software for flashing hex file: Prog ISP=
+
Now run the [https://www.exploreembedded.com/wiki/images/c/c5/LCDAssistant.zip LCD Assistant] software and load the monochrome image saved in the previous step.
−
Download [http://exploreembedded.com/wiki/images/1/1a/Progisp1.72.rar progisp]
+
[[FILE:Glcd Logo 4.png]]<br>
 +
 
 +
Do the setting as shown in the image.
 +
[[FILE:Glcd Logo 5.png]]<br>
 +
 
 +
Click on FILE->Save Output and save the output file as logo.txt
 +
[[FILE:Glcd Logo 6.png]]<br>
 +
 
 +
The bitmap for the image will be saved in an array as shown in the below image.
 +
[[FILE:Glcd Logo 7.PNG]]<br>
 +
 
 +
Use this array in your code for displaying the image/logo on the GLCD.
 +
 
 +
=Code=
 +
Below is the complete code with the bit map array.<br>
 +
Check glcd.h file for pin connection.
 +
<html>
 +
<script src="https://gist.github.com/SaheblalBagwan/08799669325b6d3476f6e629248fea4f.js"></script>
 +
</html>
 +
 
 +
[[FILE:Glcd_LogoDisplay.png]]<br><br>
 +
[[File:0GLCD Logo Display.gif]]<br><br>
 +
 
 +
=Downloads=
 +
Download the complete project folder from this link:  [https://github.com/ExploreEmbedded/8051_DevelopmentBoard Hardware design Files and Code Library]<br>
 +
[https://www.exploreembedded.com/wiki/images/c/c5/LCDAssistant.zip LCD Assistant software].
 +
 
 +
 
 +
Have an opinion, suggestion , question or feedback about the article let it out here!
 +
{{DISQUS}}

Revision as of 12:31, 26 August 2016

In this tutorial, we will see how to display the images/icons on 128x64 Monochrome GLCD. To do this we need images of 128x64 pixels, if not we have to crop/resize the higher resolution images. This can be done using photoshop or some other photo editors. We will be using the windows built in tool PAINT.


Image Resize

Lets take a high resolution image and crop it to 128x64 and then generate the bitmap. IPL.png
Download and open the above image using ms paint as shown below. Glcd Logo 0.PNG

Resize the image to 128x64 pixels. Glcd Logo 1.PNG

Save the image in monochrome bitmap format .bmp as shown below. Glcd Logo 2.PNG
Glcd Logo 3.png

Bitmap Using Lcd Assistant

Now run the LCD Assistant software and load the monochrome image saved in the previous step. Glcd Logo 4.png

Do the setting as shown in the image. Glcd Logo 5.png

Click on FILE->Save Output and save the output file as logo.txt Glcd Logo 6.png

The bitmap for the image will be saved in an array as shown in the below image. Glcd Logo 7.PNG

Use this array in your code for displaying the image/logo on the GLCD.

Code

Below is the complete code with the bit map array.
Check glcd.h file for pin connection.

Glcd LogoDisplay.png

0GLCD Logo Display.gif

Downloads

Download the complete project folder from this link: Hardware design Files and Code Library
LCD Assistant software.


Have an opinion, suggestion , question or feedback about the article let it out here!

Retrieved from "https://exploreembedded.com/wiki/index.php?title=Displaying_Icons_on_GLCD_using_8051&oldid=10407"