![\"\"](\"http:\/\/www.igfasouza.com\/blog\/wp-content\/uploads\/2021\/04\/time-zone.jpg\")
<\/p>\n<\/p>\n
How\u2019s the lad?<\/b>
\n2021\/04\/18<\/small><\/p>\n
This post is to show how I created an app demo to control a 4-7 segment display with a Raspberry PI. This is another blog about Java on Raspberry PI.<\/p>\n
It\u2019s kind of a continuation from my previous blog 7-segment-display<\/a> but I pivoted the idea a little bit. I divide the app into front end and back end using React and Quarkus.<\/p>\n I have the “hs420561k-32<\/em><\/strong>” model.<\/p>\n Note<\/strong>: Pi4J (by default) uses an abstract pin numbering scheme to help insulate software from hardware changes.Pi4J implements the same pin number scheme as the Wiring Pi <\/p>\n This is the Number for the PI 3 B model.<\/p>\n An application that reads available timezones from worldtimeapi.org and displays them in an autocomplete list. When a region is selected it calls the Qurakus REST API passing the current time and Quarkus set the time value on the segment display.<\/p>\n The way that you get each digit displaying something different is to switch them on and off again, in turn, faster than the eye can observe. Using the same circuitry to control more than one \u2018thing\u2019 is called multiplexing. <\/p>\n![\"\"](\"http:\/\/www.igfasouza.com\/blog\/wp-content\/uploads\/2021\/04\/react_quarkus.jpg\")
<\/p>\nComponents<\/h2>\n
\n
Schematics<\/h2>\n
![\"\"](\"http:\/\/www.igfasouza.com\/blog\/wp-content\/uploads\/2021\/04\/47seg-pinout.jpg\")
\nPicture1: component Schematics<\/small><\/p>\n![\"\"](\"http:\/\/www.igfasouza.com\/blog\/wp-content\/uploads\/2021\/04\/gpio-283x300.png\")
\nTable1: Pins and GPIOs mapping<\/small><\/p>\n![\"\"](\"http:\/\/www.igfasouza.com\/blog\/wp-content\/uploads\/2020\/09\/Pi4J_GPIO-165x300.png\")
\nPicture2: PI4J GPIO<\/small><\/p>\nIdea<\/h2>\n
![\"\"](\"http:\/\/www.igfasouza.com\/blog\/wp-content\/uploads\/2021\/04\/47segment_app01.png\")
\nPicture3: End-to-end flow<\/small><\/p>\n![\"\"](\"http:\/\/www.igfasouza.com\/blog\/wp-content\/uploads\/2021\/04\/47segment_sequence.png\")
\nPicture4: Sequence Diagram<\/small><\/p>\nCode<\/h2>\n
![\"\"](\"http:\/\/www.igfasouza.com\/blog\/wp-content\/uploads\/2021\/04\/code_meme01-1024x485.jpg\")
![\"\"](\"http:\/\/www.igfasouza.com\/blog\/wp-content\/uploads\/2021\/04\/react01.jpg\")
![\"\"](\"http:\/\/www.igfasouza.com\/blog\/wp-content\/uploads\/2021\/04\/PXL_20210417_215558015-1024x768.jpg\")