Jump to content
Madsing

Using LCD displays on my Yukari layout

Recommended Posts

Madsing

As soon as I started designing my layout, I wanted to use small LCD displays to model not only giant advertisement screens on city buildings, but also train schedule announcement monitors at train stations. Five years ago, nothing interesting was available. We could only find large, green LCD displays not suitable for n gauge. Then, suddenly, probably because of the development of smart watches, many small one- or two-inch high-resolution color displays became available. I read the other posts on this forum (check OLED Building Signs started by mrp in Scenery Techniques & Inspirational Layouts) and at the beginning of 2018, I ordered a few different models for testing.

 

IMG_4078.thumb.jpg.26f94dd6633f02f52cbd4587ef66a802.jpg

 

I ended up using two models for the Shin-Yukari station.

 

IMG_4327.thumb.jpg.fb6619dee229c6de9786c2ffcf4dbda1.jpg

First, I tested this model. Search for "IPS 0.96 inch 7P SPI HD 65K Full Color TFT LCD Module ST7735 Drive IC 80*160" on AliExpress to buy it.

Its shape is not typical. The display area is 10.8 x 21.696mm for a resolution of 188 DPI (dots per inch). Not bad.

  • 10.8 mm / 80 pixels = 0.135 mm/pixel
  • 80 pixels / 10.8 mm = 7.4 pixels/mm = 188 DPI

 

I wanted to use it to display train schedules at the station, but at that resolution the characters were a bit too large. Also, as the connections are on the side of the display, I would have had to place it against a wall. Not ideal. So I decided to use that display at the window of the Uniqlo shop. I placed two, vertically, with only the bottom of the display visible and the connector going through the ceiling. Perfect. I managed to detach the flat panel from the PCB. It’s difficult, but possible. Be extra careful. The display is very thin, just 1 mm. Nice.

IMG_4460.thumb.jpg.fbb5ec375d707f3b8fc83c83efa6c0b5.jpgIMG_4461.thumb.jpg.7d7776c73e613e64adb96e6c75a79f45.jpgIMG_4516.thumb.jpg.700a1e98daeced9a528e30edf48f00e4.jpgIMG_4525.thumb.jpg.f0299bc6af47670c63a3f0052ac62298.jpgIMG_4529.thumb.jpg.7c92af960fe14021d2e2554cba4ca150.jpg

The display requires 3.3 volt power supply and signalling. The Arduino Nano has a 5V to 3.3V converter that I used to supply power to the display. I used resistors to lower the voltage of the 5 volt signals of the Arduino. It works, but using a voltage convert would have been smarter. They are readily available from AliExpress. That’s what I did for the following project (see below).

 

The Arduino Nano does not have enough memory to store all the pictures of the Uniqlo movie, so I stored them in an SD card.

 

For the software, I used the Adafruit_ST7735 library. It provides a bitmap transfer function that I used to transfer the images repeatedly in sequence from the SD card to the display.

 

Things I learned for next time:

  • Choose a micro-controller with 3.3 volt signalling if possible
  • Choose a model with more memory, like the Arduino Mega or the ESP32

 

A couple of months later, this display became available from AliExpress: "High Definition 1.3 Inch IPS TFT Display IPS LCD Screen 1.3 inch 3.3V ST7789 IPS Display Screen"

  • Display Area: 23.4*23.4mm
  • 23.4 mm / 240 pixels = 0.0975 mm/pixel
  • 240 pixels / 23.4 mm = 10.2 pixels/mm = 261 DPI
  • Tested ok with Arduino Nano and Mega, and hardware-specific library for ST7789 (without CS pin)

 

IMG_4865.thumb.jpg.3c417ab0ed0164d4b65af14b9dd05609.jpg

Its resolution is even higher, perfect for the train schedule display. The integration proved very difficult as it didn’t work with the default ST7789 libraries available for the Arduino. The reason is that the CS (Chip Select) pin from the flat panel is not made available on the connector. I don’t understand why. Anyway, I managed to change the settings of the SPI controller to make it work without that signal.

 

The Arduino does not provide any suitable character generator. Those available are very basic, they do not support Japanese characters and anti-aliasing, so I created all texts as bitmap using Photoshop Elements and transferred them to the Arduino memory.

 

The schedules alternate between English and Japanese. The sequence is programmed in the Arduino memory and is not in any way linked to the trains arriving or leaving the station. That would not be impossible as I use Rocrail to control my trains...

IMG_5371.thumb.jpg.ab29a08fb946e581779fe901a6a6f503.jpgIMG_5377.thumb.jpg.4ca387a32799e0edbd86c0d57de5d552.jpg

As for the Uniqlo project, I carefully detached the panels from their PCB. These displays also use 3.3 volt supply and signalling. This time, I used this level converter, with its outputs connected to the four displays in parallel. Look for "IIC I2C Logic Level Converter Bi-Directional Module 5V to 3.3V For Arduino" on AliExpress to buy them. The display power consumption is 35mA at full brightness, 11mA at 25% brightness.

 

IMG_5819.thumb.jpg.59d16a6529676e942343c64284de449f.jpgIMG_5631.thumb.jpg.15e01c228feb07318e875a9385eb73f7.jpgIMG_5632.thumb.jpg.8f41b644baf6ae1de56e29128cc42f51.jpgIMG_5629.thumb.jpg.31d194547af931be76bb6a92682f902f.jpg

 

The displays are installed upside down with the connectors at the top, going through the station’s ceiling. There is no visible wire or connector!

  • Like 17
  • Thanks 1

Share this post


Link to post
Keith

That looks absolutely amazing.

  • Like 1

Share this post


Link to post
JR 500系

That is just way amazing! Way too cool! Thank you for sharing!

 

 

  • Like 1

Share this post


Link to post
cteno4

Total awesome sauce Madsing! Really well done and wild skills there doing this mash up!

 

jeff

  • Like 1

Share this post


Link to post
maihama eki

Outstanding!

Share this post


Link to post
Madsing

Thank you 😀. I am planing to write more about the software for the Arduino, if anyone is interested I can of course share the code.

  • Like 4

Share this post


Link to post
Ochanomizu

Hello Mr Madsing,

 

If there was an award for "Post of the Year" this would win it hands down.

 

Thank you for this amazing insight.

  • Like 5

Share this post


Link to post
serotta1972

Wow, that's amazing! 

Share this post


Link to post
Pashina12

Almost makes me wish I was doing a modern setting - this is absolutely stunning!

Share this post


Link to post
Martijn Meerts

That's a lot more electronics than I was expecting 😄

 

Share this post


Link to post
Madsing
2 hours ago, Martijn Meerts said:

That's a lot more electronics than I was expecting 😄

 

 

Granted 😀, I went overboard here. Three Arduinos and six displays for a single building, but it was worth it.

 

IMG_5819.thumb.jpg.e5c8ca6db1ba550e0850a212e6aa10ce.jpg

  • Like 2

Share this post


Link to post
Ochanomizu

Hello Mr Madsing,

 

Would you be prepared to provide a shopping list and basic instruction on how to do this project?  In the first instance, I'm interested to know the price.

Share this post


Link to post
Madsing

Hello Ochanomizu,

Yes, sure. Are you more interested in the timetable display, or the Uniqlo display?

Marc

 

Share this post


Link to post
Madsing

Hello Ochanomizu,

This is the shopping list for the timetable display. All prices mentioned are from AliExpress and exclude shipment. This list is for a single display. I chose the Arduino Mega because it has more memory. I chose the Pro version because it is smaller and will more easily fit in the Tomix station's ceiling.

  • Arduino MEGA 2560 PRO Embed CH340G/ATMEGA2560-16AU Chip with male pinheaders Compatible for Arduino Mega2560 (look for "Arduino Mega Pro" on Aliexpress): US$5.39 + shipment
  • 1.3 Inch TFT LCD Screen Display Module 240240 IPS Full Color with 7Pin SPI Interface ST7789 IC Driver for Arduino (look for 240x240 ST7789 LCD display):  US$2.33 + shipment
  • 8 Channel Logic Level Converter Module Bi-Directional Module For Arduino Step Up 3.3V To 5V Module: US$0.91 + shipment (for two pieces)
  • 40pcs/lot 10cm 40P 2.54mm dupont cable jumper wire dupont line female to female: US$0.67 + shipment (for 40 pieces)
  • 5V power supply with USB cable (micro USB)

Marc

 

  • Like 2
  • Thanks 1

Share this post


Link to post
Ochanomizu

Hello Madsing,

 

Yes, the timetable display.  Thank you for posting.

 

I don't use Arduino yet.  What basic Arduino parts will I need to run the above?

Share this post


Link to post
Madsing

Hello Ochanomizu,

 

You only need the Arduino and a computer to start. Connect the Arduino to your computer using the USB cable. Download the software (the Arduino IDE from here) and make sure that you can program it. There is a "Getting Started" guide here (and many many others around the web and on Youtube!).

 

Marc

 

  • Like 2

Share this post


Link to post
Coromant

Wow!

 

Hello Madsing, i really thanks to sharing the details from Your station. It's very impressiv and it's very ispirate me to upgrade my modules also, i bought the screens  and I already have arduino so i try to build.

 

Thanks,

Best regards,

Coromant

Share this post


Link to post
Chuo
On 6/30/2019 at 7:08 PM, Madsing said:

Thank you 😀. I am planing to write more about the software for the Arduino, if anyone is interested I can of course share the code.

 

Do you have the code up on Github? I'd be interested giving this a shot. It looks great and is an awesome use of the arduino. Do you also have more plans for other locations as well? I had thought about placing screens on sides of buildings for ads. 

Share this post


Link to post
Madsing
Posted (edited)

Yukari Timetable Display Code

In this post, I will attempt to describe the code that I used for this LCD timetable display. While writing this text, I realised that the code was a bit more complex than I thought, so I'll do my best here.

 

All the files are available for download from this Github repository: madsing98/Yukari-Timetable

You will find there:

  • The Arduino code. If you just want to replicate the project, just download the sketch (two .ino files) from the "Arduino/Yukari Station Schedule Display" folder. You also have to download and install the Arduino-ST7789-Library from here: https://github.com/ananevilya/Arduino-ST7789-Library
  • The .bmp, .c and .psd version of the bitmap image containing all texts and graphics to be displayed.
  • A C application (written for macOS) used to convert the .bmp mentioned above into C code that has to be included into the Arduino program to store the bitmap data into the Arduino's memory. This application is only required if you intend to modify the bitmap file in order to display your own texts and graphics.

Displaying Japanese Characters

I evaluated that the height of the characters on the prototype timetable display are about 14 cm. This translates to 0.85 mm in N Gauge, or about 9 pixels on the ST7789 LCD display (which is the highest resolution display I can find). 9 x 9 pixels are not enough to display kanji characters, so to try to make them as legible as possible, antialiasing is required (see https://www.webopedia.com/TERM/A/antialiasing.html).

 

The project would be fairly easy if there was a way to display high-quality anti-aliased Japanese characters and icons on the LCD display. I looked around when I made this project but at that time (beginning of 2018) I did not find any. The solution I chose was to create bitmaps (images) of the texts and icons I wanted to display, copy them to the flash memory of the Arduino and display them on the LCD. I used a program such as Photoshop Elements to make these bitmaps.

The bitmap image is the file "Yukari Schedule Fonts 9px.bmp". It looks like that:

Yukari Schedule Fonts 9px.bmp

The first lines are the track numbers, then the times, then the train names and finally the destinations. First in English then in Japanese.

 

ST7789 LCD Display

The LCD display that I use is now available from Adafruit (https://www.adafruit.com/product/4313). As usual, Adafruit has been smart and has added a microSD card on the same PCB as the display. If you can use that Adafruit display, use the microSD card to store the texts or images to be displayed. This should be easier than storing them in the flash memory of the Arduino.

 

Speaking of that, how to transfer the bitmap to the flash memory (program memory) of the Arduino? They way I used is by transforming this image into C code defining an array initialized with the corresponding data. There are programs available online to do that, but I made my own called bmp2c. Bmp2c is also available from the Github repository mentioned above. It is a simple macOS console application, so it should be easy to adapt to any OS. Running bmp2c will convert the image “Yukari Schedule Fonts 9px.bmp” into the file “Yukari Schedule Fonts 9px.c” which will be copied into the "Yukari-Station-Schedule-Display.ino" file of the Arduino sketch.

 

Arduino Sketch

The Arduino sketch is made of two files:

  • “Yukari-Station-Schedule-Display.ino” is the definition of the bitmaps/texts used. All are const uint16_t arrays defined with the PROGMEM_LATE attribute. This attribute instructs the compiler to store the arrays in the program (flash) memory of the Arduino.
  • “Yukari-Station-Schedule-Display-Code.ino” is the main program.

 

The main program in “Yukari-Station-Schedule-Display-Code.ino” starts by including the libraries used. I used the Arduino-ST7789-Library available here: https://github.com/ananevilya/Arduino-ST7789-Library. Alternatively, the Adafruit Graphics library (described here: https://learn.adafruit.com/1-8-tft-display/graphics-library), which now also supports the ST7789 chip can probably be used (I have not tested it).

 

All the #define that follow are offsets and pointers to the bitmap array. Then, finally, the YukariTimetable[][] array is the list of the schedules that will be displayed.

 

The important function to understand in order to adapt the sketch to other displays is void drawRGBBitmap(). This function displays a bitmap at a given position on the screen.

The position on the display is specified by uint16_t windowX, uint16_t windowY, uint16_t imageWidth and uint16_t imageHeight. These coordinates are passed to the tft.setAddrWindow() function, which is in the ST7789 library.

The bitmap to be display is specified by a pointer: uint32_t imagePtr. As mentioned earlier, it is a pointer to upper part of the Arduino program memory, and the contents there can only be read using the pgm_read_word_far() function.

The following argument is uint16_t lineNbr. It specifies which line of text in the bitmap has to be displayed.

The last argument is uint16_t scrollOffset, which is used solely to implement the scrolling text at the last line of the display. It specifies a horizontal offset (in pixels).

 

The contents of the bitmap are transferred row by row from the bitmap, first into a temporary buffer in SRAM (displayBuf[]), then to the display using the pushColorBuf() function. I have added the pushColorBuf() function was added to the ST7789 library. It is simply an optimised version of the pushColor() function (already available in the library), which transfers a given number of pixels from SRAM to the display at the position defined by the previous call to setAddrWindow().

 

The Arduino sketch starts executing at the void setup(void) function. After initialising the variables and the display, it enters an infinite wile(1) loop that repetitively refreshes the screen with new information. This is how it works:

  • Five lines from the timetable are displayed. First, lines 0 to 4, then lines 1 to 5, and so on.
  • For each cycle, they are displayed in English, then in Japanese, three times each.
  • When we reach the end of the timetable, we simply start over.
  • Simultaneously, the scrolling alert text is displayed at the bottom of the screen. This text will be display 250 times, with a delay of 20 ms in between, with a horizontal offset incrementing of one pixel each time.
  • This takes 250 x 20 ms = 5 seconds, after which the timetable switches from English to Japanese, six times for a total of 6 x 5 = 30 seconds, after which we display the following lines of the timetable (and the first line of the timetable disappears).
  • As there are 19 lines in the timetable, the whole cycles takes (19-5+1) x 30 seconds = 7.5 minutes.

I see several ways to improve the code of the project

  • The most obvious would be to find or write a library able to display small (9-pixel-high) Japanese characters using antialiasing. Doing so would alleviate the need to create and store large bitmaps.
  • Having a large (several megabyte) flash memory such as a microSD card would allow us to store and access the bitmap file or files directly, without the need for the bmp2c conversion program.

I realise that the project and the code may be a bit complex, but I am ready to share even more details or help anyone willing to replicate or improve on it!

Thank you!

 

Edited by Madsing
  • Like 4
  • Thanks 2

Share this post


Link to post
Chuo

This is a lot to ingest! Thanks for the post. I will probably ask some questions in a few different posts as they come up.

 

Quote

The project would be fairly easy if there was a way to display high-quality anti-aliased Japanese characters and icons on the LCD display. I looked around when I made this project but at that time (beginning of 2018) I did not find any.

 

Have you given the following a shot? It's for the ESP32 and not the Arduino but that might open up some other doors, such as wireless display control. 

 

https://github.com/Bodmer/TFT_eSPI

 

Share this post


Link to post
Yavianice

@Madsing Could you make a video of your work? I'd be very interested to see what it looks like in action.

Share this post


Link to post
Madsing
14 hours ago, Chuo said:

This is a lot to ingest! Thanks for the post. I will probably ask some questions in a few different posts as they come up.

 

 

Have you given the following a shot? It's for the ESP32 and not the Arduino but that might open up some other doors, such as wireless display control. 

 

https://github.com/Bodmer/TFT_eSPI

 

Thanks for the link. I remember checking this library last year but I had no experience with the ESP32 at that time. I would definitely recommend it now. I made another project using Wifi and Bluetooth with an ESP32 module earlier this year and it is incredibly powerful (compared to any Arduino). Also, that library now supports ST7789 displays. 

Share this post


Link to post
Chuo

I just placed an order for component parts and nabbed a few more ESP32s. I have one of the Uno ESP32 platforms but grabbed some of the smaller ones as well. I have been using the one board for running a wireless command station of DCC++. It's actually a pretty powerful little chip.

Share this post


Link to post
Madsing
1 hour ago, Chuo said:

I just placed an order for component parts and nabbed a few more ESP32s. I have one of the Uno ESP32 platforms but grabbed some of the smaller ones as well. I have been using the one board for running a wireless command station of DCC++. It's actually a pretty powerful little chip.

Yes. I have used the Wemos Lolin32 (now retired). It is as small as an Arduino Nano.

Share this post


Link to post
Madsing
6 hours ago, Yavianice said:

@Madsing Could you make a video of your work? I'd be very interested to see what it looks like in action.

 

  • Like 8

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×