{"id":1233,"date":"2021-05-12T13:49:47","date_gmt":"2021-05-12T12:49:47","guid":{"rendered":"http:\/\/www.igfasouza.com\/blog\/?p=1233"},"modified":"2021-06-24T11:43:13","modified_gmt":"2021-06-24T10:43:13","slug":"spring-thymeleaf-raspberry-pi-lcd","status":"publish","type":"post","link":"http:\/\/www.igfasouza.com\/blog\/spring-thymeleaf-raspberry-pi-lcd\/","title":{"rendered":"Spring Thymeleaf Raspberry PI LCD"},"content":{"rendered":"

\"\"<\/p>\n

How\u2019s it going there?<\/b><\/p>\n

This post is to show how I created a web app to control an LCD with a Raspberry PI using Spring Boot and Thymeleaf. This is another blog about Java on Raspberry PI.<\/p>\n

Spring Boot<\/a> is an extension of the Spring framework, which eliminates the boilerplate configurations required for setting up a Spring application.<\/p>\n

Thymeleaf<\/a> is a Java template engine for processing and creating HTML, XML, JavaScript, CSS, and text.<\/p>\n

\"\"
\nPicture 1: LCD example<\/small><\/p>\n

I have the St7920<\/em><\/strong> model. St7920 or 12864zw is probably the cheapest 128\u00d764 graphic LCD that you can find.<\/p>\n

Schematics<\/h2>\n

\"\"
\nPicture 2: LCD Schematics<\/small><\/p>\n

\"\"
\nTable 1: Raspberry PI PIN and GPIO map<\/small><\/p>\n

I\u2019m using this Java API<\/a><\/p>\n

Idea<\/h2>\n

A simple Spring Boot Thymeleaf app where it shows a form with a 128×64 table. Each table position is the representation of the LCD graphic display. I created an Array of bits with all positions of this table.<\/p>\n

\"\"
\nPicture 3: end-to-end flow<\/small><\/p>\n

The Array button generates an Array of Bits, and preview creates a picture of the result.<\/p>\n

\"\"
\nPicture 4: Shows the form table that represents the 128×64 bits positions<\/small><\/p>\n

The LCD graphic Display expects an Array of Bytes from the XBM format.
\nXBM is a monochrome bitmap format in which data is stored as a C language data array. Primarily used for the storage of cursor and icon bitmaps for use in the X graphical user interface. <\/p>\n

So I added a method to convert my Array of bits into an Array of Bytes.<\/p>\n

Many tools including GIMP can save an image as XBM. A nice step-by-step instruction that the API docs show is here<\/a>.<\/p>\n

Code<\/h2>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
<\/div><\/td>
    \/\/ - MOSI = 10<\/span>
\n   \/\/ - SCLK = 11<\/span>
\n   \/\/ - CE1 = 7<\/span>
\n   config =<\/span> GlcdConfigBuilder
\n       \/\/Use ST7920 - 128 x 64 display, SPI 4-wire Hardware<\/span>
\n       .create<\/span>(<\/span>Glcd.ST7920<\/span>.D_128x64<\/span>, GlcdCommProtocol.SPI_SW_4WIRE_ST7920<\/span>)<\/span>
\n       \/\/Set to 180 rotation<\/span>
\n       .option<\/span>(<\/span>GlcdOption.ROTATION<\/span>, GlcdRotation.ROTATION_180<\/span>)<\/span>
\n       .option<\/span>(<\/span>GlcdOption.PROVIDER<\/span>, Provider<\/span><\/a>.SYSTEM<\/span>)<\/span>
\n       .mapPin<\/span>(<\/span>GlcdPin.SPI_MOSI<\/span>, 19<\/span>)<\/span>
\n       .mapPin<\/span>(<\/span>GlcdPin.SPI_CLOCK<\/span>, 13<\/span>)<\/span>
\n       .mapPin<\/span>(<\/span>GlcdPin.CS<\/span>, 26<\/span>)<\/span>
\n       .build<\/span>(<\/span>)<\/span>;<\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n
1
2
3
4
5
6
7
8
<\/div><\/td>
private<\/span> static<\/span> byte<\/span>[<\/span>]<\/span> encodeToByteArray(<\/span>int<\/span>[<\/span>]<\/span> bits)<\/span> {<\/span>
\n        BitSet<\/span><\/a> bitSet =<\/span> new<\/span> BitSet<\/span><\/a>(<\/span>bits.length<\/span>)<\/span>;<\/span>
\n        for<\/span> (<\/span>int<\/span> index =<\/span> 0<\/span>;<\/span> index <<\/span> bits.length<\/span>;<\/span> index++<\/span>)<\/span> {<\/span>
\n            bitSet.set<\/span>(<\/span>index, bits[<\/span>index]<\/span> ><\/span> 0<\/span>)<\/span>;<\/span>
\n        }<\/span>
\n
\n        return<\/span> bitSet.toByteArray<\/span>(<\/span>)<\/span>;<\/span>
\n    }<\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

You can get the full code on my GitHub<\/a>.<\/p>\n

Result<\/h2>\n

\"\"
\nPicture 5: LCD examples<\/small><\/p>\n

\"\"
\nPicture 6: LCD examples<\/small><\/p>\n