{"id":3754,"date":"2021-03-30T18:17:12","date_gmt":"2021-03-30T18:17:12","guid":{"rendered":"http:\/\/rodmilstead.com\/pt\/?page_id=3754"},"modified":"2024-03-19T16:09:27","modified_gmt":"2024-03-19T16:09:27","slug":"arduino-mult-line-lcd-character","status":"publish","type":"page","link":"https:\/\/rodmilstead.com\/pt\/arduino-sample-coderesources\/arduino-mult-line-lcd-character\/","title":{"rendered":"Arduino Multi-line LCD character"},"content":{"rendered":"<p>If you haven&#8217;t tried a single cell LCD character <a href=\"http:\/\/rodmilstead.com\/pt\/arduino-sample-coderesources\/arduino-display-special-characters\/\" target=\"_blank\" rel=\"noopener\">please click here to start with that tutorial.<\/a><\/p>\n<p>Your goal is to create an original, graphic that spreads across at least\u00a0 four LCD display cells like this:<\/p>\n<p><a href=\"http:\/\/rodmilstead.com\/pt\/wp-content\/uploads\/2021\/03\/Screen-Shot-2021-03-29-at-1.48.31-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-3755 alignnone\" src=\"http:\/\/rodmilstead.com\/pt\/wp-content\/uploads\/2021\/03\/Screen-Shot-2021-03-29-at-1.48.31-PM.png\" alt=\"\" width=\"694\" height=\"238\" srcset=\"https:\/\/rodmilstead.com\/pt\/wp-content\/uploads\/2021\/03\/Screen-Shot-2021-03-29-at-1.48.31-PM.png 694w, https:\/\/rodmilstead.com\/pt\/wp-content\/uploads\/2021\/03\/Screen-Shot-2021-03-29-at-1.48.31-PM-300x103.png 300w\" sizes=\"auto, (max-width: 694px) 100vw, 694px\" \/><\/a><\/p>\n<p>Note how this simple graphic is spread across four cells.\u00a0 To create this graphic I used the <a href=\"https:\/\/maxpromer.github.io\/LCD-Character-Creator\/\" target=\"_blank\" rel=\"noopener\">LCD Custom Character Generator.\u00a0<\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large\" src=\"https:\/\/rodmilstead.com\/pt\/wp-content\/uploads\/2023\/01\/lcd-coordinate.jpg\" alt=\"LCD coordinates\" width=\"1444\" height=\"648\" \/><\/p>\n<p><strong>Building the custom graphic<\/strong><br \/>\nI also used graph paper. You don&#8217;t have to use it but plotting my design out on good old paper worked well.\u00a0 <a href=\"https:\/\/www.waterproofpaper.com\/graph-paper\/graph-paper-quarter-inch.pdf\" target=\"_blank\" rel=\"noopener\">You can download a printable sheet of graph paper right here.<\/a><\/p>\n<p>It&#8217;s not an exact match. Don&#8217;t judge. \ud83d\ude42<\/p>\n<p>I divided the graph paper into cells.\u00a0 Each cell has 8 rows and 5 columns.<\/p>\n<p>&nbsp;<\/p>\n<figure id=\"attachment_3756\" aria-describedby=\"caption-attachment-3756\" style=\"width: 660px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/rodmilstead.com\/pt\/wp-content\/uploads\/2021\/03\/fishLCD-scaled.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-3756\" src=\"http:\/\/rodmilstead.com\/pt\/wp-content\/uploads\/2021\/03\/fishLCD-1024x455.jpg\" alt=\"\" width=\"660\" height=\"293\" srcset=\"https:\/\/rodmilstead.com\/pt\/wp-content\/uploads\/2021\/03\/fishLCD-1024x455.jpg 1024w, https:\/\/rodmilstead.com\/pt\/wp-content\/uploads\/2021\/03\/fishLCD-300x133.jpg 300w, https:\/\/rodmilstead.com\/pt\/wp-content\/uploads\/2021\/03\/fishLCD-768x341.jpg 768w, https:\/\/rodmilstead.com\/pt\/wp-content\/uploads\/2021\/03\/fishLCD-1536x682.jpg 1536w, https:\/\/rodmilstead.com\/pt\/wp-content\/uploads\/2021\/03\/fishLCD-2048x909.jpg 2048w\" sizes=\"auto, (max-width: 660px) 100vw, 660px\" \/><\/a><figcaption id=\"caption-attachment-3756\" class=\"wp-caption-text\">LCD special character Arduino<\/figcaption><\/figure>\n<p>What worked for me was to draw a rough outline of the fish and then fill in the squares to get close to the desired shape.\u00a0 Then I worked one section at a time to build the shape.<\/p>\n<p>Next, I went to<a href=\"https:\/\/maxpromer.github.io\/LCD-Character-Creator\/\" target=\"_blank\" rel=\"noopener\"> https:\/\/maxpromer.github.io\/LCD-Character-Creator\/ <\/a><br \/>\nand built each cell by following my graph paper plan.\u00a0 It was helpful to build the first cell on one tab in the browser and then add create the next cell on a new tab. This way I can refer back and forth to check alignment.<\/p>\n<p>Like this:<br \/>\n<a href=\"http:\/\/rodmilstead.com\/pt\/wp-content\/uploads\/2021\/03\/Screen-Shot-2021-03-30-at-10.44.55-AM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-3759\" src=\"http:\/\/rodmilstead.com\/pt\/wp-content\/uploads\/2021\/03\/Screen-Shot-2021-03-30-at-10.44.55-AM.png\" alt=\"\" width=\"369\" height=\"395\" srcset=\"https:\/\/rodmilstead.com\/pt\/wp-content\/uploads\/2021\/03\/Screen-Shot-2021-03-30-at-10.44.55-AM.png 369w, https:\/\/rodmilstead.com\/pt\/wp-content\/uploads\/2021\/03\/Screen-Shot-2021-03-30-at-10.44.55-AM-280x300.png 280w\" sizes=\"auto, (max-width: 369px) 100vw, 369px\" \/><\/a><\/p>\n<p><strong>Writing the program<\/strong><br \/>\nTo build the program, copy and paste the code from each cell into your program.\u00a0 The program to build the fish is below.<\/p>\n<p>\/\/graphics built using https:\/\/maxpromer.github.io\/LCD-Character-Creator\/<\/p>\n<p>#include&lt;LiquidCrystal.h&gt; \/\/you have to use this line to use the LCD library<\/p>\n<p>LiquidCrystal lcd(12, 11, 5, 4, 3, 2);\/\/indicates what pins control LCD display<\/p>\n<p>byte Fish1[] = {<br \/>\nB10000,<br \/>\nB11000,<br \/>\nB01011,<br \/>\nB00111,<br \/>\nB00111,<br \/>\nB01011,<br \/>\nB11000,<br \/>\nB10000<br \/>\n};<\/p>\n<p>byte Fish2[] = {<br \/>\nB00011,<br \/>\nB00111,<br \/>\nB11111,<br \/>\nB11111,<br \/>\nB11111,<br \/>\nB11111,<br \/>\nB00111,<br \/>\nB00011<br \/>\n};<\/p>\n<p>byte Fish3[] = {<br \/>\nB11100,<br \/>\nB11111,<br \/>\nB11111,<br \/>\nB11111,<br \/>\nB11111,<br \/>\nB11111,<br \/>\nB11111,<br \/>\nB11100<br \/>\n};<\/p>\n<p>byte Fish4[] = {<br \/>\nB00000,<br \/>\nB11000,<br \/>\nB11100,<br \/>\nB11010,<br \/>\nB11111,<br \/>\nB11110,<br \/>\nB11100,<br \/>\nB00000<br \/>\n};<\/p>\n<p>void setup()<br \/>\n{<br \/>\nlcd.begin(0, 0);<br \/>\nlcd.createChar(0, Fish1); \/\/assigns a number to each cell<br \/>\nlcd.createChar(1, Fish2);<br \/>\nlcd.createChar(2, Fish3);<br \/>\nlcd.createChar(3, Fish4);<\/p>\n<p>}<\/p>\n<p>void loop()<br \/>\n{<br \/>\nlcd.setCursor(0, 0); \/\/sets start location on display. First number is the column and second is row<br \/>\nlcd.write(byte(0)); \/\/displays the character by number &#8211; 0 is first<br \/>\nlcd.write(byte(1)); \/\/these are bring displayed from left to right on the LCD<br \/>\nlcd.write(byte(2));<br \/>\nlcd.write(byte(3));<br \/>\n}<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you haven&#8217;t tried a single cell LCD character please click here to start with that tutorial. Your goal is to create an original, graphic that spreads across at least\u00a0 four LCD display cells like this: Note how this simple graphic is spread across four cells.\u00a0 To create this graphic I used the LCD Custom &hellip; <a href=\"https:\/\/rodmilstead.com\/pt\/arduino-sample-coderesources\/arduino-mult-line-lcd-character\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Arduino Multi-line LCD character<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":183,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3754","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/rodmilstead.com\/pt\/wp-json\/wp\/v2\/pages\/3754","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rodmilstead.com\/pt\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/rodmilstead.com\/pt\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/rodmilstead.com\/pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rodmilstead.com\/pt\/wp-json\/wp\/v2\/comments?post=3754"}],"version-history":[{"count":6,"href":"https:\/\/rodmilstead.com\/pt\/wp-json\/wp\/v2\/pages\/3754\/revisions"}],"predecessor-version":[{"id":5476,"href":"https:\/\/rodmilstead.com\/pt\/wp-json\/wp\/v2\/pages\/3754\/revisions\/5476"}],"up":[{"embeddable":true,"href":"https:\/\/rodmilstead.com\/pt\/wp-json\/wp\/v2\/pages\/183"}],"wp:attachment":[{"href":"https:\/\/rodmilstead.com\/pt\/wp-json\/wp\/v2\/media?parent=3754"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}