{"id":545,"date":"2016-07-30T12:00:03","date_gmt":"2016-07-30T12:00:03","guid":{"rendered":"http:\/\/bitmap2lcd.com\/blog\/?p=545"},"modified":"2016-11-08T15:27:22","modified_gmt":"2016-11-08T15:27:22","slug":"creating-a-glcd-animation-with-bitmap2lcd","status":"publish","type":"post","link":"https:\/\/bitmap2lcd.com\/blog\/creating-a-glcd-animation-with-bitmap2lcd\/","title":{"rendered":"Creating a GLCD Animation from scratch with Bitmap2lcd"},"content":{"rendered":"<h3>Creating a GLCD Animation from scratch with Bitmap2lcd<\/h3>\n<p><span style=\"color: #808080;\"><strong><em>Bitmap2LCD is a tool for programming small Graphic LCDs in embedded systems.<\/em><\/strong><\/span><\/p>\n<p><strong><a href=\"https:\/\/bitmap2lcd.com\/blog\/animations-on-graphic-lcd-glcd\/\" target=\"_blank\">Also read this article !<\/a><\/strong><\/p>\n<p>Let&#8217;s see how we can create an animation for small Graphic LCD ( Version 3.7C+ )<\/p>\n<p><a href=\"https:\/\/bitmap2lcd.com\/blog\/wp-content\/uploads\/2014\/07\/bitmap2LCD-Animation-Menu.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2293\" src=\"https:\/\/bitmap2lcd.com\/blog\/wp-content\/uploads\/2014\/07\/bitmap2LCD-Animation-Menu.png\" alt=\"bitmap2lcd-animation-menu\" width=\"1056\" height=\"172\" srcset=\"https:\/\/bitmap2lcd.com\/blog\/wp-content\/uploads\/2014\/07\/bitmap2LCD-Animation-Menu.png 1056w, https:\/\/bitmap2lcd.com\/blog\/wp-content\/uploads\/2014\/07\/bitmap2LCD-Animation-Menu-300x49.png 300w, https:\/\/bitmap2lcd.com\/blog\/wp-content\/uploads\/2014\/07\/bitmap2LCD-Animation-Menu-768x125.png 768w, https:\/\/bitmap2lcd.com\/blog\/wp-content\/uploads\/2014\/07\/bitmap2LCD-Animation-Menu-1024x167.png 1024w, https:\/\/bitmap2lcd.com\/blog\/wp-content\/uploads\/2014\/07\/bitmap2LCD-Animation-Menu-624x102.png 624w\" sizes=\"auto, (max-width: 1056px) 100vw, 1056px\" \/><\/a><\/p>\n<ul>\n<li>When in static mode , go to the animation tab and click the <strong>Enter Animation button<\/strong> <span style=\"color: #808080;\"><strong><em><a href=\"https:\/\/bitmap2lcd.com\/blog\/wp-content\/uploads\/2012\/10\/anim.bmp\"><img decoding=\"async\" class=\"alignnone size-full wp-image-1531\" src=\"https:\/\/bitmap2lcd.com\/blog\/wp-content\/uploads\/2012\/10\/anim.bmp\" alt=\"anim\" \/><\/a><\/em><\/strong><\/span>\u00a0 The same button or the\u00a0<strong><em>Special Mode Exit<\/em><\/strong> <a href=\"https:\/\/bitmap2lcd.com\/blog\/wp-content\/uploads\/2012\/10\/exiz.bmp\"><img decoding=\"async\" class=\"alignnone size-full wp-image-1532\" src=\"https:\/\/bitmap2lcd.com\/blog\/wp-content\/uploads\/2012\/10\/exiz.bmp\" alt=\"exiz\" \/><\/a> Button should later be used to exit from the animation mode back to the static mode.\u00a0An animation will be\u00a0saved as a standard <strong>GIF<\/strong> file.<\/li>\n<\/ul>\n<p><a href=\"http:\/\/en.wikipedia.org\/wiki\/Graphics_Interchange_Format\" target=\"_blank\">\u00a0Read more about GIF Format<\/a><\/p>\n<ul>\n<li>\u00a0When entered in <strong>animation mode,<\/strong> the canvas outline becomes <strong>dark gray<\/strong> (<span style=\"color: #008000;\"><em>green arrow<\/em><\/span>) sub-menu becomes accessible (<span style=\"color: #ff0000;\"><em>red arrow<\/em><\/span>) . The animation is a sequence built of frames. The &#8220;<em>ghost image<\/em>&#8221; of the previous frame can optionally be displayed, it is a visual help\u00a0for correct placement of graphic items,<\/li>\n<\/ul>\n<ul>\n<li><a href=\"https:\/\/bitmap2lcd.com\/blog\/wp-content\/uploads\/2014\/07\/Bitmap2lcd-Animation-Mode_1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2294\" src=\"https:\/\/bitmap2lcd.com\/blog\/wp-content\/uploads\/2014\/07\/Bitmap2lcd-Animation-Mode_1.png\" alt=\"bitmap2lcd-animation-mode_1\" width=\"1230\" height=\"929\" srcset=\"https:\/\/bitmap2lcd.com\/blog\/wp-content\/uploads\/2014\/07\/Bitmap2lcd-Animation-Mode_1.png 1230w, https:\/\/bitmap2lcd.com\/blog\/wp-content\/uploads\/2014\/07\/Bitmap2lcd-Animation-Mode_1-300x227.png 300w, https:\/\/bitmap2lcd.com\/blog\/wp-content\/uploads\/2014\/07\/Bitmap2lcd-Animation-Mode_1-768x580.png 768w, https:\/\/bitmap2lcd.com\/blog\/wp-content\/uploads\/2014\/07\/Bitmap2lcd-Animation-Mode_1-1024x773.png 1024w, https:\/\/bitmap2lcd.com\/blog\/wp-content\/uploads\/2014\/07\/Bitmap2lcd-Animation-Mode_1-624x471.png 624w\" sizes=\"auto, (max-width: 1230px) 100vw, 1230px\" \/><\/a><\/li>\n<\/ul>\n<ul>\n<li>At the top you can read the number of the current frame\u00a0 (2)\u00a0 and the number of total frames in the animation (\/2) (<span style=\"color: #0000ff;\"><em>blue \u00a0arrow<\/em><\/span>)<\/li>\n<li>In the animation menu , you can use the navigation buttons to move from a frames to another, move to the beginning or the end of the animation. You can play and stop\u00a0the animation sequence. (<span style=\"color: #ff6600;\"><em>orange arrow<\/em><\/span>)\u00a0An alternative is to\u00a0use the <em>page-up<\/em> and <em>page-down<\/em> keyboard keys to\u00a0move through the animation frames.<\/li>\n<li>Addition of a new animation frame, copying current frame to then next new frame , deleting a frame as well as other animation management functions are located in the animation menu and at the right side of the work canvas (<span style=\"color: #ff0000;\"><em>red arrow<\/em><\/span>)<\/li>\n<\/ul>\n<p><a href=\"https:\/\/bitmap2lcd.com\/blog\/wp-content\/uploads\/2012\/10\/Bitmap2lcd-Animation_31.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1524\" src=\"https:\/\/bitmap2lcd.com\/blog\/wp-content\/uploads\/2012\/10\/Bitmap2lcd-Animation_31.png\" alt=\"Bitmap2lcd Animation_3\" width=\"990\" height=\"972\" srcset=\"https:\/\/bitmap2lcd.com\/blog\/wp-content\/uploads\/2012\/10\/Bitmap2lcd-Animation_31.png 990w, https:\/\/bitmap2lcd.com\/blog\/wp-content\/uploads\/2012\/10\/Bitmap2lcd-Animation_31-300x294.png 300w, https:\/\/bitmap2lcd.com\/blog\/wp-content\/uploads\/2012\/10\/Bitmap2lcd-Animation_31-624x612.png 624w\" sizes=\"auto, (max-width: 990px) 100vw, 990px\" \/><\/a><\/p>\n<ul>\n<li>\u00a0When the animation is done you can convert the frames\u00a0in GLCD data\u00a0in one go <a href=\"https:\/\/bitmap2lcd.com\/blog\/wp-content\/uploads\/2012\/08\/Start.bmp\"><img decoding=\"async\" class=\"alignnone size-full wp-image-1400\" src=\"https:\/\/bitmap2lcd.com\/blog\/wp-content\/uploads\/2012\/08\/Start.bmp\" alt=\"Start\" \/><\/a>\u00a0 <span style=\"color: #008000;\">(<em>green arrow<\/em><\/span>)<\/li>\n<li>With\u00a0this animation made of 5 frames example, Bitmap2LCD produces 6 files :\u00a0A clip unit file \u00a0(<em>the code in the editor<\/em>) and the 3 frames as data files \u00a0(<span style=\"color: #ff6600;\"><em>orange \u00a0arrow<\/em><\/span>)<\/li>\n<li>You can navigate and view these files with the next and previous buttons \u00a0(<span style=\"color: #ff0000;\"><em>red arrow<\/em><\/span>)<\/li>\n<li>Only selected part of the animation frames can be converted : Enable Display Paging Scheme Limits and then select the area to convert. Click\u00a0conversion button to start data export as usual (<span style=\"color: #008000;\"><em>green arrow<\/em><\/span>)<\/li>\n<\/ul>\n<p><a href=\"https:\/\/bitmap2lcd.com\/blog\/wp-content\/uploads\/2012\/10\/Bitmap2lcd-Animation_4.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1526\" src=\"https:\/\/bitmap2lcd.com\/blog\/wp-content\/uploads\/2012\/10\/Bitmap2lcd-Animation_4.png\" alt=\"Bitmap2lcd Animation_4\" width=\"990\" height=\"972\" srcset=\"https:\/\/bitmap2lcd.com\/blog\/wp-content\/uploads\/2012\/10\/Bitmap2lcd-Animation_4.png 990w, https:\/\/bitmap2lcd.com\/blog\/wp-content\/uploads\/2012\/10\/Bitmap2lcd-Animation_4-300x294.png 300w, https:\/\/bitmap2lcd.com\/blog\/wp-content\/uploads\/2012\/10\/Bitmap2lcd-Animation_4-624x612.png 624w\" sizes=\"auto, (max-width: 990px) 100vw, 990px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li>\u00a0In this example, 5 full frame size of data for\u00a0 a 128 x 128 pixel GLCD\u00a0are converted (<strong><em>black arrow<\/em><\/strong>). If the &#8220;Auto-framing&#8221; option has been\u00a0enabled in the configuration settings, an automatic framing of only the area of the changing pixels is made. Then the X and Y positions, the height and the width of the frame is reported inside the clip unit.<\/li>\n<li>In the configuration settings\u00a0window\u00a0<a href=\"https:\/\/bitmap2lcd.com\/blog\/wp-content\/uploads\/2012\/10\/toolAnim.bmp\"><img decoding=\"async\" class=\"alignnone size-full wp-image-1533\" src=\"https:\/\/bitmap2lcd.com\/blog\/wp-content\/uploads\/2012\/10\/toolAnim.bmp\" alt=\"toolAnim\" \/><\/a> ,\u00a0find other animation settings on\u00a0the &#8220;clip unit&#8221; panel.<\/li>\n<li>In the monochromatic mode, in addition to then auto-framing, an animation output can\u00a0optionally\u00a0be &#8220;internally compressed&#8221; to generate reduced code size. ( read articles in the blog category <strong>GLCD Data compression<\/strong> )<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n\t<div class=\"quickshare-container\">\r\n\t<ul class=\"quickshare-genericons quickshare-effect-round quickshare-effect-expand quickshare-small\">\r\n\t\t<li class=\"quickshare-share\"><\/li> \r\n\t\t<li><a href=\"https:\/\/facebook.com\/sharer.php?u=https%3A%2F%2Fbitmap2lcd.com%2Fblog%2Fcreating-a-glcd-animation-with-bitmap2lcd%2F&amp;t=Creating+a+GLCD+Animation+from+scratch+with+Bitmap2lcd+<+Bitmap2LCD+Software+Tool+Blog+%3A%3A+about+GLCD+displays+and+Programming\" target=\"_blank\" title=\"Share on Facebook\"><span class=\"quickshare-facebook\">Facebook<\/span><\/a><\/li>\t\t<li><a href=\"https:\/\/twitter.com\/intent\/tweet?url=https%3A%2F%2Fbitmap2lcd.com%2Fblog%2Fcreating-a-glcd-animation-with-bitmap2lcd%2F&amp;text=Creating+a+GLCD+Animation+from+scratch+with+Bitmap2lcd+<+Bitmap2LCD+Software+Tool+Blog+%3A%3A+about+GLCD+displays+and+Programming\" target=\"_blank\" title=\"Share on Twitter\"><span class=\"quickshare-twitter\">Twitter<\/span><\/a><\/li>\t\t<li><a href=\"http:\/\/pinterest.com\/pin\/create\/button\/?url=https%3A%2F%2Fbitmap2lcd.com%2Fblog%2Fcreating-a-glcd-animation-with-bitmap2lcd%2F&amp;media=https%3A%2F%2Fbitmap2lcd.com%2Fblog%2Fwp-content%2Fuploads%2F2014%2F07%2FBitmap2lcd-Animation-Mode_1-300x227.png&amp;description=Creating+a+GLCD+Animation+from+scratch+with+Bitmap2lcd+Bitmap2LCD+is+a+tool+for+programming+small+Graphic+LCDs+in+embedded+systems.+Also+read+this+article+%21+Let%27s+see+how+we+can+create+an+animation+for+small+Graphic+LCD+%28+Version+3.7C%2B%26hellip%3B\" target=\"_blank\" title=\"Share on Pinterest\"><span class=\"quickshare-pinterest\">Pinterest<\/span><\/a><\/li>\t\t<li><a href=\"http:\/\/linkedin.com\/shareArticle?mini=true&amp;url=https%3A%2F%2Fbitmap2lcd.com%2Fblog%2Fcreating-a-glcd-animation-with-bitmap2lcd%2F&amp;title=Creating+a+GLCD+Animation+from+scratch+with+Bitmap2lcd&amp;source=Bitmap2LCD+Software+Tool+Blog+%3A%3A+about+GLCD+displays+and+Programming&amp;summary=Creating+a+GLCD+Animation+from+scratch+with+Bitmap2lcd+Bitmap2LCD+is+a+tool+for+programming+small+Graphic+LCDs+in+embedded+systems.+Also+read+this+article+%21+Let%27s+see+how+we+can+create+an+animation+for+small+Graphic+LCD+%28+Version+3.7C%2B%26hellip%3B\" title=\"Share on Linkedin\" target=\"_blank\"><span class=\"quickshare-linkedin\">Linkedin<\/span><\/a><\/li>\t\t<li><a href=\"https:\/\/plus.google.com\/share?url=https%3A%2F%2Fbitmap2lcd.com%2Fblog%2Fcreating-a-glcd-animation-with-bitmap2lcd%2F\" target=\"_blank\" title=\"Share on Google+\"><span class=\"quickshare-googleplus\">Google+<\/span><\/a><\/li>\t\t\t\t\t\t\t\t<li><a href=\"mailto:?subject=Bitmap2LCD+Software+Tool+Blog+%3A%3A+about+GLCD+displays+and+Programming:+Creating+a+GLCD+Animation+from+scratch+with+Bitmap2lcd&amp;body=https%3A%2F%2Fbitmap2lcd.com%2Fblog%2Fcreating-a-glcd-animation-with-bitmap2lcd%2F\" target=\"_blank\" title=\"Share via Email\"><span class=\"quickshare-email\">Email<\/span><\/a><\/li>\t<\/ul>\r\n\t<\/div>\r\n","protected":false},"excerpt":{"rendered":"<p>Creating a GLCD Animation from scratch with Bitmap2lcd Bitmap2LCD is a tool for programming small Graphic LCDs in embedded systems. Also read this article ! Let&#8217;s see how we can create an animation for small Graphic LCD ( Version 3.7C+ ) When in static mode , go to the animation tab and click the Enter [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[17],"tags":[216,224,220,219,225,218,222,67,221,215,214,223,226,217],"class_list":["post-545","post","type-post","status-publish","format-standard","hentry","category-animations-and-glcd","tag-animate-you-lcd","tag-animated-button","tag-animated-graphic","tag-animated-icon","tag-animation-array","tag-animation-frame","tag-continuous-loop","tag-data-array","tag-eye-catch","tag-gif-and-glcd","tag-glcd-animation","tag-motion","tag-pixel-array","tag-sequence"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/bitmap2lcd.com\/blog\/wp-json\/wp\/v2\/posts\/545","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bitmap2lcd.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bitmap2lcd.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bitmap2lcd.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/bitmap2lcd.com\/blog\/wp-json\/wp\/v2\/comments?post=545"}],"version-history":[{"count":36,"href":"https:\/\/bitmap2lcd.com\/blog\/wp-json\/wp\/v2\/posts\/545\/revisions"}],"predecessor-version":[{"id":2297,"href":"https:\/\/bitmap2lcd.com\/blog\/wp-json\/wp\/v2\/posts\/545\/revisions\/2297"}],"wp:attachment":[{"href":"https:\/\/bitmap2lcd.com\/blog\/wp-json\/wp\/v2\/media?parent=545"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bitmap2lcd.com\/blog\/wp-json\/wp\/v2\/categories?post=545"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bitmap2lcd.com\/blog\/wp-json\/wp\/v2\/tags?post=545"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}