LCD 128x64 Bricklet¶

Features¶

• 7.1cm (2.8") LCD with a resolution of 128x64 pixel
• Embedded font and GUI for easy drawing of text and GUI elements
• Touchscreen with x/y-coordinate and touch pressure callback
• Automatic swipe gesture recognition (left, right, up and down)

Description¶

The LCD 128x64 Bricklet is a LC Display with a resolution of 128x64 pixel and resistive touchscreen.

Each pixel can be set individually, so the display can show graphics. This allows for more versatile and detailed drawings on the display, compared to the alphanumeric LCD 20x4 Bricklet with its fixed character display. The screen size is very similar to the screen size of the old LCD 20x4 Bricklet, so it can be used as a direct replacement.

Text can easily be drawn onto the display with the embedded font of the Bricklet. The Bricklet also comes with an embedded GUI.

The touch screen has easy to use callbacks with x/y coordinates and touch pressure. The Bricklet can automatically detect standard swipe gestures.

High update rates of up to 60Hz are possible.

The LCD 128x64 Bricklet together with Air Quality Bricklet in the Tabletop Weather Station:

Technical Specifications¶

Resources¶

• Schematic (Download)
• Outline and drilling plan (Download)
• Source code and design files (Download)
• 3D model (View online | Download: STEP, FreeCAD)

Test your LCD 128x64 Bricklet¶

To test a LCD 128x64 Bricklet you need to have Brick Daemon and Brick Viewer installed. Brick Daemon acts as a proxy between the USB interface of the Bricks and the API bindings. Brick Viewer connects to Brick Daemon. It helps to figure out basic information about the connected Bricks and Bricklets and allows to test them.

Connect the LCD 128x64 Bricklet to a Brick with a Bricklet Cable.

If you connect the Brick to the PC over USB, you should see a new tab named "LCD 128x64 Bricklet" in the Brick Viewer after a moment. Select this tab. If everything went as expected the Brick Viewer should look as depicted below.

You can draw and write text to the display. With the slider it is also possible to show the available character set on the LCD.

If you press with your finger or a stylus on the display you can see a red circle at the press-position in Brick Viewer. The number of circles corresponds to the touch pressure.

After this test you can go on with writing your own application. See the Programming Interface section for the API of the LCD 128x64 Bricklet and examples in different programming languages.

Usage¶

To draw to the display we recommend that you use an image library that is native to your programming language (for example PIL for Python). This way you can use all of the available drawing primitives and fonts of the library and then copy the image buffer to the Bricklet.

We provide examples for:

• C/C++ (with libgd),
• C#,
• Java,
• JavaScript (Node.js) (with gm and get-pixels),
• Perl (with GD),
• PHP (with GD),
• Python (with PIL),
• Ruby (with rgd) and
• Visual Basic .NET.

Graphical User Interface¶

Since firmware version 2.0.2 the LCD 128x64 Bricklet comes with an API for an easy to use graphical user interface (GUI). The user interface consists of four basic UI elements:

• Buttons: Up to 12 buttons can be placed with arbitrary position/width/height and custom text. They automatically generate a press- and release-event.
• Slider: Up to 6 slider can be placed at arbitrary position/length. You can use horizontal and vertical slider. They automatically generate a position-event.
• Graphs: Up to 4 graphs can be placed with arbitrary position/width/height. You can use dot-, line- and bar-graphs and a caption text for the x and y axis can be used. You can stream a list of data-points, the graph is drawn automatically.
• Tabs: Up to 10 tabs can be used. Tabs can have text or icons. They automatically generate an event on tab selection changes.

These GUI elements can be added, updated and removed with an easy-to-use API. Interaction is done with callbacks on a user-event (click/swipe) basis. See the examples for your programming languages in the API documentation for the details.

The LCD 128x64 Bricklet has a buffer for the normal drawing functions (WritePixels, WriteLine, DrawBox, etc) and an additional buffer for the GUI elements. The GUI buffer will be drawn on top of the standard buffer.

Additionally both of those buffers can be double-buffered for smooth uninterrupted drawing.

This means that GUI will always stay on the display and react to user interaction until explicitly removed. With this approach the cooperation between GUI elements and self drawn addtions is easy to achieve, since there is never any z-fighting.

For Example: If you want to use a button with an icon, you can create a button with the position, width/height as you need it and leave the text empty. After that you can draw the icon inside of the button with the standard WritePixels function. This will work without problems and the highlight effect of the button during a click will not permanently overwrite your custom icon.

Font¶

The Bricklet has an embedded font (code page 437, ASCII subset in green) that allows fast and easy text rendering (up to 22x8 characters):

Touchscreen¶

The Bricklet has a resistive touchscreen. This means that you may have to touch with a little bit more pressure then you are used to with your smart phone, but you can also use a stylus or similar instead of your finger.

With the API you can get the currently pressed x/y coordinate as well as the touch pressure. You can use this for detection of "clicks" or gestures.

Some gestures (swipe left, right, up, down with the start- and end-position of the swipe) are calculated by the Bricklet and can be received directly through the API with callbacks.

Case¶

A laser-cut case for the LCD 128x64 Bricklet is available.

The assembly is easiest if you follow the following steps:

• Screw front plate to Bricklet,
• build up side plates and bottom/back plate,
• screw front plate to side plates.
• Optional: Screw Master Brick to the back plate.

Below you can see an exploded assembly drawing of the LCD 128x64 Bricklet case:

Hint: There is a protective film on both sides of the plates, you have to remove it before assembly.

Programming Interface¶

See Programming Interface for a detailed description.